From 330133d7e0b1f8217290e9f94934496ca55ac546 Mon Sep 17 00:00:00 2001 From: Gary Zhao Date: Thu, 22 Feb 2024 09:53:32 -0500 Subject: [PATCH] [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 --- package.json | 8 +- src/components/AddNote/index.test.tsx | 9 +- src/components/OktaUserSelect/index.test.tsx | 9 +- src/components/ShareExport/index.test.tsx | 12 +- src/components/TableFilter/index.test.tsx | 9 +- src/components/Tabs/Tabs.test.tsx | 66 ++++---- .../shared/MultiSelect/index.test.tsx | 7 +- src/utils/testing/setup.ts | 11 ++ .../SolutionHelpCardGroup/index.test.tsx | 9 +- .../AddCustomSolution/index.test.tsx | 10 +- .../__snapshots__/index.test.tsx.snap | 153 +++++++++++++++++- .../ITSolutions/LinkDocuments/index.test.tsx | 91 +++++------ .../SelectSolutions/index.test.tsx | 8 +- src/views/NDA/index.test.tsx | 2 +- src/views/TimeOutWrapper/index.tsx | 2 +- yarn.lock | 153 ++++++++---------- 16 files changed, 343 insertions(+), 216 deletions(-) create mode 100644 src/utils/testing/setup.ts diff --git a/package.json b/package.json index 97fceedc1b..fdca0f0839 100644 --- 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 index 3bc8e5abb0..b3f01b7dba 100644 --- a/src/components/AddNote/index.test.tsx +++ b/src/components/AddNote/index.test.tsx @@ -1,8 +1,9 @@ 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) => {}; @@ -10,7 +11,7 @@ const onSubmit = (values: any) => {}; describe('The AddNote component', () => { it('adds input to field', async () => { await act(async () => { - const { getByTestId } = render( + const { user, getByTestId } = setup( @@ -18,8 +19,8 @@ describe('The AddNote component', () => { 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 index fbb49c1ffd..34aacd13b8 100644 --- 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( { // 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 index 719158e6d5..91050c5eeb 100644 --- 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( @@ -34,10 +34,10 @@ describe('ShareExportModal', () => { ); - 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(); @@ -45,7 +45,7 @@ describe('ShareExportModal', () => { 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 index 11a48a094f..687bb81584 100644 --- 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( true} @@ -33,7 +34,7 @@ describe('Table Filter Componenet', () => { ); - 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 index eb58358abb..7c0a58b2f1 100644 --- 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( Tab 1 @@ -93,14 +94,14 @@ describe('The Tabs component', () => { ); - 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( 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( Tab 1 @@ -139,9 +140,9 @@ 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'); @@ -149,7 +150,7 @@ describe('The Tabs component', () => { }); }); it('loops to last tab on left arrow click', async () => { - const { getByTestId } = render( + const { user, getByTestId } = setup( 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( 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( 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( 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( 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 index 6dbb489aa2..79e7998382 100644 --- 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(