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

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

@@ -1,13 +1,71 @@
-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 { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { useCriteriaConfig } from 'hooks/assessment';
 import AssessmentCriteria from './AssessmentCriteria';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
+jest.mock('./Feedback', () => ({
+  __esModule: true,
+  default: ({
+    criterionName,
+    selectedOption,
+    selectedPoints,
+    commentBody,
+    commentHeader,
+  }) => (
+    <div>
+      <h5>{criterionName}</h5>
+      {selectedOption && (
+        <p>
+          {selectedOption}: {selectedPoints} Points
+        </p>
+      )}
+      {commentHeader && <div>{commentHeader}</div>}
+      {commentBody && <div>{commentBody}</div>}
+    </div>
+  ),
+}));
+
 jest.mock('hooks/assessment', () => ({
   useCriteriaConfig: jest.fn(),
 }));
 
+const renderWithIntl = (component) => render(
+  <IntlProvider locale="en" messages={{}}>
+    {component}
+  </IntlProvider>,
+);
+
 describe('<AssessmentCriteria />', () => {
+  const mockCriteriaConfig = [
+    {
+      name: 'Criterion Name',
+      description: 'Criterion Description',
+      options: {
+        1: {
+          label: 'Selected Option 1',
+          points: 5,
+        },
+      },
+    },
+    {
+      name: 'Criterion Name 2',
+      description: 'Criterion Description 2',
+      options: {
+        2: {
+          label: 'Selected Option 2',
+          points: 10,
+        },
+      },
+    },
+  ];
+
   const props = {
     criteria: [
       {
@@ -23,41 +81,102 @@ describe('<AssessmentCriteria />', () => {
     stepLabel: 'Step Label',
   };
 
-  it('renders the component', () => {
-    useCriteriaConfig.mockReturnValue([
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders criteria feedback components with correct data', () => {
+    useCriteriaConfig.mockReturnValue(mockCriteriaConfig);
+
+    renderWithIntl(<AssessmentCriteria {...props} />);
+
+    expect(
+      screen.getByRole('heading', { name: 'Criterion Name' }),
+    ).toBeTruthy();
+    expect(screen.getByText('Selected Option 1: 5 Points')).toBeTruthy();
+    expect(screen.getByText('Feedback 1')).toBeInTheDocument();
+
+    expect(
+      screen.getByRole('heading', { name: 'Criterion Name 2' }),
+    ).toBeTruthy();
+    expect(screen.getByText('Selected Option 2: 10 Points')).toBeTruthy();
+    expect(screen.getByText('Feedback 2')).toBeInTheDocument();
+
+    expect(
+      screen.getByRole('heading', { name: 'Overall feedback' }),
+    ).toBeTruthy();
+    expect(screen.getByText('Overall Feedback')).toBeInTheDocument();
+  });
+
+  it('renders without overall feedback when not provided', () => {
+    useCriteriaConfig.mockReturnValue(mockCriteriaConfig);
+
+    const propsWithoutOverallFeedback = {
+      ...props,
+      overallFeedback: null,
+    };
+
+    renderWithIntl(<AssessmentCriteria {...propsWithoutOverallFeedback} />);
+
+    expect(
+      screen.queryByRole('heading', { name: 'Overall feedback' }),
+    ).toBeNull();
+  });
+
+  it('renders empty when no criteria config is provided', () => {
+    useCriteriaConfig.mockReturnValue([]);
+
+    renderWithIntl(<AssessmentCriteria criteria={[]} />);
+
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+  });
+
+  it('handles missing selected options gracefully', () => {
+    const configWithMissingOptions = [
       {
-        name: 'Criterion Name',
-        description: 'Criterion Description',
-        options: {
-          1: {
-            label: 'Selected Option 1',
-            points: 5,
-          },
-        },
+        name: 'Criterion With Missing Option',
+        description: 'Description',
+        options: {},
       },
-      {
-        name: 'Criterion Name 2',
-        description: 'Criterion Description 2',
-        options: {
-          2: {
-            label: 'Selected Option 2',
-            points: 10,
-          },
+    ];
+
+    useCriteriaConfig.mockReturnValue(configWithMissingOptions);
+
+    const propsWithMissingOption = {
+      criteria: [
+        {
+          selectedOption: 999,
+          feedback: 'Some feedback',
         },
-      },
-    ]);
-    const wrapper = shallow(<AssessmentCriteria {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+      ],
+    };
+
+    renderWithIntl(<AssessmentCriteria {...propsWithMissingOption} />);
+
+    expect(
+      screen.getByRole('heading', { name: 'Criterion With Missing Option' }),
+    ).toBeTruthy();
+
+    expect(screen.getByText('Some feedback')).toBeInTheDocument();
 
-    // one for each criteria and one for overall feedback
-    expect(wrapper.instance.findByType('Feedback').length).toBe(3);
+    expect(screen.queryByText(/Points/)).toBeNull();
   });
 
-  it('renders without props', () => {
-    useCriteriaConfig.mockReturnValue([]);
-    const wrapper = shallow(<AssessmentCriteria criteria={[]} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('passes correct step label to comment headers', () => {
+    useCriteriaConfig.mockReturnValue([mockCriteriaConfig[0]]);
+
+    const propsWithStepLabel = {
+      criteria: [
+        {
+          selectedOption: 1,
+          feedback: 'Test feedback',
+        },
+      ],
+      stepLabel: 'Self Assessment',
+    };
+
+    renderWithIntl(<AssessmentCriteria {...propsWithStepLabel} />);
 
-    expect(wrapper.instance.findByType('Feedback').length).toBe(0);
+    expect(screen.getByText('Self Assessment comments')).toBeInTheDocument();
   });
 });

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

@@ -1,7 +1,26 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import CollapsibleAssessment from './CollapsibleAssessment';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
+const messages = {
+  'frontend-app-ora.grade': '{stepLabel} grade:',
+  'ora-collapsible-comment.unweightedGrade': '{stepLabel} grade',
+  'frontend-app-ora.gradePoints': '{earned} / {possible}',
+  'ora-collapsible-comment.submittedAssessment': 'Submitted assessment',
+};
+
+const renderWithIntl = (component) => render(
+  <IntlProvider locale="en" messages={messages}>
+    {component}
+  </IntlProvider>,
+);
+
 describe('<CollapsibleAssessment />', () => {
   const defaultProps = {
     stepScore: {
@@ -12,25 +31,45 @@ describe('<CollapsibleAssessment />', () => {
     defaultOpen: true,
   };
 
-  const renderComponent = (props = {}) => shallow(
-    <CollapsibleAssessment {...props}>
-      <div>Children</div>
-    </CollapsibleAssessment>,
-  );
+  it('renders with step label and score', () => {
+    renderWithIntl(
+      <CollapsibleAssessment {...defaultProps}>
+        <div>Children</div>
+      </CollapsibleAssessment>,
+    );
+
+    expect(screen.getByRole('button')).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /Step Label grade/ })).toBeTruthy();
+    expect(screen.getByText(/5.*\/.*10/)).toBeTruthy();
+    expect(screen.getByText('Children')).toBeTruthy();
+  });
 
-  it('renders the component', () => {
-    const wrapper = renderComponent(defaultProps);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders with minimal props', () => {
+    renderWithIntl(
+      <CollapsibleAssessment>
+        <div>Children</div>
+      </CollapsibleAssessment>,
+    );
 
-    expect(wrapper.instance.findByType('Collapsible')[0].props.open).toBe(true);
+    expect(screen.getByRole('button')).toBeTruthy();
+    expect(screen.getByRole('heading', { name: 'Submitted assessment' })).toBeTruthy();
+    expect(screen.queryByText('Children')).toBeNull();
   });
 
-  it('renders without props', () => {
-    const wrapper = renderComponent();
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders with step label but no score', () => {
+    const propsWithoutScore = {
+      stepLabel: 'Peer Assessment',
+      defaultOpen: true,
+    };
 
-    expect(wrapper.instance.findByType('Collapsible')[0].props.open).toBe(
-      false,
+    renderWithIntl(
+      <CollapsibleAssessment {...propsWithoutScore}>
+        <div>Test content</div>
+      </CollapsibleAssessment>,
     );
+
+    expect(screen.getByRole('heading', { name: 'Peer Assessment grade' })).toBeTruthy();
+    expect(screen.queryByText(/\d+ \/ \d+/)).toBeNull();
+    expect(screen.getByText('Test content')).toBeTruthy();
   });
 });