test: deprecate react-unit-test-utils 8/14

Author: vmnavarro94

src/components/Assessment/__snapshots__/index.test.jsx.snap

@@ -1,38 +1,59 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import Assessment from './index';
-
 import { useAssessmentData } from './useAssessmentData';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 jest.mock('./useAssessmentData', () => ({
   useAssessmentData: jest.fn(),
 }));
 
-jest.mock('./EditableAssessment', () => 'EditableAssessment');
-jest.mock('./ReadonlyAssessment', () => 'ReadonlyAssessment');
+jest.mock('./EditableAssessment', () => () => (
+  <div data-testid="editable-assessment" />
+));
+
+jest.mock('./ReadonlyAssessment', () => () => (
+  <div data-testid="readonly-assessment" />
+));
+
+const renderWithIntl = (component) => render(<IntlProvider locale="en">{component}</IntlProvider>);
 
 describe('<Assessment />', () => {
-  it('renders the ReadonlyAssessment', () => {
-    useAssessmentData.mockReturnValue({ initialized: true, hasSubmitted: true });
-    const wrapper = shallow(<Assessment />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the ReadonlyAssessment when assessment has been submitted', () => {
+    useAssessmentData.mockReturnValue({
+      initialized: true,
+      hasSubmitted: true,
+    });
+    renderWithIntl(<Assessment />);
 
-    expect(wrapper.instance.findByType('ReadonlyAssessment')).toHaveLength(1);
-    expect(wrapper.instance.findByType('EditableAssessment')).toHaveLength(0);
+    expect(screen.getByTestId('readonly-assessment')).toBeInTheDocument();
+    expect(screen.queryByTestId('editable-assessment')).not.toBeInTheDocument();
   });
-  it('renders the EditableAssessment', () => {
-    useAssessmentData.mockReturnValue({ initialized: true, hasSubmitted: false });
-    const wrapper = shallow(<Assessment />);
-    expect(wrapper.snapshot).toMatchSnapshot();
 
-    expect(wrapper.instance.findByType('ReadonlyAssessment')).toHaveLength(0);
-    expect(wrapper.instance.findByType('EditableAssessment')).toHaveLength(1);
+  it('renders the EditableAssessment when assessment has not been submitted', () => {
+    useAssessmentData.mockReturnValue({
+      initialized: true,
+      hasSubmitted: false,
+    });
+    renderWithIntl(<Assessment />);
+
+    expect(screen.getByTestId('editable-assessment')).toBeInTheDocument();
+    expect(screen.queryByTestId('readonly-assessment')).not.toBeInTheDocument();
   });
-  it('renders nothing if not initialized', () => {
+
+  it('renders nothing when assessment data is not initialized', () => {
     useAssessmentData.mockReturnValue({ initialized: false });
-    const wrapper = shallow(<Assessment />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    const { container } = renderWithIntl(<Assessment />);
 
-    expect(wrapper.isEmptyRender()).toBe(true);
+    expect(container).toBeEmptyDOMElement();
   });
 });

src/components/Assessment/index.test.jsx

@@ -57,12 +57,17 @@ describe('useProgressStepData', () => {
     isXblockStep.mockReturnValueOnce(true);
     const result = useProgressStepData(props);
     result.onClick();
-    expect(mockOpenModal).toHaveBeenCalledWith({ view: stepNames.self, title: stepNames.self });
+    expect(mockOpenModal).toHaveBeenCalledWith({
+      view: stepNames.self,
+      title: stepNames.self,
+    });
   });
 
   it('should have href when is not xblock', () => {
     const result = useProgressStepData(props);
-    expect(result.href).toBe(`/${stepRoutes[stepNames.self]}/courseId/xblockId`);
+    expect(result.href).toBe(
+      `/${stepRoutes[stepNames.self]}/courseId/xblockId`,
+    );
   });
 
   it('is complete when step state is done', () => {
@@ -99,12 +104,12 @@ describe('useProgressStepData', () => {
     expect(result.isEnabled).toBe(false);
   });
 
-  it('use effect grade from global state', () => {
+  it('uses effective grade from global state', () => {
     const result = useProgressStepData(props);
     expect(result.myGrade).toBe(8);
   });
 
-  test('for peer step is not enabled when waiting for submissions', () => {
+  it('disables peer step when waiting for submissions', () => {
     useStepInfo.mockReturnValue({
       peer: {
         numberOfReceivedAssessments: 0,
@@ -115,7 +120,7 @@ describe('useProgressStepData', () => {
     expect(result.isEnabled).toBe(false);
   });
 
-  test('for peer step is enabled iif peer is complete and no waiting for submission', () => {
+  it('enables peer step when peer is complete and not waiting for submissions', () => {
     useStepInfo.mockReturnValue({
       peer: {
         numberOfReceivedAssessments: 1,

src/components/ProgressBar/__snapshots__/index.test.jsx.snap

@@ -1,4 +1,6 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import {
   useAssessmentStepOrder,
@@ -12,6 +14,12 @@ import { isXblockStep } from 'utils';
 
 import ProgressBar from './index';
 
+/* eslint-disable react/prop-types */
+
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 jest.mock('hooks/app', () => ({
   useAssessmentStepOrder: jest.fn(),
   useGlobalState: jest.fn(),
@@ -24,45 +32,54 @@ jest.mock('hooks/routing', () => ({
 jest.mock('utils', () => ({
   isXblockStep: jest.fn(),
 }));
-jest.mock('./ProgressStep', () => 'ProgressStep');
+
+jest.mock('./ProgressStep', () => ({ step }) => (
+  <div data-testid="progress-step" data-step={step} />
+));
+
+const renderWithIntl = (component) => render(<IntlProvider locale="en">{component}</IntlProvider>);
 
 describe('<ProgressBar />', () => {
   const props = {
     className: 'test-class',
   };
 
   beforeEach(() => {
-    useIsPageDataLoaded.mockReturnValue(true);
+    jest.clearAllMocks();
+  });
+
+  it('renders null when page data is not loaded', () => {
+    useIsPageDataLoaded.mockReturnValue(false);
     useHasReceivedFinalGrade.mockReturnValue(false);
     useGlobalState.mockReturnValue({ activeStepName: stepNames.submission });
     useAssessmentStepOrder.mockReturnValue([]);
     useViewStep.mockReturnValue(stepNames.submission);
     isXblockStep.mockReturnValue(false);
-  });
 
-  it('renders null when page data is not loaded', () => {
-    useIsPageDataLoaded.mockReturnValueOnce(false);
-    const wrapper = shallow(<ProgressBar {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-
-    expect(wrapper.isEmptyRender()).toBe(true);
-  });
-
-  it('renders at least 2 steps: submission and done', () => {
-    const wrapper = shallow(<ProgressBar {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.findByType('ProgressStep')).toHaveLength(2);
+    renderWithIntl(<ProgressBar {...props} />);
+    expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
   });
 
-  it('renders all steps', () => {
-    isXblockStep.mockReturnValueOnce(true);
-    useAssessmentStepOrder.mockReturnValueOnce([
+  it('renders all steps when xblock step with assessment order', () => {
+    useIsPageDataLoaded.mockReturnValue(true);
+    useHasReceivedFinalGrade.mockReturnValue(false);
+    useGlobalState.mockReturnValue({ activeStepName: stepNames.submission });
+    useAssessmentStepOrder.mockReturnValue([
       stepNames.studentTraining,
       stepNames.self,
       stepNames.peer,
     ]);
-    const wrapper = shallow(<ProgressBar {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.findByType('ProgressStep')).toHaveLength(5);
+    useViewStep.mockReturnValue(stepNames.submission);
+    isXblockStep.mockReturnValue(true);
+
+    renderWithIntl(<ProgressBar {...props} />);
+
+    const steps = screen.getAllByTestId('progress-step');
+    expect(steps).toHaveLength(5);
+    expect(steps[0]).toHaveAttribute('data-step', stepNames.submission);
+    expect(steps[1]).toHaveAttribute('data-step', stepNames.studentTraining);
+    expect(steps[2]).toHaveAttribute('data-step', stepNames.self);
+    expect(steps[3]).toHaveAttribute('data-step', stepNames.peer);
+    expect(steps[4]).toHaveAttribute('data-step', stepNames.done);
   });
 });