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

src/views/AssessmentView/BaseAssessmentView/index.test.jsx

@@ -1,24 +1,121 @@
-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 { useViewStep } from 'hooks/routing';
-
 import { stepNames } from 'constants/index';
-
+import messages from '../messages';
 import BaseAssessmentView from './index';
 
+/* eslint-disable react/prop-types */
+
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 jest.mock('hooks/routing', () => ({
   useViewStep: jest.fn(),
 }));
-jest.mock('components/Assessment', () => 'Assessment');
-jest.mock('components/Instructions', () => 'Instructions');
-jest.mock('components/ModalActions', () => 'ModalActions');
-jest.mock('components/StatusAlert', () => 'StatusAlert');
-jest.mock('components/StepProgressIndicator', () => 'StepProgressIndicator');
+jest.mock('components/Assessment', () => () => <div>Assessment</div>);
+jest.mock('components/Instructions', () => () => <div>Instructions</div>);
+jest.mock('components/ModalActions', () => () => <div>Modal Actions</div>);
+jest.mock('components/StatusAlert', () => () => <div>Status Alert</div>);
+jest.mock('components/StepProgressIndicator', () => (props) => (
+  <div>Step Progress Indicator: {props.step}</div>
+));
+
+const renderWithIntl = (ui) => {
+  const testMessages = {
+    'frontend-app-ora.selfAssessmentView.header':
+      messages[stepNames.self].defaultMessage,
+    'frontend-app-ora.peerAssessmentView.header':
+      messages[stepNames.peer].defaultMessage,
+    'frontend-app-ora.studentTrainingView.header':
+      messages[stepNames.studentTraining].defaultMessage,
+  };
+
+  return render(
+    <IntlProvider locale="en" messages={testMessages}>
+      {ui}
+    </IntlProvider>,
+  );
+};
 
 describe('<BaseAssessmentView />', () => {
-  it('render default', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders with self assessment step', () => {
     useViewStep.mockReturnValue(stepNames.self);
-    const wrapper = shallow(<BaseAssessmentView>children</BaseAssessmentView>);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    renderWithIntl(
+      <BaseAssessmentView>
+        <div>Test children content</div>
+      </BaseAssessmentView>,
+    );
+
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent(
+      'Self grading',
+    );
+    expect(screen.getByText('Status Alert')).toBeInTheDocument();
+    expect(screen.getByText('Instructions')).toBeInTheDocument();
+    expect(screen.getByText('Modal Actions')).toBeInTheDocument();
+    expect(screen.getByText('Assessment')).toBeInTheDocument();
+    expect(
+      screen.getByText('Step Progress Indicator: self'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Test children content')).toBeInTheDocument();
+  });
+
+  it('renders with peer assessment step', () => {
+    useViewStep.mockReturnValue(stepNames.peer);
+    renderWithIntl(
+      <BaseAssessmentView>
+        <div>Peer content</div>
+      </BaseAssessmentView>,
+    );
+
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent(
+      'Grade your peers',
+    );
+    expect(
+      screen.getByText('Step Progress Indicator: peer'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Peer content')).toBeInTheDocument();
+  });
+
+  it('renders with student training step', () => {
+    useViewStep.mockReturnValue(stepNames.studentTraining);
+    renderWithIntl(
+      <BaseAssessmentView>
+        <div>Training content</div>
+      </BaseAssessmentView>,
+    );
+
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent(
+      'Practice grading',
+    );
+    expect(
+      screen.getByText('Step Progress Indicator: studentTraining'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Training content')).toBeInTheDocument();
+  });
+
+  it('renders all required components', () => {
+    useViewStep.mockReturnValue(stepNames.self);
+    renderWithIntl(
+      <BaseAssessmentView>
+        <div>Child component</div>
+      </BaseAssessmentView>,
+    );
+
+    expect(screen.getByText('Status Alert')).toBeInTheDocument();
+    expect(screen.getByText('Instructions')).toBeInTheDocument();
+    expect(screen.getByText('Modal Actions')).toBeInTheDocument();
+    expect(screen.getByText('Assessment')).toBeInTheDocument();
+    expect(
+      screen.getByText('Step Progress Indicator: self'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Child component')).toBeInTheDocument();
   });
 });

src/views/SubmissionView/SubmissionPrompts.test.jsx

@@ -1,88 +1,135 @@
-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 {
-  usePrompts,
-  useSubmissionConfig,
-} from 'hooks/app';
+import { usePrompts, useSubmissionConfig } from 'hooks/app';
 
 import SubmissionPrompts from './SubmissionPrompts';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 jest.mock('hooks/app', () => ({
   usePrompts: jest.fn(),
   useSubmissionConfig: jest.fn(),
 }));
-jest.mock('components/Prompt', () => 'Prompt');
-jest.mock('components/TextResponse', () => 'TextResponse');
-jest.mock('./TextResponseEditor', () => 'TextResponseEditor');
+
+/* eslint-disable react/prop-types */
+jest.mock('components/Prompt', () => ({ prompt }) => (
+  <div>Prompt: {prompt}</div>
+));
+
+jest.mock('components/TextResponse', () => ({ response }) => (
+  <div>Response: {response}</div>
+));
+
+jest.mock('./TextResponseEditor', () => ({ value, onChange, isInValid }) => (
+  <textarea
+    aria-label="Text Response Editor"
+    value={value || ''}
+    onChange={(e) => onChange && onChange(e.target.value)}
+    aria-invalid={isInValid}
+  />
+));
+
+const renderWithIntl = (ui) => render(
+  <IntlProvider locale="en" messages={{}}>
+    {ui}
+  </IntlProvider>,
+);
 
 describe('<SubmissionPrompts />', () => {
-  it('render text response editor when readOnly is false', () => {
+  const mockOnUpdateTextResponse = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockOnUpdateTextResponse.mockImplementation(() => () => {});
+  });
+
+  it('renders text response editor when readOnly is false', () => {
     usePrompts.mockReturnValue(['prompt1', 'prompt2']);
-    useSubmissionConfig.mockReturnValue({ textResponseConfig: { enabled: true } });
+    useSubmissionConfig.mockReturnValue({
+      textResponseConfig: { enabled: true },
+    });
 
-    const wrapper = shallow(
+    renderWithIntl(
       <SubmissionPrompts
         textResponses={['response1', 'response2']}
-        onUpdateTextResponse={jest.fn()}
+        onUpdateTextResponse={mockOnUpdateTextResponse}
         isReadOnly={false}
       />,
     );
 
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.findByType('Prompt').length).toBe(2);
-    expect(wrapper.instance.findByType('TextResponseEditor').length).toBe(2);
-    expect(wrapper.instance.findByType('TextResponse').length).toBe(0);
+    expect(screen.getByText('Prompt: prompt1')).toBeInTheDocument();
+    expect(screen.getByText('Prompt: prompt2')).toBeInTheDocument();
+    expect(screen.getAllByLabelText('Text Response Editor')).toHaveLength(2);
+    expect(screen.queryByText(/^Response:/)).not.toBeInTheDocument();
   });
 
-  it('render text response when readOnly is true', () => {
+  it('renders text response when readOnly is true', () => {
     usePrompts.mockReturnValue(['prompt1', 'prompt2']);
-    useSubmissionConfig.mockReturnValue({ textResponseConfig: { enabled: true } });
+    useSubmissionConfig.mockReturnValue({
+      textResponseConfig: { enabled: true },
+    });
 
-    const wrapper = shallow(
+    renderWithIntl(
       <SubmissionPrompts
         textResponses={['response1', 'response2']}
-        onUpdateTextResponse={jest.fn()}
+        onUpdateTextResponse={mockOnUpdateTextResponse}
         isReadOnly
       />,
     );
 
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.findByType('Prompt').length).toBe(2);
-    expect(wrapper.instance.findByType('TextResponseEditor').length).toBe(0);
-    expect(wrapper.instance.findByType('TextResponse').length).toBe(2);
+    expect(screen.getByText('Prompt: prompt1')).toBeInTheDocument();
+    expect(screen.getByText('Prompt: prompt2')).toBeInTheDocument();
+    expect(screen.getByText('Response: response1')).toBeInTheDocument();
+    expect(screen.getByText('Response: response2')).toBeInTheDocument();
+    expect(
+      screen.queryByLabelText('Text Response Editor'),
+    ).not.toBeInTheDocument();
   });
 
-  it('render empty prompts', () => {
+  it('renders empty prompts', () => {
     usePrompts.mockReturnValue([]);
-    useSubmissionConfig.mockReturnValue({ textResponseConfig: { enabled: true } });
+    useSubmissionConfig.mockReturnValue({
+      textResponseConfig: { enabled: true },
+    });
 
-    const wrapper = shallow(
+    renderWithIntl(
       <SubmissionPrompts
         textResponses={['response1', 'response2']}
-        onUpdateTextResponse={jest.fn()}
+        onUpdateTextResponse={mockOnUpdateTextResponse}
         isReadOnly
       />,
     );
 
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.findByType('Prompt').length).toBe(0);
+    expect(screen.queryByText(/^Prompt:/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/^Response:/)).not.toBeInTheDocument();
+    expect(
+      screen.queryByLabelText('Text Response Editor'),
+    ).not.toBeInTheDocument();
   });
 
-  it('do not render response when textResponseConfig is disabled', () => {
+  it('does not render response when textResponseConfig is disabled', () => {
     usePrompts.mockReturnValue(['prompt1', 'prompt2']);
-    useSubmissionConfig.mockReturnValue({ textResponseConfig: { enabled: false } });
+    useSubmissionConfig.mockReturnValue({
+      textResponseConfig: { enabled: false },
+    });
 
-    const wrapper = shallow(
+    renderWithIntl(
       <SubmissionPrompts
         textResponses={['response1', 'response2']}
-        onUpdateTextResponse={jest.fn()}
+        onUpdateTextResponse={mockOnUpdateTextResponse}
         isReadOnly
       />,
     );
 
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.findByType('Prompt').length).toBe(2);
-    expect(wrapper.instance.findByType('TextResponseEditor').length).toBe(0);
-    expect(wrapper.instance.findByType('TextResponse').length).toBe(0);
+    expect(screen.getByText('Prompt: prompt1')).toBeInTheDocument();
+    expect(screen.getByText('Prompt: prompt2')).toBeInTheDocument();
+    expect(screen.queryByText(/^Response:/)).not.toBeInTheDocument();
+    expect(
+      screen.queryByLabelText('Text Response Editor'),
+    ).not.toBeInTheDocument();
   });
 });