test: Deprecate react-unit-test-utils 9/15 (#668)

Author: diana-villalvazo-wgu

src/containers/LearnerDashboardHeader/ConfirmEmailBanner/__snapshots__/index.test.jsx.snap

@@ -1,14 +1,19 @@
-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 hooks from './hooks';
 import ConfirmEmailBanner from '.';
+import messages from './messages';
 
 jest.mock('./hooks', () => ({
   __esModule: true,
   default: jest.fn(),
 }));
 
+jest.unmock('@openedx/paragon');
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('react');
+
 const hookProps = {
   isNeeded: true,
   showPageBanner: jest.fn().mockName('showPageBanner'),
@@ -20,16 +25,44 @@ const hookProps = {
 };
 
 describe('ConfirmEmailBanner', () => {
-  describe('snapshot', () => {
-    test('do not show on already verified', () => {
+  describe('render', () => {
+    it('do not show on already verified', () => {
       hooks.mockReturnValueOnce({ ...hookProps, isNeeded: false });
-      const el = shallow(<ConfirmEmailBanner />);
-      expect(el.snapshot).toMatchSnapshot();
+      render(<IntlProvider locale="en"><ConfirmEmailBanner /></IntlProvider>);
+      const banner = screen.queryByRole('alert');
+      expect(banner).toBeNull();
     });
-    test('Show on unverified', () => {
-      hooks.mockReturnValueOnce({ ...hookProps });
-      const el = shallow(<ConfirmEmailBanner />);
-      expect(el.snapshot).toMatchSnapshot();
+    describe('On unverified', () => {
+      beforeEach(() => {
+        hooks.mockReturnValueOnce({ ...hookProps });
+        render(<IntlProvider locale="en"><ConfirmEmailBanner /></IntlProvider>);
+      });
+      it('show banner', () => {
+        const banner = screen.getByRole('alert');
+        expect(banner).toContainHTML('Remember to confirm');
+      });
+      it('show confirm now button', () => {
+        const confirmButton = screen.getByRole('button', { name: messages.confirmNowButton.defaultMessage });
+        expect(confirmButton).toBeInTheDocument();
+      });
+      it('show modal', () => {
+        const modal = screen.getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+      });
+      it('show modal header and body', () => {
+        const modalHeader = screen.getByText(messages.confirmEmailModalHeader.defaultMessage);
+        expect(modalHeader).toBeInTheDocument();
+        const modalBody = screen.getByText(messages.confirmEmailModalBody.defaultMessage);
+        expect(modalBody).toBeInTheDocument();
+      });
+      it('show confirm image', () => {
+        const confirmButton = screen.getByRole('img', { name: messages.confirmEmailImageAlt.defaultMessage });
+        expect(confirmButton).toBeInTheDocument();
+      });
+      it('show confirm email button', () => {
+        const confirmButton = screen.getByRole('button', { name: messages.verifiedConfirmEmailButton.defaultMessage });
+        expect(confirmButton).toBeInTheDocument();
+      });
     });
   });
 });

src/containers/LearnerDashboardHeader/ConfirmEmailBanner/index.test.jsx

@@ -1,52 +1,72 @@
 import { mergeConfig } from '@edx/frontend-platform';
-import { shallow } from '@edx/react-unit-test-utils';
-import Header from '@edx/frontend-component-header';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import urls from 'data/services/lms/urls';
 import LearnerDashboardHeader from '.';
 import { findCoursesNavClicked } from './hooks';
 
+const courseSearchUrl = '/course-search-url';
+
 jest.mock('hooks', () => ({
   reduxHooks: {
     usePlatformSettingsData: jest.fn(() => ({
-      courseSearchUrl: '/course-search-url',
+      courseSearchUrl,
     })),
   },
 }));
 jest.mock('./hooks', () => ({
   ...jest.requireActual('./hooks'),
   findCoursesNavClicked: jest.fn(),
 }));
-jest.mock('containers/MasqueradeBar', () => 'MasqueradeBar');
-jest.mock('./ConfirmEmailBanner', () => 'ConfirmEmailBanner');
-jest.mock('@edx/frontend-component-header', () => 'Header');
+
+jest.unmock('@openedx/paragon');
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('react');
+
+const mockedHeaderProps = jest.fn();
+jest.mock('containers/MasqueradeBar', () => jest.fn(() => <div>MasqueradeBar</div>));
+jest.mock('./ConfirmEmailBanner', () => jest.fn(() => <div>ConfirmEmailBanner</div>));
+jest.mock('@edx/frontend-component-header', () => jest.fn((props) => {
+  mockedHeaderProps(props);
+  return <div>Header</div>;
+}));
 
 describe('LearnerDashboardHeader', () => {
-  test('render', () => {
+  beforeEach(() => jest.clearAllMocks());
+  it('renders and discover url is correct', () => {
     mergeConfig({ ORDER_HISTORY_URL: 'test-url' });
-    const wrapper = shallow(<LearnerDashboardHeader />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.findByType('ConfirmEmailBanner')).toHaveLength(1);
-    expect(wrapper.instance.findByType('MasqueradeBar')).toHaveLength(1);
-    expect(wrapper.instance.findByType(Header)).toHaveLength(1);
-    wrapper.instance.findByType(Header)[0].props.mainMenuItems[1].onClick();
-    expect(findCoursesNavClicked).toHaveBeenCalledWith(urls.baseAppUrl('/course-search-url'));
-    expect(wrapper.instance.findByType(Header)[0].props.secondaryMenuItems.length).toBe(0);
+    render(<IntlProvider locale="en"><LearnerDashboardHeader /></IntlProvider>);
+    expect(screen.getByText('ConfirmEmailBanner')).toBeInTheDocument();
+    expect(screen.getByText('MasqueradeBar')).toBeInTheDocument();
+    expect(screen.getByText('Header')).toBeInTheDocument();
+    const props = mockedHeaderProps.mock.calls[0][0];
+    const { mainMenuItems } = props;
+    const discoverUrl = mainMenuItems[1].href;
+    mainMenuItems[1].onClick();
+    expect(discoverUrl).toBe(urls.baseAppUrl(courseSearchUrl));
+    expect(findCoursesNavClicked).toHaveBeenCalledWith(urls.baseAppUrl(courseSearchUrl));
   });
 
-  test('should display Help link if SUPPORT_URL is set', () => {
+  it('should display Help link if SUPPORT_URL is set', () => {
     mergeConfig({ SUPPORT_URL: 'http://localhost:18000/support' });
-    const wrapper = shallow(<LearnerDashboardHeader />);
-    expect(wrapper.instance.findByType(Header)[0].props.secondaryMenuItems.length).toBe(1);
+    render(<IntlProvider locale="en"><LearnerDashboardHeader /></IntlProvider>);
+    const props = mockedHeaderProps.mock.calls[0][0];
+    const { secondaryMenuItems } = props;
+    expect(secondaryMenuItems.length).toBe(1);
   });
-  test('should display Programs link if it is enabled by configuration', () => {
+  it('should display Programs link if it is enabled by configuration', () => {
     mergeConfig({ ENABLE_PROGRAMS: true });
-    const wrapper = shallow(<LearnerDashboardHeader />);
-    expect(wrapper.instance.findByType(Header)[0].props.mainMenuItems.length).toBe(3);
+    render(<IntlProvider locale="en"><LearnerDashboardHeader /></IntlProvider>);
+    const props = mockedHeaderProps.mock.calls[0][0];
+    const { mainMenuItems } = props;
+    expect(mainMenuItems.length).toBe(3);
   });
-  test('should not display Discover New tab if it is disabled by configuration', () => {
+  it('should not display Discover New tab if it is disabled by configuration', () => {
     mergeConfig({ NON_BROWSABLE_COURSES: true });
-    const wrapper = shallow(<LearnerDashboardHeader />);
-    expect(wrapper.instance.findByType(Header)[0].props.mainMenuItems.length).toBe(2);
+    render(<IntlProvider locale="en"><LearnerDashboardHeader /></IntlProvider>);
+    const props = mockedHeaderProps.mock.calls[0][0];
+    const { mainMenuItems } = props;
+    expect(mainMenuItems.length).toBe(2);
   });
 });