chore: tests for Searches component (ET-198) (#9576)

webui/react/src/components/ColumnPickerMenu.tsx

@@ -183,7 +183,7 @@ const ColumnPickerTab: React.FC<ColumnTabProps> = ({
  );
 
  return (
- <div data-test-component="columnPickerTab">
+ <div data-test-component="columnPickerTab" data-testid="column-picker-tab">
  <Input
  allowClear
  autoFocus

webui/react/src/components/Searches/Searches.test.tsx

@@ -0,0 +1,138 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import UIProvider, { DefaultTheme } from 'hew/Theme';
+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 searchExperiments = vi.hoisted(() => vi.fn());
+
+vi.mock('services/api', () => ({
+ getProjectColumns: vi.fn().mockReturnValue([]),
+ getWorkspaces: vi.fn().mockResolvedValue({ workspaces: [] }),
+ resetUserSetting: () => Promise.resolve(),
+ searchExperiments,
+}));
+
+vi.mock('stores/userSettings', async (importOriginal) => {
+ const userSettings = await import('stores/userSettings');
+ const store = new userSettings.UserSettingsStore();
+
+ store.clear();
+
+ return {
+ ...(await importOriginal<typeof import('stores/userSettings')>()),
+ default: store,
+ };
+});
+
+vi.mock('hooks/useMobile', async (importOriginal) => {
+ return {
+ ...(await importOriginal<typeof import('hooks/useMobile')>()),
+ default: () => false,
+ };
+});
+
+const user = userEvent.setup();
+
+const setup = (numExperiments?: number) => {
+ searchExperiments.mockImplementation(() => {
+ return Promise.resolve({
+ experiments: [],
+ pagination: { total: numExperiments ?? 0 },
+ });
+ });
+
+ render(
+ <UIProvider theme={DefaultTheme.Light}>
+ <ThemeProvider>
+ <BrowserRouter>
+ <Searches project={projectMock} />
+ </BrowserRouter>
+ </ThemeProvider>
+ </UIProvider>,
+ );
+};
+
+describe('Searches', () => {
+ 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();
+ });
+
+ it('should have hidden filter to exclude single-trial experiments', () => {
+ setup();
+
+ expect(vi.mocked(searchExperiments)).toHaveBeenCalledWith(
+ expect.objectContaining({
+ filter: expectedFilterString,
+ limit: defaultProjectSettings.pageLimit,
+ offset: 0,
+ projectId: projectMock.id,
+ sort: defaultProjectSettings.sortString,
+ }),
+ { signal: expect.any(AbortSignal) },
+ );
+ });
+});

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<Props> = ({ project }) => {
  <div className={css.content} ref={contentRef}>
  {!isLoading && experiments.length === 0 ? (
  numFilters === 0 ? (
- <NoExperiments />
+ <Message
+ action={
+ <Link external href={paths.docs('/get-started/webui-qs.html')}>
+ Quick Start Guide
+ </Link>
+ }
+ description="Keep track of searches in a project by connecting up your code."
+ icon="experiment"
+ title="No Searches"
+ />
  ) : (
  <Message description="No results matching your filters" icon="search" />
  )