test: deprecate react-unit-test-utils 2/14 (#338)

Author: vmnavarro94

src/components/FilePreview/components/FileRenderer/Banners/ErrorBanner.test.jsx

@@ -1,32 +1,92 @@
-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 ErrorBanner from './ErrorBanner';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 describe('<ErrorBanner />', () => {
   const props = {
     headerMessage: {
       id: 'headerMessageId',
-      defaultMessage: 'headerMessage',
+      defaultMessage: 'Test Error Header',
     },
     actions: [
       {
         id: 'actionId',
         onClick: jest.fn().mockName('onClick'),
         message: {
           id: 'actionMessageId',
-          defaultMessage: 'actionMessage',
+          defaultMessage: 'Retry Action',
         },
       },
     ],
   };
 
-  it('renders correctly', () => {
-    const wrapper = shallow(<ErrorBanner {...props}>children</ErrorBanner>);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  const renderWithIntl = (component) => render(<IntlProvider locale="en">{component}</IntlProvider>);
+
+  it('renders error banner with header message and children', () => {
+    renderWithIntl(
+      <ErrorBanner {...props}>
+        <div>Error details content</div>
+      </ErrorBanner>,
+    );
+
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+    expect(screen.getByRole('alert')).toHaveClass('alert-danger');
+    expect(screen.getByText('Test Error Header')).toBeInTheDocument();
+    expect(screen.getByText('Error details content')).toBeInTheDocument();
+  });
+
+  it('renders action buttons when actions are provided', () => {
+    renderWithIntl(
+      <ErrorBanner {...props}>
+        <div>Error content</div>
+      </ErrorBanner>,
+    );
+
+    const actionButton = screen.getByRole('button', { name: 'Retry Action' });
+    expect(actionButton).toBeInTheDocument();
+    expect(actionButton).toHaveClass('btn-outline-primary');
+  });
+
+  it('calls action onClick when button is clicked', async () => {
+    const user = userEvent.setup();
+    renderWithIntl(
+      <ErrorBanner {...props}>
+        <div>Error content</div>
+      </ErrorBanner>,
+    );
+
+    const actionButton = screen.getByRole('button', { name: 'Retry Action' });
+    await user.click(actionButton);
+
+    expect(props.actions[0].onClick).toHaveBeenCalledTimes(1);
   });
 
-  it('renders without actions', () => {
-    const wrapper = shallow(<ErrorBanner headerMessage={props.headerMessage}>children</ErrorBanner>);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders without action buttons when no actions provided', () => {
+    renderWithIntl(
+      <ErrorBanner headerMessage={props.headerMessage}>
+        <div>Error content without actions</div>
+      </ErrorBanner>,
+    );
+
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+    expect(screen.getByText('Test Error Header')).toBeInTheDocument();
+    expect(
+      screen.getByText('Error content without actions'),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('renders without children when not provided', () => {
+    renderWithIntl(<ErrorBanner headerMessage={props.headerMessage} />);
+
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+    expect(screen.getByText('Test Error Header')).toBeInTheDocument();
   });
 });

src/components/FilePreview/components/FileRenderer/Banners/LoadingBanner.test.jsx

@@ -1,10 +1,26 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import LoadingBanner from './LoadingBanner';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 describe('<LoadingBanner />', () => {
-  it('renders correctly', () => {
-    const wrapper = shallow(<LoadingBanner />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders an info alert with spinner', () => {
+    const { container } = render(<LoadingBanner />);
+
+    // Check for alert with info variant
+    const alert = screen.getByRole('alert');
+    expect(alert).toBeInTheDocument();
+    expect(alert).toHaveClass('alert-info');
+
+    // Check for spinner by class name
+    const spinner = container.querySelector('.spinner-border');
+    expect(spinner).toBeInTheDocument();
+    expect(spinner).toHaveClass('pgn__spinner');
+    expect(spinner).toHaveClass('d-flex');
+    expect(spinner).toHaveClass('m-auto');
   });
 });

src/components/FilePreview/components/FileRenderer/Banners/__snapshots__/ErrorBanner.test.jsx.snap

@@ -1,17 +1,58 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import ImageRenderer from './ImageRenderer';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 describe('<ImageRenderer />', () => {
   const props = {
-    fileName: 'fileName',
-    url: 'url',
+    fileName: 'test-image.jpg',
+    url: 'https://example.com/test-image.jpg',
     onError: jest.fn().mockName('onError'),
     onSuccess: jest.fn().mockName('onSuccess'),
   };
 
-  it('renders default', () => {
-    const wrapper = shallow(<ImageRenderer {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders image with correct attributes', () => {
+    render(<ImageRenderer {...props} />);
+
+    const image = screen.getByRole('img');
+    expect(image).toBeInTheDocument();
+    expect(image).toHaveAttribute('src', props.url);
+    expect(image).toHaveAttribute('alt', props.fileName);
+    expect(image).toHaveClass('image-renderer');
+  });
+
+  it('calls onError when image fails to load', () => {
+    render(<ImageRenderer {...props} />);
+
+    const image = screen.getByRole('img');
+    fireEvent.error(image);
+
+    expect(props.onError).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onSuccess when image loads successfully', () => {
+    render(<ImageRenderer {...props} />);
+
+    const image = screen.getByRole('img');
+    fireEvent.load(image);
+
+    expect(props.onSuccess).toHaveBeenCalledTimes(1);
+  });
+
+  it('uses empty string as alt text when fileName is not provided', () => {
+    const propsWithoutFileName = { ...props, fileName: undefined };
+    const { container } = render(<ImageRenderer {...propsWithoutFileName} />);
+
+    const image = container.querySelector('img');
+    expect(image).toBeInTheDocument();
+    expect(image).toHaveAttribute('alt', '');
   });
 });

src/components/FilePreview/components/FileRenderer/Banners/__snapshots__/LoadingBanner.test.jsx.snap

@@ -1,20 +1,42 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import TXTRenderer from './TXTRenderer';
+import { useTextRendererData } from './textHooks';
+
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
 
 jest.mock('./textHooks', () => ({
-  useTextRendererData: jest.fn().mockReturnValue({ content: 'content' }),
+  useTextRendererData: jest
+    .fn()
+    .mockReturnValue({ content: 'Sample text content' }),
 }));
 
 describe('<TXTRenderer />', () => {
   const props = {
-    url: 'url',
+    url: 'https://example.com/sample.txt',
     onError: jest.fn().mockName('onError'),
     onSuccess: jest.fn().mockName('onSuccess'),
   };
 
-  it('renders default', () => {
-    const wrapper = shallow(<TXTRenderer {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders text content in a pre element', () => {
+    render(<TXTRenderer {...props} />);
+
+    const preElement = screen.getByText('Sample text content');
+    expect(preElement).toBeInTheDocument();
+    expect(preElement).toHaveClass('txt-renderer');
+    expect(preElement.tagName).toBe('PRE');
+  });
+
+  it('calls useTextRendererData hook with correct props', () => {
+    render(<TXTRenderer {...props} />);
+
+    expect(useTextRendererData).toHaveBeenCalledWith({
+      url: props.url,
+      onError: props.onError,
+      onSuccess: props.onSuccess,
+    });
   });
 });