test: Deprecate react-unit-test-utils 5/15 (#659)

Author: diana-villalvazo-wgu

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

@@ -1,10 +1,11 @@
-import React from 'react';
-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 EntitlementBanner from './EntitlementBanner';
+import messages from './messages';
 
-jest.mock('components/Banner', () => 'Banner');
 jest.mock('hooks', () => ({
   utilHooks: {
     useFormatDate: () => date => date,
@@ -18,9 +19,11 @@ jest.mock('hooks', () => ({
   },
 }));
 
-const cardId = 'my-test-course-number';
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
 
-let el;
+const cardId = 'test-card-id';
 
 const entitlementData = {
   isEntitlement: true,
@@ -31,33 +34,43 @@ const entitlementData = {
 };
 const platformData = { supportEmail: 'test-support-email' };
 
-const render = (overrides = {}) => {
+const renderComponent = (overrides = {}) => {
   const { entitlement = {} } = overrides;
   reduxHooks.useCardEntitlementData.mockReturnValueOnce({ ...entitlementData, ...entitlement });
   reduxHooks.usePlatformSettingsData.mockReturnValueOnce(platformData);
-  el = shallow(<EntitlementBanner cardId={cardId} />);
+  return render(<IntlProvider locale="en"><EntitlementBanner cardId={cardId} /></IntlProvider>);
 };
 
 describe('EntitlementBanner', () => {
-  test('initializes data with course number from entitlement', () => {
-    render();
+  it('initializes data with course number from entitlement', () => {
+    renderComponent();
     expect(reduxHooks.useCardEntitlementData).toHaveBeenCalledWith(cardId);
     expect(reduxHooks.useUpdateSelectSessionModalCallback).toHaveBeenCalledWith(cardId);
   });
-  test('no display if not an entitlement', () => {
-    render({ entitlement: { isEntitlement: false } });
-    expect(el.isEmptyRender()).toEqual(true);
+  it('no display if not an entitlement', () => {
+    renderComponent({ entitlement: { isEntitlement: false } });
+    const banner = screen.queryByRole('alert');
+    expect(banner).toBeNull();
   });
-  test('snapshot: no sessions available', () => {
-    render({ entitlement: { isFulfilled: false, hasSessions: false } });
-    expect(el.snapshot).toMatchSnapshot();
+  it('renders when no sessions available', () => {
+    renderComponent({ entitlement: { isFulfilled: false, hasSessions: false } });
+    const banner = screen.getByRole('alert');
+    expect(banner).toBeInTheDocument();
+    expect(banner).toHaveClass('alert-warning');
+    expect(banner.innerHTML).toContain(platformData.supportEmail);
   });
-  test('snapshot: expiration warning', () => {
-    render({ entitlement: { showExpirationWarning: true } });
-    expect(el.snapshot).toMatchSnapshot();
+  it('renders when expiration warning', () => {
+    renderComponent({ entitlement: { showExpirationWarning: true } });
+    const banner = screen.getByRole('alert');
+    expect(banner).toBeInTheDocument();
+    expect(banner).toHaveClass('alert-info');
+    const button = screen.getByRole('button', { name: formatMessage(messages.selectSession) });
+    expect(button).toBeInTheDocument();
   });
-  test('no display if sessions available and not displaying warning', () => {
-    render();
-    expect(el.isEmptyRender()).toEqual(true);
+  it('renders expired banner', () => {
+    renderComponent({ entitlement: { isExpired: true } });
+    const banner = screen.getByRole('alert');
+    expect(banner).toBeInTheDocument();
+    expect(banner.innerHTML).toContain(formatMessage(messages.entitlementExpired));
   });
 });

src/containers/CourseCard/components/CourseCardBanners/__snapshots__/EntitlementBanner.test.jsx.snap

@@ -1,14 +1,23 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { reduxHooks } from 'hooks';
 
 import CourseCardBanners from '.';
 
-jest.mock('./CourseBanner', () => 'CourseBanner');
-jest.mock('./CertificateBanner', () => 'CertificateBanner');
-jest.mock('./CreditBanner', () => 'CreditBanner');
-jest.mock('./EntitlementBanner', () => 'EntitlementBanner');
-jest.mock('./RelatedProgramsBanner', () => 'RelatedProgramsBanner');
+jest.mock('./CourseBanner', () => jest.fn(() => <div>CourseBanner</div>));
+jest.mock('./CertificateBanner', () => jest.fn(() => <div>CertificateBanner</div>));
+jest.mock('./CreditBanner', () => jest.fn(() => <div>CreditBanner</div>));
+jest.mock('./EntitlementBanner', () => jest.fn(() => <div>EntitlementBanner</div>));
+jest.mock('./RelatedProgramsBanner', () => jest.fn(() => <div>RelatedProgramsBanner</div>));
+
+const mockedComponents = [
+  'CourseBanner',
+  'CertificateBanner',
+  'CreditBanner',
+  'EntitlementBanner',
+  'RelatedProgramsBanner',
+];
 
 jest.mock('hooks', () => ({
   reduxHooks: {
@@ -20,13 +29,20 @@ describe('CourseCardBanners', () => {
   const props = {
     cardId: 'test-card-id',
   };
-  test('renders default CourseCardBanners', () => {
-    const wrapper = shallow(<CourseCardBanners {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders default CourseCardBanners', () => {
+    render(<IntlProvider locale="en"><CourseCardBanners {...props} /></IntlProvider>);
+    mockedComponents.map((componentName) => {
+      const mockedComponent = screen.getByText(componentName);
+      return expect(mockedComponent).toBeInTheDocument();
+    });
   });
-  test('render with isEnrolled false', () => {
+  it('render with isEnrolled false', () => {
     reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ isEnrolled: false });
-    const wrapper = shallow(<CourseCardBanners {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    render(<IntlProvider locale="en"><CourseCardBanners {...props} /></IntlProvider>);
+    const mockedComponentsIfNotEnrolled = mockedComponents.slice(-2);
+    mockedComponentsIfNotEnrolled.map((componentName) => {
+      const mockedComponent = screen.getByText(componentName);
+      return expect(mockedComponent).toBeInTheDocument();
+    });
   });
 });

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

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as ReactShare from 'react-share';
 
-import { StrictDict } from '@edx/react-unit-test-utils';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Dropdown } from '@openedx/paragon';
 
@@ -11,9 +10,9 @@ import { reduxHooks } from 'hooks';
 
 import messages from './messages';
 
-export const testIds = StrictDict({
+export const testIds = {
   emailSettingsModalToggle: 'emailSettingsModalToggle',
-});
+};
 
 export const SocialShareMenu = ({ cardId, emailSettings }) => {
   const { formatMessage } = useIntl();

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

@@ -1,12 +1,12 @@
-import { useKeyedState, StrictDict } from '@edx/react-unit-test-utils';
+import { useKeyedState } from '@edx/react-unit-test-utils';
 
 import track from 'tracking';
 import { reduxHooks } from 'hooks';
 
-export const stateKeys = StrictDict({
+export const stateKeys = {
   isUnenrollConfirmVisible: 'isUnenrollConfirmVisible',
   isEmailSettingsVisible: 'isEmailSettingsVisible',
-});
+};
 
 export const useUnenrollData = () => {
   const [isVisible, setIsVisible] = useKeyedState(stateKeys.isUnenrollConfirmVisible, false);

src/containers/CourseCard/components/CourseCardMenu/SocialShareMenu.jsx

@@ -1,10 +1,8 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Dropdown, Icon, IconButton } from '@openedx/paragon';
 import { MoreVert } from '@openedx/paragon/icons';
-import { StrictDict } from '@edx/react-unit-test-utils';
 
 import EmailSettingsModal from 'containers/EmailSettingsModal';
 import UnenrollConfirmModal from 'containers/UnenrollConfirmModal';
@@ -19,9 +17,9 @@ import {
 
 import messages from './messages';
 
-export const testIds = StrictDict({
+export const testIds = {
   unenrollModalToggle: 'unenrollModalToggle',
-});
+};
 
 export const CourseCardMenu = ({ cardId }) => {
   const { formatMessage } = useIntl();

src/containers/CourseCard/components/CourseCardMenu/hooks.js

@@ -1,12 +1,16 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import useRelatedProgramsBadge from './hooks';
 import RelatedProgramsBadge from '.';
 
 jest.mock('containers/RelatedProgramsModal', () => 'RelatedProgramsModal');
 jest.mock('./hooks', () => jest.fn());
 
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
 const hookProps = {
   isOpen: true,
   openModal: jest.fn().mockName('useRelatedProgramsBadge.openModal'),
@@ -15,16 +19,21 @@ const hookProps = {
   programsMessage: 'useRelatedProgramsBadge.programsMessage',
 };
 
-const cardId = 'test-course-number';
+const cardId = 'test-card-id';
 
 describe('RelatedProgramsBadge component', () => {
-  test('empty render: no programs', () => {
+  it('should not render if no programs', () => {
     useRelatedProgramsBadge.mockReturnValueOnce({ ...hookProps, numPrograms: 0 });
-    const el = shallow(<RelatedProgramsBadge cardId={cardId} />);
-    expect(el.isEmptyRender()).toEqual(true);
+    render(<IntlProvider locale="en"><RelatedProgramsBadge cardId={cardId} /></IntlProvider>);
+    const button = screen.queryByRole('button', { name: hookProps.programsMessage });
+    expect(button).toBeNull();
+    const dialog = screen.queryByRole('dialog');
+    expect(dialog).toBeNull();
   });
-  test('snapshot: 3 programs', () => {
-    useRelatedProgramsBadge.mockReturnValueOnce(hookProps);
-    expect(shallow(<RelatedProgramsBadge cardId={cardId} />).snapshot).toMatchSnapshot();
+  it('3 programs closed', () => {
+    useRelatedProgramsBadge.mockReturnValue({ ...hookProps, isOpen: false });
+    render(<IntlProvider locale="en"><RelatedProgramsBadge cardId={cardId} /></IntlProvider>);
+    const button = screen.getByRole('button', { name: hookProps.programsMessage });
+    expect(button).toBeInTheDocument();
   });
 });