test: Deprecate react-unit-test-utils 2/15 (#643)

Author: diana-villalvazo-wgu

src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.test.jsx

@@ -1,4 +1,5 @@
-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 useActionDisabledState from '../hooks';
@@ -7,28 +8,36 @@ import SelectSessionButton from './SelectSessionButton';
 
 jest.mock('hooks', () => ({
   reduxHooks: {
-    useUpdateSelectSessionModalCallback: () => jest.fn().mockName('mockOpenSessionModal'),
+    useUpdateSelectSessionModalCallback: jest.fn(),
   },
 }));
 jest.mock('../hooks', () => jest.fn(() => ({ disableSelectSession: false })));
-jest.mock('./ActionButton', () => 'ActionButton');
 
-let wrapper;
+jest.unmock('@openedx/paragon');
+jest.mock('./ActionButton/hooks', () => jest.fn(() => false));
 
 describe('SelectSessionButton', () => {
   const props = { cardId: 'cardId' };
   it('default render', () => {
-    wrapper = shallow(<SelectSessionButton {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.props.disabled).toEqual(false);
-    expect(wrapper.instance.props.onClick.getMockName()).toEqual(
-      reduxHooks.useUpdateSelectSessionModalCallback().getMockName(),
-    );
+    render(<SelectSessionButton {...props} />);
+    const button = screen.getByRole('button', { name: 'Select Session' });
+    expect(button).toBeInTheDocument();
   });
-  test('disabled states', () => {
-    useActionDisabledState.mockReturnValueOnce({ disableSelectSession: true });
-    wrapper = shallow(<SelectSessionButton {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.props.disabled).toEqual(true);
+  describe('if useActionDisabledState is false', () => {
+    it('should disabled Select Session', () => {
+      useActionDisabledState.mockReturnValueOnce({ disableSelectSession: true });
+      render(<SelectSessionButton {...props} />);
+      const button = screen.getByRole('button', { name: 'Select Session' });
+      expect(button).toBeDisabled();
+    });
+  });
+  describe('on click', () => {
+    it('should call openSessionModal', async () => {
+      render(<SelectSessionButton {...props} />);
+      const user = userEvent.setup();
+      const button = screen.getByRole('button', { name: 'Select Session' });
+      await user.click(button);
+      expect(reduxHooks.useUpdateSelectSessionModalCallback).toHaveBeenCalledWith(props.cardId);
+    });
   });
 });

src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx

@@ -1,4 +1,5 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import track from 'tracking';
 import { reduxHooks } from 'hooks';
@@ -14,32 +15,41 @@ jest.mock('tracking', () => ({
 jest.mock('hooks', () => ({
   reduxHooks: {
     useCardCourseRunData: jest.fn(() => ({ homeUrl: 'homeUrl' })),
-    useTrackCourseEvent: jest.fn(
-      (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
-    ),
+    useTrackCourseEvent: jest.fn(),
   },
 }));
 jest.mock('../hooks', () => jest.fn(() => ({ disableViewCourse: false })));
-jest.mock('./ActionButton', () => 'ActionButton');
+
+jest.unmock('@openedx/paragon');
+jest.mock('./ActionButton/hooks', () => jest.fn(() => false));
 
 const defaultProps = { cardId: 'cardId' };
 const homeUrl = 'homeUrl';
 
 describe('ViewCourseButton', () => {
-  test('learner can view course', () => {
-    const wrapper = shallow(<ViewCourseButton {...defaultProps} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
+  it('learner can view course', async () => {
+    render(<ViewCourseButton {...defaultProps} />);
+    const button = screen.getByRole('button', { name: 'View Course' });
+    expect(button).toBeInTheDocument();
+    expect(button).not.toHaveClass('disabled');
+    expect(button).not.toHaveAttribute('aria-disabled', 'true');
+  });
+  it('calls trackCourseEvent on click', async () => {
+    render(<ViewCourseButton {...defaultProps} />);
+    const user = userEvent.setup();
+    const button = screen.getByRole('button', { name: 'View Course' });
+    await user.click(button);
+    expect(reduxHooks.useTrackCourseEvent).toHaveBeenCalledWith(
       track.course.enterCourseClicked,
       defaultProps.cardId,
       homeUrl,
-    ));
-    expect(wrapper.instance.props.disabled).toEqual(false);
+    );
   });
-  test('learner cannot view course', () => {
+  it('learner cannot view course', () => {
     useActionDisabledState.mockReturnValueOnce({ disableViewCourse: true });
-    const wrapper = shallow(<ViewCourseButton {...defaultProps} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.props.disabled).toEqual(true);
+    render(<ViewCourseButton {...defaultProps} />);
+    const button = screen.getByRole('button', { name: 'View Course' });
+    expect(button).toHaveClass('disabled');
+    expect(button).toHaveAttribute('aria-disabled', 'true');
   });
 });

src/containers/CourseCard/components/CourseCardActions/__snapshots__/SelectSessionButton.test.jsx.snap

@@ -1,10 +1,8 @@
-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 messages from './messages';
-import ProviderLink from './components/ProviderLink';
 import ApprovedContent from './ApprovedContent';
 
 jest.mock('hooks', () => ({
@@ -13,10 +11,11 @@ jest.mock('hooks', () => ({
     useMasqueradeData: jest.fn(),
   },
 }));
-jest.mock('./components/CreditContent', () => 'CreditContent');
-jest.mock('./components/ProviderLink', () => 'ProviderLink');
 
-let el;
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 const cardId = 'test-card-id';
 const credit = {
   providerStatusUrl: 'test-credit-provider-status-url',
@@ -26,38 +25,54 @@ reduxHooks.useCardCreditData.mockReturnValue(credit);
 reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false });
 
 describe('ApprovedContent component', () => {
-  beforeEach(() => {
-    el = shallow(<ApprovedContent cardId={cardId} />);
-  });
-  describe('behavior', () => {
+  describe('hooks', () => {
     it('initializes credit data with cardId', () => {
+      render(<IntlProvider locale="en"><ApprovedContent cardId={cardId} /></IntlProvider>);
       expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
     });
   });
   describe('render', () => {
     describe('rendered CreditContent component', () => {
-      let component;
-      beforeAll(() => {
-        component = el.instance.findByType('CreditContent');
+      beforeEach(() => {
+        jest.clearAllMocks();
+        render(<IntlProvider locale="en"><ApprovedContent cardId={cardId} /></IntlProvider>);
       });
-      test('action.href from credit.providerStatusUrl', () => {
-        expect(component[0].props.action.href).toEqual(credit.providerStatusUrl);
+      it('action.message is formatted viewCredit message', () => {
+        const actionButton = screen.getByRole('link', { name: messages.viewCredit.defaultMessage });
+        expect(actionButton).toBeInTheDocument();
+        expect(actionButton).toHaveTextContent(formatMessage(messages.viewCredit));
       });
-      test('action.message is formatted viewCredit message', () => {
-        expect(component[0].props.action.message).toEqual(formatMessage(messages.viewCredit));
+      it('action.href from credit.providerStatusUrl', () => {
+        const actionButton = screen.getByRole('link', { name: messages.viewCredit.defaultMessage });
+        expect(actionButton).toHaveAttribute('href', credit.providerStatusUrl);
       });
-      test('action.disabled is false', () => {
-        expect(component[0].props.action.disabled).toEqual(false);
+      it('action.disabled is false', () => {
+        const actionButton = screen.getByRole('link', { name: messages.viewCredit.defaultMessage });
+        expect(actionButton).not.toHaveAttribute('aria-disabled', 'true');
+        expect(actionButton).not.toHaveClass('disabled');
+        expect(actionButton).toBeEnabled();
       });
-      test('message is formatted approved message', () => {
-        expect(component[0].props.message).toEqual(formatMessage(
-          messages.approved,
-          {
-            congratulations: (<b>{formatMessage(messages.congratulations)}</b>),
-            linkToProviderSite: <ProviderLink cardId={cardId} />,
-            providerName: credit.providerName,
-          },
-        ));
+      it('message is formatted approved message', () => {
+        const creditMsg = screen.getByTestId('credit-msg');
+        expect(creditMsg).toBeInTheDocument();
+        expect(creditMsg.textContent).toContain(`${credit.providerName} has approved your request for course credit`);
+      });
+    });
+    describe('when masquerading', () => {
+      beforeEach(() => {
+        reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: true });
+        render(<IntlProvider locale="en"><ApprovedContent cardId={cardId} /></IntlProvider>);
+      });
+
+      it('disables the action button', () => {
+        const actionButton = screen.getByRole('link', { name: messages.viewCredit.defaultMessage });
+        expect(actionButton).toHaveAttribute('aria-disabled', 'true');
+        expect(actionButton).toHaveClass('disabled');
+      });
+
+      it('still renders provider name and link correctly', () => {
+        const creditMsg = screen.getByTestId('credit-msg');
+        expect(creditMsg.textContent).toContain(credit.providerName);
       });
     });
   });

src/containers/CourseCard/components/CourseCardActions/__snapshots__/ViewCourseButton.test.jsx.snap

@@ -1,9 +1,10 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
 
 import CreditContent from './CreditContent';
 
-let el;
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
 const action = {
   href: 'test-action-href',
   onClick: jest.fn().mockName('test-action-onClick'),
@@ -15,45 +16,57 @@ const message = 'test-message';
 const requestData = { url: 'test-request-data-url', parameters: { key1: 'val1' } };
 const props = { action, message, requestData };
 
+const renderCreditContent = (data) => render(
+  <CreditContent {...data} />,
+);
+
 describe('CreditContent component', () => {
   describe('render', () => {
     describe('with action', () => {
-      beforeEach(() => {
-        el = shallow(<CreditContent {...props} />);
-      });
-      test('snapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      it('loads href, onClick, and message into action row button', () => {
-        const buttonEl = el.instance.findByTestId('action-row-btn')[0];
-        expect(buttonEl.props.href).toEqual(action.href);
-        expect(buttonEl.props.onClick).toEqual(action.onClick);
-        expect(buttonEl.props.disabled).toEqual(action.disabled);
-        expect(buttonEl.children[0].el).toEqual(action.message);
+      it('loads href and message into action row button', () => {
+        renderCreditContent(props);
+        const button = screen.getByRole('link', { name: action.message });
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveAttribute('href', action.href);
+        expect(button).not.toHaveAttribute('disabled');
       });
       it('loads message into credit-msg div', () => {
-        expect(el.instance.findByTestId('credit-msg')[0].children[0].el).toEqual(message);
+        renderCreditContent(props);
+        const creditMsg = screen.getByTestId('credit-msg');
+        expect(creditMsg).toBeInTheDocument();
+        expect(creditMsg.innerHTML).toEqual(message);
       });
       it('loads CreditRequestForm with passed requestData', () => {
-        expect(el.instance.findByType('CreditRequestForm')[0].props.requestData).toEqual(requestData);
+        const { container } = renderCreditContent(props);
+        const creditForm = container.querySelector('form');
+        expect(creditForm).toBeInTheDocument();
+        expect(creditForm).toHaveAttribute('action', requestData.url);
       });
-      test('disables action button when action.disabled is true', () => {
-        el = shallow(<CreditContent {...props} action={{ ...action, disabled: true }} />);
-        expect(el.instance.findByTestId('action-row-btn')[0].props.disabled).toEqual(true);
+      it('disables action button when action.disabled is true', () => {
+        renderCreditContent({ ...props, action: { ...action, disabled: true } });
+        const button = screen.getByRole('link', { name: action.message });
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveClass('disabled');
+        expect(button).toHaveAttribute('aria-disabled', 'true');
       });
     });
     describe('without action', () => {
-      test('snapshot', () => {
-        el = shallow(<CreditContent {...{ message, requestData }} />);
-      });
-      test('snapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
       it('loads message into credit-msg div', () => {
-        expect(el.instance.findByTestId('credit-msg')[0].children[0].el).toEqual(message);
+        renderCreditContent({ message, requestData });
+        const creditMsg = screen.getByTestId('credit-msg');
+        expect(creditMsg).toBeInTheDocument();
+        expect(creditMsg.innerHTML).toEqual(message);
       });
       it('loads CreditRequestForm with passed requestData', () => {
-        expect(el.instance.findByType('CreditRequestForm')[0].props.requestData).toEqual(requestData);
+        const { container } = renderCreditContent({ message, requestData });
+        const creditForm = container.querySelector('form');
+        expect(creditForm).toBeInTheDocument();
+        expect(creditForm).toHaveAttribute('action', requestData.url);
+      });
+      it('does not render action row button', () => {
+        renderCreditContent({ message, requestData });
+        const button = screen.queryByRole('link', { name: action.message });
+        expect(button).not.toBeInTheDocument();
       });
     });
   });