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

Author: vmnavarro94

src/components/Assessment/EditableAssessment/AssessmentActions.test.jsx

@@ -1,72 +1,137 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
-import { useExitWithoutSavingAction, useSubmitAssessmentAction } from 'hooks/actions';
+import {
+  useExitWithoutSavingAction,
+  useSubmitAssessmentAction,
+} from 'hooks/actions';
 import AssessmentActions from './AssessmentActions';
 
+/* eslint-disable react/prop-types */
+
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 jest.mock('hooks/actions', () => ({
   useExitWithoutSavingAction: jest.fn(),
   useSubmitAssessmentAction: jest.fn(),
 }));
 
-jest.mock('components/ActionButton', () => 'ActionButton');
-jest.mock('components/ConfirmDialog', () => 'ConfirmDialog');
+jest.mock(
+  'components/ActionButton',
+  () => ({
+    children, variant, onClick, ...props
+  }) => (
+    <button
+      type="button"
+      data-testid={`action-button-${variant}`}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+    </button>
+  ),
+);
+
+jest.mock(
+  'components/ConfirmDialog',
+  () => ({ title, onConfirm, ...props }) => (
+    <button
+      type="button"
+      data-testid={`confirm-dialog-${title}`}
+      onClick={onConfirm}
+      onKeyDown={(e) => e.key === 'Enter' && onConfirm()}
+      {...props}
+    />
+  ),
+);
 
-describe('<AssessmentActions />', () => {
+describe('AssessmentActions', () => {
   const mockExitWithoutSavingAction = {
     action: {
       onClick: jest.fn().mockName('useExitWithoutSavingAction.onClick'),
+      children: 'Exit without saving',
     },
     confirmProps: {
       onConfirm: jest.fn().mockName('useExitWithoutSavingAction.onConfirm'),
+      title: 'Exit without saving',
     },
   };
   const mockSubmitAssessmentAction = {
     action: {
       onClick: jest.fn().mockName('useSubmitAssessmentAction.onClick'),
+      children: 'Submit assessment',
     },
     confirmProps: {
       onConfirm: jest.fn().mockName('useSubmitAssessmentAction.onConfirm'),
+      title: 'Submit assessment',
     },
   };
 
   beforeEach(() => {
+    jest.clearAllMocks();
     useExitWithoutSavingAction.mockReturnValue(mockExitWithoutSavingAction);
     useSubmitAssessmentAction.mockReturnValue(mockSubmitAssessmentAction);
   });
 
-  it('render default', () => {
-    const wrapper = shallow(<AssessmentActions />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders both action buttons and confirm dialogs', () => {
+    render(<AssessmentActions />);
 
-    expect(wrapper.instance.findByType('ActionButton')).toHaveLength(2);
-    expect(wrapper.instance.findByType('ConfirmDialog')).toHaveLength(2);
+    expect(
+      screen.getByTestId('action-button-outline-primary'),
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('action-button-primary')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('confirm-dialog-Exit without saving'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId('confirm-dialog-Submit assessment'),
+    ).toBeInTheDocument();
   });
 
-  it('render without submitConfirmDialog', () => {
+  it('renders without submit confirm dialog when confirmProps is null', () => {
     useSubmitAssessmentAction.mockReturnValueOnce({
       action: mockSubmitAssessmentAction.action,
       confirmProps: null,
     });
-    const wrapper = shallow(<AssessmentActions />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    render(<AssessmentActions />);
 
-    expect(wrapper.instance.findByType('ActionButton')).toHaveLength(2);
-    expect(wrapper.instance.findByType('ConfirmDialog')).toHaveLength(1);
+    expect(
+      screen.getByTestId('action-button-outline-primary'),
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('action-button-primary')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('confirm-dialog-Exit without saving'),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByTestId('confirm-dialog-Submit assessment'),
+    ).not.toBeInTheDocument();
   });
 
-  it('has correct mock value', () => {
-    const wrapper = shallow(<AssessmentActions />);
+  it('calls the correct handlers when buttons and dialogs are clicked', () => {
+    render(<AssessmentActions />);
 
-    const exitButton = wrapper.instance.findByType('ActionButton')[0];
-    expect(exitButton.props).toMatchObject(mockExitWithoutSavingAction.action);
+    const exitButton = screen.getByTestId('action-button-outline-primary');
+    expect(exitButton).toHaveTextContent('Exit without saving');
+    fireEvent.click(exitButton);
+    expect(mockExitWithoutSavingAction.action.onClick).toHaveBeenCalled();
 
-    const exitConfirmDialog = wrapper.instance.findByType('ConfirmDialog')[0];
-    expect(exitConfirmDialog.props).toMatchObject(mockExitWithoutSavingAction.confirmProps);
+    const submitButton = screen.getByTestId('action-button-primary');
+    expect(submitButton).toHaveTextContent('Submit assessment');
+    fireEvent.click(submitButton);
+    expect(mockSubmitAssessmentAction.action.onClick).toHaveBeenCalled();
 
-    const submitButton = wrapper.instance.findByType('ActionButton')[1];
-    expect(submitButton.props).toMatchObject(mockSubmitAssessmentAction.action);
+    const exitDialog = screen.getByTestId('confirm-dialog-Exit without saving');
+    fireEvent.click(exitDialog);
+    expect(
+      mockExitWithoutSavingAction.confirmProps.onConfirm,
+    ).toHaveBeenCalled();
 
-    const submitConfirmDialog = wrapper.instance.findByType('ConfirmDialog')[1];
-    expect(submitConfirmDialog.props).toMatchObject(mockSubmitAssessmentAction.confirmProps);
+    const submitDialog = screen.getByTestId('confirm-dialog-Submit assessment');
+    fireEvent.click(submitDialog);
+    expect(
+      mockSubmitAssessmentAction.confirmProps.onConfirm,
+    ).toHaveBeenCalled();
   });
 });

src/components/Assessment/EditableAssessment/__snapshots__/AssessmentActions.test.jsx.snap

@@ -1,24 +1,64 @@
-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 GradedCriterion from './GradedCriterion';
 
-describe('<GradedCriterion />', () => {
-  const props = {
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
+const renderComponent = (props = {}) => render(
+  <IntlProvider
+    messages={{
+      'frontend-app-ora.RadioCriterion.optionPoints': '{points} points',
+    }}
+    locale="en"
+  >
+    <GradedCriterion {...props} />
+  </IntlProvider>,
+);
+
+describe('GradedCriterion', () => {
+  const defaultProps = {
     selectedOption: {
       name: 'option1',
       label: 'Option 1',
-      points: 1,
+      points: 5,
     },
-    feedbackValue: 'Feedback',
+    feedbackValue: 'Feedback text',
   };
 
-  it('renders correctly', () => {
-    const wrapper = shallow(<GradedCriterion {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('displays the option label and points', () => {
+    renderComponent(defaultProps);
+
+    expect(screen.getByText('Option 1')).toBeInTheDocument();
+    expect(screen.getByText('5 points')).toBeInTheDocument();
+  });
+
+  it('displays the option name if label is not provided', () => {
+    const props = {
+      selectedOption: {
+        name: 'option1',
+        points: 5,
+      },
+    };
+    renderComponent(props);
+
+    expect(screen.getByText('option1')).toBeInTheDocument();
+    expect(screen.getByText('5 points')).toBeInTheDocument();
+  });
+
+  it('displays feedback when provided', () => {
+    renderComponent(defaultProps);
+    expect(screen.getByText('Feedback text')).toBeInTheDocument();
   });
 
-  it('renders correctly with no feedback', () => {
-    const wrapper = shallow(<GradedCriterion selectedOption={props.selectedOption} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('does not display feedback when not provided', () => {
+    const props = {
+      selectedOption: defaultProps.selectedOption,
+    };
+    renderComponent(props);
+    expect(screen.queryByText('Feedback text')).not.toBeInTheDocument();
   });
 });