@cccsaurora/howler-ui 3.1.0-dev.1655 → 3.1.0-dev.1657

package/components/routes/hits/search/RecordBrowser.test.js

@@ -1,67 +1,195 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { fireEvent, render, screen } from '@testing-library/react';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-const mockSetSelected = vi.hoisted(() => vi.fn());
 const mockFetchViews = vi.hoisted(() => vi.fn());
+const mockSetSelected = vi.hoisted(() => vi.fn());
+const mockSetQuery = vi.hoisted(() => vi.fn());
+const mockSetOffset = vi.hoisted(() => vi.fn());
 const mockAddRecordToSelection = vi.hoisted(() => vi.fn());
-vi.mock('@mui/material', async () => {
-    const actual = await vi.importActual('@mui/material');
-    return {
-        ...actual,
-        Drawer: ({ children, onClose }) => (_jsxs("div", { children: [_jsx("button", { "aria-label": "outside details", onClick: onClose }), children] })),
-        useMediaQuery: () => true
-    };
-});
-vi.mock('components/app/providers/ParameterProvider', async () => {
-    const actual = await vi.importActual('components/app/providers/ParameterProvider');
-    return {
-        ...actual,
-        default: ({ children }) => children
-    };
-});
-vi.mock('components/app/providers/RecordSearchProvider', async () => {
-    const actual = await vi.importActual('components/app/providers/RecordSearchProvider');
-    return {
-        ...actual,
-        default: ({ children }) => children
-    };
-});
+const mockRemoveRecordFromSelection = vi.hoisted(() => vi.fn());
+const mockClearSelectedRecords = vi.hoisted(() => vi.fn());
+const parameterContextToken = vi.hoisted(() => ({ name: 'parameter-context' }));
+const recordContextToken = vi.hoisted(() => ({ name: 'record-context' }));
+const recordSearchContextToken = vi.hoisted(() => ({ name: 'record-search-context' }));
+const viewContextToken = vi.hoisted(() => ({ name: 'view-context' }));
+let parameterContextValue;
+let recordContextValue;
+let recordSearchContextValue;
+let locationValue = { pathname: '/hits', search: '' };
+let routeParamsValue = {};
+let forceDrawerValue = false;
+let searchPaneWidthValue = null;
+let downValue = false;
+vi.mock('@mui/icons-material', () => ({
+    ChevronLeft: () => _jsx("div", { children: "chevron-left" }),
+    Close: () => _jsx("div", { children: "close-icon" }),
+    ManageSearch: () => _jsx("div", { children: "manage-search" })
+}));
+vi.mock('@mui/material', () => ({
+    Box: ({ children, onClick }) => _jsx("div", { onClick: onClick, children: children }),
+    Card: ({ children }) => _jsx("div", { children: children }),
+    Checkbox: ({ checked, onChange }) => (_jsx("button", { onClick: () => onChange?.(null, !checked), children: checked ? 'checked' : 'unchecked' })),
+    Collapse: ({ children, in: open }) => (open ? _jsx("div", { children: children }) : null),
+    Drawer: ({ children, onClose, open }) => open ? (_jsxs("div", { children: [_jsx("button", { "aria-label": "outside details", onClick: onClose }), children] })) : null,
+    Fab: ({ children, onClick }) => _jsx("button", { onClick: onClick, children: children }),
+    IconButton: ({ children, onClick }) => _jsx("button", { onClick: onClick, children: children }),
+    Stack: ({ children }) => _jsx("div", { children: children }),
+    Tooltip: ({ children }) => _jsx(_Fragment, { children: children }),
+    Typography: ({ children }) => _jsx("div", { children: children }),
+    useMediaQuery: () => downValue,
+    useTheme: () => ({
+        breakpoints: { down: () => '@down' },
+        palette: { background: { paper: '#fff' } },
+        spacing: (n) => `${n}px`,
+        transitions: { create: () => 'transition' }
+    })
+}));
 vi.mock('components/app/providers/GridColumnsProvider', () => ({
-    default: ({ children }) => children
+    __esModule: true,
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/app/providers/ParameterProvider', () => ({
+    __esModule: true,
+    default: ({ children }) => _jsx("div", { children: children }),
+    ParameterContext: parameterContextToken
+}));
+vi.mock('components/app/providers/RecordProvider', () => ({
+    RecordContext: recordContextToken
+}));
+vi.mock('components/app/providers/RecordSearchProvider', () => ({
+    __esModule: true,
+    default: ({ children }) => _jsx("div", { children: children }),
+    RecordSearchContext: recordSearchContextToken
+}));
+vi.mock('components/app/providers/ViewProvider', () => ({
+    ViewContext: viewContextToken
+}));
+vi.mock('components/elements/addons/layout/FlexOne', () => ({
+    default: () => _jsx("div", { children: "flex" })
 }));
-vi.mock('components/elements/addons/layout/FlexOne', () => ({ default: () => _jsx("div", {}) }));
 vi.mock('components/elements/addons/layout/FlexPort', () => ({
-    default: ({ children }) => children
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/elements/hit/HitSummary', () => ({
+    default: ({ response }) => _jsx("div", { children: `summary:${response?.items?.length ?? 0}` })
 }));
-vi.mock('components/routes/ErrorBoundary', () => ({ default: ({ children }) => children }));
-vi.mock('./InformationPane', () => ({ default: () => _jsx("div", {}) }));
-vi.mock('./SearchPane', () => ({ default: () => _jsx("div", {}) }));
-vi.mock('./grid/RecordGrid', () => ({ default: () => _jsx("div", {}) }));
-vi.mock('components/elements/hit/HitSummary', () => ({ default: () => _jsx("div", {}) }));
 vi.mock('components/hooks/useMyLocalStorage', () => ({
-    useMyLocalStorageItem: () => [null]
-}));
-vi.mock('react-router', async () => {
-    const actual = await vi.importActual('react-router');
-    return {
-        ...actual,
-        useLocation: () => ({ pathname: '/hits', search: '' }),
-        useParams: () => ({})
-    };
-});
-import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
-import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
-import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
+    useMyLocalStorageItem: (key) => [
+        key === 'SEARCH_PANE_WIDTH' ? searchPaneWidthValue : key === 'FORCE_DRAWER' ? forceDrawerValue : null
+    ]
+}));
+vi.mock('components/routes/ErrorBoundary', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('./InformationPane', () => ({
+    default: ({ onClose }) => _jsx("button", { onClick: onClose, children: "information-close" })
+}));
+vi.mock('./SearchPane', () => ({
+    default: () => _jsx("div", { children: "search-pane" })
+}));
+vi.mock('./grid/RecordGrid', () => ({
+    default: () => _jsx("div", { children: "record-grid" })
+}));
+vi.mock('lodash-es', () => ({
+    isNull: (value) => value === null
+}));
+vi.mock('react-i18next', () => ({
+    Trans: ({ i18nKey, values }) => _jsx(_Fragment, { children: `${i18nKey}:${values?.size ?? ''}` }),
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('react-router', () => ({
+    useLocation: () => locationValue,
+    useParams: () => routeParamsValue
+}));
+vi.mock('use-context-selector', () => ({
+    useContextSelector: (context, selector) => {
+        if (context === viewContextToken)
+            return selector({ fetchViews: mockFetchViews });
+        if (context === parameterContextToken)
+            return selector(parameterContextValue);
+        if (context === recordContextToken)
+            return selector(recordContextValue);
+        if (context === recordSearchContextToken)
+            return selector(recordSearchContextValue);
+        return undefined;
+    }
+}));
+vi.mock('utils/constants', () => ({
+    StorageKey: {
+        SEARCH_PANE_WIDTH: 'SEARCH_PANE_WIDTH',
+        FORCE_DRAWER: 'FORCE_DRAWER'
+    }
+}));
 import RecordBrowser from './RecordBrowser';
-const Wrapper = ({ children }) => (_jsx(ParameterContext.Provider, { value: { selected: 'hit-1', views: [], setSelected: mockSetSelected }, children: _jsx(RecordContext.Provider, { value: { selectedRecords: [], addRecordToSelection: mockAddRecordToSelection }, children: _jsx(RecordSearchContext.Provider, { value: { response: { items: [{ howler: { id: 'hit-1' } }] } }, children: _jsx(ViewContext.Provider, { value: { fetchViews: mockFetchViews }, children: children }) }) }) }));
 describe('RecordBrowser', () => {
     beforeEach(() => {
-        vi.clearAllMocks();
+        parameterContextValue = {
+            selected: 'hit-1',
+            setSelected: mockSetSelected,
+            setQuery: mockSetQuery,
+            setOffset: mockSetOffset,
+            views: ['view-1']
+        };
+        recordContextValue = {
+            selectedRecords: [{ howler: { id: 'hit-1' } }, { howler: { id: 'hit-2' } }],
+            addRecordToSelection: mockAddRecordToSelection,
+            removeRecordFromSelection: mockRemoveRecordFromSelection,
+            clearSelectedRecords: mockClearSelectedRecords
+        };
+        recordSearchContextValue = {
+            displayType: 'list',
+            response: {
+                items: [{ howler: { id: 'hit-1' } }, { howler: { id: 'hit-2' } }]
+            }
+        };
+        locationValue = { pathname: '/hits', search: '?q=1' };
+        routeParamsValue = {};
+        forceDrawerValue = false;
+        searchPaneWidthValue = null;
+        downValue = false;
+        mockFetchViews.mockReset();
+        mockSetSelected.mockReset();
+        mockSetQuery.mockReset();
+        mockSetOffset.mockReset();
+        mockAddRecordToSelection.mockReset();
+        mockRemoveRecordFromSelection.mockReset();
+        mockClearSelectedRecords.mockReset();
     });
-    it('clears the selected alert when the details are closed from outside', () => {
-        render(_jsx(RecordBrowser, {}), { wrapper: Wrapper });
+    it('shows list search results, manages multi-selection, and closes the side panel', async () => {
+        render(_jsx(RecordBrowser, {}));
+        await waitFor(() => expect(mockFetchViews).toHaveBeenCalledWith(['view-1']));
+        expect(screen.getByText('search-pane')).toBeInTheDocument();
+        expect(screen.getByText('summary:2')).toBeInTheDocument();
+        expect(screen.getByText('hit.search.selected:2')).toBeInTheDocument();
+        fireEvent.click(screen.getByText('checked'));
+        expect(mockClearSelectedRecords).toHaveBeenCalled();
+        fireEvent.click(screen.getByText('close-icon'));
+        expect(mockSetSelected).toHaveBeenCalledWith(null);
+        fireEvent.click(screen.getByText('manage-search'));
+        expect(mockSetOffset).toHaveBeenCalledWith(0);
+        expect(mockSetQuery).toHaveBeenCalledWith('howler.id:(hit-1 OR hit-2)');
+        fireEvent.click(screen.getByText('information-close'));
+        expect(mockSetSelected).toHaveBeenCalledWith(null);
+    });
+    it('closes the details drawer when dismissed from outside', () => {
+        downValue = true;
+        render(_jsx(RecordBrowser, {}));
         fireEvent.click(screen.getByRole('button', { name: 'outside details' }));
         expect(mockSetSelected).toHaveBeenCalledWith(null);
     });
+    it('drops invalid selections and uses the drawer/grid layout when required', async () => {
+        parameterContextValue.selected = 'hit-3';
+        recordContextValue.selectedRecords = [{ howler: { id: 'hit-3' } }];
+        recordSearchContextValue.displayType = 'grid';
+        recordSearchContextValue.response = {
+            items: [{ howler: { id: 'hit-1' } }]
+        };
+        downValue = true;
+        render(_jsx(RecordBrowser, {}));
+        await waitFor(() => expect(mockSetSelected).toHaveBeenCalledWith(null));
+        expect(mockRemoveRecordFromSelection).toHaveBeenCalledWith('hit-3');
+        expect(screen.getByText('record-grid')).toBeInTheDocument();
+        expect(screen.getByText('chevron-left')).toBeInTheDocument();
+    });
 });

package/components/routes/hits/search/RecordQuery.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/routes/hits/search/RecordQuery.test.js

@@ -0,0 +1,117 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockTriggerSearch = vi.hoisted(() => vi.fn());
+const mockOnChange = vi.hoisted(() => vi.fn());
+const mockSetValue = vi.hoisted(() => vi.fn());
+const mockActionDispose = vi.hoisted(() => vi.fn());
+const mockKeybindingDispose = vi.hoisted(() => vi.fn());
+const parameterContextToken = vi.hoisted(() => ({ name: 'parameter-context' }));
+const recordSearchContextToken = vi.hoisted(() => ({ name: 'record-search-context' }));
+let parameterContextValue;
+let recordSearchContextValue;
+let locationValue = { search: '' };
+vi.mock('@monaco-editor/react', () => ({
+    useMonaco: () => ({
+        KeyMod: { CtrlCmd: 1 },
+        KeyCode: { Enter: 2 },
+        editor: {
+            addEditorAction: () => ({ dispose: mockActionDispose }),
+            addKeybindingRule: () => ({ dispose: mockKeybindingDispose })
+        }
+    })
+}));
+vi.mock('@mui/icons-material', () => ({
+    Clear: () => _jsx("div", { children: "clear-icon" }),
+    Height: () => _jsx("div", { children: "height-icon" }),
+    History: () => _jsx("div", { children: "history-icon" }),
+    Search: () => _jsx("div", { children: "search-icon" })
+}));
+vi.mock('@mui/material', () => ({
+    Badge: ({ children }) => _jsx("div", { children: children }),
+    Box: ({ children, onMouseDown }) => _jsx("div", { onMouseDown: onMouseDown, children: children }),
+    Card: ({ children, onKeyDown }) => _jsx("div", { onKeyDown: onKeyDown, children: children }),
+    Skeleton: () => _jsx("div", { children: "loading" }),
+    Tooltip: ({ children }) => _jsx(_Fragment, { children: children }),
+    alpha: () => 'rgba(0,0,0,0.5)',
+    useTheme: () => ({
+        spacing: (n) => `${n}px`,
+        palette: { text: { primary: '#111' }, divider: '#ddd', background: { paper: '#fff' } },
+        transitions: { create: () => 'transition' }
+    })
+}));
+vi.mock('components/app/providers/ParameterProvider', () => ({
+    ParameterContext: parameterContextToken
+}));
+vi.mock('components/app/providers/RecordSearchProvider', () => ({
+    RecordSearchContext: recordSearchContextToken
+}));
+vi.mock('components/elements/addons/buttons/CustomIconButton', () => ({
+    default: ({ children, onClick, disabled }) => (_jsx("button", { onClick: onClick, disabled: disabled, children: children }))
+}));
+vi.mock('components/routes/advanced/QueryEditor', () => ({
+    default: ({ query, setQuery, onMount }) => {
+        return (_jsxs("div", { children: [_jsx("div", { children: query }), _jsx("button", { onClick: () => setQuery('line1\nline2'), children: "set-multiline-query" }), _jsx("button", { onClick: () => onMount?.({ createContextKey: vi.fn() }), children: "mount-editor" })] }));
+    }
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('react-router', () => ({
+    useLocation: () => locationValue
+}));
+vi.mock('use-context-selector', () => ({
+    useContextSelector: (context, selector) => {
+        if (context === parameterContextToken)
+            return selector(parameterContextValue);
+        if (context === recordSearchContextToken)
+            return selector(recordSearchContextValue);
+        return undefined;
+    }
+}));
+vi.mock('utils/constants', () => ({
+    DEFAULT_QUERY: '*:*'
+}));
+vi.mock('utils/stringUtils', () => ({
+    sanitizeMultilineLucene: (value) => value.replace(/\n/g, ' ').trim()
+}));
+import RecordQuery from './RecordQuery';
+describe('RecordQuery', () => {
+    beforeEach(() => {
+        parameterContextValue = { query: 'status:open' };
+        recordSearchContextValue = { fzfSearch: true };
+        locationValue = { search: '?query=status:open' };
+        mockTriggerSearch.mockReset();
+        mockOnChange.mockReset();
+        mockSetValue.mockReset();
+        mockActionDispose.mockReset();
+        mockKeybindingDispose.mockReset();
+        window.history.replaceState({}, '', '/?query=status:open');
+    });
+    it('reports dirty state, toggles multiline, clears the query, and triggers searches', async () => {
+        render(_jsx(RecordQuery, { triggerSearch: mockTriggerSearch, onChange: mockOnChange }));
+        fireEvent.click(screen.getByText('mount-editor'));
+        await waitFor(() => expect(mockOnChange).toHaveBeenCalledWith('status:open', false));
+        expect(screen.getByText('history-icon')).toBeInTheDocument();
+        fireEvent.click(screen.getByText('height-icon'));
+        fireEvent.click(screen.getByText('set-multiline-query'));
+        await waitFor(() => expect(mockOnChange).toHaveBeenLastCalledWith('line1\nline2', true));
+        fireEvent.click(screen.getByText('search-icon'));
+        expect(mockTriggerSearch).toHaveBeenCalledWith('line1 line2');
+        fireEvent.click(screen.getByText('clear-icon'));
+        await waitFor(() => expect(mockOnChange).toHaveBeenLastCalledWith('*:*', true));
+    });
+    it('disables actions and updates when the saved query changes', async () => {
+        const { rerender, unmount } = render(_jsx(RecordQuery, { triggerSearch: mockTriggerSearch, onChange: mockOnChange, searching: true, disabled: true, compact: true }));
+        fireEvent.click(screen.getByText('mount-editor'));
+        expect(screen.getAllByRole('button').filter(button => button.hasAttribute('disabled')).length).toBeGreaterThanOrEqual(3);
+        parameterContextValue.query = 'priority:high';
+        locationValue = { search: '' };
+        rerender(_jsx(RecordQuery, { triggerSearch: mockTriggerSearch, onChange: mockOnChange }));
+        await waitFor(() => expect(mockOnChange).toHaveBeenLastCalledWith('priority:high', false));
+        unmount();
+        expect(mockActionDispose).toHaveBeenCalled();
+        expect(mockKeybindingDispose).toHaveBeenCalled();
+    });
+});

package/components/routes/hits/search/SearchPane.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/routes/hits/search/SearchPane.test.js

@@ -0,0 +1,178 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockSetOffset = vi.hoisted(() => vi.fn());
+const mockTriggerSearch = vi.hoisted(() => vi.fn());
+const mockOnClick = vi.hoisted(() => vi.fn());
+const parameterContextToken = vi.hoisted(() => ({ name: 'parameter-context' }));
+const recordContextToken = vi.hoisted(() => ({ name: 'record-context' }));
+const searchContextToken = vi.hoisted(() => ({ name: 'search-context' }));
+let contextValues;
+vi.mock('@mui/icons-material', () => ({
+    ErrorOutline: () => _jsx("div", { children: "error-icon" })
+}));
+vi.mock('@mui/material', () => ({
+    Alert: ({ children }) => _jsx("div", { children: children }),
+    AlertTitle: ({ children }) => _jsx("div", { children: children }),
+    Box: ({ children, id, onAuxClick, onClick, flex }) => (_jsx("div", { id: id, "data-flex": flex, onAuxClick: onAuxClick, onClick: onClick, children: children })),
+    LinearProgress: () => _jsx("div", { children: "loading-bar" }),
+    Stack: ({ children }) => _jsx("div", { children: children }),
+    Tooltip: ({ children }) => _jsx(_Fragment, { children: children }),
+    Typography: ({ children }) => _jsx("div", { children: children }),
+    useMediaQuery: () => false,
+    useTheme: () => ({
+        transitions: { create: () => 'transition' },
+        palette: { primary: { main: '#00f' }, text: { secondary: '#666' } },
+        shape: { borderRadius: 4 }
+    })
+}));
+vi.mock('@mui/material/colors', () => ({
+    grey: { 500: '#999' }
+}));
+vi.mock('@tui/core', () => ({
+    AppListEmpty: () => _jsx("div", { children: "empty-list" }),
+    PageCenter: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/app/providers/ParameterProvider', () => ({
+    ParameterContext: parameterContextToken
+}));
+vi.mock('components/app/providers/RecordProvider', () => ({
+    RecordContext: recordContextToken
+}));
+vi.mock('components/app/providers/RecordSearchProvider', () => ({
+    RecordSearchContext: searchContextToken
+}));
+vi.mock('components/elements/addons/layout/FlexOne', () => ({
+    default: () => _jsx("div", { children: "flex-one" })
+}));
+vi.mock('components/elements/addons/layout/FlexPort', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/elements/addons/layout/vsbox/VSBox', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/elements/addons/layout/vsbox/VSBoxContent', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/elements/addons/layout/vsbox/VSBoxHeader', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/elements/addons/search/SearchPagination', () => ({
+    default: ({ onChange }) => _jsx("button", { onClick: () => onChange(50), children: "paginate" })
+}));
+vi.mock('components/elements/addons/search/SearchTotal', () => ({
+    default: ({ total, pageLength, offset }) => _jsx("div", { children: `total:${total}:${pageLength}:${offset}` })
+}));
+vi.mock('components/elements/display/HowlerCard', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/elements/event/EventCard', () => ({
+    default: ({ id }) => _jsx("div", { children: `event-card:${id}` })
+}));
+vi.mock('components/elements/hit/HitCard', () => ({
+    default: ({ id, layout }) => _jsx("div", { children: `hit-card:${id}:${layout}` })
+}));
+vi.mock('components/elements/hit/HitLayout', () => ({
+    HitLayout: { NORMAL: 'normal', COMFY: 'comfy' }
+}));
+vi.mock('components/elements/record/RecordContextMenu', () => ({
+    default: ({ children, getSelectedId }) => (_jsx("div", { "data-selected": getSelectedId({ target: { closest: () => ({ id: 'selected-id' }) } }), children: children }))
+}));
+vi.mock('components/hooks/useMyLocalStorage', () => ({
+    useMyLocalStorageItem: (key) => {
+        if (key === 'SEARCH_PANE_WIDTH')
+            return [1200];
+        if (key === 'PAGE_COUNT')
+            return [25];
+        if (key === 'HIT_LAYOUT')
+            return ['normal'];
+        return [null];
+    }
+}));
+vi.mock('components/hooks/useRecordSelection', () => ({
+    default: () => ({ onClick: mockOnClick })
+}));
+vi.mock('react-device-detect', () => ({
+    isMobile: false
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('use-context-selector', () => ({
+    useContextSelector: (context, selector) => {
+        if (context === parameterContextToken)
+            return selector(contextValues.parameter);
+        if (context === recordContextToken)
+            return selector(contextValues.record);
+        if (context === searchContextToken)
+            return selector(contextValues.search);
+        return undefined;
+    }
+}));
+vi.mock('utils/constants', () => ({
+    StorageKey: { SEARCH_PANE_WIDTH: 'SEARCH_PANE_WIDTH', PAGE_COUNT: 'PAGE_COUNT', HIT_LAYOUT: 'HIT_LAYOUT' }
+}));
+vi.mock('utils/typeUtils', () => ({
+    isEvent: (record) => record?.__index === 'event',
+    isHit: (record) => record?.__index === 'hit'
+}));
+vi.mock('./QuerySettings', () => ({
+    default: ({ verticalSorters }) => _jsx("div", { children: `query-settings:${String(verticalSorters)}` })
+}));
+vi.mock('./RecordQuery', () => ({
+    default: ({ searching, triggerSearch }) => (_jsx("button", { onClick: () => triggerSearch('query'), disabled: searching, children: "record-query" }))
+}));
+vi.mock('./shared/SearchActionMenu', () => ({
+    default: ({ query }) => _jsx("div", { children: `search-actions:${query}` })
+}));
+import SearchPane from './SearchPane';
+describe('SearchPane', () => {
+    beforeEach(() => {
+        mockSetOffset.mockReset();
+        mockTriggerSearch.mockReset();
+        mockOnClick.mockReset();
+        contextValues = {
+            parameter: { query: 'status:open', setOffset: mockSetOffset, selected: 'hit-1' },
+            record: { selectedRecords: [{ howler: { id: 'event-1' } }] },
+            search: { search: mockTriggerSearch, searching: false, response: undefined, error: '' }
+        };
+        vi.stubGlobal('open', vi.fn());
+    });
+    it('shows the empty state and can trigger a search', () => {
+        render(_jsx(SearchPane, {}));
+        expect(screen.getByText('empty-list')).toBeInTheDocument();
+        expect(screen.getByText('search-actions:status:open')).toBeInTheDocument();
+        fireEvent.click(screen.getByText('record-query'));
+        expect(mockTriggerSearch).toHaveBeenCalledWith('query');
+    });
+    it('renders search results, errors, pagination, and supports selection interactions', () => {
+        contextValues.search = {
+            search: mockTriggerSearch,
+            searching: true,
+            error: 'boom',
+            response: {
+                total: 3,
+                offset: 25,
+                items: [
+                    { __index: 'hit', howler: { id: 'hit-1' } },
+                    { __index: 'event', howler: { id: 'event-1' } },
+                    { __index: 'other', howler: { id: 'bad-1' } }
+                ]
+            }
+        };
+        render(_jsx(SearchPane, {}));
+        expect(screen.getByText('error-icon')).toBeInTheDocument();
+        expect(screen.getByText('loading-bar')).toBeInTheDocument();
+        expect(screen.getByText('total:3:3:25')).toBeInTheDocument();
+        expect(screen.getByText('hit-card:hit-1:normal')).toBeInTheDocument();
+        expect(screen.getByText('event-card:event-1')).toBeInTheDocument();
+        expect(screen.getByText('hit.search.record.invalid')).toBeInTheDocument();
+        fireEvent.click(screen.getByText('paginate'));
+        expect(mockSetOffset).toHaveBeenCalledWith(50);
+        fireEvent.click(screen.getByText('hit-card:hit-1:normal').parentElement);
+        expect(mockOnClick).toHaveBeenCalled();
+        fireEvent(screen.getByText('hit-card:hit-1:normal').parentElement, new MouseEvent('auxclick', { bubbles: true, button: 1 }));
+        expect(window.open).toHaveBeenCalledWith(`${window.origin}/hits/hit-1`, '_blank');
+    });
+});

package/components/routes/hits/search/grid/RecordGrid.test.d.ts

@@ -0,0 +1 @@
+export {};