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

package/components/routes/help/ActionDocumentation.test.js

@@ -0,0 +1,58 @@
+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 { describe, expect, it, vi } from 'vitest';
+const mockUseMediaQuery = vi.hoisted(() => vi.fn(() => false));
+const mockSetSearchParams = vi.hoisted(() => vi.fn());
+const searchParams = new URLSearchParams({ tab: 'plugin-doc' });
+const mockExecuteFunction = vi.hoisted(() => vi.fn(() => ({
+    id: 'plugin-doc',
+    i18nKey: 'plugin.doc',
+    component: () => _jsx("div", { children: "plugin documentation" })
+})));
+vi.mock('@mui/material', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useMediaQuery: mockUseMediaQuery
+    };
+});
+vi.mock('@tui/core', () => ({
+    PageCenter: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/hooks/useScrollRestoration', () => ({
+    useScrollRestoration: vi.fn()
+}));
+vi.mock('plugins/store', () => ({
+    default: {
+        operations: ['triage']
+    }
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({ executeFunction: mockExecuteFunction })
+}));
+vi.mock('react-router', () => ({
+    useSearchParams: () => [searchParams, mockSetSearchParams]
+}));
+vi.mock('./ActionIntroductionDocumentation', () => ({
+    default: () => _jsx("div", { children: "intro documentation" })
+}));
+vi.mock('./components/HelpTabs', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+import ActionDocumentation from './ActionDocumentation';
+describe('ActionDocumentation', () => {
+    it('renders plugin documentation from the selected tab and updates search params on tab change', async () => {
+        const user = userEvent.setup();
+        render(_jsx(ActionDocumentation, {}));
+        expect(screen.getByText('plugin documentation')).toBeInTheDocument();
+        await user.click(screen.getByRole('tab', { name: 'help.actions.introduction' }));
+        expect(screen.getByText('intro documentation')).toBeInTheDocument();
+        expect(mockSetSearchParams).toHaveBeenCalled();
+        expect(mockExecuteFunction).toHaveBeenCalledWith('operation.triage.documentation');
+    });
+});

package/components/routes/help/ActionIntroductionDocumentation.test.d.ts

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

package/components/routes/help/ActionIntroductionDocumentation.test.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+const mockOperationsGet = vi.hoisted(() => vi.fn());
+vi.mock('@tui/core', () => ({
+    useAppUser: () => ({ user: { roles: ['analyst'] } })
+}));
+vi.mock('api', () => ({
+    default: {
+        action: {
+            operations: {
+                get: mockOperationsGet
+            }
+        }
+    }
+}));
+vi.mock('components/elements/addons/search/phrase/Phrase', () => ({
+    default: () => _jsx("div", { children: "phrase" })
+}));
+vi.mock('components/elements/display/Markdown', () => ({
+    default: ({ components }) => (_jsxs("div", { children: [_jsx("div", { children: components.action_count }), _jsx("div", { children: components.action_list }), _jsx("div", { children: components.tui_phrase }), _jsx("div", { children: components.operation_select }), _jsx("div", { children: components.operation_configuration }), _jsx("div", { children: components.report }), _jsx("div", { children: components.automation_options })] }))
+}));
+vi.mock('../../elements/display/QueryResultText', () => ({
+    default: ({ count, query }) => (_jsxs("div", { children: [count, ":", query] }))
+}));
+vi.mock('../action/shared/ActionReportDisplay', () => ({
+    default: ({ operations }) => _jsxs("div", { children: ["report:", operations.length] })
+}));
+vi.mock('../action/shared/OperationStep', () => ({
+    default: ({ step }) => _jsxs("div", { children: ["step:", Object.keys(step.args).join(',')] })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        i18n: { language: 'en' },
+        t: (key) => key
+    })
+}));
+import ActionIntroductionDocumentation from './ActionIntroductionDocumentation';
+describe('ActionIntroductionDocumentation', () => {
+    it('loads permitted operations and renders the markdown component slots', async () => {
+        mockOperationsGet.mockResolvedValue([
+            {
+                id: 'add_label',
+                title: 'Add Label',
+                description: { short: 'Short desc' },
+                roles: ['analyst'],
+                steps: [{ args: { category: true } }]
+            },
+            {
+                id: 'blocked',
+                title: 'Blocked',
+                description: { short: 'Blocked desc' },
+                roles: ['admin'],
+                steps: []
+            }
+        ]);
+        render(_jsx(ActionIntroductionDocumentation, {}));
+        await waitFor(() => expect(screen.getByText('1')).toBeInTheDocument());
+        expect(screen.getByText(/operations.add_label/)).toBeInTheDocument();
+        expect(screen.queryByText(/blocked/i)).toBeNull();
+        expect(screen.getByText('phrase')).toBeInTheDocument();
+        expect(screen.getByText('134:howler.id:*')).toBeInTheDocument();
+        expect(screen.getByText('step:category')).toBeInTheDocument();
+        expect(screen.getByText('report:1')).toBeInTheDocument();
+        expect(screen.getByText('route.actions.trigger.create, route.actions.trigger.promote, route.actions.trigger.demote')).toBeInTheDocument();
+    });
+});

package/components/routes/help/ApiDocumentation.test.d.ts

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

package/components/routes/help/ApiDocumentation.test.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+const mockUseMediaQuery = vi.hoisted(() => vi.fn(() => false));
+const mockDispatchApi = vi.hoisted(() => vi.fn((promise) => Promise.resolve(promise)));
+const mockHelpGet = vi.hoisted(() => vi.fn());
+vi.mock('@mui/material', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useMediaQuery: mockUseMediaQuery
+    };
+});
+vi.mock('@tui/core', () => ({
+    PageCenter: ({ children }) => _jsx("div", { children: children }),
+    useAppUser: () => ({ user: { roles: ['admin'] } })
+}));
+vi.mock('api', () => ({
+    default: {
+        help: {
+            get: mockHelpGet
+        }
+    }
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('components/hooks/useScrollRestoration', () => ({
+    useScrollRestoration: vi.fn()
+}));
+vi.mock('components/elements/display/Markdown', () => ({
+    default: ({ md }) => _jsx("div", { children: md })
+}));
+vi.mock('react-i18next', () => ({
+    Trans: ({ i18nKey }) => _jsx("span", { children: i18nKey }),
+    useTranslation: () => ({ t: (key) => key })
+}));
+import ApiDocumentation from './ApiDocumentation';
+describe('ApiDocumentation', () => {
+    it('shows a loading state until API documentation arrives', () => {
+        mockHelpGet.mockReturnValue({ apis: [], blueprints: {} });
+        mockDispatchApi.mockImplementation(() => new Promise(() => { }));
+        render(_jsx(ApiDocumentation, {}));
+        expect(screen.getByText('loading')).toBeInTheDocument();
+    });
+    it('renders categories and endpoint details once the API documentation is loaded', async () => {
+        mockHelpGet.mockReturnValue({
+            blueprints: { admin: 'Admin APIs' },
+            apis: [
+                {
+                    id: '1',
+                    name: 'Users',
+                    path: '/api/v1/user',
+                    complete: true,
+                    protected: true,
+                    methods: ['GET', 'POST'],
+                    ui_only: true,
+                    required_type: ['admin'],
+                    required_priv: ['R', 'W'],
+                    description: 'Data Block:\nvalue\nResult Example:\nresult'
+                }
+            ]
+        });
+        mockDispatchApi.mockImplementation((promise) => Promise.resolve(promise));
+        render(_jsx(ApiDocumentation, {}));
+        await waitFor(() => expect(screen.getByText('page.documentation.categories')).toBeInTheDocument());
+        expect(screen.getAllByText('admin').length).toBeGreaterThan(0);
+        expect(screen.getByText('Admin APIs')).toBeInTheDocument();
+        expect(screen.getByText('Users')).toBeInTheDocument();
+        expect(screen.getByText('/api/v1/user')).toBeInTheDocument();
+        expect(screen.getByText('Stable')).toBeInTheDocument();
+        expect(screen.getByText('Protected')).toBeInTheDocument();
+        expect(screen.getByText('UI Only')).toBeInTheDocument();
+        expect(screen.getByText('apikey.read')).toBeInTheDocument();
+        expect(screen.getByText('apikey.write')).toBeInTheDocument();
+        expect(screen.getByText(/Data Block:/)).toBeInTheDocument();
+    });
+});

package/components/routes/help/AuthDocumentation.test.d.ts

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

package/components/routes/help/AuthDocumentation.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+const mockModifyDocumentation = vi.hoisted(() => vi.fn((md) => `modified:${md.slice(0, 10)}`));
+vi.mock('@tui/core', () => ({
+    PageCenter: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/elements/display/Markdown', () => ({
+    default: ({ md }) => _jsx("div", { children: md })
+}));
+vi.mock('components/hooks/useScrollRestoration', () => ({
+    useScrollRestoration: vi.fn()
+}));
+vi.mock('plugins/store', () => ({
+    default: { plugins: [] }
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ i18n: { language: 'en' } })
+}));
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({})
+}));
+vi.mock('utils/utils', () => ({
+    modifyDocumentation: mockModifyDocumentation
+}));
+import AuthDocumentation from './AuthDocumentation';
+describe('AuthDocumentation', () => {
+    it('renders transformed authentication markdown', () => {
+        render(_jsx(AuthDocumentation, {}));
+        expect(screen.getByText(/^modified:/)).toBeInTheDocument();
+        expect(mockModifyDocumentation).toHaveBeenCalled();
+    });
+});

package/components/routes/help/ClientDocumentation.test.d.ts

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

package/components/routes/help/ClientDocumentation.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+const mockModifyDocumentation = vi.hoisted(() => vi.fn((md) => `client:${md.slice(0, 10)}`));
+vi.mock('@tui/core', () => ({
+    PageCenter: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/elements/display/Markdown', () => ({
+    default: ({ md }) => _jsx("div", { children: md })
+}));
+vi.mock('components/hooks/useScrollRestoration', () => ({
+    useScrollRestoration: vi.fn()
+}));
+vi.mock('plugins/store', () => ({
+    default: { plugins: [] }
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ i18n: { language: 'fr' } })
+}));
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({})
+}));
+vi.mock('utils/utils', () => ({
+    modifyDocumentation: mockModifyDocumentation
+}));
+import ClientDocumentation from './ClientDocumentation';
+describe('ClientDocumentation', () => {
+    it('renders transformed client markdown', () => {
+        render(_jsx(ClientDocumentation, {}));
+        expect(screen.getByText(/^client:/)).toBeInTheDocument();
+        expect(mockModifyDocumentation).toHaveBeenCalled();
+    });
+});

package/components/routes/help/Help.test.d.ts

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

package/components/routes/help/Help.test.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } 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(() => _jsx("div", { children: "plugin help" }, "plugin-help")));
+vi.mock('@tui/core', () => ({
+    PageCenter: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/hooks/useMyPreferences', () => ({
+    default: () => ({
+        leftnav: {
+            menus: [
+                {
+                    id: 'help',
+                    items: [
+                        { id: 'help.main', i18nKey: 'help.main', route: '/help/main', icon: _jsx("span", { children: "skip" }) },
+                        { id: 'help.hit', i18nKey: 'help.hit', route: '/help/hit', icon: _jsx("span", { children: "hit" }) },
+                        { id: 'help.actions', i18nKey: 'help.actions', route: '/help/actions', icon: _jsx("span", { children: "action" }) }
+                    ]
+                }
+            ]
+        }
+    })
+}));
+vi.mock('components/hooks/useScrollRestoration', () => ({
+    useScrollRestoration: vi.fn()
+}));
+vi.mock('plugins/store', () => ({
+    default: {
+        operations: ['triage'],
+        plugins: ['sample-plugin']
+    }
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({ executeFunction: mockExecuteFunction })
+}));
+vi.mock('react-router', async () => {
+    const { forwardRef } = await import('react');
+    return {
+        Link: forwardRef(({ to, children, ...props }, ref) => (_jsx("a", { ref: ref, href: to, ...props, children: children })))
+    };
+});
+import HelpDashboard from './Help';
+describe('HelpDashboard', () => {
+    it('renders help cards, action tabs, and plugin help content', () => {
+        render(_jsx(HelpDashboard, {}));
+        expect(screen.getByText('page.help.title')).toBeInTheDocument();
+        expect(screen.getByText('help.hit')).toBeInTheDocument();
+        expect(screen.getByText('help.actions')).toBeInTheDocument();
+        expect(screen.getByRole('link', { name: 'triage' })).toHaveAttribute('href', '/help/actions?tab=triage');
+        expect(screen.getByText('plugin help')).toBeInTheDocument();
+        expect(mockExecuteFunction).toHaveBeenCalledWith('sample-plugin.help');
+    });
+});

package/components/routes/help/HitBannerDocumentation.test.d.ts

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

package/components/routes/help/HitBannerDocumentation.test.js

@@ -0,0 +1,25 @@
+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';
+vi.mock('components/elements/display/HowlerCard', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/elements/display/json/JSONViewer', () => ({
+    default: ({ data }) => _jsxs("div", { children: ["json:", data.howler.id] })
+}));
+vi.mock('components/elements/hit/HitBanner', () => ({
+    default: ({ hit, layout }) => (_jsxs("div", { children: ["banner:", hit.howler.id, ":", layout] }))
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+import HitBannerDocumentation from './HitBannerDocumentation';
+describe('HitBannerDocumentation', () => {
+    it('renders the sample hit banner and JSON viewer', () => {
+        render(_jsx(HitBannerDocumentation, {}));
+        expect(screen.getByText('help.hit.banner.title')).toBeInTheDocument();
+        expect(screen.getByText(/banner:howler.id/)).toBeInTheDocument();
+        expect(screen.getByText('json:howler.id')).toBeInTheDocument();
+    });
+});

package/components/routes/help/HitDocumentation.test.d.ts

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

package/components/routes/help/HitDocumentation.test.js

@@ -0,0 +1,53 @@
+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 { describe, expect, it, vi } from 'vitest';
+const mockUseMediaQuery = vi.hoisted(() => vi.fn(() => false));
+const mockSetSearchParams = vi.hoisted(() => vi.fn());
+const searchParams = new URLSearchParams({ tab: 'schema' });
+vi.mock('@mui/material', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useMediaQuery: mockUseMediaQuery
+    };
+});
+vi.mock('@tui/core', () => ({
+    PageCenter: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/hooks/useScrollRestoration', () => ({
+    useScrollRestoration: vi.fn()
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('react-router', () => ({
+    useSearchParams: () => [searchParams, mockSetSearchParams]
+}));
+vi.mock('./components/HelpTabs', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('./HitBannerDocumentation', () => ({
+    default: () => _jsx("div", { children: "banner doc" })
+}));
+vi.mock('./HitLabelsDocumentation', () => ({
+    default: () => _jsx("div", { children: "labels doc" })
+}));
+vi.mock('./HitLinksDocumentation', () => ({
+    default: () => _jsx("div", { children: "links doc" })
+}));
+vi.mock('./HitSchemaDocumentation', () => ({
+    default: () => _jsx("div", { children: "schema doc" })
+}));
+import HitDocumentation from './HitDocumentation';
+describe('HitDocumentation', () => {
+    it('renders the selected hit doc tab and updates the query string on tab changes', async () => {
+        const user = userEvent.setup();
+        render(_jsx(HitDocumentation, {}));
+        expect(screen.getByText('schema doc')).toBeInTheDocument();
+        await user.click(screen.getByRole('tab', { name: 'help.hit.links.title' }));
+        expect(screen.getByText('links doc')).toBeInTheDocument();
+        expect(mockSetSearchParams).toHaveBeenCalled();
+    });
+});

package/components/routes/help/HitLabelsDocumentation.test.d.ts

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

package/components/routes/help/HitLabelsDocumentation.test.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => `${key} - description` })
+}));
+import HitLabelsDocumentation from './HitLabelsDocumentation';
+describe('HitLabelsDocumentation', () => {
+    it('renders label rows and translated descriptions for the configured label types', () => {
+        render(_jsx(HitLabelsDocumentation, {}));
+        expect(screen.getByText('help.hit.labels.title - description')).toBeInTheDocument();
+        expect(screen.getByText('Insight')).toBeInTheDocument();
+        expect(screen.getAllByText('description').length).toBeGreaterThan(0);
+        expect(screen.getByText('threat')).toBeInTheDocument();
+    });
+});

package/components/routes/help/HitLinksDocumentation.test.d.ts

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

package/components/routes/help/HitLinksDocumentation.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 { describe, expect, it, vi } from 'vitest';
+vi.mock('components/elements/display/Markdown', () => ({
+    default: ({ md }) => _jsx("div", { children: md })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ i18n: { language: 'en' } })
+}));
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import HitLinksDocumentation from './HitLinksDocumentation';
+describe('HitLinksDocumentation', () => {
+    it('injects configured application names into the help markdown', () => {
+        render(_jsx(ApiConfigContext.Provider, { value: {
+                config: {
+                    configuration: {
+                        ui: {
+                            apps: [{ name: 'Alpha' }, { name: 'Beta' }]
+                        }
+                    }
+                }
+            }, children: _jsx(HitLinksDocumentation, {}) }));
+        expect(screen.getByText(/`alpha`/)).toBeInTheDocument();
+        expect(screen.getByText(/`beta`/)).toBeInTheDocument();
+    });
+});

package/components/routes/help/HitSchemaDocumentation.test.d.ts

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

package/components/routes/help/HitSchemaDocumentation.test.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+const mockSetSearchParams = vi.hoisted(() => vi.fn());
+const searchParams = new URLSearchParams();
+vi.mock('@tui/core', () => ({}));
+vi.mock('components/elements/display/Markdown', () => ({
+    default: ({ md }) => _jsx("div", { children: md })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        i18n: { language: 'en' },
+        t: (key) => key
+    })
+}));
+vi.mock('react-router', () => ({
+    useSearchParams: () => [searchParams, mockSetSearchParams]
+}));
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import HitSchemaDocumentation from './HitSchemaDocumentation';
+const config = {
+    indexes: {
+        hit: {
+            'howler.id': {
+                type: 'keyword',
+                description: 'Primary identifier',
+                list: true,
+                deprecated: true,
+                regex: '^id-.*$',
+                values: ['one', 'two'],
+                deprecated_description: 'Use another field'
+            },
+            'event.action': {
+                type: 'text',
+                description: 'Action field',
+                values: []
+            },
+            'howler.id.key_a': {
+                type: 'keyword',
+                description: 'shadow'
+            }
+        }
+    }
+};
+describe('HitSchemaDocumentation', () => {
+    it('renders grouped field tables and filters them through the throttled search input', async () => {
+        vi.useFakeTimers();
+        render(_jsx(ApiConfigContext.Provider, { value: { config }, children: _jsx(HitSchemaDocumentation, {}) }));
+        expect(screen.getByText('howler.id')).toBeInTheDocument();
+        expect(screen.getByText('event.action')).toBeInTheDocument();
+        expect(screen.getByText('list')).toBeInTheDocument();
+        expect(screen.getByText('deprecated')).toBeInTheDocument();
+        expect(screen.getByText('help.hit.schema.regex')).toBeInTheDocument();
+        expect(screen.getByText('Use another field')).toBeInTheDocument();
+        fireEvent.change(screen.getByLabelText('help.hit.schema.search.prompt'), { target: { value: 'primary' } });
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(300);
+        });
+        expect(screen.getByText('howler.id')).toBeInTheDocument();
+        expect(screen.queryByText('event.action')).not.toBeInTheDocument();
+        expect(mockSetSearchParams).toHaveBeenCalled();
+        fireEvent.click(screen.getByRole('button'));
+        expect(screen.getByDisplayValue('')).toBeInTheDocument();
+        vi.useRealTimers();
+    });
+});

package/components/routes/help/NotebookDocumentation.test.d.ts

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

package/components/routes/help/NotebookDocumentation.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+const mockModifyDocumentation = vi.hoisted(() => vi.fn((md) => `notebook:${md.slice(0, 10)}`));
+vi.mock('@tui/core', () => ({
+    PageCenter: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/elements/display/Markdown', () => ({
+    default: ({ md }) => _jsx("div", { children: md })
+}));
+vi.mock('components/hooks/useScrollRestoration', () => ({
+    useScrollRestoration: vi.fn()
+}));
+vi.mock('plugins/store', () => ({
+    default: { plugins: [] }
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ i18n: { language: 'en' } })
+}));
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({})
+}));
+vi.mock('utils/utils', () => ({
+    modifyDocumentation: mockModifyDocumentation
+}));
+import NotebookDocumentation from './NotebookDocumentation';
+describe('NotebookDocumentation', () => {
+    it('renders transformed notebook markdown', () => {
+        render(_jsx(NotebookDocumentation, {}));
+        expect(screen.getByText(/^notebook:/)).toBeInTheDocument();
+        expect(mockModifyDocumentation).toHaveBeenCalled();
+    });
+});

package/components/routes/help/OverviewDocumentation.test.d.ts

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

package/components/routes/help/OverviewDocumentation.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 { describe, expect, it, vi } from 'vitest';
+vi.mock('@tui/core', () => ({
+    PageCenter: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/elements/display/HandlebarsMarkdown', () => ({
+    default: ({ md }) => _jsx("div", { children: md })
+}));
+vi.mock('components/hooks/useScrollRestoration', () => ({
+    useScrollRestoration: vi.fn()
+}));
+vi.mock('../overviews/startingTemplate', () => ({
+    useStartingTemplate: () => 'starting template'
+}));
+vi.mock('../ErrorBoundary', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+import OverviewDocumentation from './OverviewDocumentation';
+describe('OverviewDocumentation', () => {
+    it('renders the starting overview template inside the markdown renderer', () => {
+        render(_jsx(OverviewDocumentation, {}));
+        expect(screen.getByText('starting template')).toBeInTheDocument();
+    });
+});

package/components/routes/help/RetentionDocumentation.test.d.ts

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