test: update tests

Adslot · Jan 18, 2023 · 3eb7483 · 3eb7483
1 parent 8c6cdeb
commit 3eb7483
Show file tree

Hide file tree

Showing 75 changed files with 2,972 additions and 3,739 deletions.
diff --git a/src/components/Accordion/index.spec.jsx b/src/components/Accordion/index.spec.jsx
@@ -1,16 +1,10 @@
 import _ from 'lodash';
 import React from 'react';
-import { render, cleanup, fireEvent } from '@testing-library/react';
+import { render, screen, user } from 'testing';
 
 import Accordion from '.';
 import PanelMocks from '../Panel/mocks';
-
-beforeEach(() => {
-  jest.spyOn(console, 'error').mockImplementation(_.noop);
-});
-
-afterEach(() => console.error.mockRestore());
-afterEach(cleanup);
+import { invariant } from '../../lib/utils';
 
 describe('<Accordion />', () => {
   const { panel1, panel2, panel3 } = PanelMocks;
@@ -27,116 +21,116 @@ describe('<Accordion />', () => {
     );
 
   it('should render with defaults', () => {
-    const { queryByTestId, getByTestId } = render(
+    render(
       <Accordion {...makeProps()}>
         <Accordion.Panel {...panel1}>{panel1.content}</Accordion.Panel>
       </Accordion>
     );
-    expect(queryByTestId('card-container-wrapper')).toBeInTheDocument();
-    expect(getByTestId('card-container-wrapper')).toHaveAttribute('data-test-selector', 'my-accordion');
-    expect(queryByTestId('card-content-wrapper')).toBeInTheDocument();
-    expect(getByTestId('card-content-wrapper')).toHaveTextContent('Panel 1');
+    expect(screen.getByTestId('card-container-wrapper')).toBeInTheDocument();
+    expect(screen.getByTestId('card-container-wrapper')).toHaveAttribute('data-test-selector', 'my-accordion');
+    expect(screen.getByTestId('card-content-wrapper')).toBeInTheDocument();
+    expect(screen.getByTestId('card-content-wrapper')).toHaveTextContent('Panel 1');
   });
 
   it('should have default props', () => {
-    const { getByTestId } = render(
+    render(
       <Accordion {...makeProps()}>
         <Accordion.Panel {...panel1}>{panel1.content}</Accordion.Panel>
       </Accordion>
     );
-    expect(getByTestId('card-container-wrapper')).toMatchSnapshot();
+    expect(screen.getByTestId('card-container-wrapper')).toMatchSnapshot();
   });
 
   it('should render with props', () => {
-    const { queryByTestId, queryAllByTestId } = render(
+    render(
       <Accordion {...makeProps()}>
         <Accordion.Panel {...panel1}>{panel1.content}</Accordion.Panel>
         <Accordion.Panel {...panel2}>{panel2.content}</Accordion.Panel>
         <Accordion.Panel {...panel3}>{panel3.content}</Accordion.Panel>
       </Accordion>
     );
 
-    expect(queryByTestId('card-content-wrapper')).toBeInTheDocument();
-    expect(queryAllByTestId('panel-wrapper')).toHaveLength(3);
+    expect(screen.getByTestId('card-content-wrapper')).toBeInTheDocument();
+    expect(screen.queryAllByTestId('panel-wrapper')).toHaveLength(3);
 
     // generate a dts from panel id
-    expect(queryAllByTestId('panel-wrapper')[0]).toHaveAttribute('data-test-selector', 'panel-1');
-    expect(queryAllByTestId('panel-wrapper')[0]).toHaveTextContent('Panel 1');
-    expect(queryAllByTestId('panel-wrapper')[1]).toHaveAttribute('data-test-selector', 'panel-2');
-    expect(queryAllByTestId('panel-wrapper')[1]).toHaveTextContent('Panel 2');
-    expect(queryAllByTestId('panel-wrapper')[2]).toHaveAttribute('data-test-selector', 'panel-3');
-    expect(queryAllByTestId('panel-wrapper')[2]).toHaveTextContent('Panel 3');
+    expect(screen.queryAllByTestId('panel-wrapper')[0]).toHaveAttribute('data-test-selector', 'panel-1');
+    expect(screen.queryAllByTestId('panel-wrapper')[0]).toHaveTextContent('Panel 1');
+    expect(screen.queryAllByTestId('panel-wrapper')[1]).toHaveAttribute('data-test-selector', 'panel-2');
+    expect(screen.queryAllByTestId('panel-wrapper')[1]).toHaveTextContent('Panel 2');
+    expect(screen.queryAllByTestId('panel-wrapper')[2]).toHaveAttribute('data-test-selector', 'panel-3');
+    expect(screen.queryAllByTestId('panel-wrapper')[2]).toHaveTextContent('Panel 3');
   });
 
-  it('should expand or collapse any panels', () => {
-    const { queryAllByTestId } = render(
+  it('should expand or collapse any panels', async () => {
+    render(
       <Accordion {...makeProps()}>
         <Accordion.Panel {...panel1}>{panel1.content}</Accordion.Panel>
         <Accordion.Panel {...panel2}>{panel2.content}</Accordion.Panel>
         <Accordion.Panel {...panel3}>{panel3.content}</Accordion.Panel>
       </Accordion>
     );
 
-    fireEvent.click(queryAllByTestId('panel-header')[0]);
-    expect(queryAllByTestId('panel-wrapper')[0]).not.toHaveClass('collapsed');
-    fireEvent.click(queryAllByTestId('panel-header')[0]);
-    expect(queryAllByTestId('panel-wrapper')[0]).toHaveClass('collapsed');
+    await user.click(screen.queryAllByTestId('panel-header')[0]);
+    expect(screen.queryAllByTestId('panel-wrapper')[0]).not.toHaveClass('collapsed');
+    await user.click(screen.queryAllByTestId('panel-header')[0]);
+    expect(screen.queryAllByTestId('panel-wrapper')[0]).toHaveClass('collapsed');
   });
 
-  it('should expand or collapse any panels with a restriction of `maxExpand`', () => {
+  it('should expand or collapse any panels with a restriction of `maxExpand`', async () => {
     const panel = (id) => ({
       id,
       title: `Panel ${id}`,
       dts: `panel-${id}`,
       onClick: _.noop,
     });
 
-    const { queryAllByTestId } = render(
+    render(
       <Accordion {...makeProps({ maxExpand: 1 })}>
-        <Accordion.Panel {...panel(1)}>{panel1.content}</Accordion.Panel>
-        <Accordion.Panel {...panel(2)}>{panel2.content}</Accordion.Panel>
-        <Accordion.Panel {...panel(3)}>{panel3.content}</Accordion.Panel>
+        <Accordion.Panel {...panel('1')}>{panel1.content}</Accordion.Panel>
+        <Accordion.Panel {...panel('2')}>{panel2.content}</Accordion.Panel>
+        <Accordion.Panel {...panel('3')}>{panel3.content}</Accordion.Panel>
       </Accordion>
     );
 
-    fireEvent.click(queryAllByTestId('panel-header')[0]);
-    expect(queryAllByTestId('panel-wrapper')[0]).not.toHaveClass('collapsed');
-    expect(queryAllByTestId('panel-wrapper')[1]).toHaveClass('collapsed');
+    await user.click(screen.queryAllByTestId('panel-header')[0]);
+    expect(screen.queryAllByTestId('panel-wrapper')[0]).not.toHaveClass('collapsed');
+    expect(screen.queryAllByTestId('panel-wrapper')[1]).toHaveClass('collapsed');
 
-    fireEvent.click(queryAllByTestId('panel-header')[1]);
-    expect(queryAllByTestId('panel-wrapper')[0]).toHaveClass('collapsed');
-    expect(queryAllByTestId('panel-wrapper')[1]).not.toHaveClass('collapsed');
+    await user.click(screen.queryAllByTestId('panel-header')[1]);
+    expect(screen.queryAllByTestId('panel-wrapper')[0]).toHaveClass('collapsed');
+    expect(screen.queryAllByTestId('panel-wrapper')[1]).not.toHaveClass('collapsed');
   });
 
-  it('should pass onPanelClick down to panels', () => {
+  it('should pass onPanelClick down to panels', async () => {
     const props = makeProps();
-    const { queryAllByTestId } = render(
+    render(
       <Accordion {...props}>
         <Accordion.Panel {...panel1}>{panel1.content}</Accordion.Panel>
         <Accordion.Panel {...panel2}>{panel2.content}</Accordion.Panel>
         <Accordion.Panel {...panel3}>{panel3.content}</Accordion.Panel>
       </Accordion>
     );
-    expect(queryAllByTestId('panel-wrapper')).toHaveLength(3);
+    expect(screen.getAllByTestId('panel-wrapper')).toHaveLength(3);
 
-    fireEvent.click(queryAllByTestId('panel-header')[0]);
+    await user.click(screen.getAllByTestId('panel-header')[0]);
     expect(props.onPanelClick).toHaveBeenCalledTimes(1);
     expect(props.onPanelClick).toHaveBeenLastCalledWith('1');
 
-    fireEvent.click(queryAllByTestId('panel-header')[1]);
+    await user.click(screen.getAllByTestId('panel-header')[1]);
     expect(props.onPanelClick).toHaveBeenCalledTimes(2);
     expect(props.onPanelClick).toHaveBeenLastCalledWith('2');
 
-    fireEvent.click(queryAllByTestId('panel-header')[2]);
+    await user.click(screen.getAllByTestId('panel-header')[2]);
     expect(props.onPanelClick).toHaveBeenCalledTimes(3);
     expect(props.onPanelClick).toHaveBeenLastCalledWith('3');
   });
 
-  it('should respect isCollapsed in Panel children', () => {
+  it('should respect isCollapsed in Panel children', async () => {
     const props = makeProps();
     delete props.onPanelClick;
 
-    const { queryAllByTestId } = render(
+    render(
       <Accordion {...props}>
         <Accordion.Panel {...panel1} isCollapsed>
           {panel1.content}
@@ -145,28 +139,29 @@ describe('<Accordion />', () => {
         <Accordion.Panel {...panel3}>{panel3.content}</Accordion.Panel>
       </Accordion>
     );
-    fireEvent.click(queryAllByTestId('panel-header')[0]);
-    expect(queryAllByTestId('panel-wrapper')[0]).toHaveClass('collapsed');
+    await user.click(screen.getAllByTestId('panel-header')[0]);
+    expect(screen.getAllByTestId('panel-wrapper')[0]).toHaveClass('collapsed');
   });
 
   it('should throw error if props.maxExpand has invalid value', () => {
-    expect(() =>
-      render(
-        <Accordion {...makeProps({ maxExpand: -1 })}>
-          <Accordion.Panel {...panel1}>{panel1.content}</Accordion.Panel>
-        </Accordion>
-      )
-    ).toThrowError(new Error("maxExpand must be a positive number or 'max'"));
+    render(
+      <Accordion {...makeProps({ maxExpand: -1 })}>
+        <Accordion.Panel {...panel1}>{panel1.content}</Accordion.Panel>
+      </Accordion>
+    );
+
+    expect(invariant).toHaveBeenCalledTimes(1);
+    expect(invariant).toHaveBeenCalledWith(false, "maxExpand must be a positive number or 'max'");
   });
 
   it('should ignore children that are not an instance of Accordion.Panel', () => {
-    const { queryByTestId } = render(
+    render(
       <Accordion {...makeProps()}>
         <div data-testid="should-not-render">test</div>
         <Accordion.Panel {...panel1}>{panel1.content}</Accordion.Panel>
       </Accordion>
     );
 
-    expect(queryByTestId('should-not-render')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('should-not-render')).not.toBeInTheDocument();
   });
 });
diff --git a/src/components/ActionPanel/index.spec.jsx b/src/components/ActionPanel/index.spec.jsx
@@ -1,11 +1,9 @@
 import _ from 'lodash';
 import React from 'react';
-import { act, render, cleanup } from '@testing-library/react';
+import { render, screen } from 'testing';
 import Button from '../Button';
 import ActionPanel from '.';
 
-afterEach(cleanup);
-
 describe('<ActionPanel />', () => {
   const makeProps = (override) =>
     _.merge(
@@ -19,67 +17,57 @@ describe('<ActionPanel />', () => {
     );
 
   it('should render with defaults', () => {
-    const { getByTestId, queryByTestId } = render(<ActionPanel {...makeProps()} />);
-    expect(queryByTestId('action-panel-header')).toBeInTheDocument();
-    expect(getByTestId('action-panel-header')).toHaveClass('aui--action-panel-header');
-    expect(getByTestId('action-panel-title')).toHaveClass('title');
-    expect(getByTestId('action-panel-title')).toHaveTextContent('Action Panel');
+    const view = render(<ActionPanel {...makeProps()} />);
+    expect(screen.getByTestId('action-panel-header')).toBeInTheDocument();
+    expect(screen.getByTestId('action-panel-header')).toHaveClass('aui--action-panel-header');
+    expect(screen.getByTestId('action-panel-title')).toHaveClass('title');
+    expect(screen.getByTestId('action-panel-title')).toHaveTextContent('Action Panel');
 
-    expect(queryByTestId('action-panel-body')).toBeInTheDocument();
-    expect(getByTestId('action-panel-body')).toHaveClass('aui--action-panel-body');
+    expect(screen.getByTestId('action-panel-body')).toBeInTheDocument();
+    expect(screen.getByTestId('action-panel-body')).toHaveClass('aui--action-panel-body');
 
-    expect(document.body).not.toHaveClass('modal-open');
+    expect(view.baseElement).not.toHaveClass('modal-open');
   });
 
   it('should render as a modal', () => {
-    let wrapper;
-    act(() => {
-      wrapper = render(
-        <ActionPanel {...makeProps({ isModal: true, size: 'large', actionButton: <Button>Action</Button> })} />
-      );
-    });
+    const view = render(
+      <ActionPanel {...makeProps({ isModal: true, size: 'large', actionButton: <Button>Action</Button> })} />
+    );
 
-    expect(document.body).toHaveClass('modal-open');
-    expect(wrapper.queryByTestId('action-panel-modal-wrapper')).toBeInTheDocument();
-    expect(wrapper.getByTestId('action-panel-wrapper')).toHaveClass('aui--action-panel is-large action-modal');
-    expect(wrapper.getAllByTestId('button-wrapper')[0]).toHaveTextContent('Cancel'); // default cancel text is 'Cancel'
-    wrapper.unmount();
-    expect(document.body).not.toHaveClass('modal-open');
+    expect(view.baseElement).toHaveClass('modal-open');
+    expect(screen.getByTestId('action-panel-modal-wrapper')).toBeInTheDocument();
+    expect(screen.getByTestId('action-panel-wrapper')).toHaveClass('aui--action-panel is-large action-modal');
+    expect(screen.getAllByTestId('button-wrapper')[0]).toHaveTextContent('Cancel'); // default cancel text is 'Cancel'
+    view.unmount();
+    expect(view.baseElement).not.toHaveClass('modal-open');
   });
 
   it('should not render modal when isModal is false', () => {
-    let wrapper;
-    act(() => {
-      wrapper = render(
-        <ActionPanel {...makeProps({ isModal: false, size: 'large', actionButton: <Button>Action</Button> })} />
-      );
-    });
-    expect(document.body).not.toHaveClass('modal-open');
-
-    wrapper.unmount();
-    expect(document.body).not.toHaveClass('modal-open');
+    const view = render(
+      <ActionPanel {...makeProps({ isModal: false, size: 'large', actionButton: <Button>Action</Button> })} />
+    );
+    expect(view.baseElement).not.toHaveClass('modal-open');
+    view.unmount();
+    expect(view.baseElement).not.toHaveClass('modal-open');
   });
 
   it('should hide the modal with the visuallyHidden prop', () => {
-    const { getByTestId } = render(<ActionPanel {...makeProps({ isModal: true, visuallyHidden: true })} />);
+    render(<ActionPanel {...makeProps({ isModal: true, visuallyHidden: true })} />);
 
-    expect(getByTestId('action-panel-modal-wrapper')).toHaveClass('visually-hidden');
+    expect(screen.getByTestId('action-panel-modal-wrapper')).toHaveClass('visually-hidden');
   });
 
   it('should render a user specified text on the cancel button', () => {
-    let wrapper;
-    act(() => {
-      wrapper = render(
-        <ActionPanel
-          {...makeProps({
-            isModal: true,
-            size: 'large',
-            actionButton: <Button>Action</Button>,
-            cancelText: 'This is a cancel text',
-          })}
-        />
-      );
-    });
-    expect(wrapper.getAllByTestId('button-wrapper')[0]).toHaveTextContent('This is a cancel text');
+    render(
+      <ActionPanel
+        {...makeProps({
+          isModal: true,
+          size: 'large',
+          actionButton: <Button>Action</Button>,
+          cancelText: 'This is a cancel text',
+        })}
+      />
+    );
+    expect(screen.getAllByTestId('button-wrapper')[0]).toHaveTextContent('This is a cancel text');
   });
 });
diff --git a/src/components/Alert/index.spec.jsx b/src/components/Alert/index.spec.jsx
@@ -1,43 +1,41 @@
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
+import { render, screen } from 'testing';
 import Alert from '.';
 
-afterEach(cleanup);
-
 describe('<Alert />', () => {
   it('should render default info type', () => {
-    const { getByTestId } = render(
+    render(
       <Alert>
         <div />
       </Alert>
     );
-    expect(getByTestId('alert-wrapper')).toHaveClass('alert-component alert-component-info');
-    expect(getByTestId('alert-wrapper').firstChild).toMatchInlineSnapshot(`<div />`);
+    expect(screen.getByTestId('alert-wrapper')).toHaveClass('alert-component alert-component-info');
+    expect(screen.getByTestId('alert-wrapper').firstChild).toMatchInlineSnapshot(`<div />`);
   });
   it('should render success type', () => {
-    const { getByTestId } = render(
+    render(
       <Alert type="success">
         <div />
       </Alert>
     );
-    expect(getByTestId('alert-wrapper')).toHaveClass('alert-component alert-component-success');
+    expect(screen.getByTestId('alert-wrapper')).toHaveClass('alert-component alert-component-success');
   });
 
   it('should render warning type', () => {
-    const { getByTestId } = render(
+    render(
       <Alert type="warning">
         <div />
       </Alert>
     );
-    expect(getByTestId('alert-wrapper')).toHaveClass('alert-component alert-component-warning');
+    expect(screen.getByTestId('alert-wrapper')).toHaveClass('alert-component alert-component-warning');
   });
 
   it('should render danger type', () => {
-    const { getByTestId } = render(
+    render(
       <Alert type="danger">
         <div />
       </Alert>
     );
-    expect(getByTestId('alert-wrapper')).toHaveClass('alert-component alert-component-danger');
+    expect(screen.getByTestId('alert-wrapper')).toHaveClass('alert-component alert-component-danger');
   });
 });