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

package/components/routes/home/index.test.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockSetDashboard = vi.hoisted(() => vi.fn());
+const mockSetRefreshRateBackend = vi.hoisted(() => vi.fn());
+const mockSetLastViewed = vi.hoisted(() => vi.fn());
+const mockSetUser = vi.hoisted(() => vi.fn());
+const mockAddToAppBar = vi.hoisted(() => vi.fn());
+const mockRemoveFromAppBar = vi.hoisted(() => vi.fn());
+const appBarContextToken = vi.hoisted(() => ({ name: 'app-bar-context' }));
+let currentUser;
+let searchResult = { total: 0 };
+vi.mock('@dnd-kit/core', () => ({
+    DndContext: ({ children }) => _jsx("div", { children: children }),
+    KeyboardSensor: function KeyboardSensor() { },
+    PointerSensor: function PointerSensor() { },
+    closestCenter: {},
+    useSensor: vi.fn(() => ({})),
+    useSensors: vi.fn(() => [])
+}));
+vi.mock('@dnd-kit/sortable', () => ({
+    SortableContext: ({ children }) => _jsx("div", { children: children }),
+    arrayMove: (arr, oldIndex, newIndex) => {
+        const next = [...arr];
+        const [item] = next.splice(oldIndex, 1);
+        next.splice(newIndex, 0, item);
+        return next;
+    },
+    sortableKeyboardCoordinates: vi.fn()
+}));
+vi.mock('@mui/icons-material', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        Cancel: () => _jsx("div", { children: "cancel-icon" }),
+        Check: () => _jsx("div", { children: "check-icon" }),
+        Close: () => _jsx("div", { children: "close-icon" }),
+        OpenInNew: () => _jsx("div", { children: "open-icon" })
+    };
+});
+vi.mock('@mui/material', () => ({
+    Alert: ({ children, action }) => (_jsxs("div", { children: [children, action] })),
+    AlertTitle: ({ children }) => _jsx("div", { children: children }),
+    CircularProgress: () => _jsx("div", { children: "loading" }),
+    Grid: ({ children }) => _jsx("div", { children: children }),
+    IconButton: ({ children, onClick, component, to }) => (_jsx("button", { "data-component": String(!!component), "data-to": to, onClick: onClick, children: children })),
+    Stack: ({ children }) => _jsx("div", { children: children }),
+    Typography: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('@tui/core', () => ({
+    PageCenter: ({ children }) => _jsx("div", { children: children }),
+    useAppUser: () => ({ user: currentUser, setUser: mockSetUser })
+}));
+vi.mock('api', () => ({
+    default: {
+        search: {
+            hit: {
+                post: (payload) => payload
+            }
+        }
+    }
+}));
+vi.mock('branding/AppBrand', () => ({
+    AppBrand: () => _jsx("div", { children: "brand" })
+}));
+vi.mock('components/app/providers/AppBarProvider', () => ({
+    AppBarContext: appBarContextToken
+}));
+vi.mock('components/elements/addons/buttons/CustomButton', () => ({
+    default: ({ children, onClick, disabled }) => (_jsx("button", { disabled: disabled, onClick: onClick, children: children }))
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('components/hooks/useMyLocalStorage', () => ({
+    useMyLocalStorageItem: () => ['2024-01-01T00:00:00', mockSetLastViewed]
+}));
+vi.mock('components/hooks/useMyUserFunctions', () => ({
+    default: () => ({
+        setDashboard: mockSetDashboard,
+        setRefreshRate: mockSetRefreshRateBackend
+    })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key, opts) => (opts?.count ? `${key}:${opts.count}` : key)
+    })
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context === appBarContextToken) {
+                return { addToAppBar: mockAddToAppBar, removeFromAppBar: mockRemoveFromAppBar };
+            }
+            return actual.useContext(context);
+        }
+    };
+});
+vi.mock('react-router', () => ({
+    Link: ({ children, to }) => _jsx("a", { href: to, children: children })
+}));
+vi.mock('../ErrorBoundary', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('./AddNewCard', () => ({
+    default: ({ addCard }) => (_jsx("button", { onClick: () => addCard({
+            entry_id: 'new-entry',
+            type: 'view',
+            config: JSON.stringify({ viewId: 'new-view' })
+        }), children: "add-card" }))
+}));
+vi.mock('./AnalyticCard', () => ({
+    default: ({ analyticId, type }) => _jsx("div", { children: `analytic:${analyticId}:${type}` })
+}));
+vi.mock('./EntryWrapper', () => ({
+    default: ({ children, onDelete, id, editing }) => (_jsxs("div", { children: [_jsx("span", { children: `entry:${id}:${String(editing)}` }), _jsx("button", { onClick: onDelete, children: "delete-entry" }), children] }))
+}));
+vi.mock('./HomeSettings', () => ({
+    default: () => null
+}));
+vi.mock('./ViewCard', () => ({
+    default: ({ viewId }) => _jsx("div", { children: `view:${viewId}` })
+}));
+vi.mock('./ViewRefresh', () => ({
+    default: () => null
+}));
+import Home from './index';
+describe('Home', () => {
+    beforeEach(() => {
+        currentUser = {
+            username: 'alice',
+            dashboard: [],
+            refresh_rate: 15
+        };
+        searchResult = { total: 0 };
+        mockDispatchApi.mockReset();
+        mockDispatchApi.mockImplementation(async () => searchResult);
+        mockSetDashboard.mockReset().mockResolvedValue(undefined);
+        mockSetRefreshRateBackend.mockReset().mockResolvedValue(undefined);
+        mockSetLastViewed.mockReset();
+        mockSetUser.mockReset();
+        mockAddToAppBar.mockReset();
+        mockRemoveFromAppBar.mockReset();
+    });
+    it('renders the empty state and updated-hit alert actions', async () => {
+        searchResult = { total: 2 };
+        render(_jsx(Home, {}));
+        await waitFor(() => expect(screen.getByText('route.home.alert.updated.description:2')).toBeInTheDocument());
+        expect(screen.getByText('route.home.title')).toBeInTheDocument();
+        expect(screen.getByText('route.home.description')).toBeInTheDocument();
+        fireEvent.click(screen.getAllByRole('button')[1]);
+        expect(mockSetLastViewed).toHaveBeenCalled();
+        await waitFor(() => expect(screen.queryByText('route.home.alert.updated.description:2')).not.toBeInTheDocument());
+    });
+    it('registers app bar actions, debounces refresh-rate saves, and saves dashboard edits', async () => {
+        currentUser = {
+            username: 'alice',
+            refresh_rate: 15,
+            dashboard: [
+                { entry_id: 'view-entry', type: 'view', config: JSON.stringify({ viewId: 'view-1' }) },
+                { entry_id: 'analytic-entry', type: 'analytic', config: JSON.stringify({ analyticId: 'a1', type: 'created' }) }
+            ]
+        };
+        render(_jsx(Home, {}));
+        await waitFor(() => expect(screen.getByText('view:view-1')).toBeInTheDocument());
+        expect(screen.getByText('analytic:a1:created')).toBeInTheDocument();
+        expect(mockAddToAppBar).toHaveBeenCalledWith('left', 'view_refresh', expect.anything());
+        expect(mockAddToAppBar).toHaveBeenCalledWith('left', 'home_settings', expect.anything());
+        const homeSettings = mockAddToAppBar.mock.calls.find(([, key]) => key === 'home_settings')[2];
+        await act(async () => {
+            homeSettings.props.onEdit();
+        });
+        expect(screen.getByText('cancel')).toBeInTheDocument();
+        await act(async () => {
+            homeSettings.props.onRefreshRateChange(30);
+            await new Promise(resolve => setTimeout(resolve, 550));
+        });
+        expect(mockSetRefreshRateBackend).toHaveBeenCalledWith(30);
+        fireEvent.click(screen.getByText('add-card'));
+        const saveButton = screen.getByText('save');
+        expect(saveButton).not.toBeDisabled();
+        fireEvent.click(saveButton);
+        await waitFor(() => expect(mockSetDashboard).toHaveBeenCalled());
+        expect(mockSetUser).toHaveBeenCalled();
+    });
+});

package/components/routes/overviews/OverviewViewer.test.d.ts

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

package/components/routes/overviews/OverviewViewer.test.js

@@ -0,0 +1,151 @@
+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 mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockShowSuccessMessage = vi.hoisted(() => vi.fn());
+const mockSetSearchParams = vi.hoisted(() => vi.fn());
+const mockWithConfirmDeleteModal = vi.hoisted(() => vi.fn((cb) => cb()));
+const mockGetOverviews = vi.hoisted(() => vi.fn());
+const mockOverviewPut = vi.hoisted(() => vi.fn((id, content) => ({ id, content })));
+const mockOverviewDelete = vi.hoisted(() => vi.fn((id) => ({ id })));
+const modalContextToken = vi.hoisted(() => ({ name: 'modal-context' }));
+const overviewContextToken = vi.hoisted(() => ({ name: 'overview-context' }));
+let searchParamsValue = new URLSearchParams('analytic=Alpha');
+vi.mock('@mui/icons-material', () => ({
+    Check: () => _jsx("div", { children: "check-icon" }),
+    DarkMode: () => _jsx("div", { children: "dark-icon" }),
+    Delete: () => _jsx("div", { children: "delete-icon" }),
+    WbSunny: () => _jsx("div", { children: "light-icon" })
+}));
+vi.mock('@mui/material', () => ({
+    Autocomplete: ({ options, value, onChange, renderInput }) => (_jsxs("div", { children: [renderInput({}), _jsx("button", { onClick: () => onChange(null, options[0] ?? null), children: typeof value === 'object' ? value?.name : value || 'empty' })] })),
+    Box: ({ children, onMouseDown, onKeyDown }) => (_jsx("div", { onMouseDown: onMouseDown, onKeyDown: onKeyDown, children: children })),
+    Button: ({ children, onClick, disabled }) => (_jsx("button", { onClick: onClick, disabled: disabled, children: children })),
+    CircularProgress: () => _jsx("div", { children: "loading" }),
+    Divider: () => _jsx("div", { children: "divider" }),
+    FormControl: ({ children }) => _jsx("div", { children: children }),
+    LinearProgress: () => _jsx("div", { children: "progress" }),
+    Stack: ({ children, onKeyDown }) => _jsx("div", { onKeyDown: onKeyDown, children: children }),
+    TextField: ({ label, size }) => _jsx("div", { children: label ?? size }),
+    ThemeProvider: ({ children }) => _jsx("div", { children: children }),
+    ToggleButton: ({ children, value }) => _jsx("button", { "data-value": value, children: children }),
+    ToggleButtonGroup: ({ children, onChange }) => (_jsxs("div", { children: [_jsx("button", { onClick: () => onChange(null, 'dark'), children: "switch-dark" }), children] })),
+    Tooltip: ({ children }) => _jsx(_Fragment, { children: children }),
+    useTheme: () => ({ palette: { divider: '#ddd' }, shape: { borderRadius: 4 } })
+}));
+vi.mock('@tui/core', () => ({
+    AppInfoPanel: ({ i18nKey }) => _jsx("div", { children: i18nKey }),
+    PageCenter: ({ children }) => _jsx("div", { children: children }),
+    useAppTheme: () => ({ current: 'default', optionsOverride: {}, mode: 'light' }),
+    useAppThemeBuilder: () => () => ({
+        lightTheme: { palette: { background: { default: '#fff' }, text: { primary: '#111' } } },
+        darkTheme: { palette: { background: { default: '#000' }, text: { primary: '#eee' } } }
+    })
+}));
+vi.mock('api', () => ({
+    default: {
+        search: {
+            analytic: { post: (body) => body },
+            hit: { post: (body) => body }
+        },
+        overview: {
+            put: mockOverviewPut,
+            del: mockOverviewDelete
+        }
+    }
+}));
+vi.mock('components/app/providers/ModalProvider', () => ({
+    ModalContext: modalContextToken
+}));
+vi.mock('components/app/providers/OverviewProvider', () => ({
+    OverviewContext: overviewContextToken
+}));
+vi.mock('components/elements/hit/HitOverview', () => ({
+    default: ({ content, hit }) => _jsx("div", { children: `${content}|${hit?.howler?.analytic}|${hit?.howler?.detection ?? ''}` })
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('components/hooks/useMySnackbar', () => ({
+    default: () => ({ showSuccessMessage: mockShowSuccessMessage })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('react-router', () => ({
+    useSearchParams: () => [searchParamsValue, mockSetSearchParams]
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context === modalContextToken)
+                return { withConfirmDeleteModal: mockWithConfirmDeleteModal };
+            if (context === overviewContextToken)
+                return { getOverviews: mockGetOverviews };
+            return actual.useContext(context);
+        }
+    };
+});
+vi.mock('utils/exampleHit', () => ({
+    getExampleHit: () => ({ howler: { analytic: 'example', detection: 'fallback' } })
+}));
+vi.mock('utils/stringUtils', () => ({
+    sanitizeLuceneQuery: (value) => value
+}));
+vi.mock('./startingTemplate', () => ({
+    useStartingTemplate: () => 'starting-template'
+}));
+vi.mock('../../elements/MarkdownEditor', () => ({
+    default: ({ content, setContent }) => (_jsxs("div", { children: [_jsx("div", { children: content }), _jsx("button", { onClick: () => setContent('updated-content'), children: "edit-content" })] }))
+}));
+import OverviewViewer from './OverviewViewer';
+describe('OverviewViewer', () => {
+    beforeEach(() => {
+        searchParamsValue = new URLSearchParams('analytic=Alpha');
+        mockDispatchApi.mockReset();
+        mockDispatchApi.mockResolvedValue({ items: [] });
+        mockShowSuccessMessage.mockReset();
+        mockSetSearchParams.mockReset();
+        mockWithConfirmDeleteModal.mockClear();
+        mockGetOverviews.mockReset();
+        mockOverviewPut.mockClear();
+        mockOverviewDelete.mockClear();
+    });
+    it('loads an overview, saves edited content, and deletes it', async () => {
+        mockGetOverviews.mockResolvedValueOnce([{ overview_id: 'ov-1', analytic: 'Alpha', content: 'stored-content' }]);
+        mockDispatchApi.mockImplementation(async (request) => {
+            if (request?.query === 'analytic_id:*')
+                return { items: [{ name: 'Alpha', detections: ['det-1'] }] };
+            if (request?.fl === '*')
+                return { items: [] };
+            if (request?.content === 'updated-content')
+                return { overview_id: 'ov-1', analytic: 'Alpha', content: 'updated-content' };
+            return {};
+        });
+        render(_jsx(OverviewViewer, {}));
+        await waitFor(() => expect(screen.getByText('stored-content|Alpha|ANY')).toBeInTheDocument());
+        expect(mockSetSearchParams).toHaveBeenCalled();
+        fireEvent.click(screen.getByText('edit-content'));
+        fireEvent.click(screen.getByText('button.save'));
+        await waitFor(() => expect(mockOverviewPut).toHaveBeenCalledWith('ov-1', 'updated-content'));
+        fireEvent.click(screen.getByText('button.delete'));
+        await waitFor(() => expect(mockOverviewDelete).toHaveBeenCalledWith('ov-1'));
+        expect(mockShowSuccessMessage).toHaveBeenCalledWith('route.overviews.manager.delete.success');
+    });
+    it('renders the selection prompt when no analytic is selected', async () => {
+        searchParamsValue = new URLSearchParams();
+        mockGetOverviews.mockResolvedValueOnce([]);
+        mockDispatchApi.mockImplementation(async (request) => {
+            if (request?.query === 'analytic_id:*')
+                return { items: [] };
+            if (request?.fl === '*')
+                return { items: [] };
+            return {};
+        });
+        render(_jsx(OverviewViewer, {}));
+        await waitFor(() => expect(screen.getByText('route.overviews.select')).toBeInTheDocument());
+    });
+});

package/components/routes/overviews/Overviews.test.d.ts

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

package/components/routes/overviews/Overviews.test.js

@@ -0,0 +1,154 @@
+import { 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 mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockShowSuccessMessage = vi.hoisted(() => vi.fn());
+const mockNavigate = vi.hoisted(() => vi.fn());
+const mockSetSearchParams = vi.hoisted(() => vi.fn());
+const mockLoad = vi.hoisted(() => vi.fn());
+const mockRequest = vi.hoisted(() => vi.fn());
+const mockRemove = vi.hoisted(() => vi.fn());
+const mockGetSearchRequestData = vi.hoisted(() => vi.fn((data) => ({ offset: data.offset })));
+const mockOverviewDelete = vi.hoisted(() => vi.fn((overviewId) => ({ overviewId })));
+const analyticContextToken = vi.hoisted(() => ({ name: 'analytic-context' }));
+const listMethodContextToken = vi.hoisted(() => ({ name: 'list-method-context' }));
+let searchParamsValue = new URLSearchParams();
+let responseValue = {
+    total: 2,
+    items: [
+        { overview_id: 'ov-1', analytic: 'Alpha', detection: 'Match' },
+        { overview_id: 'ov-2', analytic: 'Bravo', detection: 'Unknown' }
+    ]
+};
+let analyticContextValue = {
+    analytics: [{ name: 'Alpha', detections: ['match'] }]
+};
+vi.mock('@mui/icons-material', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        Article: () => _jsx("div", { children: "article-icon" })
+    };
+});
+vi.mock('@mui/material', () => ({
+    Typography: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('api', () => ({
+    default: {
+        search: {
+            overview: {
+                post: 'overview-search'
+            }
+        },
+        overview: {
+            del: mockOverviewDelete
+        }
+    }
+}));
+vi.mock('components/app/providers/AnalyticProvider', () => ({
+    AnalyticContext: analyticContextToken
+}));
+vi.mock('components/app/providers/SearchResponseProvider', () => ({
+    __esModule: true,
+    default: ({ children }) => _jsx("div", { children: children }),
+    createSearchResponseContext: () => ({}),
+    useSearchResponseContext: () => ({
+        response: responseValue,
+        request: mockRequest,
+        remove: mockRemove,
+        getSearchRequestData: mockGetSearchRequestData
+    })
+}));
+vi.mock('components/elements/addons/lists', () => ({
+    TuiListProvider: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/elements/addons/lists/TuiListProvider', () => ({
+    TuiListMethodContext: listMethodContextToken
+}));
+vi.mock('components/elements/display/ItemManager', () => ({
+    default: (props) => (_jsxs("div", { children: [_jsx("button", { onClick: () => props.onSearch(), children: "search" }), _jsx("button", { onClick: () => props.onPageChange(50), children: "page" }), _jsx("button", { onClick: () => props.onCreate(), children: "create" }), _jsx("button", { onClick: () => props.onSelect({ id: 'ov-1', item: responseValue.items[0] }), children: "select" }), _jsx("div", { children: props.aboveSearch }), _jsx("div", { children: String(props.hasError) }), _jsx("div", { children: String(props.searching) }), props.response?.items?.map((item) => (_jsx("div", { children: props.renderer({ item: { item, disabled: item.overview_id === 'ov-2' } }, () => 'card') }, item.overview_id)))] }))
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('components/hooks/useMyLocalStorage', () => ({
+    useMyLocalStorageItem: () => [25]
+}));
+vi.mock('components/hooks/useMySnackbar', () => ({
+    default: () => ({ showSuccessMessage: mockShowSuccessMessage })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('react-router', () => ({
+    useNavigate: () => mockNavigate,
+    useSearchParams: () => [searchParamsValue, mockSetSearchParams]
+}));
+vi.mock('./OverviewCard', () => ({
+    default: ({ overview, error, onRemove, className }) => (_jsxs("div", { children: [_jsx("span", { children: `${overview.overview_id}:${String(error)}:${className}` }), _jsxs("button", { onClick: () => onRemove(overview.overview_id), children: ["remove-", overview.overview_id] })] }))
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context === analyticContextToken) {
+                return analyticContextValue;
+            }
+            if (context === listMethodContextToken) {
+                return { load: mockLoad };
+            }
+            return actual.useContext(context);
+        }
+    };
+});
+import Overviews from './Overviews';
+describe('Overviews', () => {
+    beforeEach(() => {
+        searchParamsValue = new URLSearchParams();
+        responseValue = {
+            total: 2,
+            items: [
+                { overview_id: 'ov-1', analytic: 'Alpha', detection: 'Match' },
+                { overview_id: 'ov-2', analytic: 'Bravo', detection: 'Unknown' }
+            ]
+        };
+        analyticContextValue = { analytics: [{ name: 'Alpha', detections: ['match'] }] };
+        mockDispatchApi.mockReset();
+        mockShowSuccessMessage.mockReset();
+        mockNavigate.mockReset();
+        mockSetSearchParams.mockReset();
+        mockLoad.mockReset();
+        mockRequest.mockReset();
+        mockRemove.mockReset();
+        mockGetSearchRequestData.mockClear();
+        mockOverviewDelete.mockReset();
+    });
+    it('searches, loads list items, paginates, and navigates', async () => {
+        render(_jsx(Overviews, {}));
+        await waitFor(() => expect(mockRequest).toHaveBeenCalledWith('overview-search', { query: '*:*', rows: 25, offset: 0 }));
+        expect(mockLoad).toHaveBeenCalledWith([
+            expect.objectContaining({ id: 'ov-1', disabled: false }),
+            expect.objectContaining({ id: 'ov-2', disabled: true })
+        ]);
+        fireEvent.click(screen.getByText('page'));
+        expect(mockSetSearchParams).toHaveBeenCalled();
+        fireEvent.click(screen.getByText('select'));
+        expect(mockNavigate).toHaveBeenCalledWith('/overviews/view?analytic=Alpha&detection=Match');
+        fireEvent.click(screen.getByText('create'));
+        expect(mockNavigate).toHaveBeenCalledWith('/overviews/view');
+    });
+    it('removes overviews and tolerates delete errors', async () => {
+        mockDispatchApi.mockResolvedValueOnce({});
+        render(_jsx(Overviews, {}));
+        fireEvent.click(screen.getByText('remove-ov-1'));
+        await waitFor(() => expect(mockOverviewDelete).toHaveBeenCalledWith('ov-1'));
+        expect(mockRemove).toHaveBeenCalledWith('ov-1');
+        expect(mockShowSuccessMessage).toHaveBeenCalledWith('route.overviews.manager.delete.success');
+        const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+        mockDispatchApi.mockRejectedValueOnce(new Error('delete failed'));
+        fireEvent.click(screen.getByText('remove-ov-2'));
+        await waitFor(() => expect(warnSpy).toHaveBeenCalled());
+    });
+});

package/components/routes/settings/AdminSection.test.d.ts

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

package/components/routes/settings/AdminSection.test.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+const mockExecuteFunction = vi.hoisted(() => vi.fn());
+vi.mock('plugins/store', () => ({
+    default: { plugins: ['demo'] }
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({ executeFunction: mockExecuteFunction })
+}));
+vi.mock('./SettingsSection', () => ({
+    default: ({ children, title }) => (_jsxs("div", { children: [_jsx("span", { children: title }), children] }))
+}));
+import AdminSection from './AdminSection';
+describe('AdminSection', () => {
+    it('renders plugin-provided admin settings', () => {
+        mockExecuteFunction.mockReturnValue(_jsx("div", { children: "admin-plugin" }));
+        render(_jsx(AdminSection, {}));
+        expect(screen.getByText('page.settings.admin.title')).toBeInTheDocument();
+        expect(screen.getByText('admin-plugin')).toBeInTheDocument();
+    });
+});

package/components/routes/settings/LocalSection.test.d.ts

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

package/components/routes/settings/LocalSection.test.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockExecuteFunction = vi.hoisted(() => vi.fn());
+const setters = vi.hoisted(() => Array.from({ length: 9 }, () => vi.fn()));
+const storageValues = [true, false, false, true, 'normal', 'list', 25, null, null];
+vi.mock('@mui/icons-material', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        List: () => _jsx("div", { children: "list-icon" }),
+        TableChart: () => _jsx("div", { children: "table-icon" }),
+        ViewComfy: () => _jsx("div", { children: "comfy-icon" }),
+        ViewCompact: () => _jsx("div", { children: "dense-icon" }),
+        ViewModule: () => _jsx("div", { children: "normal-icon" })
+    };
+});
+vi.mock('@mui/material', () => ({
+    MenuItem: ({ children }) => _jsx("option", { children: children }),
+    Select: ({ value, onChange }) => (_jsxs("select", { "aria-label": "page-count", value: value, onChange: onChange, children: [_jsx("option", { value: 5, children: "5" }), _jsx("option", { value: 25, children: "25" }), _jsx("option", { value: 50, children: "50" })] })),
+    Stack: ({ children }) => _jsx("div", { children: children }),
+    TableCell: ({ children }) => _jsx("div", { children: children }),
+    TableRow: ({ children }) => _jsx("div", { children: children }),
+    ToggleButton: ({ children, value }) => _jsx("button", { "data-value": value, children: children }),
+    ToggleButtonGroup: ({ children, onChange }) => (_jsxs("div", { children: [_jsx("button", { onClick: () => onChange(null, 'dense'), children: "choose-layout" }), _jsx("button", { onClick: () => onChange(null, 'grid'), children: "choose-display" }), children] })),
+    Typography: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/hooks/useMyLocalStorage', () => ({
+    useMyLocalStorageItem: vi.fn((_, defaultValue) => {
+        const index = vi.mocked.calls ?? 0;
+        return [storageValues[index] ?? defaultValue, setters[index]];
+    })
+}));
+vi.mock('plugins/store', () => ({
+    default: { plugins: ['demo'] }
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({ executeFunction: mockExecuteFunction })
+}));
+vi.mock('../../elements/EditRow', () => ({
+    default: ({ titleKey, onEdit, value }) => (_jsx("button", { onClick: () => onEdit?.('true'), children: `${titleKey}:${String(value)}` }))
+}));
+vi.mock('./SettingsSection', () => ({
+    default: ({ children, title }) => (_jsxs("div", { children: [_jsx("span", { children: title }), children] }))
+}));
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import LocalSection from './LocalSection';
+describe('LocalSection', () => {
+    beforeEach(() => {
+        let call = 0;
+        vi.mocked(useMyLocalStorageItem).mockImplementation((_, defaultValue) => {
+            const index = call++;
+            return [storageValues[index] ?? defaultValue, setters[index]];
+        });
+        setters.forEach(fn => fn.mockReset());
+        mockExecuteFunction.mockReset();
+        mockExecuteFunction.mockReturnValue(_jsx("div", { children: "local-plugin" }));
+    });
+    it('updates stored local preferences and renders plugin settings', () => {
+        render(_jsx(LocalSection, {}));
+        fireEvent.click(screen.getByText('page.settings.local.compact.json:true'));
+        expect(setters[0]).toHaveBeenCalledWith(true);
+        fireEvent.click(screen.getAllByText('choose-layout')[0]);
+        expect(setters[4]).toHaveBeenCalledWith('dense');
+        fireEvent.click(screen.getAllByText('choose-display')[1]);
+        expect(setters[5]).toHaveBeenCalledWith('grid');
+        fireEvent.change(screen.getByLabelText('page-count'), { target: { value: '50' } });
+        expect(setters[6]).toHaveBeenCalledWith(50);
+        expect(screen.getByText('local-plugin')).toBeInTheDocument();
+    });
+});

package/components/routes/settings/ProfileSection.test.d.ts

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