test: deprecate react-unit-test-utils 1/14 (#336)

Author: vmnavarro94

src/components/ActionButton.test.jsx

@@ -1,28 +1,40 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import ActionButton from './ActionButton';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 describe('<ActionButton />', () => {
   const props = {
     state: 'arbitraryState',
   };
 
-  it('render empty when no onClick or href', () => {
-    const wrapper = shallow(<ActionButton {...props} />);
-    expect(wrapper.isEmptyRender()).toBe(true);
+  it('renders nothing when no onClick or href is provided', () => {
+    const { container } = render(<ActionButton {...props} />);
+    expect(container.firstChild).toBeNull();
   });
 
-  it('render StatefulButton when state is provided', () => {
-    const wrapper = shallow(<ActionButton href="some-href" state="loading" />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.findByType('StatefulButton')).toHaveLength(1);
-    expect(wrapper.instance.findByType('Button')).toHaveLength(0);
+  it('renders StatefulButton when state is provided', () => {
+    const labels = {
+      default: 'Default',
+      loading: 'Loading...',
+    };
+    render(
+      <ActionButton href="some-href" state="loading" labels={labels}>
+        Button Text
+      </ActionButton>,
+    );
+    expect(screen.getByRole('link')).toBeInTheDocument();
+    expect(screen.getByRole('link')).toHaveClass('btn');
   });
 
-  it('render Button when state is not provided', () => {
-    const wrapper = shallow(<ActionButton onClick={jest.fn().mockName('onClick')} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.findByType('StatefulButton')).toHaveLength(0);
-    expect(wrapper.instance.findByType('Button')).toHaveLength(1);
+  it('renders Button when state is not provided', () => {
+    const onClick = jest.fn();
+    render(<ActionButton onClick={onClick}>Button Text</ActionButton>);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveClass('btn');
   });
 });

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

@@ -1,19 +1,57 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import ConfirmDialog from './index';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 describe('<ConfirmDialog />', () => {
   const props = {
-    title: 'Title',
-    description: 'Description',
+    title: 'Test Title',
+    description: 'Test Description',
     action: {
-      onClick: jest.fn().mockName('onClick'),
+      onClick: jest.fn(),
     },
     isOpen: true,
-    close: jest.fn().mockName('close'),
+    close: jest.fn(),
   };
-  it('renders correctly', () => {
-    const wrapper = shallow(<ConfirmDialog {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+
+  const renderWithIntl = (component) => render(<IntlProvider locale="en">{component}</IntlProvider>);
+
+  it('renders title and description when isOpen is true', () => {
+    renderWithIntl(<ConfirmDialog {...props} />);
+
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+    expect(screen.getByText('Test Description')).toBeInTheDocument();
+  });
+
+  it('renders action buttons', () => {
+    renderWithIntl(<ConfirmDialog {...props} />);
+
+    expect(
+      screen.getByRole('button', { name: /go back/i }),
+    ).toBeInTheDocument();
+    expect(screen.getAllByRole('button')).toHaveLength(2);
+  });
+
+  it('calls close function when go back button is clicked', async () => {
+    const user = userEvent.setup();
+    renderWithIntl(<ConfirmDialog {...props} />);
+
+    const goBackButton = screen.getByRole('button', { name: /go back/i });
+    await user.click(goBackButton);
+
+    expect(props.close).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render when isOpen is false', () => {
+    renderWithIntl(<ConfirmDialog {...props} isOpen={false} />);
+
+    expect(screen.queryByText('Test Title')).not.toBeInTheDocument();
+    expect(screen.queryByText('Test Description')).not.toBeInTheDocument();
   });
 });

src/components/ConfirmDialog/index.test.jsx

@@ -1,53 +1,119 @@
-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 { useORAConfigData } from 'hooks/app';
 import { useCloseModalAction } from 'hooks/actions';
 import ModalContainer from './ModalContainer';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
+jest.mock('@edx/frontend-lib-special-exams', () => {
+  // eslint-disable-next-line react/prop-types
+  const OuterExamTimer = ({ courseId }) => (
+    <div data-testid="outer-exam-timer">ExamTimer for {courseId}</div>
+  );
+  return { OuterExamTimer };
+});
+
+jest.mock('data/redux', () => ({
+  selectors: {
+    specialExams: {
+      activeExam: jest.fn(() => null),
+    },
+  },
+}));
+
 jest.mock('hooks/app', () => ({
   useORAConfigData: jest.fn(),
+  useIsPageDataLoaded: jest.fn(),
+  useHasReceivedFinalGrade: jest.fn(),
+  useGlobalState: jest.fn(),
+  useAssessmentStepOrder: jest.fn(),
+  useStepInfo: jest.fn(),
 }));
 jest.mock('hooks/actions', () => ({
   useCloseModalAction: jest.fn(),
 }));
-jest.mock('components/ConfirmDialog', () => 'ConfirmDialog');
-jest.mock('components/ProgressBar', () => 'ProgressBar');
-jest.mock('react-router', () => ({
-  useParams: jest.fn().mockReturnValue({ courseId: 'courseId' }),
+jest.mock('hooks/routing', () => ({
+  useViewStep: jest.fn(),
 }));
-jest.mock('@edx/frontend-lib-special-exams', () => ({
-  OuterExamTimer: () => 'OuterExamTimer',
+jest.mock('hooks/modal', () => ({
+  useOpenModal: jest.fn(),
 }));
+jest.mock('react-router', () => ({
+  useParams: jest.fn().mockReturnValue({ courseId: 'test-course-id' }),
+}));
+
+const {
+  useIsPageDataLoaded,
+  useHasReceivedFinalGrade,
+  useGlobalState,
+  useAssessmentStepOrder,
+  useStepInfo,
+} = require('hooks/app');
+const { useViewStep } = require('hooks/routing');
+const { useOpenModal } = require('hooks/modal');
 
 describe('<ModalContainer />', () => {
-  useORAConfigData.mockReturnValue({ title: 'title' });
-  useCloseModalAction.mockReturnValue({
-    confirmProps: {
-      abc: 'def',
-    },
-    action: { onClick: jest.fn().mockName('closeModalAction') },
+  beforeEach(() => {
+    useORAConfigData.mockReturnValue({ title: 'Test Title' });
+    useIsPageDataLoaded.mockReturnValue(true);
+    useHasReceivedFinalGrade.mockReturnValue(false);
+    useGlobalState.mockReturnValue({ activeStepName: 'submission' });
+    useAssessmentStepOrder.mockReturnValue(['peer', 'self']);
+    useViewStep.mockReturnValue('submission');
+    useStepInfo.mockReturnValue({
+      peer: { numberOfReceivedAssessments: 0, isWaitingForSubmissions: false },
+    });
+    useOpenModal.mockReturnValue(jest.fn());
+    useCloseModalAction.mockReturnValue({
+      confirmProps: {
+        isOpen: true,
+        title: 'Confirm Dialog',
+        description: 'Are you sure?',
+        close: jest.fn(),
+      },
+      action: { onClick: jest.fn() },
+    });
   });
-  const renderComponent = () => shallow(
-    <ModalContainer>
-      <div>children</div>
-    </ModalContainer>,
-  );
 
-  it('render default', () => {
-    const wrapper = renderComponent();
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders with ConfirmDialog when confirmProps are provided', () => {
+    render(
+      <IntlProvider locale="en">
+        <ModalContainer>
+          <div>Test children</div>
+        </ModalContainer>
+      </IntlProvider>,
+    );
 
-    expect(wrapper.instance.findByType('ConfirmDialog')).toHaveLength(1);
+    expect(screen.getByText('Confirm Dialog')).toBeInTheDocument();
+    expect(screen.getByText('Are you sure?')).toBeInTheDocument();
+
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+    expect(screen.getByText('Test children')).toBeInTheDocument();
+    expect(screen.getByTestId('outer-exam-timer')).toBeInTheDocument();
   });
 
-  it('render without confirmProps', () => {
+  it('renders without ConfirmDialog when confirmProps is null', () => {
     useCloseModalAction.mockReturnValue({
       confirmProps: null,
-      action: { onClick: jest.fn().mockName('closeModalAction') },
+      action: { onClick: jest.fn() },
     });
-    const wrapper = renderComponent();
-    expect(wrapper.snapshot).toMatchSnapshot();
+    render(
+      <IntlProvider locale="en">
+        <ModalContainer>
+          <div>Test children</div>
+        </ModalContainer>
+      </IntlProvider>,
+    );
+
+    expect(screen.queryByText('Confirm Dialog')).not.toBeInTheDocument();
+    expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
 
-    expect(wrapper.instance.findByType('ConfirmDialog')).toHaveLength(0);
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+    expect(screen.getByText('Test children')).toBeInTheDocument();
+    expect(screen.getByTestId('outer-exam-timer')).toBeInTheDocument();
   });
 });

src/components/ModalContainer.test.jsx

@@ -1,53 +1,50 @@
 import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
-import { shallow } from '@edx/react-unit-test-utils';
-import { AuthenticatedPageRoute } from '@edx/frontend-platform/react';
-import { SkeletonTheme } from '@openedx/paragon';
+import PageRoute from './PageRoute';
 
-import AppContainer from 'components/AppContainer';
-import ModalContainer from 'components/ModalContainer';
-import PageRoute, { skeletonTheme } from './PageRoute';
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
 
 jest.mock('react-router-dom', () => ({ Route: 'Route' }));
 jest.mock('@edx/frontend-platform/react', () => ({
-  AuthenticatedPageRoute: 'AuthenticatedPageRoute',
+  // eslint-disable-next-line react/prop-types
+  AuthenticatedPageRoute: ({ children }) => (
+    <div data-testid="authenticated-page-route">{children}</div>
+  ),
 }));
-jest.mock('components/AppContainer', () => 'AppContainer');
-jest.mock('components/ModalContainer', () => 'ModalContainer');
+// eslint-disable-next-line react/prop-types
+jest.mock('components/AppContainer', () => ({ children }) => (
+  <div data-testid="app-container">{children}</div>
+));
+// eslint-disable-next-line react/prop-types
+jest.mock('components/ModalContainer', () => ({ children }) => (
+  <div data-testid="modal-container">{children}</div>
+));
 
 const props = {
   route: 'test-route',
-  children: <b>test children</b>,
+  children: <div data-testid="test-children">test children</div>,
 };
+
 describe('PageRoute component', () => {
-  test('modal snapshot', () => {
-    const el = shallow(<PageRoute {...props} isModal />);
-    expect(el.snapshot).toMatchSnapshot();
-    const expectedElement = shallow(
-      <AuthenticatedPageRoute>
-        <AppContainer>
-          <SkeletonTheme {...skeletonTheme}>
-            <ModalContainer>
-              {props.children}
-            </ModalContainer>
-          </SkeletonTheme>
-        </AppContainer>
-      </AuthenticatedPageRoute>,
-    );
-    expect(el.instance.matches(expectedElement)).toEqual(true);
+  it('renders with ModalContainer when isModal is true', () => {
+    render(<PageRoute {...props} isModal />);
+
+    expect(screen.getByTestId('authenticated-page-route')).toBeInTheDocument();
+    expect(screen.getByTestId('app-container')).toBeInTheDocument();
+    expect(screen.getByTestId('modal-container')).toBeInTheDocument();
+    expect(screen.getByTestId('test-children')).toBeInTheDocument();
   });
-  test('non-modal snapshot', () => {
-    const el = shallow(<PageRoute {...props} />);
-    expect(el.snapshot).toMatchSnapshot();
-    const expectedElement = shallow(
-      <AuthenticatedPageRoute>
-        <AppContainer>
-          <SkeletonTheme {...skeletonTheme}>
-            {props.children}
-          </SkeletonTheme>
-        </AppContainer>
-      </AuthenticatedPageRoute>,
-    );
-    expect(el.instance.matches(expectedElement)).toEqual(true);
+
+  it('renders without ModalContainer when isModal is false', () => {
+    render(<PageRoute {...props} />);
+
+    expect(screen.getByTestId('authenticated-page-route')).toBeInTheDocument();
+    expect(screen.getByTestId('app-container')).toBeInTheDocument();
+    expect(screen.queryByTestId('modal-container')).not.toBeInTheDocument();
+    expect(screen.getByTestId('test-children')).toBeInTheDocument();
   });
 });