From 0f3556224d158f5753b9a5147186ad621fbee1be Mon Sep 17 00:00:00 2001 From: John Kim Date: Wed, 26 Jun 2024 12:37:04 -0400 Subject: [PATCH 1/6] test setup --- .../src/components/Searches/Searches.test.tsx | 131 ++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 webui/react/src/components/Searches/Searches.test.tsx diff --git a/webui/react/src/components/Searches/Searches.test.tsx b/webui/react/src/components/Searches/Searches.test.tsx new file mode 100644 index 00000000000..710824f774b --- /dev/null +++ b/webui/react/src/components/Searches/Searches.test.tsx @@ -0,0 +1,131 @@ +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import UIProvider, { DefaultTheme } from 'hew/Theme'; +import { ConfirmationProvider } from 'hew/useConfirm'; +import { HelmetProvider } from 'react-helmet-async'; +import { BrowserRouter } from 'react-router-dom'; + +import { ThemeProvider } from 'components/ThemeProvider'; +import { Project } from 'types'; + +import Searches from './Searches'; +import { defaultProjectSettings } from './Searches.settings'; + +const projectMock: Project = { + archived: false, + description: '', + id: 1849, + immutable: false, + lastExperimentStartedAt: '2024-06-03T19:33:38.731220Z', + name: 'test', + notes: [], + numActiveExperiments: 1, + numExperiments: 16, + state: 'UNSPECIFIED', + userId: 1354, + workspaceId: 1684, + workspaceName: '', +}; + +const expectedFilterString = JSON.stringify({ + filterGroup: { + children: [ + { children: [], conjunction: 'and', kind: 'group' }, + { + columnName: 'searcherType', + kind: 'field', + location: 'LOCATION_TYPE_EXPERIMENT', + operator: '!=', + type: 'COLUMN_TYPE_TEXT', + value: 'single', + }, + ], + conjunction: 'and', + kind: 'group', + }, + showArchived: false, +}); + +const searchExperimentsMock = vi.hoisted(() => + vi.fn().mockReturnValue( + Promise.resolve({ + experiments: [], + pagination: { total: 0 }, + }), + ), +); + +vi.mock('services/api', () => ({ + getProjectColumns: vi.fn().mockReturnValue([]), + getWorkspaces: vi.fn().mockResolvedValue({ workspaces: [] }), + resetUserSetting: () => Promise.resolve(), + searchExperiments: searchExperimentsMock, +})); + +vi.mock('stores/userSettings', async (importOriginal) => { + const userSettings = await import('stores/userSettings'); + const store = new userSettings.UserSettingsStore(); + + store.clear(); + + return { + ...(await importOriginal()), + default: store, + }; +}); + +vi.mock('hooks/useMobile', async (importOriginal) => { + return { + ...(await importOriginal()), + default: () => false, + }; +}); + +const user = userEvent.setup(); + +const setup = () => { + render( + + + + + + + + + + + , + ); +}; + +describe('Searches', () => { + it('should display with correct label', () => { + setup(); + + expect(screen.getByText('Loading searches...')).toBeInTheDocument(); + }); + + it('should display column picker menu without tab selection', async () => { + setup(); + + await user.click(screen.getByTestId('columns-menu-button')); + expect(screen.queryByRole('tab')).not.toBeInTheDocument(); + expect(screen.getByTestId('column-picker-tab')).toBeInTheDocument(); + }); + + it('should have hidden filter to exclude single-trial experiments', () => { + setup(); + + expect(vi.mocked(searchExperimentsMock)).toHaveBeenCalledWith( + expect.objectContaining({ + filter: expectedFilterString, + limit: defaultProjectSettings.pageLimit, + offset: 0, + projectId: projectMock.id, + sort: defaultProjectSettings.sortString, + }), + { signal: expect.any(AbortSignal) }, + ); + }); +}); From d2b7476faca45e39913b8815da480a8ca71633f1 Mon Sep 17 00:00:00 2001 From: John Kim Date: Wed, 26 Jun 2024 12:37:22 -0400 Subject: [PATCH 2/6] test id --- webui/react/src/components/ColumnPickerMenu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webui/react/src/components/ColumnPickerMenu.tsx b/webui/react/src/components/ColumnPickerMenu.tsx index 89e195926a5..f1b459aad36 100644 --- a/webui/react/src/components/ColumnPickerMenu.tsx +++ b/webui/react/src/components/ColumnPickerMenu.tsx @@ -106,7 +106,7 @@ const ColumnPickerTab: React.FC = ({ : [...new Set([...columnState, ...filteredColumns.map((col) => col.column)])]; const pinnedCount = allFilteredColumnsChecked ? // If uncheck something pinned, reduce the pinnedColumnsCount - newColumns.filter((col) => columnState.indexOf(col) < pinnedColumnsCount).length + newColumns.filter((col) => columnState.indexOf(col) < pinnedColumnsCount).length : pinnedColumnsCount; onVisibleColumnChange?.(newColumns, pinnedCount); @@ -183,7 +183,7 @@ const ColumnPickerTab: React.FC = ({ ); return ( -
+
Date: Wed, 26 Jun 2024 12:38:51 -0400 Subject: [PATCH 3/6] fmt --- webui/react/src/components/ColumnPickerMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webui/react/src/components/ColumnPickerMenu.tsx b/webui/react/src/components/ColumnPickerMenu.tsx index f1b459aad36..f5596581e01 100644 --- a/webui/react/src/components/ColumnPickerMenu.tsx +++ b/webui/react/src/components/ColumnPickerMenu.tsx @@ -106,7 +106,7 @@ const ColumnPickerTab: React.FC = ({ : [...new Set([...columnState, ...filteredColumns.map((col) => col.column)])]; const pinnedCount = allFilteredColumnsChecked ? // If uncheck something pinned, reduce the pinnedColumnsCount - newColumns.filter((col) => columnState.indexOf(col) < pinnedColumnsCount).length + newColumns.filter((col) => columnState.indexOf(col) < pinnedColumnsCount).length : pinnedColumnsCount; onVisibleColumnChange?.(newColumns, pinnedCount); From f573871a137e6c511b87ff5940b303ef78c2bf6c Mon Sep 17 00:00:00 2001 From: John Kim Date: Mon, 1 Jul 2024 17:34:19 -0400 Subject: [PATCH 4/6] update tests and dependencies --- webui/react/package-lock.json | 201 +++++++++--------- webui/react/package.json | 2 +- .../src/components/Searches/Searches.test.tsx | 71 ++++--- .../src/components/Searches/Searches.tsx | 15 +- 4 files changed, 157 insertions(+), 132 deletions(-) diff --git a/webui/react/package-lock.json b/webui/react/package-lock.json index f293bbc4889..93d2ab334ed 100644 --- a/webui/react/package-lock.json +++ b/webui/react/package-lock.json @@ -60,7 +60,7 @@ "@playwright/test": "^1.44.0", "@testing-library/dom": "^8.20.0", "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "^13.4.0", + "@testing-library/react": "^15.0.6", "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^14.5.2", "@types/debug": "^4.1.12", @@ -2457,21 +2457,27 @@ } }, "node_modules/@testing-library/react": { - "version": "13.4.0", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.4.0.tgz", - "integrity": "sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==", + "version": "15.0.6", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-15.0.6.tgz", + "integrity": "sha512-UlbazRtEpQClFOiYp+1BapMT+xyqWMnE+hh9tn5DQ6gmlE7AIZWcGpzZukmDZuFk3By01oiqOf8lRedLS4k6xQ==", "dev": true, "dependencies": { "@babel/runtime": "^7.12.5", - "@testing-library/dom": "^8.5.0", + "@testing-library/dom": "^10.0.0", "@types/react-dom": "^18.0.0" }, "engines": { - "node": ">=12" + "node": ">=18" }, "peerDependencies": { + "@types/react": "^18.0.0", "react": "^18.0.0", "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } } }, "node_modules/@testing-library/react-hooks": { @@ -2504,6 +2510,89 @@ } } }, + "node_modules/@testing-library/react/node_modules/@testing-library/dom": { + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.2.0.tgz", + "integrity": "sha512-CytIvb6tVOADRngTHGWNxH8LPgO/3hi/BdCEHOf7Qd2GvZVClhVP0Wo/QHzWhpki49Bk0b4VT6xpt3fx8HTSIw==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@testing-library/react/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@testing-library/react/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@testing-library/react/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/@testing-library/react/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@testing-library/react/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/@testing-library/user-event": { "version": "14.5.2", "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz", @@ -4032,12 +4121,12 @@ "license": "Python-2.0" }, "node_modules/aria-query": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", - "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", "dev": true, "dependencies": { - "deep-equal": "^2.0.5" + "dequal": "^2.0.3" } }, "node_modules/array-buffer-byte-length": { @@ -5342,34 +5431,6 @@ "node": ">=6" } }, - "node_modules/deep-equal": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.0.tgz", - "integrity": "sha512-RdpzE0Hv4lhowpIUKKMJfeH6C1pXdtT1/it80ubgWqwI3qpuxUBpC1S4hnHg+zjnuOoDkzUtUCEEkG+XG5l3Mw==", - "dev": true, - "dependencies": { - "call-bind": "^1.0.2", - "es-get-iterator": "^1.1.2", - "get-intrinsic": "^1.1.3", - "is-arguments": "^1.1.1", - "is-array-buffer": "^3.0.1", - "is-date-object": "^1.0.5", - "is-regex": "^1.1.4", - "is-shared-array-buffer": "^1.0.2", - "isarray": "^2.0.5", - "object-is": "^1.1.5", - "object-keys": "^1.1.1", - "object.assign": "^4.1.4", - "regexp.prototype.flags": "^1.4.3", - "side-channel": "^1.0.4", - "which-boxed-primitive": "^1.0.2", - "which-collection": "^1.0.1", - "which-typed-array": "^1.1.9" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/deep-is": { "version": "0.1.3", "dev": true, @@ -5799,26 +5860,6 @@ "node": ">= 0.4" } }, - "node_modules/es-get-iterator": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz", - "integrity": "sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==", - "dev": true, - "dependencies": { - "call-bind": "^1.0.2", - "get-intrinsic": "^1.1.3", - "has-symbols": "^1.0.3", - "is-arguments": "^1.1.1", - "is-map": "^2.0.2", - "is-set": "^2.0.2", - "is-string": "^1.0.7", - "isarray": "^2.0.5", - "stop-iteration-iterator": "^1.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/es-iterator-helpers": { "version": "1.0.19", "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz", @@ -8042,22 +8083,6 @@ "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/is-arguments": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", - "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==", - "dev": true, - "dependencies": { - "call-bind": "^1.0.2", - "has-tostringtag": "^1.0.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/is-array-buffer": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz", @@ -10304,22 +10329,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/object-is": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz", - "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==", - "dev": true, - "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/object-keys": { "version": "1.1.1", "dev": true, @@ -13036,18 +13045,6 @@ "integrity": "sha512-JGUEaALvL0Mf6JCfYnJOTcobY+Nc7sG/TemDRBqCA0wEr4DER7zDchaaixTlmOxAjG1uRJmX82EQcxwTQTkqVA==", "dev": true }, - "node_modules/stop-iteration-iterator": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz", - "integrity": "sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==", - "dev": true, - "dependencies": { - "internal-slot": "^1.0.4" - }, - "engines": { - "node": ">= 0.4" - } - }, "node_modules/string_decoder": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", diff --git a/webui/react/package.json b/webui/react/package.json index 1f071e107b3..0b972551716 100644 --- a/webui/react/package.json +++ b/webui/react/package.json @@ -96,7 +96,7 @@ "@playwright/test": "^1.44.0", "@testing-library/dom": "^8.20.0", "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "^13.4.0", + "@testing-library/react": "^15.0.6", "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^14.5.2", "@types/debug": "^4.1.12", diff --git a/webui/react/src/components/Searches/Searches.test.tsx b/webui/react/src/components/Searches/Searches.test.tsx index 710824f774b..fcd58b64a8f 100644 --- a/webui/react/src/components/Searches/Searches.test.tsx +++ b/webui/react/src/components/Searches/Searches.test.tsx @@ -1,4 +1,4 @@ -import { render, screen } from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import UIProvider, { DefaultTheme } from 'hew/Theme'; import { ConfirmationProvider } from 'hew/useConfirm'; @@ -46,20 +46,13 @@ const expectedFilterString = JSON.stringify({ showArchived: false, }); -const searchExperimentsMock = vi.hoisted(() => - vi.fn().mockReturnValue( - Promise.resolve({ - experiments: [], - pagination: { total: 0 }, - }), - ), -); +const searchExperiments = vi.hoisted(() => vi.fn()); vi.mock('services/api', () => ({ getProjectColumns: vi.fn().mockReturnValue([]), getWorkspaces: vi.fn().mockResolvedValue({ workspaces: [] }), resetUserSetting: () => Promise.resolve(), - searchExperiments: searchExperimentsMock, + searchExperiments, })); vi.mock('stores/userSettings', async (importOriginal) => { @@ -83,7 +76,14 @@ vi.mock('hooks/useMobile', async (importOriginal) => { const user = userEvent.setup(); -const setup = () => { +const setup = (numExperiments?: number) => { + searchExperiments.mockImplementation(() => { + return Promise.resolve({ + experiments: [], + pagination: { total: numExperiments ?? 0 }, + }); + }); + render( @@ -100,32 +100,49 @@ const setup = () => { }; describe('Searches', () => { - it('should display with correct label', () => { - setup(); + it('should display count', async () => { + setup(2); + expect(screen.getByText('Loading searches...')).toBeInTheDocument(); + + await waitFor(() => { + expect(screen.getByText('2 searches')).toBeInTheDocument(); + }); + }); + it('should display empty state', async () => { + setup(); expect(screen.getByText('Loading searches...')).toBeInTheDocument(); + + await waitFor(() => { + expect(screen.getByText('0 searches')).toBeInTheDocument(); + expect(screen.getByText('No Searches')).toBeInTheDocument(); + }); }); it('should display column picker menu without tab selection', async () => { setup(); - await user.click(screen.getByTestId('columns-menu-button')); - expect(screen.queryByRole('tab')).not.toBeInTheDocument(); - expect(screen.getByTestId('column-picker-tab')).toBeInTheDocument(); + await waitFor(async () => { + await user.click(screen.getByTestId('columns-menu-button')); + expect(screen.queryByRole('tab')).not.toBeInTheDocument(); + expect(screen.getByTestId('column-picker-tab')).toBeInTheDocument(); + }); }); - it('should have hidden filter to exclude single-trial experiments', () => { + it('should have hidden filter to exclude single-trial experiments', async () => { setup(); - expect(vi.mocked(searchExperimentsMock)).toHaveBeenCalledWith( - expect.objectContaining({ - filter: expectedFilterString, - limit: defaultProjectSettings.pageLimit, - offset: 0, - projectId: projectMock.id, - sort: defaultProjectSettings.sortString, - }), - { signal: expect.any(AbortSignal) }, - ); + await waitFor(() => { + expect(vi.mocked(searchExperiments)).toHaveBeenCalledWith( + expect.objectContaining({ + filter: expectedFilterString, + limit: defaultProjectSettings.pageLimit, + offset: 0, + projectId: projectMock.id, + sort: defaultProjectSettings.sortString, + }), + { signal: expect.any(AbortSignal) }, + ); + }); }); }); diff --git a/webui/react/src/components/Searches/Searches.tsx b/webui/react/src/components/Searches/Searches.tsx index 56bca4888e9..b938ae2b01d 100644 --- a/webui/react/src/components/Searches/Searches.tsx +++ b/webui/react/src/components/Searches/Searches.tsx @@ -21,6 +21,7 @@ import DataGrid, { } from 'hew/DataGrid/DataGrid'; import { MenuItem } from 'hew/Dropdown'; import Icon from 'hew/Icon'; +import Link from 'hew/Link'; import Message from 'hew/Message'; import Pagination from 'hew/Pagination'; import Row from 'hew/Row'; @@ -31,7 +32,7 @@ import { useObservable } from 'micro-observables'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { v4 as uuidv4 } from 'uuid'; -import { Error, NoExperiments } from 'components/exceptions'; +import { Error } from 'components/exceptions'; import ExperimentActionDropdown from 'components/ExperimentActionDropdown'; import { FilterFormStore, ROOT_ID } from 'components/FilterForm/components/FilterFormStore'; import { @@ -55,6 +56,7 @@ import useMobile from 'hooks/useMobile'; import usePolling from 'hooks/usePolling'; import { useSettings } from 'hooks/useSettings'; import { useTypedParams } from 'hooks/useTypedParams'; +import { paths } from 'routes/utils'; import { getProjectColumns, searchExperiments } from 'services/api'; import { V1BulkExperimentFilters, @@ -873,7 +875,16 @@ const Searches: React.FC = ({ project }) => {
{!isLoading && experiments.length === 0 ? ( numFilters === 0 ? ( - + + Quick Start Guide + + } + description="Keep track of searches in a project by connecting up your code." + icon="experiment" + title="No Searches" + /> ) : ( ) From 73007e140be9121841778e283294956960311c80 Mon Sep 17 00:00:00 2001 From: John Kim Date: Tue, 2 Jul 2024 10:27:21 -0400 Subject: [PATCH 5/6] revert dependency change --- webui/react/package-lock.json | 101 ++-------------------------------- webui/react/package.json | 2 +- 2 files changed, 7 insertions(+), 96 deletions(-) diff --git a/webui/react/package-lock.json b/webui/react/package-lock.json index 93d2ab334ed..a949027202e 100644 --- a/webui/react/package-lock.json +++ b/webui/react/package-lock.json @@ -60,7 +60,7 @@ "@playwright/test": "^1.44.0", "@testing-library/dom": "^8.20.0", "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "^15.0.6", + "@testing-library/react": "^13.4.0", "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^14.5.2", "@types/debug": "^4.1.12", @@ -2457,27 +2457,21 @@ } }, "node_modules/@testing-library/react": { - "version": "15.0.6", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-15.0.6.tgz", - "integrity": "sha512-UlbazRtEpQClFOiYp+1BapMT+xyqWMnE+hh9tn5DQ6gmlE7AIZWcGpzZukmDZuFk3By01oiqOf8lRedLS4k6xQ==", + "version": "13.4.0", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.4.0.tgz", + "integrity": "sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==", "dev": true, "dependencies": { "@babel/runtime": "^7.12.5", - "@testing-library/dom": "^10.0.0", + "@testing-library/dom": "^8.5.0", "@types/react-dom": "^18.0.0" }, "engines": { - "node": ">=18" + "node": ">=12" }, "peerDependencies": { - "@types/react": "^18.0.0", "react": "^18.0.0", "react-dom": "^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } } }, "node_modules/@testing-library/react-hooks": { @@ -2510,89 +2504,6 @@ } } }, - "node_modules/@testing-library/react/node_modules/@testing-library/dom": { - "version": "10.2.0", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.2.0.tgz", - "integrity": "sha512-CytIvb6tVOADRngTHGWNxH8LPgO/3hi/BdCEHOf7Qd2GvZVClhVP0Wo/QHzWhpki49Bk0b4VT6xpt3fx8HTSIw==", - "dev": true, - "dependencies": { - "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5", - "@types/aria-query": "^5.0.1", - "aria-query": "5.3.0", - "chalk": "^4.1.0", - "dom-accessibility-api": "^0.5.9", - "lz-string": "^1.5.0", - "pretty-format": "^27.0.2" - }, - "engines": { - "node": ">=18" - } - }, - "node_modules/@testing-library/react/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/@testing-library/react/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/@testing-library/react/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/@testing-library/react/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/@testing-library/react/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/@testing-library/user-event": { "version": "14.5.2", "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz", diff --git a/webui/react/package.json b/webui/react/package.json index 0b972551716..1f071e107b3 100644 --- a/webui/react/package.json +++ b/webui/react/package.json @@ -96,7 +96,7 @@ "@playwright/test": "^1.44.0", "@testing-library/dom": "^8.20.0", "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "^15.0.6", + "@testing-library/react": "^13.4.0", "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^14.5.2", "@types/debug": "^4.1.12", From 7f0ada42fc9a78b48ce6d3510d051c2aa219f9ce Mon Sep 17 00:00:00 2001 From: John Kim Date: Tue, 2 Jul 2024 15:56:44 -0400 Subject: [PATCH 6/6] cleanup --- .../src/components/Searches/Searches.test.tsx | 48 ++++++++----------- 1 file changed, 19 insertions(+), 29 deletions(-) diff --git a/webui/react/src/components/Searches/Searches.test.tsx b/webui/react/src/components/Searches/Searches.test.tsx index fcd58b64a8f..7085a71d939 100644 --- a/webui/react/src/components/Searches/Searches.test.tsx +++ b/webui/react/src/components/Searches/Searches.test.tsx @@ -1,8 +1,6 @@ import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import UIProvider, { DefaultTheme } from 'hew/Theme'; -import { ConfirmationProvider } from 'hew/useConfirm'; -import { HelmetProvider } from 'react-helmet-async'; import { BrowserRouter } from 'react-router-dom'; import { ThemeProvider } from 'components/ThemeProvider'; @@ -86,15 +84,11 @@ const setup = (numExperiments?: number) => { render( - - - - - - - - - + + + + + , ); }; @@ -122,27 +116,23 @@ describe('Searches', () => { it('should display column picker menu without tab selection', async () => { setup(); - await waitFor(async () => { - await user.click(screen.getByTestId('columns-menu-button')); - expect(screen.queryByRole('tab')).not.toBeInTheDocument(); - expect(screen.getByTestId('column-picker-tab')).toBeInTheDocument(); - }); + await user.click(screen.getByTestId('columns-menu-button')); + expect(screen.queryByRole('tab')).not.toBeInTheDocument(); + expect(screen.getByTestId('column-picker-tab')).toBeInTheDocument(); }); - it('should have hidden filter to exclude single-trial experiments', async () => { + it('should have hidden filter to exclude single-trial experiments', () => { setup(); - await waitFor(() => { - expect(vi.mocked(searchExperiments)).toHaveBeenCalledWith( - expect.objectContaining({ - filter: expectedFilterString, - limit: defaultProjectSettings.pageLimit, - offset: 0, - projectId: projectMock.id, - sort: defaultProjectSettings.sortString, - }), - { signal: expect.any(AbortSignal) }, - ); - }); + expect(vi.mocked(searchExperiments)).toHaveBeenCalledWith( + expect.objectContaining({ + filter: expectedFilterString, + limit: defaultProjectSettings.pageLimit, + offset: 0, + projectId: projectMock.id, + sort: defaultProjectSettings.sortString, + }), + { signal: expect.any(AbortSignal) }, + ); }); });