@cccsaurora/howler-ui 2.19.0-dev.959 → 2.19.0-dev.971

package/components/elements/display/QueryResultText.test.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import { setupReactRouterMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { vi } from 'vitest';
+setupReactRouterMock();
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import QueryResultText from './QueryResultText';
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('QueryResultText', () => {
+    afterAll(() => vi.resetModules());
+    describe('rendering', () => {
+        it('renders a Typography element', () => {
+            const { container } = render(_jsx(QueryResultText, { count: 5, query: "howler.status:open" }), { wrapper: Wrapper });
+            expect(container.querySelector('.MuiTypography-root')).toBeInTheDocument();
+        });
+        it('renders with body2 variant', () => {
+            const { container } = render(_jsx(QueryResultText, { count: 5, query: "howler.status:open" }), { wrapper: Wrapper });
+            expect(container.firstChild).toHaveClass('MuiTypography-body2');
+        });
+        it('renders a link element', () => {
+            render(_jsx(QueryResultText, { count: 5, query: "howler.status:open" }), { wrapper: Wrapper });
+            expect(screen.getByRole('link')).toBeInTheDocument();
+        });
+        it('encodes the query in the link href', () => {
+            render(_jsx(QueryResultText, { count: 5, query: "howler.status:open AND howler.id:*" }), { wrapper: Wrapper });
+            const link = screen.getByRole('link');
+            expect(link).toHaveAttribute('href', '/hits?query=howler.status%3Aopen%20AND%20howler.id%3A*');
+        });
+        it('handles special characters in query', () => {
+            render(_jsx(QueryResultText, { count: 1, query: 'howler.detection:"test & value"' }), { wrapper: Wrapper });
+            const link = screen.getByRole('link');
+            expect(link.getAttribute('href')).toContain('/hits?query=');
+            expect(link.getAttribute('href')).toContain(encodeURIComponent('howler.detection:"test & value"'));
+        });
+    });
+    describe('count display', () => {
+        it('displays the count value', () => {
+            render(_jsx(QueryResultText, { count: 42, query: "test" }), { wrapper: Wrapper });
+            expect(screen.getByText(/42/)).toBeInTheDocument();
+        });
+        it('displays zero count', () => {
+            render(_jsx(QueryResultText, { count: 0, query: "test" }), { wrapper: Wrapper });
+            expect(screen.getByText(/0/)).toBeInTheDocument();
+        });
+    });
+});

package/components/elements/display/TextDivider.test.d.ts

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

package/components/elements/display/TextDivider.test.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import TextDivider from './TextDivider';
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('TextDivider', () => {
+    describe('rendering', () => {
+        it('renders without crashing', () => {
+            const { container } = render(_jsx(TextDivider, {}), { wrapper: Wrapper });
+            expect(container.firstChild).toBeInTheDocument();
+        });
+        it('renders with inline-block display style', () => {
+            const { container } = render(_jsx(TextDivider, {}), { wrapper: Wrapper });
+            expect(container.firstChild).toHaveStyle({ display: 'inline-block' });
+        });
+        it('renders with text-align center', () => {
+            const { container } = render(_jsx(TextDivider, {}), { wrapper: Wrapper });
+            expect(container.firstChild).toHaveStyle({ textAlign: 'center' });
+        });
+        it('renders with width 100%', () => {
+            const { container } = render(_jsx(TextDivider, {}), { wrapper: Wrapper });
+            expect(container.firstChild).toHaveStyle({ width: '100%' });
+        });
+        it('renders with position relative', () => {
+            const { container } = render(_jsx(TextDivider, {}), { wrapper: Wrapper });
+            expect(container.firstChild).toHaveStyle({ position: 'relative' });
+        });
+        it('renders a nested div element', () => {
+            const { container } = render(_jsx(TextDivider, {}), { wrapper: Wrapper });
+            const outerDiv = container.firstChild;
+            expect(outerDiv.querySelector('div')).toBeInTheDocument();
+        });
+        it('renders the translated divider text', () => {
+            const { container } = render(_jsx(TextDivider, {}), { wrapper: Wrapper });
+            // The divider uses i18n key 'divider', text should be present
+            const innerDiv = container.querySelector('div > div');
+            expect(innerDiv).toBeInTheDocument();
+            expect(innerDiv.textContent).toBeTruthy();
+        });
+    });
+});

package/components/elements/display/TypingIndicator.test.d.ts

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

package/components/elements/display/TypingIndicator.test.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render } from '@testing-library/react';
+import TypingIndicator from './TypingIndicator';
+describe('TypingIndicator', () => {
+    describe('rendering', () => {
+        it('renders exactly three circle icons', () => {
+            const { container } = render(_jsx(TypingIndicator, {}));
+            // Each Circle icon renders as an <svg> element
+            const svgs = container.querySelectorAll('svg');
+            expect(svgs).toHaveLength(3);
+        });
+        it('renders a root Stack element', () => {
+            const { container } = render(_jsx(TypingIndicator, {}));
+            expect(container.firstChild).toBeInTheDocument();
+        });
+        it('renders with flex row layout', () => {
+            const { container } = render(_jsx(TypingIndicator, {}));
+            // MUI Stack with direction="row" uses flexbox
+            const root = container.firstChild;
+            expect(root).toHaveStyle({ display: 'flex', flexDirection: 'row' });
+        });
+    });
+    describe('accessibility', () => {
+        it('renders the circles as SVG elements', () => {
+            const { container } = render(_jsx(TypingIndicator, {}));
+            const svgs = container.querySelectorAll('svg');
+            svgs.forEach(svg => {
+                expect(svg.tagName.toLowerCase()).toBe('svg');
+            });
+        });
+    });
+});

package/components/routes/403.test.d.ts

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

package/components/routes/403.test.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { describe, expect, it, vi } from 'vitest';
+import PermissionDeniedPage from './403';
+vi.mock('commons/components/pages/PageCenter', () => ({
+    default: ({ children }) => _jsx("div", { id: "page-center", children: children })
+}));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('PermissionDeniedPage (403)', () => {
+    it('should render the 403 title and description', () => {
+        render(_jsx(PermissionDeniedPage, {}), { wrapper: Wrapper });
+        expect(screen.getByText('403: Access Forbidden')).toBeInTheDocument();
+        expect(screen.getByText('You do not have permission to access this page.')).toBeInTheDocument();
+    });
+    it('should render inside PageCenter', () => {
+        render(_jsx(PermissionDeniedPage, {}), { wrapper: Wrapper });
+        expect(screen.getByTestId('page-center')).toBeInTheDocument();
+    });
+    it('should render the PersonOff icon', () => {
+        render(_jsx(PermissionDeniedPage, {}), { wrapper: Wrapper });
+        // MUI SVG icons have data-testid attribute
+        expect(document.querySelector('[data-testid="PersonOffIcon"]')).toBeInTheDocument();
+    });
+});

package/components/routes/404.test.d.ts

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

package/components/routes/404.test.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { describe, expect, it, vi } from 'vitest';
+import NotFoundPage from './404';
+vi.mock('commons/components/pages/PageCenter', () => ({
+    default: ({ children }) => _jsx("div", { id: "page-center", children: children })
+}));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('NotFoundPage (404)', () => {
+    it('should render the 404 title and description', () => {
+        render(_jsx(NotFoundPage, {}), { wrapper: Wrapper });
+        expect(screen.getByText('404: Not found')).toBeInTheDocument();
+        expect(screen.getByText('The page you are looking for cannot be found...')).toBeInTheDocument();
+    });
+    it('should render inside PageCenter', () => {
+        render(_jsx(NotFoundPage, {}), { wrapper: Wrapper });
+        expect(screen.getByTestId('page-center')).toBeInTheDocument();
+    });
+    it('should render the LinkOff icon', () => {
+        render(_jsx(NotFoundPage, {}), { wrapper: Wrapper });
+        expect(document.querySelector('[data-testid="LinkOffIcon"]')).toBeInTheDocument();
+    });
+});

package/components/routes/ErrorBoundary.test.d.ts

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

package/components/routes/ErrorBoundary.test.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { describe, expect, it, vi } from 'vitest';
+import ErrorBoundary from './ErrorBoundary';
+vi.mock('commons/components/pages/PageCenter', () => ({
+    default: ({ children }) => _jsx("div", { id: "page-center", children: children })
+}));
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({
+        executeFunction: vi.fn(() => null)
+    })
+}));
+vi.mock('plugins/store', () => ({
+    default: { plugins: [] }
+}));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+const ThrowingComponent = ({ error }) => {
+    throw error;
+};
+describe('ErrorBoundary', () => {
+    it('should render children when no error occurs', () => {
+        render(_jsx(ErrorBoundary, { children: _jsx("div", { children: "Child content" }) }), { wrapper: Wrapper });
+        expect(screen.getByText('Child content')).toBeInTheDocument();
+    });
+    it('should render error UI when a child throws', () => {
+        const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
+        const testError = new Error('Test error message');
+        testError.stack = 'Error: Test error message\n    at TestComponent';
+        render(_jsx(ErrorBoundary, { children: _jsx(ThrowingComponent, { error: testError }) }), { wrapper: Wrapper });
+        expect(screen.getByText('Test error message')).toBeInTheDocument();
+        consoleSpy.mockRestore();
+    });
+    it('should display the error page title when an error occurs', () => {
+        const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
+        const testError = new Error('Something went wrong');
+        render(_jsx(ErrorBoundary, { children: _jsx(ThrowingComponent, { error: testError }) }), { wrapper: Wrapper });
+        expect(screen.getByText('Application Stopped Working')).toBeInTheDocument();
+        consoleSpy.mockRestore();
+    });
+});

package/components/routes/ErrorOccured.test.d.ts

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

package/components/routes/ErrorOccured.test.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { describe, expect, it, vi } from 'vitest';
+import ErrorOccured from './ErrorOccured';
+vi.mock('commons/components/pages/PageCenter', () => ({
+    default: ({ children }) => _jsx("div", { id: "page-center", children: children })
+}));
+const mockExecuteFunction = vi.fn(() => null);
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({
+        executeFunction: mockExecuteFunction
+    })
+}));
+vi.mock('plugins/store', () => ({
+    default: { plugins: ['TestPlugin'] }
+}));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('ErrorOccured', () => {
+    it('should render the error title and description', () => {
+        render(_jsx(ErrorOccured, {}), { wrapper: Wrapper });
+        expect(screen.getByText('Application Stopped Working')).toBeInTheDocument();
+        expect(screen.getByText('The application stopped working suddenly. If the problem persists please reach out on teams.')).toBeInTheDocument();
+    });
+    it('should render inside PageCenter', () => {
+        render(_jsx(ErrorOccured, {}), { wrapper: Wrapper });
+        expect(screen.getByTestId('page-center')).toBeInTheDocument();
+    });
+    it('should execute plugin support functions', () => {
+        render(_jsx(ErrorOccured, {}), { wrapper: Wrapper });
+        expect(mockExecuteFunction).toHaveBeenCalledWith('TestPlugin.support');
+    });
+});

package/components/routes/Logout.test.d.ts

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

package/components/routes/Logout.test.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import Logout from './Logout';
+const mockHideMenus = vi.fn();
+const mockClear = vi.fn();
+vi.mock('commons/components/app/hooks', () => ({
+    useAppBanner: () => _jsx("div", { "data-testid": "app-banner", children: "Banner" }),
+    useAppLayout: () => ({
+        hideMenus: mockHideMenus
+    })
+}));
+vi.mock('components/hooks/useMyLocalStorage', () => ({
+    default: () => ({
+        clear: mockClear
+    })
+}));
+vi.mock('commons/components/pages/PageCardCentered', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('Logout', () => {
+    const originalLocation = window.location;
+    beforeEach(() => {
+        vi.useFakeTimers();
+        // Mock window.location.replace
+        Object.defineProperty(window, 'location', {
+            value: { ...originalLocation, replace: vi.fn() },
+            writable: true
+        });
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+        Object.defineProperty(window, 'location', { value: originalLocation, writable: true });
+        vi.clearAllMocks();
+    });
+    it('should render the logout message', () => {
+        render(_jsx(Logout, {}), { wrapper: Wrapper });
+        expect(screen.getByText(/Logging out current user/)).toBeInTheDocument();
+    });
+    it('should render the app banner', () => {
+        render(_jsx(Logout, {}), { wrapper: Wrapper });
+        expect(screen.getByText('Banner')).toBeInTheDocument();
+    });
+    it('should hide menus on mount', () => {
+        render(_jsx(Logout, {}), { wrapper: Wrapper });
+        expect(mockHideMenus).toHaveBeenCalled();
+    });
+    it('should clear localStorage and redirect after 2 seconds', () => {
+        render(_jsx(Logout, {}), { wrapper: Wrapper });
+        expect(mockClear).not.toHaveBeenCalled();
+        vi.advanceTimersByTime(2000);
+        expect(mockClear).toHaveBeenCalled();
+        expect(window.location.replace).toHaveBeenCalledWith('/');
+    });
+});

package/components/routes/home/AddNewCard.test.d.ts

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

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import React from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { setupContextSelectorMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import AddNewCard from './AddNewCard';
+setupContextSelectorMock();
+const mockApiSearchAnalyticPost = vi.fn();
+vi.mock('api', () => ({
+    default: {
+        search: {
+            analytic: {
+                post: (...args) => mockApiSearchAnalyticPost(...args)
+            }
+        }
+    }
+}));
+vi.mock('components/elements/addons/buttons/CustomButton', () => ({
+    default: ({ children, disabled, onClick, ...props }) => (_jsx("button", { disabled: disabled, onClick: onClick, ...props, children: children }))
+}));
+const mockFetchViews = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+vi.mock('components/app/providers/ViewProvider', () => ({
+    ViewContext: React.createContext({
+        views: {
+            'view-1': { view_id: 'view-1', title: 'My View', query: 'howler.status:open', sort: 'event.created desc', span: 'date.range.1.month', type: 'personal', owner: 'testuser', settings: { advance_on_triage: false } },
+            'view-2': { view_id: 'view-2', title: 'Second View', query: 'howler.status:open', sort: 'event.created desc', span: 'date.range.1.month', type: 'personal', owner: 'testuser', settings: { advance_on_triage: false } }
+        },
+        fetchViews: mockFetchViews
+    })
+}));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('AddNewCard', () => {
+    const mockAddCard = vi.fn();
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockApiSearchAnalyticPost.mockResolvedValue({
+            items: [{ analytic_id: 'analytic-1', name: 'Test Analytic', description: 'Test description' }],
+            total: 1
+        });
+    });
+    it('should render the add card title', async () => {
+        render(_jsx(AddNewCard, { dashboard: [], addCard: mockAddCard }), { wrapper: Wrapper });
+        await waitFor(() => {
+            expect(screen.getByText('Add New Panel')).toBeInTheDocument();
+        });
+    });
+    it('should render the description', async () => {
+        render(_jsx(AddNewCard, { dashboard: [], addCard: mockAddCard }), { wrapper: Wrapper });
+        await waitFor(() => {
+            expect(screen.getByText(/Add an additional panel/)).toBeInTheDocument();
+        });
+    });
+    it('should have the create button disabled initially', async () => {
+        render(_jsx(AddNewCard, { dashboard: [], addCard: mockAddCard }), { wrapper: Wrapper });
+        await waitFor(() => {
+            expect(screen.getByRole('button', { name: /Create/i })).toBeDisabled();
+        });
+    });
+    it('should fetch analytics on mount', async () => {
+        render(_jsx(AddNewCard, { dashboard: [], addCard: mockAddCard }), { wrapper: Wrapper });
+        await waitFor(() => {
+            expect(mockApiSearchAnalyticPost).toHaveBeenCalledWith(expect.objectContaining({ query: '*:*' }));
+        });
+    });
+});

package/components/routes/home/ViewRefresh.test.d.ts

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

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

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, act } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import React from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import ViewRefresh, {} from './ViewRefresh';
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('ViewRefresh', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+    it('should render the refresh button', () => {
+        const onRefresh = vi.fn();
+        render(_jsx(ViewRefresh, { refreshRate: 30, viewCardCount: 2, onRefresh: onRefresh }), { wrapper: Wrapper });
+        expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+    it('should show a progress indicator initially', () => {
+        const onRefresh = vi.fn();
+        render(_jsx(ViewRefresh, { refreshRate: 30, viewCardCount: 2, onRefresh: onRefresh }), { wrapper: Wrapper });
+        expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    });
+    it('should trigger refresh when progress reaches 100%', async () => {
+        const onRefresh = vi.fn();
+        render(_jsx(ViewRefresh, { refreshRate: 30, viewCardCount: 2, onRefresh: onRefresh }), { wrapper: Wrapper });
+        // Progress increments by 1 every refreshRate*10ms = 300ms.
+        // Each increment triggers a re-render and a new setTimeout.
+        // We advance one tick at a time inside act to let React process each state update.
+        for (let i = 0; i < 101; i++) {
+            await act(async () => {
+                vi.advanceTimersByTime(300);
+            });
+        }
+        expect(onRefresh).toHaveBeenCalled();
+    });
+    it('should clear refreshing state when all cards report back via ref', async () => {
+        const onRefresh = vi.fn();
+        const ref = React.createRef();
+        render(_jsx(ViewRefresh, { ref: ref, refreshRate: 30, viewCardCount: 2, onRefresh: onRefresh }), { wrapper: Wrapper });
+        // Advance to 100% to trigger refresh
+        for (let i = 0; i < 101; i++) {
+            await act(async () => {
+                vi.advanceTimersByTime(300);
+            });
+        }
+        expect(onRefresh).toHaveBeenCalled();
+        // Simulate both cards completing
+        act(() => {
+            ref.current?.handleRefreshComplete();
+            ref.current?.handleRefreshComplete();
+        });
+        // After all cards complete, the progress should reset (button re-enabled)
+        expect(screen.getByRole('button')).not.toBeDisabled();
+    });
+    it('should trigger refresh via manual click', () => {
+        const onRefresh = vi.fn();
+        render(_jsx(ViewRefresh, { refreshRate: 30, viewCardCount: 2, onRefresh: onRefresh }), { wrapper: Wrapper });
+        // Click the refresh button directly using fireEvent (avoids userEvent timer issues)
+        const button = screen.getByRole('button');
+        act(() => {
+            button.click();
+        });
+        expect(onRefresh).toHaveBeenCalled();
+    });
+    it('should not call onRefresh when viewCardCount is 0 and button is clicked', () => {
+        const onRefresh = vi.fn();
+        render(_jsx(ViewRefresh, { refreshRate: 30, viewCardCount: 0, onRefresh: onRefresh }), { wrapper: Wrapper });
+        const button = screen.getByRole('button');
+        act(() => {
+            button.click();
+        });
+        // onRefresh should not be called because viewCardCount is 0
+        expect(onRefresh).not.toHaveBeenCalled();
+    });
+});

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

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

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

@@ -0,0 +1,108 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import OverviewCard from './OverviewCard';
+vi.mock('components/elements/display/HowlerAvatar', () => ({
+    default: ({ userId }) => _jsx("div", { id: "howler-avatar", children: userId })
+}));
+vi.mock('components/elements/addons/layout/FlexOne', () => ({
+    default: () => _jsx("div", { id: "flex-one" })
+}));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('OverviewCard', () => {
+    let user;
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+    });
+    it('should render overview analytic and detection', () => {
+        const overview = {
+            overview_id: 'ov-1',
+            analytic: 'Test Analytic',
+            detection: 'Test Detection',
+            content: 'line 1\nline 2\nline 3',
+            owner: 'testuser'
+        };
+        render(_jsx(OverviewCard, { overview: overview }), { wrapper: Wrapper });
+        expect(screen.getByText(/Test Analytic/)).toBeInTheDocument();
+        expect(screen.getByText(/Test Detection/)).toBeInTheDocument();
+    });
+    it('should render "All" when detection is null', () => {
+        const overview = {
+            overview_id: 'ov-1',
+            analytic: 'Test Analytic',
+            detection: null,
+            content: 'line 1',
+            owner: 'testuser'
+        };
+        render(_jsx(OverviewCard, { overview: overview }), { wrapper: Wrapper });
+        expect(screen.getByText(/All/)).toBeInTheDocument();
+    });
+    it('should display content preview (max 3 lines)', () => {
+        const overview = {
+            overview_id: 'ov-1',
+            analytic: 'Test Analytic',
+            detection: null,
+            content: 'first line\nsecond line\nthird line\nfourth line\nfifth line',
+            owner: 'testuser'
+        };
+        render(_jsx(OverviewCard, { overview: overview }), { wrapper: Wrapper });
+        expect(screen.getByText(/first line/)).toBeInTheDocument();
+        expect(screen.getByText(/second line/)).toBeInTheDocument();
+        expect(screen.getByText(/third line/)).toBeInTheDocument();
+    });
+    it('should render the owner avatar', () => {
+        const overview = {
+            overview_id: 'ov-1',
+            analytic: 'Test Analytic',
+            detection: null,
+            content: 'content',
+            owner: 'testuser'
+        };
+        render(_jsx(OverviewCard, { overview: overview }), { wrapper: Wrapper });
+        expect(screen.getByTestId('howler-avatar')).toBeInTheDocument();
+        expect(screen.getByText('testuser')).toBeInTheDocument();
+    });
+    it('should not show delete button when onDelete is not provided', () => {
+        const overview = {
+            overview_id: 'ov-1',
+            analytic: 'Test Analytic',
+            detection: null,
+            content: 'content',
+            owner: 'testuser'
+        };
+        render(_jsx(OverviewCard, { overview: overview }), { wrapper: Wrapper });
+        expect(document.querySelector('[data-testid="DeleteIcon"]')).not.toBeInTheDocument();
+    });
+    it('should show delete button and call onDelete when clicked', async () => {
+        const mockOnDelete = vi.fn();
+        const overview = {
+            overview_id: 'ov-1',
+            analytic: 'Test Analytic',
+            detection: null,
+            content: 'content',
+            owner: 'testuser'
+        };
+        render(_jsx(OverviewCard, { overview: overview, onDelete: mockOnDelete }), { wrapper: Wrapper });
+        const deleteButton = document.querySelector('[data-testid="DeleteIcon"]').closest('button');
+        await user.click(deleteButton);
+        expect(mockOnDelete).toHaveBeenCalledWith(expect.anything(), 'ov-1');
+    });
+    it('should apply custom className', () => {
+        const overview = {
+            overview_id: 'ov-1',
+            analytic: 'Test Analytic',
+            detection: null,
+            content: 'content',
+            owner: 'testuser'
+        };
+        const { container } = render(_jsx(OverviewCard, { overview: overview, className: "custom-class" }), {
+            wrapper: Wrapper
+        });
+        expect(container.querySelector('.custom-class')).toBeInTheDocument();
+    });
+});

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

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

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import SettingsSection from './SettingsSection';
+describe('SettingsSection', () => {
+    it('should render the title in a table header', () => {
+        render(_jsx(SettingsSection, { title: "Test Section", colSpan: 3, children: _jsx("tr", { children: _jsx("td", { children: "Content" }) }) }));
+        expect(screen.getByText('Test Section')).toBeInTheDocument();
+    });
+    it('should render children inside a table body', () => {
+        render(_jsx(SettingsSection, { title: "Test Section", colSpan: 2, children: _jsx("tr", { children: _jsx("td", { children: "Row Content" }) }) }));
+        expect(screen.getByText('Row Content')).toBeInTheDocument();
+    });
+    it('should use the title as the table aria-label', () => {
+        render(_jsx(SettingsSection, { title: "Accessible Section", colSpan: 3, children: _jsx("tr", { children: _jsx("td", { children: "Content" }) }) }));
+        expect(screen.getByRole('table', { name: 'Accessible Section' })).toBeInTheDocument();
+    });
+});

package/components/routes/templates/TemplateCard.test.d.ts

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