|
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'; |
3 | 4 | import { reduxHooks } from 'hooks';
|
4 |
| -import track from 'tracking'; |
5 | 5 | import useActionDisabledState from './hooks';
|
6 |
| -import CourseCardImage from './CourseCardImage'; |
| 6 | +import { CourseCardImage } from './CourseCardImage'; |
| 7 | +import messages from '../messages'; |
7 | 8 |
|
8 |
| -const homeUrl = 'home-url'; |
| 9 | +jest.unmock('@edx/frontend-platform/i18n'); |
| 10 | +jest.unmock('@openedx/paragon'); |
| 11 | +jest.unmock('react'); |
9 | 12 |
|
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'; |
15 | 15 |
|
16 | 16 | jest.mock('hooks', () => ({
|
17 | 17 | reduxHooks: {
|
18 |
| - useCardCourseData: jest.fn(() => ({ bannerImgSrc: 'banner-img-src' })), |
| 18 | + useCardCourseData: jest.fn(() => ({ bannerImgSrc })), |
19 | 19 | useCardCourseRunData: jest.fn(() => ({ homeUrl })),
|
20 |
| - useCardEnrollmentData: jest.fn(() => ({ isVerified: true })), |
| 20 | + useCardEnrollmentData: jest.fn(), |
21 | 21 | useTrackCourseEvent: jest.fn((eventName, cardId, url) => ({
|
22 | 22 | trackCourseEvent: { eventName, cardId, url },
|
23 | 23 | })),
|
24 | 24 | },
|
25 | 25 | }));
|
26 |
| -jest.mock('./hooks', () => jest.fn(() => ({ disableCourseTitle: false }))); |
| 26 | + |
| 27 | +jest.mock('./hooks', () => jest.fn()); |
27 | 28 |
|
28 | 29 | describe('CourseCardImage', () => {
|
29 | 30 | const props = {
|
30 |
| - cardId: 'cardId', |
31 |
| - orientation: 'orientation', |
| 31 | + cardId: 'test-card-id', |
| 32 | + orientation: 'horizontal', |
32 | 33 | };
|
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'); |
35 | 44 | });
|
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); |
55 | 64 | });
|
56 |
| - describe('behavior', () => { |
| 65 | + describe('hooks', () => { |
57 | 66 | 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>); |
59 | 70 | expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(props.cardId);
|
60 | 71 | expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(
|
61 | 72 | props.cardId,
|
|
0 commit comments