Deprecate react-unit-test-utils 6/15

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

@@ -1,61 +1,72 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { formatMessage } from 'testUtils';
 import { reduxHooks } from 'hooks';
-import track from 'tracking';
 import useActionDisabledState from './hooks';
-import CourseCardImage from './CourseCardImage';
+import { CourseCardImage } from './CourseCardImage';
+import messages from '../messages';
 
-const homeUrl = 'home-url';
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
 
-jest.mock('tracking', () => ({
-  course: {
-    courseImageClicked: jest.fn().mockName('segment.courseImageClicked'),
-  },
-}));
+const homeUrl = 'https://example.com';
+const bannerImgSrc = 'banner-img-src.jpg';
 
 jest.mock('hooks', () => ({
   reduxHooks: {
-    useCardCourseData: jest.fn(() => ({ bannerImgSrc: 'banner-img-src' })),
+    useCardCourseData: jest.fn(() => ({ bannerImgSrc })),
     useCardCourseRunData: jest.fn(() => ({ homeUrl })),
-    useCardEnrollmentData: jest.fn(() => ({ isVerified: true })),
+    useCardEnrollmentData: jest.fn(),
     useTrackCourseEvent: jest.fn((eventName, cardId, url) => ({
       trackCourseEvent: { eventName, cardId, url },
     })),
   },
 }));
-jest.mock('./hooks', () => jest.fn(() => ({ disableCourseTitle: false })));
+
+jest.mock('./hooks', () => jest.fn());
 
 describe('CourseCardImage', () => {
   const props = {
-    cardId: 'cardId',
-    orientation: 'orientation',
+    cardId: 'test-card-id',
+    orientation: 'horizontal',
   };
-  beforeEach(() => {
-    jest.clearAllMocks();
+
+  it('renders course image with correct attributes', () => {
+    useActionDisabledState.mockReturnValue({ disableCourseTitle: true });
+    reduxHooks.useCardEnrollmentData.mockReturnValue({ isVerified: true });
+    render(<IntlProvider locale="en"><CourseCardImage {...props} /></IntlProvider>);
+
+    const image = screen.getByRole('img', { name: formatMessage(messages.bannerAlt) });
+    expect(image).toBeInTheDocument();
+    expect(image.src).toContain(bannerImgSrc);
+    expect(image.parentElement).toHaveClass('horizontal');
   });
-  describe('snapshot', () => {
-    test('renders clickable link course Image', () => {
-      const wrapper = shallow(<CourseCardImage {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-      expect(wrapper.instance.type).toBe('a');
-      expect(wrapper.instance.props.onClick).toEqual(
-        reduxHooks.useTrackCourseEvent(
-          track.course.courseImageClicked,
-          props.cardId,
-          homeUrl,
-        ),
-      );
-    });
-    test('renders disabled link', () => {
-      useActionDisabledState.mockReturnValueOnce({ disableCourseTitle: true });
-      const wrapper = shallow(<CourseCardImage {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-      expect(wrapper.instance.type).toBe('div');
-    });
+
+  it('isVerified, should render badge', () => {
+    useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
+    reduxHooks.useCardEnrollmentData.mockReturnValue({ isVerified: true });
+    render(<IntlProvider locale="en"><CourseCardImage {...props} /></IntlProvider>);
+
+    const badge = screen.getByText(formatMessage(messages.verifiedBanner));
+    expect(badge).toBeInTheDocument();
+    const badgeImg = screen.getByRole('img', { name: formatMessage(messages.verifiedBannerRibbonAlt) });
+    expect(badgeImg).toBeInTheDocument();
+  });
+
+  it('renders link with correct href if disableCourseTitle is false', () => {
+    useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
+    reduxHooks.useCardEnrollmentData.mockReturnValue({ isVerified: false });
+    render(<IntlProvider locale="en"><CourseCardImage {...props} /></IntlProvider>);
+
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', homeUrl);
   });
-  describe('behavior', () => {
+  describe('hooks', () => {
     it('initializes', () => {
-      shallow(<CourseCardImage {...props} />);
+      useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
+      reduxHooks.useCardEnrollmentData.mockReturnValue({ isVerified: true });
+      render(<IntlProvider locale="en"><CourseCardImage {...props} /></IntlProvider>);
       expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(props.cardId);
       expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(
         props.cardId,

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

@@ -1,12 +1,10 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { reduxHooks } from 'hooks';
 import track from 'tracking';
 import useActionDisabledState from './hooks';
 import CourseCardTitle from './CourseCardTitle';
 
-const homeUrl = 'home-url';
-
 jest.mock('tracking', () => ({
   course: {
     courseTitleClicked: jest.fn().mockName('segment.courseTitleClicked'),
@@ -15,53 +13,65 @@ jest.mock('tracking', () => ({
 
 jest.mock('hooks', () => ({
   reduxHooks: {
-    useCardCourseData: jest.fn(() => ({ courseName: 'course-name' })),
-    useCardCourseRunData: jest.fn(() => ({ homeUrl })),
-    useTrackCourseEvent: jest.fn((eventName, cardId, url) => ({
-      trackCourseEvent: { eventName, cardId, url },
-    })),
+    useCardCourseData: jest.fn(),
+    useCardCourseRunData: jest.fn(),
+    useTrackCourseEvent: jest.fn(),
   },
 }));
+
 jest.mock('./hooks', () => jest.fn(() => ({ disableCourseTitle: false })));
 
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
 describe('CourseCardTitle', () => {
   const props = {
-    cardId: 'cardId',
+    cardId: 'test-card-id',
   };
+
+  const courseName = 'Test Course';
+  const homeUrl = 'http://test.com';
+  const handleTitleClick = jest.fn();
+
   beforeEach(() => {
     jest.clearAllMocks();
+    reduxHooks.useCardCourseData.mockReturnValue({ courseName });
+    reduxHooks.useCardCourseRunData.mockReturnValue({ homeUrl });
+    reduxHooks.useTrackCourseEvent.mockReturnValue(handleTitleClick);
+  });
+
+  it('renders course name as link when not disabled', async () => {
+    useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
+    render(<CourseCardTitle {...props} />);
+
+    const user = userEvent.setup();
+    const link = screen.getByRole('link', { name: courseName });
+    expect(link).toHaveAttribute('href', homeUrl);
+
+    await user.click(link);
+    expect(handleTitleClick).toHaveBeenCalled();
   });
-  describe('snapshot', () => {
-    test('renders clickable link course title', () => {
-      const wrapper = shallow(<CourseCardTitle {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-      const title = wrapper.instance.findByTestId('CourseCardTitle');
-      expect(title[0].type).toBe('a');
-      expect(title[0].props.onClick).toEqual(
-        reduxHooks.useTrackCourseEvent(
-          track.course.courseTitleClicked,
-          props.cardId,
-          homeUrl,
-        ),
-      );
-    });
-    test('renders disabled link', () => {
-      useActionDisabledState.mockReturnValueOnce({ disableCourseTitle: true });
-      const wrapper = shallow(<CourseCardTitle {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-      const title = wrapper.instance.findByTestId('CourseCardTitle');
-      expect(title[0].type).toBe('span');
-      expect(title[0].props.onClick).toBeUndefined();
-    });
+
+  it('renders course name as span when disabled', () => {
+    useActionDisabledState.mockReturnValue({ disableCourseTitle: true });
+    render(<CourseCardTitle {...props} />);
+
+    const text = screen.getByText(courseName);
+    expect(text).toBeInTheDocument();
+    expect(text.tagName.toLowerCase()).toBe('span');
   });
-  describe('behavior', () => {
-    it('initializes', () => {
-      shallow(<CourseCardTitle {...props} />);
-      expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(props.cardId);
-      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(
-        props.cardId,
-      );
-      expect(useActionDisabledState).toHaveBeenCalledWith(props.cardId);
-    });
+
+  it('uses correct hooks with cardId', () => {
+    useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
+    render(<CourseCardTitle {...props} />);
+
+    expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(props.cardId);
+    expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
+    expect(reduxHooks.useTrackCourseEvent).toHaveBeenCalledWith(
+      track.course.courseTitleClicked,
+      props.cardId,
+      homeUrl,
+    );
   });
 });