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

Author: vmnavarro94

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

@@ -1,6 +1,7 @@
 import { mockUseKeyedState } from '@edx/react-unit-test-utils';
 
 import { useRenderData, stateKeys } from './hooks';
+import { errorStatuses, errorMessages } from '../constants';
 
 const state = mockUseKeyedState(stateKeys);
 
@@ -43,4 +44,27 @@ describe('useRenderData', () => {
     state.expectSetStateCalledWith(stateKeys.errorStatus, null);
     state.expectSetStateCalledWith(stateKeys.isLoading, true);
   });
+
+  it('returns correct error message for different error statuses', () => {
+    // Test notFound error message
+    state.mockVal(stateKeys.errorStatus, errorStatuses.notFound);
+    let out = useRenderData(props);
+    expect(out.error.headerMessage).toBe(errorMessages[errorStatuses.notFound]);
+
+    // Test fallback to serverError message for unknown error status
+    state.mockVal(stateKeys.errorStatus, errorStatuses.badRequest);
+    out = useRenderData(props);
+    expect(out.error.headerMessage).toBe(
+      errorMessages[errorStatuses.serverError],
+    );
+  });
+
+  it('handles unknown file types', () => {
+    const propsWithUnknownFile = {
+      ...props,
+      file: { fileName: 'file.unknown', fileUrl: 'http://example.com' },
+    };
+    const out = useRenderData(propsWithUnknownFile);
+    expect(out.Renderer).toBeUndefined();
+  });
 });

src/components/FilePreview/components/FileRenderer/__snapshots__/index.test.jsx.snap

@@ -1,18 +1,39 @@
-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 { useRenderData } from './hooks';
 import { FileRenderer } from './index';
 
-jest.mock('./Banners', () => ({
-  ErrorBanner: () => 'ErrorBanner',
-  LoadingBanner: () => 'LoadingBanner',
-}));
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
 
+// Mock the hooks and components that have complex dependencies
 jest.mock('./hooks', () => ({
   useRenderData: jest.fn(),
 }));
 
+jest.mock('./Banners', () => ({
+  // eslint-disable-next-line react/prop-types
+  ErrorBanner: ({ message }) => <div data-testid="error-banner">{message}</div>,
+  LoadingBanner: () => <div data-testid="loading-banner">Loading...</div>,
+}));
+
+// eslint-disable-next-line react/prop-types
+jest.mock('./FileCard', () => ({ children, file, defaultOpen }) => (
+  <div data-testid="file-card">
+    <div>
+      {/* eslint-disable-next-line react/prop-types */}
+      {file.fileName} - {defaultOpen ? 'open' : 'closed'}
+    </div>
+    {children}
+  </div>
+));
+
 describe('FileRenderer Component', () => {
+  const renderWithIntl = (component) => render(<IntlProvider locale="en">{component}</IntlProvider>);
+
   const props = {
     file: {
       fileName: 'some_file',
@@ -22,7 +43,7 @@ describe('FileRenderer Component', () => {
   };
 
   const defaultRenderData = {
-    Renderer: () => 'Renderer',
+    Renderer: () => <div data-testid="renderer">Renderer content</div>,
     isLoading: false,
     errorStatus: false,
     error: null,
@@ -31,32 +52,49 @@ describe('FileRenderer Component', () => {
     },
   };
 
-  it('render default', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders default renderer', () => {
     useRenderData.mockReturnValue(defaultRenderData);
-    const wrapper = shallow(<FileRenderer {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    renderWithIntl(<FileRenderer {...props} />);
 
-    expect(wrapper.instance.findByType('Renderer')).toHaveLength(1);
-    expect(wrapper.instance.findByType('LoadingBanner')).toHaveLength(0);
-    expect(wrapper.instance.findByType('ErrorBanner')).toHaveLength(0);
+    expect(screen.getByTestId('file-card')).toBeInTheDocument();
+    expect(screen.getByText('some_file - open')).toBeInTheDocument();
+    expect(screen.getByTestId('renderer')).toBeInTheDocument();
+    expect(screen.getByText('Renderer content')).toBeInTheDocument();
+    expect(screen.queryByTestId('loading-banner')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('error-banner')).not.toBeInTheDocument();
   });
 
-  it('render loading banner', () => {
+  it('renders loading banner', () => {
     useRenderData.mockReturnValue({ ...defaultRenderData, isLoading: true });
-    const wrapper = shallow(<FileRenderer {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    renderWithIntl(<FileRenderer {...props} />);
+
+    expect(screen.getByTestId('loading-banner')).toBeInTheDocument();
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+    expect(screen.queryByTestId('error-banner')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('renderer')).not.toBeInTheDocument();
+  });
+
+  it('renders error banner', () => {
+    useRenderData.mockReturnValue({
+      errorStatus: true,
+      error: { message: 'some_error' },
+    });
+    renderWithIntl(<FileRenderer {...props} />);
 
-    expect(wrapper.instance.findByType('LoadingBanner')).toHaveLength(1);
-    expect(wrapper.instance.findByType('ErrorBanner')).toHaveLength(0);
-    expect(wrapper.instance.findByType('Renderer')).toHaveLength(0);
+    expect(screen.getByTestId('error-banner')).toBeInTheDocument();
+    expect(screen.getByText('some_error')).toBeInTheDocument();
+    expect(screen.queryByTestId('loading-banner')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('renderer')).not.toBeInTheDocument();
   });
 
-  it('render error banner', () => {
-    useRenderData.mockReturnValue({ errorStatus: true, error: { message: 'some_error' } });
-    const wrapper = shallow(<FileRenderer {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('passes defaultOpen prop correctly', () => {
+    useRenderData.mockReturnValue(defaultRenderData);
+    renderWithIntl(<FileRenderer {...props} defaultOpen={false} />);
 
-    expect(wrapper.instance.findByType('ErrorBanner')).toHaveLength(1);
-    expect(wrapper.instance.findByType('LoadingBanner')).toHaveLength(0);
+    expect(screen.getByText('some_file - closed')).toBeInTheDocument();
   });
 });

src/components/FilePreview/components/FileRenderer/hooks.test.js

@@ -1,57 +1,86 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import { useResponse } from 'hooks/app';
 import { isSupported } from './components';
 
 import FilePreview from './index';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 jest.mock('hooks/app', () => ({
   useResponse: jest.fn(),
 }));
 
 jest.mock('./components', () => ({
-  FileRenderer: () => 'FileRenderer',
+  // eslint-disable-next-line react/prop-types
+  FileRenderer: ({ file, defaultOpen }) => (
+    <div data-testid="file-renderer">
+      {/* eslint-disable-next-line react/prop-types */}
+      {file.fileName} - {defaultOpen ? 'open' : 'closed'}
+    </div>
+  ),
   isSupported: jest.fn(),
 }));
 
 describe('<FilePreview />', () => {
   const props = {
     defaultCollapsePreview: false,
   };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('renders nothing when no files are uploaded', () => {
-    useResponse.mockReturnValueOnce({ uploadedFiles: null });
-    const wrapper = shallow(<FilePreview {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.isEmptyRender()).toBe(true);
+    useResponse.mockReturnValue({ uploadedFiles: null });
+    const { container } = render(<FilePreview {...props} />);
+    expect(container.firstChild).toBeNull();
   });
 
-  it('renders only div when no supported files are uploaded', () => {
-    useResponse.mockReturnValueOnce({
+  it('renders empty div when no supported files are uploaded', () => {
+    useResponse.mockReturnValue({
       uploadedFiles: [{ fileName: 'file1.txt' }],
     });
-    isSupported.mockReturnValueOnce(false);
-    const wrapper = shallow(<FilePreview {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    isSupported.mockReturnValue(false);
+    const { container } = render(<FilePreview {...props} />);
 
-    expect(wrapper.instance.findByType('FileRenderer')).toHaveLength(0);
+    expect(container.firstChild).toBeInTheDocument();
+    expect(container.firstChild.tagName).toBe('DIV');
+    expect(screen.queryByTestId('file-renderer')).not.toBeInTheDocument();
   });
 
-  it('render only supported files', () => {
+  it('renders only supported files', () => {
     isSupported
       .mockReturnValueOnce(false)
       .mockReturnValueOnce(true)
       .mockReturnValueOnce(true);
 
-    useResponse.mockReturnValueOnce({
+    useResponse.mockReturnValue({
       uploadedFiles: [
         { fileName: 'file1.txt' },
         { fileName: 'file2.pdf' },
         { fileName: 'file3.jpg' },
       ],
     });
-    const wrapper = shallow(<FilePreview {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    render(<FilePreview {...props} />);
+
+    const fileRenderers = screen.getAllByTestId('file-renderer');
+    expect(fileRenderers).toHaveLength(2);
+    expect(screen.getByText('file2.pdf - open')).toBeInTheDocument();
+    expect(screen.getByText('file3.jpg - open')).toBeInTheDocument();
+    expect(screen.queryByText('file1.txt - open')).not.toBeInTheDocument();
+  });
+
+  it('passes defaultCollapsePreview prop correctly', () => {
+    isSupported.mockReturnValue(true);
+    useResponse.mockReturnValue({
+      uploadedFiles: [{ fileName: 'file1.pdf' }],
+    });
+    render(<FilePreview defaultCollapsePreview />);
 
-    expect(wrapper.instance.findByType('FileRenderer')).toHaveLength(2);
+    expect(screen.getByText('file1.pdf - closed')).toBeInTheDocument();
   });
 });