Skip to content

Commit 8a0b9dc

Browse files
test: Deprecate react-unit-test-utils 6/15 (#660)
1 parent 2e59e24 commit 8a0b9dc

File tree

10 files changed

+197
-418
lines changed

10 files changed

+197
-418
lines changed

src/containers/CourseCard/__snapshots__/index.test.jsx.snap

Lines changed: 0 additions & 111 deletions
This file was deleted.

src/containers/CourseCard/components/CourseCardImage.test.jsx

Lines changed: 49 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,72 @@
1-
import { shallow } from '@edx/react-unit-test-utils';
2-
1+
import { render, screen } from '@testing-library/react';
2+
import { IntlProvider } from '@edx/frontend-platform/i18n';
3+
import { formatMessage } from 'testUtils';
34
import { reduxHooks } from 'hooks';
4-
import track from 'tracking';
55
import useActionDisabledState from './hooks';
6-
import CourseCardImage from './CourseCardImage';
6+
import { CourseCardImage } from './CourseCardImage';
7+
import messages from '../messages';
78

8-
const homeUrl = 'home-url';
9+
jest.unmock('@edx/frontend-platform/i18n');
10+
jest.unmock('@openedx/paragon');
11+
jest.unmock('react');
912

10-
jest.mock('tracking', () => ({
11-
course: {
12-
courseImageClicked: jest.fn().mockName('segment.courseImageClicked'),
13-
},
14-
}));
13+
const homeUrl = 'https://example.com';
14+
const bannerImgSrc = 'banner-img-src.jpg';
1515

1616
jest.mock('hooks', () => ({
1717
reduxHooks: {
18-
useCardCourseData: jest.fn(() => ({ bannerImgSrc: 'banner-img-src' })),
18+
useCardCourseData: jest.fn(() => ({ bannerImgSrc })),
1919
useCardCourseRunData: jest.fn(() => ({ homeUrl })),
20-
useCardEnrollmentData: jest.fn(() => ({ isVerified: true })),
20+
useCardEnrollmentData: jest.fn(),
2121
useTrackCourseEvent: jest.fn((eventName, cardId, url) => ({
2222
trackCourseEvent: { eventName, cardId, url },
2323
})),
2424
},
2525
}));
26-
jest.mock('./hooks', () => jest.fn(() => ({ disableCourseTitle: false })));
26+
27+
jest.mock('./hooks', () => jest.fn());
2728

2829
describe('CourseCardImage', () => {
2930
const props = {
30-
cardId: 'cardId',
31-
orientation: 'orientation',
31+
cardId: 'test-card-id',
32+
orientation: 'horizontal',
3233
};
33-
beforeEach(() => {
34-
jest.clearAllMocks();
34+
35+
it('renders course image with correct attributes', () => {
36+
useActionDisabledState.mockReturnValue({ disableCourseTitle: true });
37+
reduxHooks.useCardEnrollmentData.mockReturnValue({ isVerified: true });
38+
render(<IntlProvider locale="en"><CourseCardImage {...props} /></IntlProvider>);
39+
40+
const image = screen.getByRole('img', { name: formatMessage(messages.bannerAlt) });
41+
expect(image).toBeInTheDocument();
42+
expect(image.src).toContain(bannerImgSrc);
43+
expect(image.parentElement).toHaveClass('horizontal');
3544
});
36-
describe('snapshot', () => {
37-
test('renders clickable link course Image', () => {
38-
const wrapper = shallow(<CourseCardImage {...props} />);
39-
expect(wrapper.snapshot).toMatchSnapshot();
40-
expect(wrapper.instance.type).toBe('a');
41-
expect(wrapper.instance.props.onClick).toEqual(
42-
reduxHooks.useTrackCourseEvent(
43-
track.course.courseImageClicked,
44-
props.cardId,
45-
homeUrl,
46-
),
47-
);
48-
});
49-
test('renders disabled link', () => {
50-
useActionDisabledState.mockReturnValueOnce({ disableCourseTitle: true });
51-
const wrapper = shallow(<CourseCardImage {...props} />);
52-
expect(wrapper.snapshot).toMatchSnapshot();
53-
expect(wrapper.instance.type).toBe('div');
54-
});
45+
46+
it('isVerified, should render badge', () => {
47+
useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
48+
reduxHooks.useCardEnrollmentData.mockReturnValue({ isVerified: true });
49+
render(<IntlProvider locale="en"><CourseCardImage {...props} /></IntlProvider>);
50+
51+
const badge = screen.getByText(formatMessage(messages.verifiedBanner));
52+
expect(badge).toBeInTheDocument();
53+
const badgeImg = screen.getByRole('img', { name: formatMessage(messages.verifiedBannerRibbonAlt) });
54+
expect(badgeImg).toBeInTheDocument();
55+
});
56+
57+
it('renders link with correct href if disableCourseTitle is false', () => {
58+
useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
59+
reduxHooks.useCardEnrollmentData.mockReturnValue({ isVerified: false });
60+
render(<IntlProvider locale="en"><CourseCardImage {...props} /></IntlProvider>);
61+
62+
const link = screen.getByRole('link');
63+
expect(link).toHaveAttribute('href', homeUrl);
5564
});
56-
describe('behavior', () => {
65+
describe('hooks', () => {
5766
it('initializes', () => {
58-
shallow(<CourseCardImage {...props} />);
67+
useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
68+
reduxHooks.useCardEnrollmentData.mockReturnValue({ isVerified: true });
69+
render(<IntlProvider locale="en"><CourseCardImage {...props} /></IntlProvider>);
5970
expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(props.cardId);
6071
expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(
6172
props.cardId,
Lines changed: 51 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
import { shallow } from '@edx/react-unit-test-utils';
2-
1+
import { render, screen } from '@testing-library/react';
2+
import userEvent from '@testing-library/user-event';
33
import { reduxHooks } from 'hooks';
44
import track from 'tracking';
55
import useActionDisabledState from './hooks';
66
import CourseCardTitle from './CourseCardTitle';
77

8-
const homeUrl = 'home-url';
9-
108
jest.mock('tracking', () => ({
119
course: {
1210
courseTitleClicked: jest.fn().mockName('segment.courseTitleClicked'),
@@ -15,53 +13,65 @@ jest.mock('tracking', () => ({
1513

1614
jest.mock('hooks', () => ({
1715
reduxHooks: {
18-
useCardCourseData: jest.fn(() => ({ courseName: 'course-name' })),
19-
useCardCourseRunData: jest.fn(() => ({ homeUrl })),
20-
useTrackCourseEvent: jest.fn((eventName, cardId, url) => ({
21-
trackCourseEvent: { eventName, cardId, url },
22-
})),
16+
useCardCourseData: jest.fn(),
17+
useCardCourseRunData: jest.fn(),
18+
useTrackCourseEvent: jest.fn(),
2319
},
2420
}));
21+
2522
jest.mock('./hooks', () => jest.fn(() => ({ disableCourseTitle: false })));
2623

24+
jest.unmock('@edx/frontend-platform/i18n');
25+
jest.unmock('@openedx/paragon');
26+
jest.unmock('react');
27+
2728
describe('CourseCardTitle', () => {
2829
const props = {
29-
cardId: 'cardId',
30+
cardId: 'test-card-id',
3031
};
32+
33+
const courseName = 'Test Course';
34+
const homeUrl = 'http://test.com';
35+
const handleTitleClick = jest.fn();
36+
3137
beforeEach(() => {
3238
jest.clearAllMocks();
39+
reduxHooks.useCardCourseData.mockReturnValue({ courseName });
40+
reduxHooks.useCardCourseRunData.mockReturnValue({ homeUrl });
41+
reduxHooks.useTrackCourseEvent.mockReturnValue(handleTitleClick);
42+
});
43+
44+
it('renders course name as link when not disabled', async () => {
45+
useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
46+
render(<CourseCardTitle {...props} />);
47+
48+
const user = userEvent.setup();
49+
const link = screen.getByRole('link', { name: courseName });
50+
expect(link).toHaveAttribute('href', homeUrl);
51+
52+
await user.click(link);
53+
expect(handleTitleClick).toHaveBeenCalled();
3354
});
34-
describe('snapshot', () => {
35-
test('renders clickable link course title', () => {
36-
const wrapper = shallow(<CourseCardTitle {...props} />);
37-
expect(wrapper.snapshot).toMatchSnapshot();
38-
const title = wrapper.instance.findByTestId('CourseCardTitle');
39-
expect(title[0].type).toBe('a');
40-
expect(title[0].props.onClick).toEqual(
41-
reduxHooks.useTrackCourseEvent(
42-
track.course.courseTitleClicked,
43-
props.cardId,
44-
homeUrl,
45-
),
46-
);
47-
});
48-
test('renders disabled link', () => {
49-
useActionDisabledState.mockReturnValueOnce({ disableCourseTitle: true });
50-
const wrapper = shallow(<CourseCardTitle {...props} />);
51-
expect(wrapper.snapshot).toMatchSnapshot();
52-
const title = wrapper.instance.findByTestId('CourseCardTitle');
53-
expect(title[0].type).toBe('span');
54-
expect(title[0].props.onClick).toBeUndefined();
55-
});
55+
56+
it('renders course name as span when disabled', () => {
57+
useActionDisabledState.mockReturnValue({ disableCourseTitle: true });
58+
render(<CourseCardTitle {...props} />);
59+
60+
const text = screen.getByText(courseName);
61+
expect(text).toBeInTheDocument();
62+
expect(text.tagName.toLowerCase()).toBe('span');
5663
});
57-
describe('behavior', () => {
58-
it('initializes', () => {
59-
shallow(<CourseCardTitle {...props} />);
60-
expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(props.cardId);
61-
expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(
62-
props.cardId,
63-
);
64-
expect(useActionDisabledState).toHaveBeenCalledWith(props.cardId);
65-
});
64+
65+
it('uses correct hooks with cardId', () => {
66+
useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
67+
render(<CourseCardTitle {...props} />);
68+
69+
expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(props.cardId);
70+
expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
71+
expect(reduxHooks.useTrackCourseEvent).toHaveBeenCalledWith(
72+
track.course.courseTitleClicked,
73+
props.cardId,
74+
homeUrl,
75+
);
6676
});
6777
});

0 commit comments

Comments
 (0)