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

Author: vmnavarro94

src/components/Assessment/ReadonlyAssessment/ReadOnlyAssessment.test.jsx

@@ -1,9 +1,36 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import ReadOnlyAssessment from './ReadOnlyAssessment';
 
-jest.mock('./CollapsibleAssessment', () => 'CollapsibleAssessment');
-jest.mock('./AssessmentCriteria', () => 'AssessmentCriteria');
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
+/* eslint-disable react/prop-types */
+jest.mock(
+  './CollapsibleAssessment',
+  () => ({
+    children, stepLabel, stepScore, defaultOpen,
+  }) => (
+    <section aria-label="Collapsible Assessment">
+      <div aria-label="Assessment Properties">
+        stepLabel: {stepLabel || 'none'}, stepScore:{' '}
+        {stepScore ? `${stepScore.earned}/${stepScore.total}` : 'none'},
+        defaultOpen: {defaultOpen?.toString() || 'false'}
+      </div>
+      {children}
+    </section>
+  ),
+);
+
+jest.mock('./AssessmentCriteria', () => ({ stepLabel, ...props }) => (
+  <article aria-label={`Assessment Criteria for ${stepLabel || 'unknown'}`}>
+    AssessmentCriteria - stepLabel: {stepLabel || 'none'}
+    <div aria-label="Criteria Properties">{JSON.stringify(props)}</div>
+  </article>
+));
 
 describe('<ReadOnlyAssessment />', () => {
   const props = {
@@ -15,16 +42,33 @@ describe('<ReadOnlyAssessment />', () => {
       earned: 5,
       total: 10,
     },
+    stepLabel: 'Test Step',
+    defaultOpen: false,
   };
 
-  it('render with assessment', () => {
-    const wrapper = shallow(<ReadOnlyAssessment {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders with single assessment', () => {
+    render(<ReadOnlyAssessment {...props} />);
+
+    expect(screen.getByLabelText('Collapsible Assessment')).toBeInTheDocument();
 
-    expect(wrapper.instance.findByType('AssessmentCriteria').length).toBe(1);
+    const assessmentProps = screen.getByLabelText('Assessment Properties');
+    expect(assessmentProps).toHaveTextContent('stepLabel: Test Step');
+    expect(assessmentProps).toHaveTextContent('stepScore: 5/10');
+    expect(assessmentProps).toHaveTextContent('defaultOpen: false');
+
+    const assessmentCriteria = screen.getAllByLabelText(
+      /Assessment Criteria for/,
+    );
+    expect(assessmentCriteria).toHaveLength(1);
+    expect(assessmentCriteria[0]).toHaveTextContent(
+      'AssessmentCriteria - stepLabel: Test Step',
+    );
+
+    const criteriaProps = screen.getByLabelText('Criteria Properties');
+    expect(criteriaProps).toHaveTextContent('"abc":"def"');
   });
 
-  it('render with assessments', () => {
+  it('renders with multiple assessments', () => {
     const assessments = [
       {
         abc: 'def',
@@ -33,14 +77,43 @@ describe('<ReadOnlyAssessment />', () => {
         ghi: 'jkl',
       },
     ];
-    const wrapper = shallow(<ReadOnlyAssessment {...props} assessments={assessments} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    render(<ReadOnlyAssessment {...props} assessments={assessments} />);
+
+    expect(screen.getByLabelText('Collapsible Assessment')).toBeInTheDocument();
 
-    expect(wrapper.instance.findByType('AssessmentCriteria').length).toBe(2);
+    const assessmentProps = screen.getByLabelText('Assessment Properties');
+    expect(assessmentProps).toHaveTextContent('stepLabel: Test Step');
+    expect(assessmentProps).toHaveTextContent('stepScore: 5/10');
+
+    const assessmentCriteria = screen.getAllByLabelText(
+      /Assessment Criteria for/,
+    );
+    expect(assessmentCriteria).toHaveLength(2);
+
+    expect(screen.getByText('Test Step 1:')).toBeInTheDocument();
+    expect(screen.getByText('Test Step 2:')).toBeInTheDocument();
+
+    const criteriaProps = screen.getAllByLabelText('Criteria Properties');
+    expect(criteriaProps[0]).toHaveTextContent('"abc":"def"');
+    expect(criteriaProps[1]).toHaveTextContent('"ghi":"jkl"');
   });
 
   it('renders without props', () => {
-    const wrapper = shallow(<ReadOnlyAssessment />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    render(<ReadOnlyAssessment />);
+
+    expect(screen.getByLabelText('Collapsible Assessment')).toBeInTheDocument();
+
+    const assessmentProps = screen.getByLabelText('Assessment Properties');
+    expect(assessmentProps).toHaveTextContent('stepLabel: none');
+    expect(assessmentProps).toHaveTextContent('stepScore: none');
+    expect(assessmentProps).toHaveTextContent('defaultOpen: false');
+
+    const assessmentCriteria = screen.getAllByLabelText(
+      /Assessment Criteria for/,
+    );
+    expect(assessmentCriteria).toHaveLength(1);
+    expect(assessmentCriteria[0]).toHaveTextContent(
+      'AssessmentCriteria - stepLabel: none',
+    );
   });
 });

src/components/Assessment/ReadonlyAssessment/__snapshots__/ReadOnlyAssessment.test.jsx.snap

@@ -1,17 +1,68 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
+import { useHasSubmitted, useRefreshPageData } from 'hooks/app';
+import { useSubmittedAssessment } from 'hooks/assessment';
 import ReadOnlyAssessmentContainer from '.';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
+const mockRefreshPageData = jest.fn();
+
 jest.mock('hooks/app', () => ({
   useHasSubmitted: jest.fn(),
-  useRefreshPageData: jest.fn(),
+  useRefreshPageData: jest.fn(() => mockRefreshPageData),
 }));
 jest.mock('hooks/assessment', () => ({
   useSubmittedAssessment: jest.fn(),
 }));
-jest.mock('./ReadOnlyAssessment', () => 'ReadOnlyAssessment');
+
+/* eslint-disable react/prop-types */
+jest.mock(
+  './ReadOnlyAssessment',
+  () => ({
+    assessment, step, stepScore, stepLabel, defaultOpen, ...rest
+  }) => (
+    <div>
+      <h2>ReadOnly Assessment</h2>
+      {assessment && <div data-assessment="true">Assessment Data</div>}
+      {step && <div data-step="true">Step: {step}</div>}
+      {stepScore && (
+      <div data-stepscore="true">
+        Score: {stepScore.earned}/{stepScore.total}
+      </div>
+      )}
+      {stepLabel && <div data-steplabel="true">Label: {stepLabel}</div>}
+      {defaultOpen !== undefined && (
+      <div data-defaultopen="true">
+        Default Open: {defaultOpen.toString()}
+      </div>
+      )}
+      <div aria-label="Props Data">
+        {JSON.stringify({
+          assessment,
+          step,
+          stepScore,
+          stepLabel,
+          defaultOpen,
+          ...rest,
+        })}
+      </div>
+    </div>
+  ),
+);
 
 describe('<ReadOnlyAssessmentContainer />', () => {
+  beforeEach(() => {
+    useHasSubmitted.mockReturnValue(false);
+    useRefreshPageData.mockReturnValue(mockRefreshPageData);
+    useSubmittedAssessment.mockReturnValue(null);
+    mockRefreshPageData.mockClear();
+  });
+
   const props = {
     assessment: {
       abc: 'def',
@@ -29,15 +80,60 @@ describe('<ReadOnlyAssessmentContainer />', () => {
       earned: 5,
       total: 10,
     },
+    stepLabel: 'Test Label',
     defaultOpen: true,
   };
-  it('renders the component', () => {
-    const wrapper = shallow(<ReadOnlyAssessmentContainer {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+
+  it('renders the component with props', () => {
+    render(<ReadOnlyAssessmentContainer {...props} />);
+
+    expect(
+      screen.getByRole('heading', { name: 'ReadOnly Assessment' }),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Assessment Data')).toBeInTheDocument();
+    expect(screen.getByText('Step: Step')).toBeInTheDocument();
+    expect(screen.getByText('Score: 5/10')).toBeInTheDocument();
+    expect(screen.getByText('Label: Test Label')).toBeInTheDocument();
+    expect(screen.getByText('Default Open: true')).toBeInTheDocument();
   });
 
   it('renders without props', () => {
-    const wrapper = shallow(<ReadOnlyAssessmentContainer />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    render(<ReadOnlyAssessmentContainer />);
+
+    expect(
+      screen.getByRole('heading', { name: 'ReadOnly Assessment' }),
+    ).toBeInTheDocument();
+    expect(screen.queryByText('Assessment Data')).not.toBeInTheDocument();
+    expect(screen.queryByText(/Step:/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Score:/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Label:/)).not.toBeInTheDocument();
+  });
+
+  it('passes submitted assessment when user has submitted', () => {
+    const submittedAssessment = { submitted: 'data' };
+    useHasSubmitted.mockReturnValue(true);
+    useSubmittedAssessment.mockReturnValue(submittedAssessment);
+
+    render(<ReadOnlyAssessmentContainer {...props} />);
+
+    expect(screen.getByLabelText('Props Data')).toHaveTextContent(
+      '"submitted":"data"',
+    );
+  });
+
+  it('calls refreshPageData when hasSubmitted is true', () => {
+    useHasSubmitted.mockReturnValue(true);
+
+    render(<ReadOnlyAssessmentContainer {...props} />);
+
+    expect(mockRefreshPageData).toHaveBeenCalled();
+  });
+
+  it('does not call refreshPageData when hasSubmitted is false', () => {
+    useHasSubmitted.mockReturnValue(false);
+
+    render(<ReadOnlyAssessmentContainer {...props} />);
+
+    expect(mockRefreshPageData).not.toHaveBeenCalled();
   });
 });