Merge pull request #1212 from securityscorecard/ajkl2533@UXD-1691

test(unit): upgrade user-event to latest version UXD-1691
securityscorecard · Jan 6, 2025 · b0f3533 · b0f3533
2 parents c7433e3 + db61b67
commit b0f3533
Show file tree

Hide file tree

Showing 29 changed files with 524 additions and 511 deletions.
diff --git a/package.json b/package.json
@@ -142,7 +142,7 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/node": "^22.5.5",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",

diff --git a/src/components/Accordion/Accordion.test.tsx b/src/components/Accordion/Accordion.test.tsx
@@ -1,8 +1,8 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { screen } from '@testing-library/react';
 import { vi } from 'vitest';
 
 import Accordion, { filterState } from './Accordion';
+import { setup } from '../../utils/tests/renderWithProviders';
 
 describe('Accordion/filterState', () => {
   it('should correctly add an item to the state if it is not already included and `isCollapsedOnOpen` is false', () => {
@@ -43,36 +43,38 @@ describe('Accordion', () => {
   ];
 
   it('should open accordion item on click', async () => {
-    render(<Accordion items={items} />);
+    const { user } = setup(<Accordion items={items} />);
 
     expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
-    await userEvent.click(screen.getByText('Item 1'));
+    await user.click(screen.getByText('Item 1'));
     expect(screen.getByText('Content 1')).toBeVisible();
   });
 
   it('should close accordion item if another item is opened', async () => {
-    render(<Accordion items={items} />);
+    const { user } = setup(<Accordion items={items} />);
 
-    await userEvent.click(screen.getByText('Item 1'));
+    await user.click(screen.getByText('Item 1'));
     expect(screen.getByText('Content 1')).toBeVisible();
 
-    await userEvent.click(screen.getByText('Item 2'));
+    await user.click(screen.getByText('Item 2'));
     expect(screen.getByText('Content 2')).toBeVisible();
     expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
   });
 
   it('should open multiple accordion items if if `isCollapsedOnOpen` is set to `false`', async () => {
-    render(<Accordion items={items} isCollapsedOnOpen={false} />);
+    const { user } = setup(
+      <Accordion items={items} isCollapsedOnOpen={false} />,
+    );
 
-    await userEvent.click(screen.getByText('Item 1'));
-    await userEvent.click(screen.getByText('Item 2'));
+    await user.click(screen.getByText('Item 1'));
+    await user.click(screen.getByText('Item 2'));
 
     expect(await screen.findByText('Content 1')).toBeVisible();
     expect(await screen.findByText('Content 2')).toBeVisible();
   });
 
   it('should correctly initialize with the open state of items based on the `pickOpen` function', () => {
-    render(
+    setup(
       <Accordion items={[items[0], { ...items[1], isOpen: true }, items[2]]} />,
     );
     expect(screen.getByText('Content 2')).toBeInTheDocument();
@@ -81,7 +83,7 @@ describe('Accordion', () => {
   });
 
   it('should update the open state when `openItems` prop changes', () => {
-    const { rerender } = render(<Accordion items={items} openItems={[1]} />);
+    const { rerender } = setup(<Accordion items={items} openItems={[1]} />);
     expect(screen.getByText('Content 1')).toBeVisible();
 
     rerender(<Accordion items={items} openItems={[3]} />);
@@ -91,18 +93,18 @@ describe('Accordion', () => {
 
   it('should handle click events correctly, updating the state based on whether the item is already open and the `isCollapsedOnOpen` setting', async () => {
     const onChangeMock = vi.fn();
-    render(
+    const { user } = setup(
       <Accordion
         items={[items[0], { ...items[1], isOpen: true }, items[2]]}
         onChange={onChangeMock}
         isCollapsedOnOpen={false}
       />,
     );
 
-    await userEvent.click(screen.getByText('Item 1'));
+    await user.click(screen.getByText('Item 1'));
     expect(onChangeMock).toHaveBeenCalledWith([2, 1]); // Item 2 was initially open, now Item 1 is also open
 
-    await userEvent.click(screen.getByText('Item 2'));
+    await user.click(screen.getByText('Item 2'));
     expect(onChangeMock).toHaveBeenCalledWith([1]); // Item 2 is now closed, Item 1 remains open
   });
 });
diff --git a/src/components/Collapsible/Collapsible.test.tsx b/src/components/Collapsible/Collapsible.test.tsx
@@ -1,9 +1,8 @@
 import { ReactNode, useState } from 'react';
 import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import { type Mock, vi } from 'vitest';
 
-import { renderWithProviders } from '../../utils/tests/renderWithProviders';
+import { setup } from '../../utils/tests/renderWithProviders';
 import { Collapsible } from './index';
 
 const ControllingComponent = ({
@@ -42,13 +41,11 @@ const ControllingComponent = ({
 describe('Collapsible', () => {
   describe('uncontrolled mode', () => {
     it('should be closed by default', () => {
-      renderWithProviders(
-        <Collapsible title="test">Collapsible content</Collapsible>,
-      );
+      setup(<Collapsible title="test">Collapsible content</Collapsible>);
       expect(screen.queryByText('Collapsible content')).not.toBeInTheDocument();
     });
     it('should be opened when "defaultIsOpen" is true', () => {
-      renderWithProviders(
+      setup(
         <Collapsible title="test" defaultIsOpen>
           Collapsible content
         </Collapsible>,
@@ -57,81 +54,81 @@ describe('Collapsible', () => {
     });
 
     it('should toggle open state on trigger click', async () => {
-      renderWithProviders(
+      const { user } = setup(
         <Collapsible title="test">Collapsible content</Collapsible>,
       );
 
-      await userEvent.click(screen.getByRole('button', { name: /test/i }));
+      await user.click(screen.getByRole('button', { name: /test/i }));
       expect(screen.getByText('Collapsible content')).toBeInTheDocument();
-      await userEvent.click(screen.getByRole('button', { name: /test/i }));
+      await user.click(screen.getByRole('button', { name: /test/i }));
       expect(screen.queryByText('Collapsible content')).not.toBeInTheDocument();
     });
     it('should close on trigger click if opened by default', async () => {
-      renderWithProviders(
+      const { user } = setup(
         <Collapsible title="test" defaultIsOpen>
           Collapsible content
         </Collapsible>,
       );
 
-      await userEvent.click(screen.getByRole('button', { name: /test/i }));
+      await user.click(screen.getByRole('button', { name: /test/i }));
       expect(screen.queryByText('Collapsible content')).not.toBeInTheDocument();
     });
     it('should call "onOpen" on trigger click', async () => {
       const onOpenMock = vi.fn();
-      renderWithProviders(
+      const { user } = setup(
         <Collapsible title="test" onOpen={onOpenMock}>
           Collapsible content
         </Collapsible>,
       );
 
-      await userEvent.click(screen.getByRole('button', { name: /test/i }));
+      await user.click(screen.getByRole('button', { name: /test/i }));
       expect(onOpenMock).toBeCalledTimes(1);
     });
     it('should call "onOpen" only when is open', async () => {
       const onOpenMock = vi.fn();
-      renderWithProviders(
+      const { user } = setup(
         <Collapsible title="test" onOpen={onOpenMock} defaultIsOpen>
           Collapsible content
         </Collapsible>,
       );
 
-      await userEvent.click(screen.getByRole('button', { name: /test/i }));
+      await user.click(screen.getByRole('button', { name: /test/i }));
       expect(onOpenMock).not.toBeCalled();
     });
   });
 
   describe('controlled mode', () => {
     it('should toggle open state on trigger click', async () => {
       const onOpenChangeMock = vi.fn();
-      renderWithProviders(
+      const { user } = setup(
         <ControllingComponent onOpenChange={onOpenChangeMock}>
           Collapsible content
         </ControllingComponent>,
       );
 
-      await userEvent.click(screen.getByRole('button', { name: /test/i }));
+      await user.click(screen.getByRole('button', { name: /test/i }));
       expect(screen.getByText('Collapsible content')).toBeInTheDocument();
-      await userEvent.click(screen.getByRole('button', { name: /test/i }));
+      await user.click(screen.getByRole('button', { name: /test/i }));
       expect(screen.queryByText('Collapsible content')).not.toBeInTheDocument();
     });
 
     it('should toggle open state on external state change', async () => {
       const onOpenChangeMock = vi.fn();
-      renderWithProviders(
+      const { user } = setup(
         <ControllingComponent onOpenChange={onOpenChangeMock}>
           Collapsible content
         </ControllingComponent>,
       );
 
-      await userEvent.click(screen.getByRole('button', { name: /toggle/i }));
+      await user.click(screen.getByRole('button', { name: /toggle/i }));
       expect(screen.getByText('Collapsible content')).toBeInTheDocument();
-      await userEvent.click(screen.getByRole('button', { name: /toggle/i }));
+      await user.click(screen.getByRole('button', { name: /toggle/i }));
       expect(screen.queryByText('Collapsible content')).not.toBeInTheDocument();
     });
 
     it('should be opened when "isOpen" is true', () => {
       const onOpenChangeMock = vi.fn();
-      renderWithProviders(
+      setup(
         <ControllingComponent isOpen onOpenChange={onOpenChangeMock}>
           Collapsible content
         </ControllingComponent>,