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

src/components/CriterionContainer/ReviewCriterion.test.jsx

@@ -1,7 +1,24 @@
-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 ReviewCriterion from './ReviewCriterion';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
+const mockMessages = {
+  'frontend-app-ora.RadioCriterion.optionPoints': '{points} points',
+};
+
+const withIntl = (component) => (
+  <IntlProvider locale="en" messages={mockMessages}>
+    {component}
+  </IntlProvider>
+);
+
 describe('<ReviewCriterion />', () => {
   const criterion = {
     options: [
@@ -18,17 +35,18 @@ describe('<ReviewCriterion />', () => {
     ],
   };
 
-  it('renders correctly', () => {
-    const wrapper = shallow(<ReviewCriterion criterion={criterion} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders options with labels and points', () => {
+    render(withIntl(<ReviewCriterion criterion={criterion} />));
 
-    expect(wrapper.instance.findByType('Form.Label').length).toBe(2);
+    expect(screen.getByText('Option 1')).toBeInTheDocument();
+    expect(screen.getByText('Option 2')).toBeInTheDocument();
+    expect(screen.getByText('1 points')).toBeInTheDocument();
+    expect(screen.getByText('2 points')).toBeInTheDocument();
   });
 
-  it('renders correctly with no options', () => {
-    const wrapper = shallow(<ReviewCriterion criterion={{ options: [] }} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders with no options', () => {
+    render(withIntl(<ReviewCriterion criterion={{ options: [] }} />));
 
-    expect(wrapper.instance.findByType('Form.Label').length).toBe(0);
+    expect(screen.queryByText(/points/)).not.toBeInTheDocument();
   });
 });

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

@@ -1,67 +1,211 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
 
 import PDFRenderer from './PDFRenderer';
-
 import { usePDFRendererData } from './pdfHooks';
 
+/* eslint-disable react/prop-types */
+
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 jest.mock('react-pdf', () => ({
   pdfjs: { GlobalWorkerOptions: {} },
-  Document: () => 'Document',
-  Page: () => 'Page',
+  Document: ({ children, onLoadSuccess, onLoadError }) => (
+    <div
+      role="document"
+      aria-label="PDF Document"
+      data-onloadsuccess={onLoadSuccess}
+      data-onloaderror={onLoadError}
+    >
+      {children}
+    </div>
+  ),
+  Page: ({ pageNumber, onLoadSuccess }) => (
+    <div
+      role="img"
+      aria-label={`PDF Page ${pageNumber}`}
+      data-onloadsuccess={onLoadSuccess}
+    >
+      Page {pageNumber}
+    </div>
+  ),
 }));
 
 jest.mock('./pdfHooks', () => ({
   usePDFRendererData: jest.fn(),
 }));
 
-describe('PDF Renderer Component', () => {
-  const props = {
-    url: 'some_url.pdf',
-    onError: jest.fn().mockName('this.props.onError'),
-    onSuccess: jest.fn().mockName('this.props.onSuccess'),
+describe('PDFRenderer', () => {
+  const defaultProps = {
+    url: 'test-document.pdf',
+    onError: jest.fn(),
+    onSuccess: jest.fn(),
   };
-  const hookProps = {
+
+  const defaultHookReturnValue = {
     pageNumber: 1,
     numPages: 10,
-    relativeHeight: 200,
-    wrapperRef: { current: 'wrapperRef' },
-    onDocumentLoadSuccess: jest.fn().mockName('onDocumentLoadSuccess'),
-    onLoadPageSuccess: jest.fn().mockName('onLoadPageSuccess'),
-    onDocumentLoadError: jest.fn().mockName('onDocumentLoadError'),
-    onInputPageChange: jest.fn().mockName('onInputPageChange'),
-    onNextPageButtonClick: jest.fn().mockName('onNextPageButtonClick'),
-    onPrevPageButtonClick: jest.fn().mockName('onPrevPageButtonClick'),
+    relativeHeight: 400,
+    wrapperRef: { current: null },
+    onDocumentLoadSuccess: jest.fn(),
+    onLoadPageSuccess: jest.fn(),
+    onDocumentLoadError: jest.fn(),
+    onInputPageChange: jest.fn(),
+    onNextPageButtonClick: jest.fn(),
+    onPrevPageButtonClick: jest.fn(),
     hasNext: true,
-    hasPref: false,
+    hasPrev: false,
   };
 
   beforeEach(() => {
     jest.clearAllMocks();
+    usePDFRendererData.mockReturnValue(defaultHookReturnValue);
   });
-  describe('snapshots', () => {
-    test('first page, prev is disabled', () => {
-      usePDFRendererData.mockReturnValue(hookProps);
-      const wrapper = shallow(<PDFRenderer {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-
-      const [prevButton, nextButton] = wrapper.instance.findByType('IconButton');
-      expect(prevButton.props.disabled).toBe(true);
-      expect(nextButton.props.disabled).toBe(false);
+
+  describe('navigation controls', () => {
+    it('disables previous button on first page', () => {
+      render(<PDFRenderer {...defaultProps} />);
+
+      const prevButton = screen.getByRole('button', {
+        name: /previous pdf page/i,
+      });
+      const nextButton = screen.getByRole('button', { name: /next pdf page/i });
+
+      expect(prevButton).toBeDisabled();
+      expect(nextButton).toBeEnabled();
     });
-    test('on last page, next is disabled', () => {
+
+    it('disables next button on last page', () => {
       usePDFRendererData.mockReturnValue({
-        ...hookProps,
-        pageNumber: hookProps.numPages,
+        ...defaultHookReturnValue,
+        pageNumber: 10,
         hasNext: false,
         hasPrev: true,
       });
-      const wrapper = shallow(<PDFRenderer {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
 
-      const [prevButton, nextButton] = wrapper.instance.findByType('IconButton');
-      expect(prevButton.props.disabled).toBe(false);
-      expect(nextButton.props.disabled).toBe(true);
+      render(<PDFRenderer {...defaultProps} />);
+
+      const prevButton = screen.getByRole('button', {
+        name: /previous pdf page/i,
+      });
+      const nextButton = screen.getByRole('button', { name: /next pdf page/i });
+
+      expect(prevButton).toBeEnabled();
+      expect(nextButton).toBeDisabled();
+    });
+
+    it('enables both buttons on middle page', () => {
+      usePDFRendererData.mockReturnValue({
+        ...defaultHookReturnValue,
+        pageNumber: 5,
+        hasNext: true,
+        hasPrev: true,
+      });
+
+      render(<PDFRenderer {...defaultProps} />);
+
+      const prevButton = screen.getByRole('button', {
+        name: /previous pdf page/i,
+      });
+      const nextButton = screen.getByRole('button', { name: /next pdf page/i });
+
+      expect(prevButton).toBeEnabled();
+      expect(nextButton).toBeEnabled();
+    });
+  });
+
+  describe('page number input', () => {
+    it('displays current page number and total pages', () => {
+      render(<PDFRenderer {...defaultProps} />);
+
+      const pageInput = screen.getByRole('spinbutton');
+      expect(pageInput).toHaveValue(1);
+      expect(screen.getByText('of 10')).toBeInTheDocument();
+    });
+
+    it('calls onInputPageChange when page number is changed', async () => {
+      const user = userEvent.setup();
+      const mockOnInputPageChange = jest.fn();
+
+      usePDFRendererData.mockReturnValue({
+        ...defaultHookReturnValue,
+        onInputPageChange: mockOnInputPageChange,
+      });
+
+      render(<PDFRenderer {...defaultProps} />);
+
+      const pageInput = screen.getByRole('spinbutton');
+      await user.clear(pageInput);
+      await user.type(pageInput, '5');
+
+      expect(mockOnInputPageChange).toHaveBeenCalled();
+    });
+  });
+
+  describe('button interactions', () => {
+    it('calls onPrevPageButtonClick when previous button is clicked', async () => {
+      const user = userEvent.setup();
+      const mockOnPrevPageButtonClick = jest.fn();
+
+      usePDFRendererData.mockReturnValue({
+        ...defaultHookReturnValue,
+        pageNumber: 5,
+        hasPrev: true,
+        onPrevPageButtonClick: mockOnPrevPageButtonClick,
+      });
+
+      render(<PDFRenderer {...defaultProps} />);
+
+      const prevButton = screen.getByRole('button', {
+        name: /previous pdf page/i,
+      });
+      await user.click(prevButton);
+
+      expect(mockOnPrevPageButtonClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onNextPageButtonClick when next button is clicked', async () => {
+      const user = userEvent.setup();
+      const mockOnNextPageButtonClick = jest.fn();
+
+      usePDFRendererData.mockReturnValue({
+        ...defaultHookReturnValue,
+        onNextPageButtonClick: mockOnNextPageButtonClick,
+      });
+
+      render(<PDFRenderer {...defaultProps} />);
+
+      const nextButton = screen.getByRole('button', { name: /next pdf page/i });
+      await user.click(nextButton);
+
+      expect(mockOnNextPageButtonClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('PDF document rendering', () => {
+    it('renders PDF document and page', () => {
+      render(<PDFRenderer {...defaultProps} />);
+
+      expect(
+        screen.getByRole('document', { name: 'PDF Document' }),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('img', { name: 'PDF Page 1' }),
+      ).toBeInTheDocument();
+      expect(screen.getByText('Page 1')).toBeInTheDocument();
+    });
+
+    it('passes hook functions to usePDFRendererData', () => {
+      render(<PDFRenderer {...defaultProps} />);
+
+      expect(usePDFRendererData).toHaveBeenCalledWith({
+        onError: defaultProps.onError,
+        onSuccess: defaultProps.onSuccess,
+      });
     });
   });
 });