[EASI-3934] Dependency Updates --- Round 2 (#965)

* Updated testing-library/jest-dom and testing-library/react * addressing breaking change * updated react-idle-timer and addressing breaking change * Updating the package.json * add the new set up util * fixed multiselect test * updated table filter test and snaps * udpated select solutions * update add custom solutino * updated okta user select * udpated shareexport * udpate tabs * updated sollution help card group * udpated addnote * remove commented code * updated link documents test and snaps * remove commented code
CMS-Enterprise · Feb 22, 2024 · 330133d · 330133d
1 parent 4c5646e
commit 330133d
Show file tree

Hide file tree

Showing 16 changed files with 343 additions and 216 deletions.
diff --git a/package.json b/package.json
@@ -67,7 +67,7 @@
     "react-dom": "^17.0.2",
     "react-ga4": "^2.1.0",
     "react-i18next": "^13.4.1",
-    "react-idle-timer": "^5.4.2",
+    "react-idle-timer": "^5.7.2",
     "react-media": "^1.10.0",
     "react-modal": "^3.16.1",
     "react-paginate": "^8.2.0",
@@ -142,9 +142,9 @@
     "@storybook/node-logger": "^7.6.16",
     "@storybook/react": "^7.6.16",
     "@storybook/react-vite": "^7.6.16",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.5.2",
     "@types/json2csv": "^5.0.7",
     "@vitejs/plugin-react": "^4.0.4",
     "@vitest/coverage-v8": "^0.34.3",

diff --git a/src/components/AddNote/index.test.tsx b/src/components/AddNote/index.test.tsx
@@ -1,25 +1,26 @@
 import React from 'react';
 import { act, render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import { Formik } from 'formik';
 
+import setup from 'utils/testing/setup';
+
 import AddNote from './index';
 
 const onSubmit = (values: any) => {};
 
 describe('The AddNote component', () => {
   it('adds input to field', async () => {
     await act(async () => {
-      const { getByTestId } = render(
+      const { user, getByTestId } = setup(
         <Formik initialValues={{ testNote: '' }} onSubmit={onSubmit}>
           <AddNote id="test-note" field="testNote" />
         </Formik>
       );
 
       screen.getByRole('button', { name: /Add an additional note/i }).click();
 
-      await waitFor(() => {
-        userEvent.type(getByTestId('test-note'), 'Test Note');
+      await waitFor(async () => {
+        await user.type(getByTestId('test-note'), 'Test Note');
         expect(getByTestId('test-note')).toHaveValue('Test Note');
       });
     });

diff --git a/src/components/OktaUserSelect/index.test.tsx b/src/components/OktaUserSelect/index.test.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import { MockedProvider } from '@apollo/client/testing';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 
 import SearchOktaUsers from 'queries/SearchOktaUsers';
+import setup from 'utils/testing/setup';
 
 import OktaUserSelect from './index';
 
@@ -30,7 +29,7 @@ describe('OktaUserSelect', () => {
   };
 
   it('selects contact from dropdown', async () => {
-    const { asFragment, getByTestId, findByText } = render(
+    const { user, asFragment, getByTestId, findByText } = setup(
       <MockedProvider mocks={[oktaUsersQuery]} addTypename={false}>
         <OktaUserSelect
           id="cedarContactSelect"
@@ -42,7 +41,7 @@ describe('OktaUserSelect', () => {
 
     // Type first name into select field input
     const input = getByTestId('cedar-contact-select');
-    userEvent.type(input, 'Adeline');
+    await user.type(input, 'Adeline');
 
     // Get mocked Okta result
     const userOption = await findByText('Adeline Aarons, ABCD');
@@ -52,7 +51,7 @@ describe('OktaUserSelect', () => {
     expect(asFragment()).toMatchSnapshot();
 
     // Select option
-    userEvent.click(userOption);
+    await user.click(userOption);
 
     // Check that select field displays correct value
     expect(input).toHaveValue('Adeline Aarons, ABCD');

diff --git a/src/components/ShareExport/index.test.tsx b/src/components/ShareExport/index.test.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { MemoryRouter, Route } from 'react-router-dom';
 import { render, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import Sinon from 'sinon';
 
 import allMocks, { modelID, summaryMock } from 'data/mock/readonly';
 import VerboseMockedProvider from 'utils/testing/MockedProvider';
+import setup from 'utils/testing/setup';
 
 import ShareExportModal from './index';
 
@@ -14,7 +14,7 @@ describe('ShareExportModal', () => {
   Sinon.stub(Math, 'random').returns(0.5);
 
   it('renders modal with prepopulated filter', async () => {
-    const { getByText, getByTestId } = render(
+    const { user, getByText, getByTestId } = setup(
       <MemoryRouter
         initialEntries={[`/models/${modelID}/read-only/model-basics`]}
       >
@@ -34,18 +34,18 @@ describe('ShareExportModal', () => {
       </MemoryRouter>
     );
 
-    await waitFor(() => {
+    await waitFor(async () => {
       // Select new filter group option
       const exportButton = getByTestId('export-button');
-      userEvent.click(exportButton);
+      await user.click(exportButton);
 
       // Renders default Fitler group option if supplied
       expect(getByText('Testing Model Summary')).toBeInTheDocument();
       const combobox = getByTestId('combo-box-select');
       expect(combobox).toHaveValue('ccw');
 
       // Select new filter group option
-      userEvent.selectOptions(combobox, ['cmmi']);
+      await user.selectOptions(combobox, ['cmmi']);
       expect(combobox).toHaveValue('cmmi');
 
       // Check if export is disabled
@@ -54,7 +54,7 @@ describe('ShareExportModal', () => {
 
       // Select new filter group option
       const pdfCheckbox = getByTestId('share-export-modal-file-type-pdf');
-      userEvent.click(pdfCheckbox);
+      await user.click(pdfCheckbox);
 
       expect(exportSubmit).not.toBeDisabled();
     });

diff --git a/src/components/TableFilter/index.test.tsx b/src/components/TableFilter/index.test.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+
+import setup from 'utils/testing/setup';
 
 import GlobalClientFilter from './index';
 
@@ -21,8 +22,8 @@ describe('Table Filter Componenet', () => {
     expect(getByTestId('table-client-filter')).toBeInTheDocument();
   });
 
-  it('display query text in input', () => {
-    render(
+  it('display query text in input', async () => {
+    const { user } = setup(
       <MemoryRouter>
         <GlobalClientFilter
           setGlobalFilter={() => true}
@@ -33,7 +34,7 @@ describe('Table Filter Componenet', () => {
       </MemoryRouter>
     );
 
-    userEvent.type(screen.getByRole('searchbox'), 'system-1');
+    await user.type(screen.getByRole('searchbox'), 'system-1');
     expect(screen.getByRole('searchbox')).toHaveValue('system-1');
   });
 

diff --git a/src/components/Tabs/Tabs.test.tsx b/src/components/Tabs/Tabs.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { act, render, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+
+import setup from 'utils/testing/setup';
 
 import TabPanel from './TabPanel';
 import Tabs from './Tabs';
@@ -78,8 +79,8 @@ describe('The Tabs component', () => {
     });
   });
 
-  it('renders new tab panel on click', () => {
-    const { getByTestId } = render(
+  it('renders new tab panel on click', async () => {
+    const { user, getByTestId } = setup(
       <Tabs defaultActiveTab="Tab 2">
         <TabPanel id="Tab1" tabName="Tab 1">
           Tab 1
@@ -93,14 +94,14 @@ describe('The Tabs component', () => {
       </Tabs>
     );
 
-    userEvent.click(getByTestId('Tab3-tab-btn'));
+    await user.click(getByTestId('Tab3-tab-btn'));
     expect(getByTestId('Tab3-tab')).toHaveClass('mint-tabs__tab--selected');
     expect(getByTestId('Tab3-panel')).not.toHaveClass('mint-print-only');
   });
 
   describe('keyboard actions', () => {
     it('switches tabs on arrow right', async () => {
-      const { getByTestId } = render(
+      const { user, getByTestId } = setup(
         <Tabs>
           <TabPanel id="Tab1" tabName="Tab 1">
             Tab 1
@@ -115,16 +116,16 @@ describe('The Tabs component', () => {
       );
       const startingTab = getByTestId('Tab1-tab-btn');
 
-      await waitFor(() => {
-        userEvent.click(startingTab);
-        userEvent.type(startingTab, '{arrowright}');
+      await waitFor(async () => {
+        await user.click(startingTab);
+        await user.type(startingTab, '{arrowright}');
         expect(getByTestId('Tab2-tab-btn')).toHaveFocus();
         expect(getByTestId('Tab2-tab')).toHaveClass('mint-tabs__tab--selected');
         expect(getByTestId('Tab2-panel')).not.toHaveClass('mint-print-only');
       });
     });
     it('switches tabs on left right', async () => {
-      const { getByTestId } = render(
+      const { user, getByTestId } = setup(
         <Tabs>
           <TabPanel id="Tab1" tabName="Tab 1">
             Tab 1
@@ -139,17 +140,17 @@ describe('The Tabs component', () => {
       );
       const startingTab = getByTestId('Tab3-tab-btn');
 
-      await waitFor(() => {
-        userEvent.click(startingTab);
-        userEvent.type(startingTab, '{arrowleft}');
+      await waitFor(async () => {
+        await user.click(startingTab);
+        await user.type(startingTab, '{arrowleft}');
 
         expect(getByTestId('Tab2-tab-btn')).toHaveFocus();
         expect(getByTestId('Tab2-tab')).toHaveClass('mint-tabs__tab--selected');
         expect(getByTestId('Tab2-panel')).not.toHaveClass('mint-print-only');
       });
     });
     it('loops to last tab on left arrow click', async () => {
-      const { getByTestId } = render(
+      const { user, getByTestId } = setup(
         <Tabs>
           <TabPanel id="Tab1" tabName="Tab 1">
             Tab 1
@@ -164,16 +165,16 @@ describe('The Tabs component', () => {
       );
       const startingTab = getByTestId('Tab1-tab-btn');
 
-      await waitFor(() => {
-        userEvent.click(startingTab);
-        userEvent.type(startingTab, '{arrowleft}');
+      await waitFor(async () => {
+        await user.click(startingTab);
+        await user.type(startingTab, '{arrowleft}');
         expect(getByTestId('Tab3-tab-btn')).toHaveFocus();
         expect(getByTestId('Tab3-tab')).toHaveClass('mint-tabs__tab--selected');
         expect(getByTestId('Tab3-panel')).not.toHaveClass('mint-print-only');
       });
     });
     it('loops to first tab on right arrow click', async () => {
-      const { getByTestId } = render(
+      const { user, getByTestId } = setup(
         <Tabs>
           <TabPanel id="Tab1" tabName="Tab 1">
             Tab 1
@@ -188,16 +189,17 @@ describe('The Tabs component', () => {
       );
       const startingTab = getByTestId('Tab3-tab-btn');
 
-      await waitFor(() => {
-        userEvent.click(startingTab);
-        userEvent.type(startingTab, '{arrowright}');
+      await waitFor(async () => {
+        await user.click(startingTab);
+        await user.type(startingTab, '{arrowright}');
         expect(getByTestId('Tab1-tab-btn')).toHaveFocus();
         expect(getByTestId('Tab1-tab')).toHaveClass('mint-tabs__tab--selected');
         expect(getByTestId('Tab1-panel')).not.toHaveClass('mint-print-only');
       });
     });
+
     it('focuses tab panel on tab', async () => {
-      const { getByTestId } = render(
+      const { user, getByTestId } = setup(
         <Tabs>
           <TabPanel id="Tab1" tabName="Tab 1">
             Tab 1
@@ -212,15 +214,15 @@ describe('The Tabs component', () => {
       );
       const startingTab = getByTestId('Tab1-tab-btn');
 
-      await waitFor(() => {
-        userEvent.click(startingTab);
-        userEvent.tab();
+      await waitFor(async () => {
+        await user.click(startingTab);
+        await user.tab();
         expect(getByTestId('Tab1-panel')).toHaveFocus();
         expect(getByTestId('Tab1-panel')).not.toHaveClass('mint-print-only');
       });
     });
     it('focuses first tab on home key press', async () => {
-      const { getByTestId } = render(
+      const { user, getByTestId } = setup(
         <Tabs>
           <TabPanel id="Tab1" tabName="Tab 1">
             Tab 1
@@ -235,16 +237,16 @@ describe('The Tabs component', () => {
       );
       const startingTab = getByTestId('Tab3-tab-btn');
 
-      await waitFor(() => {
-        userEvent.click(startingTab);
-        userEvent.type(startingTab, '{home}');
+      await waitFor(async () => {
+        await user.click(startingTab);
+        await user.type(startingTab, '{home}');
         expect(getByTestId('Tab1-tab-btn')).toHaveFocus();
         expect(getByTestId('Tab1-tab')).toHaveClass('mint-tabs__tab--selected');
         expect(getByTestId('Tab1-panel')).not.toHaveClass('mint-print-only');
       });
     });
     it('focuses last tab on end key press', async () => {
-      const { getByTestId } = render(
+      const { user, getByTestId } = setup(
         <Tabs>
           <TabPanel id="Tab1" tabName="Tab 1">
             Tab 1
@@ -259,9 +261,9 @@ describe('The Tabs component', () => {
       );
       const startingTab = getByTestId('Tab3-tab-btn');
 
-      await waitFor(() => {
-        userEvent.click(startingTab);
-        userEvent.type(startingTab, '{end}');
+      await waitFor(async () => {
+        await user.click(startingTab);
+        await user.type(startingTab, '{end}');
         expect(getByTestId('Tab3-tab-btn')).toHaveFocus();
         expect(getByTestId('Tab3-tab')).toHaveClass('mint-tabs__tab--selected');
         expect(getByTestId('Tab3-panel')).not.toHaveClass('mint-print-only');

diff --git a/src/components/shared/MultiSelect/index.test.tsx b/src/components/shared/MultiSelect/index.test.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import selectEvent from 'react-select-event';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+
+import setup from 'utils/testing/setup';
 
 import MultiSelect from './index';
 
@@ -41,7 +42,7 @@ describe('MultiSelect', () => {
   });
 
   it('updates input values when changing options and their associated tags', async () => {
-    const { getByLabelText, getByTestId, queryByTestId } = render(
+    const { user, getByLabelText, getByTestId, queryByTestId } = setup(
       <form data-testid="form">
         <label htmlFor="colors" id="label-colors">
           Colors
@@ -71,7 +72,7 @@ describe('MultiSelect', () => {
     expect(getByTestId('multiselect-tag--Green')).toBeInTheDocument();
 
     // Remove red via tag
-    userEvent.click(getByLabelText('Remove Red'));
+    await user.click(getByLabelText('Remove Red'));
     expect(getByTestId('form')).toHaveFormValues({ colors: 'green' });
     expect(getByTestId('multiselect-tag--Green')).toBeInTheDocument();
     expect(queryByTestId('multiselect-tag--Red')).not.toBeInTheDocument();

diff --git a/src/utils/testing/setup.ts b/src/utils/testing/setup.ts
@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Options } from '@testing-library/user-event/dist/types/options';
+
+const setup = (ui: ReactElement, options?: Options) => ({
+  user: userEvent.setup(options),
+  ...render(ui)
+});
+
+export default setup;