test: deprecate react-unit-test-utils part-3 (#430)

Author: vmnavarro94

src/components/ConfirmModal.test.jsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { ConfirmModal } from './ConfirmModal';
 
 jest.unmock('@openedx/paragon');
@@ -14,12 +14,30 @@ describe('ConfirmModal', () => {
     onCancel: jest.fn().mockName('this.props.onCancel'),
     onConfirm: jest.fn().mockName('this.props.onConfirm'),
   };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('should not render content when modal is closed', () => {
     const { queryByText } = render(<ConfirmModal {...props} />);
     expect(queryByText(props.content)).toBeNull();
   });
+
   it('should display content when modal is open', () => {
     const { getByText } = render(<ConfirmModal {...props} isOpen />);
     expect(getByText(props.content)).toBeInTheDocument();
   });
+
+  it('should call onCancel when cancel button is clicked', () => {
+    render(<ConfirmModal {...props} isOpen />);
+    fireEvent.click(screen.getByText(props.cancelText));
+    expect(props.onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call onConfirm when confirm button is clicked', () => {
+    render(<ConfirmModal {...props} isOpen />);
+    fireEvent.click(screen.getByText(props.confirmText));
+    expect(props.onConfirm).toHaveBeenCalledTimes(1);
+  });
 });

src/components/FilePreview/BaseRenderers/PDFRenderer.test.jsx

@@ -1,20 +1,29 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { Document, Page } from 'react-pdf';
+import { render } from '@testing-library/react';
+import PropTypes from 'prop-types';
 import PDFRenderer from './PDFRenderer';
-
 import * as hooks from './pdfHooks';
 
 jest.mock('react-pdf', () => ({
   pdfjs: { GlobalWorkerOptions: {} },
-  Document: () => 'Document',
-  Page: () => 'Page',
+  Document: jest.fn(),
+  Page: jest.fn(),
 }));
 
+Document.mockImplementation((props) => <div data-testid="pdf-document">{props.children}</div>);
+Document.propTypes = {
+  children: PropTypes.node,
+};
+
+Page.mockImplementation(() => <div data-testid="pdf-page">Page Content</div>);
+
 jest.mock('./pdfHooks', () => ({
   rendererHooks: jest.fn(),
 }));
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
 describe('PDF Renderer Component', () => {
   const props = {
     url: 'some_url.pdf',
@@ -33,25 +42,45 @@ describe('PDF Renderer Component', () => {
     onNextPageButtonClick: jest.fn().mockName('hooks.onNextPageButtonClick'),
     onPrevPageButtonClick: jest.fn().mockName('hooks.onPrevPageButtonClick'),
     hasNext: true,
-    hasPref: false,
+    hasPrev: false,
   };
 
   beforeEach(() => {
     jest.clearAllMocks();
   });
-  describe('snapshots', () => {
-    test('first page, prev is disabled', () => {
+
+  describe('rendering', () => {
+    it('should render the PDF document with navigation controls', () => {
       hooks.rendererHooks.mockReturnValue(hookProps);
-      expect(shallow(<PDFRenderer {...props} />).snapshot).toMatchSnapshot();
+      const { getByTestId, getAllByText, container } = render(<PDFRenderer {...props} />);
+      expect(getByTestId('pdf-document')).toBeInTheDocument();
+      expect(getByTestId('pdf-page')).toBeInTheDocument();
+      expect(container.querySelector('input[type="number"]')).toBeInTheDocument();
+      expect(getAllByText(/Page/).length).toBeGreaterThan(0);
+      expect(getAllByText(`of ${hookProps.numPages}`).length).toBeGreaterThan(0);
+    });
+
+    it('should have disabled previous button when on the first page', () => {
+      hooks.rendererHooks.mockReturnValue({
+        ...hookProps,
+        hasPrev: false,
+      });
+
+      const { container } = render(<PDFRenderer {...props} />);
+      const prevButton = container.querySelector('button[aria-label="previous pdf page"]');
+      expect(prevButton).toBeDisabled();
     });
-    test('on last page, next is disabled', () => {
+
+    it('should have disabled next button when on the last page', () => {
       hooks.rendererHooks.mockReturnValue({
         ...hookProps,
-        pageNumber: hookProps.numPages,
         hasNext: false,
         hasPrev: true,
       });
-      expect(shallow(<PDFRenderer {...props} />).snapshot).toMatchSnapshot();
+
+      const { container } = render(<PDFRenderer {...props} />);
+      const nextButton = container.querySelector('button[aria-label="next pdf page"]');
+      expect(nextButton).toBeDisabled();
     });
   });
 });

src/components/FilePreview/BaseRenderers/TXTRenderer.test.jsx

@@ -1,23 +1,41 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render } from '@testing-library/react';
 import TXTRenderer from './TXTRenderer';
 
 jest.mock('./textHooks', () => {
-  const content = 'test-content';
+  const mockRendererHooks = jest.fn().mockReturnValue({ content: 'test-content' });
   return {
-    content,
-    rendererHooks: (args) => ({ content, rendererHooks: args }),
+    rendererHooks: mockRendererHooks,
   };
 });
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
+const textHooks = require('./textHooks');
+
 describe('TXT Renderer Component', () => {
   const props = {
     url: 'some_url.txt',
     onError: jest.fn().mockName('this.props.onError'),
     onSuccess: jest.fn().mockName('this.props.onSuccess'),
   };
-  test('snapshot', () => {
-    expect(shallow(<TXTRenderer {...props} />).snapshot).toMatchSnapshot();
+
+  beforeEach(() => {
+    textHooks.rendererHooks.mockClear();
+  });
+
+  it('renders the text content in a pre element', () => {
+    const { getByText, container } = render(<TXTRenderer {...props} />);
+    expect(getByText('test-content')).toBeInTheDocument();
+    expect(container.querySelector('pre')).toHaveClass('txt-renderer');
+  });
+
+  it('passes the correct props to rendererHooks', () => {
+    render(<TXTRenderer {...props} />);
+    expect(textHooks.rendererHooks).toHaveBeenCalledWith({
+      url: props.url,
+      onError: props.onError,
+      onSuccess: props.onSuccess,
+    });
   });
 });

src/components/FilePreview/BaseRenderers/__snapshots__/PDFRenderer.test.jsx.snap

@@ -1,25 +1,48 @@
-import React from 'react';
-import { getConfig } from '@edx/frontend-platform';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render } from '@testing-library/react';
+import { Helmet } from 'react-helmet';
 import Head from '.';
 
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  useIntl: () => ({
+    formatMessage: (message, values) => {
+      if (message.defaultMessage && values) {
+        return message.defaultMessage.replace('{siteName}', values.siteName);
+      }
+      return message.defaultMessage || message.id;
+    },
+  }),
+  defineMessages: (messages) => messages,
+}));
+
 jest.mock('react-helmet', () => ({
-  Helmet: 'Helmet',
+  Helmet: jest.fn(),
 }));
 
+Helmet.mockImplementation(({ children }) => <div data-testid="helmet-mock">{children}</div>);
+
 jest.mock('@edx/frontend-platform', () => ({
-  getConfig: () => ({
+  getConfig: jest.fn().mockReturnValue({
     SITE_NAME: 'site-name',
     FAVICON_URL: 'favicon-url',
   }),
 }));
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
 describe('Head', () => {
-  it('snapshot', () => {
-    const el = shallow(<Head />);
-    expect(el.snapshot).toMatchSnapshot();
+  it('should render page title with site name from config', () => {
+    const { container } = render(<Head />);
+    const titleElement = container.querySelector('title');
+    expect(titleElement).toBeInTheDocument();
+    expect(titleElement.textContent).toContain('ORA staff grading | site-name');
+  });
 
-    expect(el.instance.findByType('title')[0].el.children[0]).toContain(getConfig().SITE_NAME);
-    expect(el.instance.findByType('link')[0].props.href).toEqual(getConfig().FAVICON_URL);
+  it('should render favicon link with URL from config', () => {
+    const { container } = render(<Head />);
+    const faviconLink = container.querySelector('link[rel="shortcut icon"]');
+    expect(faviconLink).toBeInTheDocument();
+    expect(faviconLink.getAttribute('href')).toEqual('favicon-url');
+    expect(faviconLink.getAttribute('type')).toEqual('image/x-icon');
   });
 });