test: deprecate react-unit-test-utils part-2 (#428)

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

@@ -1,10 +1,10 @@
-import React from 'react';
+import { render, screen } from '@testing-library/react';
-import { shallow } from '@edx/react-unit-test-utils';
-
 import ErrorBanner from './ErrorBanner';
-
 import messages from '../messages';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
 describe('Error Banner component', () => {
   const children = <p>Abitary Child</p>;
 
@@ -25,39 +25,29 @@ describe('Error Banner component', () => {
     children,
   };
 
-  let el;
+  describe('behavior', () => {
-  beforeEach(() => {
+    it('renders children content', () => {
-    el = shallow(<ErrorBanner {...props} />);
+      render(<ErrorBanner {...props} />);
-  });
+      const childText = screen.getByText('Abitary Child');
-
+      expect(childText).toBeInTheDocument();
-  test('snapshot', () => {
-    expect(el.snapshot).toMatchSnapshot();
-  });
-
-  describe('component', () => {
-    test('children node', () => {
-      const childElement = el.instance.children[1];
-      const child = shallow(children);
-
-      expect(childElement.type).toEqual(child.type);
-      expect(childElement.children[0].el).toEqual(child.children[0].el);
     });
 
-    test('verify actions', () => {
+    it('renders the correct number of action buttons', () => {
-      const { actions } = el.instance.findByType('Alert')[0].props;
+      render(<ErrorBanner {...props} />);
-      expect(actions).toHaveLength(props.actions.length);
+      const buttons = screen.getAllByText('FormattedMessage');
-
+      expect(buttons).toHaveLength(3);
-      actions.forEach((action, index) => {
-        expect(action.type).toEqual('Button');
-        expect(action.props.onClick).toEqual(props.actions[index].onClick);
-        // action message
-        expect(action.props.children.props).toEqual(props.actions[index].message);
-      });
     });
 
-    test('verify heading', () => {
+    it('renders error heading with correct message', () => {
-      const heading = el.instance.findByType('FormattedMessage')[0];
+      render(<ErrorBanner {...props} />);
-      expect(heading.props).toEqual(props.headingMessage);
+      const heading = screen.getAllByText('FormattedMessage')[0];
+      expect(heading).toBeInTheDocument();
+    });
+
+    it('renders with danger variant', () => {
+      render(<ErrorBanner {...props} />);
+      const alert = screen.getByRole('alert');
+      expect(alert).toHaveClass('alert-danger');
     });
   });
 });

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

@@ -1,11 +1,22 @@
-import React from 'react';
+import { render, screen } from '@testing-library/react';
-import { shallow } from '@edx/react-unit-test-utils';
-
 import LoadingBanner from './LoadingBanner';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
 describe('Loading Banner component', () => {
-  test('snapshot', () => {
+  describe('behavior', () => {
-    const el = shallow(<LoadingBanner />);
+    it('renders an info alert', () => {
-    expect(el.snapshot).toMatchSnapshot();
+      render(<LoadingBanner />);
+      const alert = screen.getByRole('alert');
+      expect(alert).toHaveClass('alert-info');
+    });
+
+    it('renders a spinner', () => {
+      const { container } = render(<LoadingBanner />);
+      const spinner = container.querySelector('.pgn__spinner');
+      expect(spinner).toBeInTheDocument();
+      expect(spinner).toHaveClass('spinner-border');
+    });
   });
 });

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

@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Error Banner component snapshot 1`] = `
-<Alert
-  actions={
-    [
-      <Button
-        onClick={[MockFunction action1.onClick]}
-        variant="outline-primary"
-      >
-        <FormattedMessage
-          defaultMessage="Retry"
-          description="Retry button for error in file renderer"
-          id="ora-grading.ResponseDisplay.FileRenderer.retryButton"
-        />
-      </Button>,
-      <Button
-        onClick={[MockFunction action2.onClick]}
-        variant="outline-primary"
-      >
-        <FormattedMessage
-          defaultMessage="Retry"
-          description="Retry button for error in file renderer"
-          id="ora-grading.ResponseDisplay.FileRenderer.retryButton"
-        />
-      </Button>,
-    ]
-  }
-  variant="danger"
->
-  <Alert.Heading>
-    <FormattedMessage
-      defaultMessage="Unknown errors"
-      description="Unknown errors message"
-      id="ora-grading.ResponseDisplay.FileRenderer.unknownError"
-    />
-  </Alert.Heading>
-  <p>
-    Abitary Child
-  </p>
-</Alert>
-`;

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

@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Loading Banner component snapshot 1`] = `
-<Alert
-  variant="info"
->
-  <Spinner
-    animation="border"
-    className="d-flex m-auto"
-  />
-</Alert>
-`;

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

@@ -1,21 +1,43 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
 
 import ImageRenderer from './ImageRenderer';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
 describe('Image Renderer Component', () => {
   const props = {
     url: 'some_url.jpg',
+    fileName: 'test-image.jpg',
+    onError: jest.fn().mockName('this.props.onError'),
+    onSuccess: jest.fn().mockName('this.props.onSuccess'),
   };
 
-  props.onError = jest.fn().mockName('this.props.onError');
+  it('renders an image with the correct src and alt attributes', () => {
-  props.onSuccess = jest.fn().mockName('this.props.onSuccess');
+    render(<ImageRenderer {...props} />);
-
+    const imgElement = screen.getByRole('img');
-  let el;
+    expect(imgElement).toBeInTheDocument();
-  beforeEach(() => {
+    expect(imgElement).toHaveAttribute('src', props.url);
-    el = shallow(<ImageRenderer {...props} />);
+    expect(imgElement).toHaveAttribute('alt', props.fileName);
+    expect(imgElement).toHaveClass('image-renderer');
   });
-  test('snapshot', () => {
+
-    expect(el.snapshot).toMatchSnapshot();
+  it('calls onSuccess when image loads successfully', () => {
+    render(<ImageRenderer {...props} />);
+
+    const imgElement = screen.getByRole('img');
+    imgElement.dispatchEvent(new Event('load'));
+
+    expect(props.onSuccess).toHaveBeenCalled();
+  });
+
+  it('calls onError when image fails to load', () => {
+    render(<ImageRenderer {...props} />);
+
+    const imgElement = screen.getByRole('img');
+    imgElement.dispatchEvent(new Event('error'));
+
+    expect(props.onError).toHaveBeenCalled();
   });
 });

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

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Image Renderer Component snapshot 1`] = `
-<img
-  alt=""
-  className="image-renderer"
-  onError={[MockFunction this.props.onError]}
-  onLoad={[MockFunction this.props.onSuccess]}
-  src="some_url.jpg"
-/>
-`;

src/components/FilePreview/FileInfo.test.jsx

@@ -1,25 +1,30 @@
-import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { Popover } from '@openedx/paragon';
 
 import FileInfo from './FileInfo';
 
-describe('File Preview Card component', () => {
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
+describe('FileInfo component', () => {
   const children = (<h1>some Children</h1>);
   const props = { onClick: jest.fn().mockName('this.props.onClick') };
-  let el;
+
   beforeEach(() => {
-    el = shallow(<FileInfo {...props}>{children}</FileInfo>);
+    jest.clearAllMocks();
   });
-  test('snapshot', () => {
+
-    expect(el.snapshot).toMatchSnapshot();
+  describe('Component rendering', () => {
-  });
+    it('renders the FileInfo button with correct text', () => {
-  describe('Component', () => {
+      render(<FileInfo {...props}>{children}</FileInfo>);
-    test('overlay with passed children', () => {
+
-      const { overlay } = el.instance.props;
+      expect(screen.getByText('FormattedMessage')).toBeInTheDocument();
-      expect(overlay.type).toEqual(Popover);
+    });
-      expect(overlay.props.children).toEqual(<Popover.Content>{children}</Popover.Content>);
+
+    it('calls onClick when button is clicked', () => {
+      render(<FileInfo {...props}>{children}</FileInfo>);
+
+      fireEvent.click(screen.getByText('FormattedMessage'));
+      expect(props.onClick).toHaveBeenCalledTimes(1);
     });
   });
 });

src/components/FilePreview/FileRenderer.test.jsx

@@ -1,18 +1,12 @@
-import React from 'react';
+import { render, screen } from '@testing-library/react';
-import { shallow } from '@edx/react-unit-test-utils';
-
 import { formatMessage } from 'testUtils';
 import { keyStore } from 'utils';
 import { ErrorStatuses } from 'data/constants/requests';
-
 import { FileRenderer } from './FileRenderer';
 import * as hooks from './hooks';
 
-jest.mock('./FileCard', () => 'FileCard');
+jest.unmock('@openedx/paragon');
-jest.mock('./Banners', () => ({
+jest.unmock('react');
-  ErrorBanner: () => 'ErrorBanner',
-  LoadingBanner: () => 'LoadingBanner',
-}));
 
 const hookKeys = keyStore(hooks);
 
@@ -20,34 +14,70 @@ const props = {
   file: {
     downloadUrl: 'file download url',
     name: 'filename.txt',
+    description: 'A text file',
   },
   intl: { formatMessage },
 };
 describe('FileRenderer', () => {
   describe('component', () => {
-    describe('snapshot', () => {
+    it('renders loading banner when isLoading is true', () => {
-      test('isLoading, no Error', () => {
+      const hookProps = {
-        const hookProps = {
+        Renderer: () => <div data-testid="mock-renderer">Renderer Component</div>,
-          Renderer: () => 'Renderer',
+        isLoading: true,
-          isloading: true,
+        errorStatus: null,
-          errorStatus: null,
+        error: null,
-          error: null,
+        rendererProps: { prop: 'hooks.rendererProps' },
-          rendererProps: { prop: 'hooks.rendererProps' },
+      };
-        };
+      jest.spyOn(hooks, hookKeys.renderHooks).mockReturnValueOnce(hookProps);
-        jest.spyOn(hooks, hookKeys.renderHooks).mockReturnValueOnce(hookProps);
+      render(<FileRenderer {...props} />);
-        expect(shallow(<FileRenderer {...props} />).snapshot).toMatchSnapshot();
+
-      });
+      expect(screen.getByText('filename.txt')).toBeInTheDocument();
-      test('is not loading, with error', () => {
+      expect(screen.getByTestId('mock-renderer')).toBeInTheDocument();
-        const hookProps = {
+      const spinner = document.querySelector('.spinner-border');
-          Renderer: () => 'Renderer',
+      expect(spinner).toBeInTheDocument();
-          isloading: false,
+    });
-          errorStatus: ErrorStatuses.serverError,
+    it('renders error banner when there is an error status', () => {
-          error: { prop: 'hooks.errorProps' },
+      const errorProps = {
-          rendererProps: { prop: 'hooks.rendererProps' },
+        headingMessage: { id: 'error.heading', defaultMessage: 'Error Heading' },
-        };
+        children: 'Error Message',
-        jest.spyOn(hooks, hookKeys.renderHooks).mockReturnValueOnce(hookProps);
+        actions: [{ id: 'retry', onClick: jest.fn(), message: { id: 'retry', defaultMessage: 'Retry' } }],
-        expect(shallow(<FileRenderer {...props} />).snapshot).toMatchSnapshot();
+      };
-      });
+
+      const hookProps = {
+        Renderer: () => <div data-testid="mock-renderer">Renderer Component</div>,
+        isLoading: false,
+        errorStatus: ErrorStatuses.serverError,
+        error: errorProps,
+        rendererProps: { prop: 'hooks.rendererProps' },
+      };
+      jest.spyOn(hooks, hookKeys.renderHooks).mockReturnValueOnce(hookProps);
+
+      render(<FileRenderer {...props} />);
+
+      expect(screen.getByText('filename.txt')).toBeInTheDocument();
+      expect(screen.getByText('Error Message')).toBeInTheDocument();
+      expect(document.querySelector('.alert-heading')).toBeInTheDocument();
+      expect(document.querySelector('.btn.btn-outline-primary')).toBeInTheDocument();
+    });
+
+    it('renders renderer component when not loading and no error', () => {
+      const hookProps = {
+        Renderer: () => <div data-testid="mock-renderer">Renderer Component</div>,
+        isLoading: false,
+        errorStatus: null,
+        error: null,
+        rendererProps: { prop: 'hooks.rendererProps' },
+      };
+      jest.spyOn(hooks, hookKeys.renderHooks).mockReturnValueOnce(hookProps);
+
+      render(<FileRenderer {...props} />);
+
+      expect(screen.getByText('filename.txt')).toBeInTheDocument();
+      expect(screen.getByTestId('mock-renderer')).toBeInTheDocument();
+      expect(screen.getByText('Renderer Component')).toBeInTheDocument();
+
+      const spinner = document.querySelector('.spinner-border');
+      expect(spinner).not.toBeInTheDocument();
     });
   });
 });

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

@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`File Preview Card component snapshot 1`] = `
-<OverlayTrigger
-  flip={true}
-  overlay={
-    <Popover
-      className="overlay-help-popover"
-      id="file-popover"
-    >
-      <Popover.Content>
-        <h1>
-          some Children
-        </h1>
-      </Popover.Content>
-    </Popover>
-  }
-  placement="right-end"
-  trigger="focus"
->
-  <Button
-    iconAfter={[MockFunction icons.InfoOutline]}
-    onClick={[MockFunction this.props.onClick]}
-    size="sm"
-    variant="tertiary"
-  >
-    <FormattedMessage
-      defaultMessage="File info"
-      description="Popover trigger button text for file preview card"
-      id="ora-grading.InfoPopover.fileInfo"
-    />
-  </Button>
-</OverlayTrigger>
-`;

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

@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FileRenderer component snapshot is not loading, with error 1`] = `
-<FileCard
-  file={
-    {
-      "downloadUrl": "file download url",
-      "name": "filename.txt",
-    }
-  }
-  key="file download url"
->
-  <ErrorBanner
-    prop="hooks.errorProps"
-  />
-</FileCard>
-`;
-
-exports[`FileRenderer component snapshot isLoading, no Error 1`] = `
-<FileCard
-  file={
-    {
-      "downloadUrl": "file download url",
-      "name": "filename.txt",
-    }
-  }
-  key="file download url"
->
-  <Renderer
-    prop="hooks.rendererProps"
-  />
-</FileCard>
-`;