test: Deprecate react-unit-test-utils 4/15 (#656)

Author: diana-villalvazo-wgu

src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.test.jsx

@@ -1,14 +1,12 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-import { Hyperlink } from '@openedx/paragon';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { reduxHooks } from 'hooks';
 import { formatMessage } from 'testUtils';
 import { CourseBanner } from './CourseBanner';
 
 import messages from './messages';
 
-jest.mock('components/Banner', () => 'Banner');
 jest.mock('hooks', () => ({
   utilHooks: {
     useFormatDate: () => date => date,
@@ -19,9 +17,11 @@ jest.mock('hooks', () => ({
   },
 }));
 
-const cardId = 'my-test-course-number';
+jest.unmock('@openedx/paragon');
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('react');
 
-let el;
+const cardId = 'test-card-id';
 
 const enrollmentData = {
   isVerified: false,
@@ -38,7 +38,7 @@ const courseRunData = {
   marketingUrl: 'marketing-url',
 };
 
-const render = (overrides = {}) => {
+const renderCourseBanner = (overrides = {}) => {
   const {
     courseRun = {},
     enrollment = {},
@@ -51,81 +51,58 @@ const render = (overrides = {}) => {
     ...enrollmentData,
     ...enrollment,
   });
-  el = shallow(<CourseBanner cardId={cardId} />);
+  return render(<IntlProvider locale="en"><CourseBanner cardId={cardId} /></IntlProvider>);
 };
 
 describe('CourseBanner', () => {
-  test('initializes data with course number from enrollment, course and course run data', () => {
-    render();
+  it('initializes data with course number from enrollment, course and course run data', () => {
+    renderCourseBanner();
     expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
     expect(reduxHooks.useCardEnrollmentData).toHaveBeenCalledWith(cardId);
   });
-  test('no display if learner is verified', () => {
-    render({ enrollment: { isVerified: true } });
-    expect(el.isEmptyRender()).toEqual(true);
+  it('no display if learner is verified', () => {
+    renderCourseBanner({ enrollment: { isVerified: true } });
+    expect(screen.queryByRole('alert')).toBeNull();
   });
   describe('audit access expired', () => {
-    beforeEach(() => {
-      render({ enrollment: { isAuditAccessExpired: true } });
-    });
-    test('snapshot: (auditAccessExpired, findAnotherCourse hyperlink)', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
-    test('messages: auditAccessExpired', () => {
-      expect(el.instance.children[0].children[0].el).toContain(messages.auditAccessExpired.defaultMessage);
-      expect(el.instance.findByType(Hyperlink)[0].children[0].el).toEqual(messages.findAnotherCourse.defaultMessage);
+    it('should display correct message and link', () => {
+      renderCourseBanner({ enrollment: { isAuditAccessExpired: true } });
+      const auditAccessText = screen.getByText(formatMessage(messages.auditAccessExpired));
+      expect(auditAccessText).toBeInTheDocument();
+      const auditAccessLink = screen.getByText(formatMessage(messages.findAnotherCourse));
+      expect(auditAccessLink).toBeInTheDocument();
     });
   });
   describe('unmet prerequisites', () => {
-    beforeEach(() => {
-      render({ enrollment: { coursewareAccess: { hasUnmetPrerequisites: true } } });
-    });
-    test('snapshot: unmetPrerequisites', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
-    test('messages: prerequisitesNotMet', () => {
-      expect(el.instance.children[0].children[0].el).toContain(messages.prerequisitesNotMet.defaultMessage);
+    it('should display correct message', () => {
+      renderCourseBanner({ enrollment: { coursewareAccess: { hasUnmetPrerequisites: true } } });
+      const preReqText = screen.getByText(formatMessage(messages.prerequisitesNotMet));
+      expect(preReqText).toBeInTheDocument();
     });
   });
   describe('too early', () => {
     describe('no start date', () => {
-      beforeEach(() => {
-        render({ enrollment: { coursewareAccess: { isTooEarly: true } }, courseRun: { startDate: null } });
+      it('should not display banner', () => {
+        renderCourseBanner({ enrollment: { coursewareAccess: { isTooEarly: true } }, courseRun: { startDate: null } });
+        const banner = screen.queryByRole('alert');
+        expect(banner).toBeNull();
       });
-      test('snapshot', () => expect(el.snapshot).toMatchSnapshot());
-      test('messages', () => expect(el.instance.children).toEqual([]));
     });
     describe('has start date', () => {
-      beforeEach(() => {
-        render({ enrollment: { coursewareAccess: { isTooEarly: true } } });
-      });
-      test('snapshot', () => expect(el.snapshot).toMatchSnapshot());
-
-      test('messages: courseHasNotStarted', () => {
-        expect(el.instance.children[0].children[0].el).toContain(
+      it('should display messages courseHasNotStarted', () => {
+        renderCourseBanner({ enrollment: { coursewareAccess: { isTooEarly: true } } });
+        const earlyMsg = screen.getByText(
           formatMessage(messages.courseHasNotStarted, { startDate: courseRunData.startDate }),
         );
+        expect(earlyMsg).toBeInTheDocument();
       });
     });
   });
   describe('staff', () => {
-    beforeEach(() => {
-      render({ enrollment: { coursewareAccess: { isStaff: true } } });
-    });
-    test('snapshot: isStaff', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
-  });
-  test('snapshot: stacking banners', () => {
-    render({
-      enrollment: {
-        coursewareAccess: {
-          isStaff: true,
-          isTooEarly: true,
-          hasUnmetPrerequisites: true,
-        },
-      },
+    it('should not display banner', () => {
+      renderCourseBanner({ enrollment: { coursewareAccess: { isStaff: true } } });
+      const banner = screen.queryByRole('alert');
+      expect(banner).toBeNull();
     });
-    expect(el.snapshot).toMatchSnapshot();
   });
 });

src/containers/CourseCard/components/CourseCardBanners/CourseBanner.test.jsx

@@ -1,95 +1,69 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { formatMessage } from 'testUtils';
-import { MailtoLink } from '@openedx/paragon';
-
+import { screen, render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import hooks from './hooks';
-import messages from './messages';
-import CreditBanner from '.';
-
-jest.mock('components/Banner', () => 'Banner');
+import { CreditBanner } from '.';
 
 jest.mock('./hooks', () => ({
   useCreditBannerData: jest.fn(),
 }));
 
-let el;
-const cardId = 'test-card-id';
+jest.unmock('@openedx/paragon');
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('react');
 
-const ContentComponent = () => 'ContentComponent';
-const supportEmail = 'test-support-email';
+describe('CreditBanner', () => {
+  const mockCardId = 'test-card-id';
+  const mockContentComponent = () => <div data-testid="mock-content">Test Content</div>;
+  const mockSupportEmail = '[email protected]';
 
-describe('CreditBanner component', () => {
-  describe('behavior', () => {
-    beforeEach(() => {
-      hooks.useCreditBannerData.mockReturnValue(null);
-      el = shallow(<CreditBanner cardId={cardId} />);
-    });
-    it('initializes hooks with cardId', () => {
-      expect(hooks.useCreditBannerData).toHaveBeenCalledWith(cardId);
-    });
-    it('returns null if hookData is null', () => {
-      expect(el.isEmptyRender()).toEqual(true);
-    });
+  const renderCreditBanner = () => render(
+    <IntlProvider locale="en">
+      <CreditBanner cardId={mockCardId} />
+    </IntlProvider>,
+  );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
   });
-  describe('render', () => {
-    describe('with error state', () => {
-      beforeEach(() => {
-        hooks.useCreditBannerData.mockReturnValue({
-          error: true,
-          ContentComponent,
-          supportEmail,
-        });
-        el = shallow(<CreditBanner cardId={cardId} />);
-      });
-      test('snapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      it('passes danger variant to Banner parent', () => {
-        expect(el.instance.findByType('Banner')[0].props.variant).toEqual('danger');
-      });
-      it('includes credit-error-msg with support email link', () => {
-        expect(el.instance.findByTestId('credit-error-msg')[0].children[0].el).toEqual(shallow(formatMessage(messages.error, {
-          supportEmailLink: (<MailtoLink to={supportEmail}>{supportEmail}</MailtoLink>),
-        })));
-      });
-      it('loads ContentComponent with cardId', () => {
-        expect(el.instance.findByType('ContentComponent')[0].props.cardId).toEqual(cardId);
-      });
+
+  it('should return null if hook returns null', () => {
+    hooks.useCreditBannerData.mockReturnValue(null);
+    renderCreditBanner();
+    const banner = screen.queryByRole('alert');
+    expect(banner).toBeNull();
+  });
+
+  it('should render content component without error', () => {
+    hooks.useCreditBannerData.mockReturnValue({
+      ContentComponent: mockContentComponent,
+      error: false,
     });
+    renderCreditBanner();
+
+    expect(screen.getByTestId('mock-content')).toBeInTheDocument();
+    expect(screen.queryByTestId('credit-error-msg')).not.toBeInTheDocument();
+  });
 
-    describe('with error state with no email', () => {
-      beforeEach(() => {
-        hooks.useCreditBannerData.mockReturnValue({
-          error: true,
-          ContentComponent,
-        });
-        el = shallow(<CreditBanner cardId={cardId} />);
-      });
-      test('snapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      it('includes credit-error-msg without support email link', () => {
-        expect(el.instance.findByTestId('credit-error-msg')[0].children[0].el).toEqual(formatMessage(messages.errorNoEmail));
-      });
+  it('should render error message with support email', () => {
+    hooks.useCreditBannerData.mockReturnValue({
+      ContentComponent: mockContentComponent,
+      error: true,
+      supportEmail: mockSupportEmail,
     });
+    renderCreditBanner();
 
-    describe('with no error state', () => {
-      beforeEach(() => {
-        hooks.useCreditBannerData.mockReturnValue({
-          error: false,
-          ContentComponent,
-          supportEmail,
-        });
-        el = shallow(<CreditBanner cardId={cardId} />);
-      });
-      test('snapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      it('loads ContentComponent with cardId', () => {
-        expect(el.instance.findByType('ContentComponent')[0].props.cardId).toEqual(cardId);
-      });
+    expect(screen.getByTestId('credit-error-msg')).toBeInTheDocument();
+    expect(screen.getByText(mockSupportEmail)).toBeInTheDocument();
+  });
+
+  it('should render error message without support email', () => {
+    hooks.useCreditBannerData.mockReturnValue({
+      ContentComponent: mockContentComponent,
+      error: true,
     });
+    renderCreditBanner();
+
+    expect(screen.getByTestId('credit-error-msg')).toBeInTheDocument();
+    expect(screen.queryByText(mockSupportEmail)).not.toBeInTheDocument();
   });
 });

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/__snapshots__/index.test.jsx.snap

@@ -1,4 +1,4 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
 
 import { ProgramsList } from './ProgramsList';
 
@@ -9,15 +9,23 @@ describe('ProgramsList', () => {
       title: 'Example Program 1',
     },
     {
-      programUrl: 'http://example.com',
+      programUrl: 'http://example2.com',
       title: 'Example Program 2',
     },
   ];
 
   it('renders correctly', () => {
-    const wrapper = shallow(<ProgramsList programs={programs} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    render(<ProgramsList programs={programs} />);
+    const list = screen.getByRole('list');
+    expect(list).toBeInTheDocument();
+    expect(list.children.length).toEqual(programs.length);
+  });
 
-    expect(wrapper.instance.findByType('li').length).toEqual(programs.length);
+  it('add the links correctly', () => {
+    render(<ProgramsList programs={programs} />);
+    programs.forEach(program => {
+      const link = screen.getByRole('link', { name: program.title });
+      expect(link).toHaveAttribute('href', program.url);
+    });
   });
 });