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

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockUseHelpers = vi.hoisted(() => vi.fn());
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('utils/Throttler', () => ({
+    default: class {
+        debounce(fn) {
+            void fn();
+        }
+    }
+}));
+vi.mock('../display/Markdown', () => ({
+    __esModule: true,
+    default: ({ md, disableLinks, components }) => (_jsxs("div", { children: [_jsx("div", { children: md }), _jsx("div", { children: String(disableLinks) }), _jsx("div", { children: Object.keys(components).join(',') })] }))
+}));
+vi.mock('./handlebars/helpers', () => ({
+    HowlerHelperError: class HowlerHelperError extends Error {
+    },
+    useHelpers: mockUseHelpers
+}));
+import HandlebarsMarkdown from './HandlebarsMarkdown';
+describe('HandlebarsMarkdown', () => {
+    beforeEach(() => {
+        mockUseHelpers.mockReset();
+    });
+    it('renders markdown with synchronous helpers', async () => {
+        mockUseHelpers.mockReturnValue([{ keyword: 'hello', callback: () => 'world' }]);
+        render(_jsx(HandlebarsMarkdown, { md: '{{hello}}', disableLinks: true, object: {} }));
+        await waitFor(() => expect(screen.getByText('world')).toBeInTheDocument());
+        expect(screen.getByText('true')).toBeInTheDocument();
+    });
+    it('renders helper components and missing helper fallbacks', async () => {
+        mockUseHelpers.mockReturnValue([{ keyword: 'badge', componentCallback: () => _jsx("div", { children: "component-result" }) }]);
+        render(_jsx(HandlebarsMarkdown, { md: '{{badge}}', object: {} }));
+        await waitFor(() => expect(screen.getByText(/component-result|`/)).toBeInTheDocument());
+    });
+});

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

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

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

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { act, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockGetAvatar = vi.hoisted(() => vi.fn());
+const avatarContextToken = vi.hoisted(() => ({ name: 'avatar-context' }));
+vi.mock('@mui/material', () => ({
+    Avatar: ({ children, src, ...rest }) => (_jsx("div", { "data-src": src, ...rest, children: children })),
+    Tooltip: ({ children }) => _jsx("div", { children: children }),
+    useTheme: () => ({ palette: { getContrastText: () => '#fff' } })
+}));
+vi.mock('components/app/providers/AvatarProvider', () => ({
+    AvatarContext: avatarContextToken
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context === avatarContextToken)
+                return { getAvatar: mockGetAvatar };
+            return actual.useContext(context);
+        }
+    };
+});
+import HowlerAvatar from './HowlerAvatar';
+describe('HowlerAvatar', () => {
+    beforeEach(() => {
+        mockGetAvatar.mockReset();
+    });
+    it('renders unknown and unassigned fallback labels', () => {
+        render(_jsxs("div", { children: [_jsx(HowlerAvatar, { userId: "" }), _jsx(HowlerAvatar, { userId: "unassigned" })] }));
+        expect(screen.getByLabelText('unknown')).toBeInTheDocument();
+        expect(screen.getByLabelText('app.drawer.hit.assignment.unassigned.name')).toBeInTheDocument();
+    });
+    it('uses remote image sources directly and derives initials for non-url avatars', async () => {
+        mockGetAvatar.mockResolvedValueOnce('https://example.com/avatar.png').mockResolvedValueOnce('Alice Example');
+        const { rerender } = render(_jsx(HowlerAvatar, { userId: "alice" }));
+        await waitFor(() => expect(screen.getByLabelText('alice')).toHaveAttribute('data-src', 'https://example.com/avatar.png'));
+        rerender(_jsx(HowlerAvatar, { userId: "bob" }));
+        await waitFor(() => expect(screen.getByLabelText('bob')).toHaveTextContent('AE'));
+    });
+    it('handles avatar lookup failures by clearing the src', async () => {
+        const debugSpy = vi.spyOn(console, 'debug').mockImplementation(() => undefined);
+        mockGetAvatar.mockRejectedValueOnce(new Error('no avatar'));
+        render(_jsx(HowlerAvatar, { userId: "charlie" }));
+        await act(async () => { });
+        expect(debugSpy).toHaveBeenCalled();
+        expect(screen.getByLabelText('charlie')).not.toHaveAttribute('data-src', 'https://example.com/avatar.png');
+    });
+});

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

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

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+vi.mock('@mui/icons-material', async (importOriginal) => {
+    const actual = await importOriginal();
+    return { ...actual, Add: () => _jsx("div", { children: "add-icon" }), Search: () => _jsx("div", { children: "search-icon" }) };
+});
+vi.mock('@mui/material', () => ({
+    Box: ({ children }) => _jsx("div", { children: children }),
+    Fab: ({ children, onClick }) => _jsx("button", { onClick: onClick, children: children }),
+    IconButton: ({ children, onClick }) => _jsx("button", { onClick: onClick, children: children }),
+    LinearProgress: () => _jsx("div", { children: "progress" }),
+    Stack: ({ children }) => _jsx("div", { children: children }),
+    Tooltip: ({ children }) => _jsx("div", { children: children }),
+    Typography: ({ children }) => _jsx("div", { children: children }),
+    useMediaQuery: () => false
+}));
+vi.mock('@tui/core', () => ({
+    PageCenter: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/elements/addons/lists', () => ({
+    TuiList: ({ children, onSelection }) => _jsx("div", { children: children([{ id: '1', item: 'item-1' }], onSelection) })
+}));
+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/routes/ErrorBoundary', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('../addons/search/phrase/Phrase', () => ({
+    default: ({ onKeyDown, onChange, endAdornment, value }) => (_jsxs("div", { children: [_jsx("button", { onClick: () => onChange('next phrase'), children: "change-phrase" }), _jsx("button", { onClick: () => onKeyDown({ isEnter: true }), children: "enter-search" }), _jsx("div", { children: value }), endAdornment] }))
+}));
+import ItemManager from './ItemManager';
+describe('ItemManager', () => {
+    it('renders search UI, totals, pagination, list items, and create action', () => {
+        const onSearch = vi.fn();
+        const onPageChange = vi.fn();
+        const onCreate = vi.fn();
+        const onSelect = vi.fn();
+        const setPhrase = vi.fn();
+        render(_jsx(ItemManager, { aboveSearch: _jsx("div", { children: "above" }), afterSearch: _jsx("div", { children: "after" }), belowSearch: _jsx("div", { children: "below" }), searchFilters: _jsx("div", { children: "filters" }), hasError: false, onPageChange: onPageChange, onSearch: onSearch, onCreate: onCreate, onSelect: onSelect, phrase: "initial", renderer: (item, handleSelect) => (_jsx("button", { onClick: () => handleSelect(item, 0), children: item[0].item ?? item.item })), response: { total: 10, items: [{ id: '1', item: 'item-1' }], offset: 0, rows: 25, removeCount: 0 }, searching: true, searchPrompt: "search.prompt", createPrompt: "create.prompt", setPhrase: setPhrase }));
+        expect(screen.getByText('above')).toBeInTheDocument();
+        expect(screen.getByText('after')).toBeInTheDocument();
+        expect(screen.getByText('below')).toBeInTheDocument();
+        expect(screen.getByText('filters')).toBeInTheDocument();
+        expect(screen.getByText('progress')).toBeInTheDocument();
+        expect(screen.getByText('total:10:1:0')).toBeInTheDocument();
+        expect(screen.getByText('create.prompt')).toBeInTheDocument();
+        fireEvent.click(screen.getByText('change-phrase'));
+        expect(setPhrase).toHaveBeenCalledWith('next phrase');
+        fireEvent.click(screen.getByText('enter-search'));
+        fireEvent.click(screen.getByText('search-icon'));
+        expect(onSearch).toHaveBeenCalledTimes(2);
+        fireEvent.click(screen.getByText('paginate'));
+        expect(onPageChange).toHaveBeenCalledWith(50);
+        fireEvent.click(screen.getByText('item-1'));
+        expect(onSelect).toHaveBeenCalled();
+        fireEvent.click(screen.getByText('create.prompt'));
+        expect(onCreate).toHaveBeenCalled();
+    });
+});

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

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

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

@@ -0,0 +1,22 @@
+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('@mui/material', () => ({
+    Grid: ({ children }) => _jsx("div", { children: children }),
+    Stack: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('@tui/core', () => ({
+    PageCenter: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('./HowlerAvatarHeader', () => ({
+    default: ({ user }) => _jsx("div", { children: `avatar:${user.username}` })
+}));
+import UserPageWrapper from './UserPageWrapper';
+describe('UserPageWrapper', () => {
+    it('renders the avatar header and nested content', () => {
+        render(_jsx(UserPageWrapper, { user: { username: 'alice' }, children: _jsx("div", { children: "child-content" }) }));
+        expect(screen.getByText('avatar:alice')).toBeInTheDocument();
+        expect(screen.getByText('child-content')).toBeInTheDocument();
+    });
+});

package/components/elements/display/handlebars/helpers.test.d.ts

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

package/components/elements/display/handlebars/helpers.test.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, renderHook, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+const mockExecuteFunction = vi.hoisted(() => vi.fn());
+vi.mock('@tui/core', () => ({
+    AppListEmpty: () => _jsx("div", { children: "empty" })
+}));
+vi.mock('@mui/material', () => ({
+    Paper: ({ children }) => _jsx("div", { children: children }),
+    Table: ({ children }) => _jsx("table", { children: children }),
+    TableBody: ({ children }) => _jsx("tbody", { children: children }),
+    TableCell: ({ children }) => _jsx("td", { children: children }),
+    TableHead: ({ children }) => _jsx("thead", { children: children }),
+    TableRow: ({ children }) => _jsx("tr", { children: children })
+}));
+vi.mock('components/elements/hit/HitCard', () => ({
+    default: ({ id, layout }) => _jsx("div", { children: `${id}:${layout}` })
+}));
+vi.mock('components/elements/hit/HitLayout', () => ({
+    HitLayout: { NORMAL: 'normal' }
+}));
+vi.mock('plugins/store', () => ({
+    default: { plugins: ['demo'] }
+}));
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({ executeFunction: mockExecuteFunction })
+}));
+vi.mock('../ActionButton', () => ({
+    default: ({ actionId, hitId, ...rest }) => _jsx("div", { children: JSON.stringify({ actionId, hitId, rest }) })
+}));
+vi.mock('../json/JSONViewer', () => ({
+    default: ({ data }) => _jsx("div", { children: JSON.stringify(data) })
+}));
+import { HowlerHelperError, useHelpers } from './helpers';
+describe('handlebars helpers', () => {
+    it('returns built-in and plugin helpers while honoring filter options', () => {
+        mockExecuteFunction.mockReturnValue([{ keyword: 'plugin_helper', callback: () => 'plugin' }]);
+        const { result } = renderHook(() => useHelpers());
+        const keywords = result.current.map(entry => entry.keyword);
+        expect(keywords).toContain('equals');
+        expect(keywords).toContain('plugin_helper');
+        const asyncFiltered = renderHook(() => useHelpers({ async: false, components: true }));
+        expect(asyncFiltered.result.current.some(entry => entry.keyword === 'fetch')).toBe(false);
+        const componentFiltered = renderHook(() => useHelpers({ async: true, components: false }));
+        expect(componentFiltered.result.current.some(entry => entry.keyword === 'howler')).toBe(false);
+    });
+    it('executes logical/string helpers and reports invalid inputs', async () => {
+        mockExecuteFunction.mockReturnValue([]);
+        const { result } = renderHook(() => useHelpers());
+        const helperMap = Object.fromEntries(result.current.map(entry => [entry.keyword, entry]));
+        const options = {};
+        expect(helperMap.equals.callback?.('1', 1, options)).toBe(true);
+        expect(() => helperMap.equals.callback?.(null, 'x', options)).toThrow(HowlerHelperError);
+        expect(helperMap.and.callback?.(true, 'ok', options)).toBe('ok');
+        expect(helperMap.or.callback?.('', 'fallback', options)).toBe('fallback');
+        expect(helperMap.not.callback?.(0, options)).toBe(true);
+        expect(String(helperMap.curly.callback?.('name', options))).toBe('{{name}}');
+        expect(helperMap.join.callback?.('hello', 'world', { hash: { sep: '-' } })).toBe('hello-world');
+        expect(helperMap.upper.callback?.('hello', options)).toBe('HELLO');
+        expect(() => helperMap.upper.callback?.(undefined, options)).toThrow('Upper expects a string argument');
+        expect(helperMap.lower.callback?.('HELLO', options)).toBe('hello');
+        expect(() => helperMap.lower.callback?.(undefined, options)).toThrow('Lower expects a string argument');
+        expect(String(helperMap.to_json.callback?.({ id: 1 }, options))).toBe('{"id":1}');
+        expect(helperMap.parse_json.callback?.('{"id":1}', options)).toEqual({ id: 1 });
+        expect(() => helperMap.parse_json.callback?.(undefined, options)).toThrow('Parse JSON expects a string argument');
+        expect(() => helperMap.parse_json.callback?.('{oops}', options)).toThrow('Invalid JSON string');
+        expect(helperMap.get.callback?.({ nested: { value: 7 } }, 'nested.value', options)).toBe(7);
+        expect(helperMap.includes.callback?.('abcdef', 'cd', options)).toBe(true);
+        expect(helperMap.entries.callback?.({ a: 1 }, options)).toEqual([{ key: 'a', value: 1 }]);
+        expect(String(helperMap.entries.callback?.(null, options))).toBe('Invalid Object.');
+        expect(helperMap.replace.callback?.('alpha beta', 'beta', 'gamma', options)).toBe('alpha gamma');
+        expect(() => helperMap.replace.callback?.('alpha', undefined, 'x', options)).toThrow('Replace expects three arguments');
+        global.fetch = vi.fn(() => Promise.resolve({
+            json: () => Promise.resolve({ nested: { value: 'cached' } })
+        }));
+        await expect(helperMap.fetch.callback?.('https://example.com/data', 'nested.value', options)).resolves.toBe('cached');
+        await expect(helperMap.fetch.callback?.('https://example.com/data', 'nested.value', options)).resolves.toBe('cached');
+        await expect(helperMap.fetch.callback?.('https://example.com/data', 'missing.value', options)).resolves.toBeUndefined();
+        expect(global.fetch).toHaveBeenCalledTimes(1);
+    });
+    it('renders component-backed helpers', () => {
+        mockExecuteFunction.mockReturnValue([]);
+        const { result } = renderHook(() => useHelpers());
+        const helperMap = Object.fromEntries(result.current.map(entry => [entry.keyword, entry]));
+        const options = { hash: { confirm: true } };
+        render(helperMap.howler.componentCallback?.('hit-1', {}));
+        expect(screen.getByText('hit-1:normal')).toBeInTheDocument();
+        render(helperMap.howler.componentCallback?.('', {}));
+        expect(screen.getByText('empty')).toBeInTheDocument();
+        render(helperMap.render_json.componentCallback?.({ enabled: true }, {}));
+        expect(screen.getByText('{"enabled":true}')).toBeInTheDocument();
+        render(helperMap.table.componentCallback?.([
+            { column: 'first_name', row: '1', value: 'Ada' },
+            { column: 'last-name', row: '1', value: 'Lovelace' },
+            { column: 'first_name', row: '2', value: 'Grace' }
+        ], {}));
+        expect(screen.getByText('First Name')).toBeInTheDocument();
+        expect(screen.getByText('Last Name')).toBeInTheDocument();
+        expect(screen.getByText('N/A')).toBeInTheDocument();
+        render(helperMap.action.componentCallback?.('action-1', 'hit-9', options));
+        expect(screen.getByText('{"actionId":"action-1","hitId":"hit-9","rest":{"confirm":true}}')).toBeInTheDocument();
+    });
+});

package/components/elements/display/icons/SocketBadge.test.d.ts

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

package/components/elements/display/icons/SocketBadge.test.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+const reconnect = vi.fn();
+const socketContextToken = vi.hoisted(() => ({ name: 'socket-context' }));
+let socketValue = { status: 0, reconnect };
+vi.mock('@mui/icons-material', () => ({
+    CloudSync: () => _jsx("div", { children: "cloud-sync" })
+}));
+vi.mock('@mui/material', () => ({
+    Badge: ({ children }) => _jsx("div", { children: children }),
+    IconButton: ({ children, onClick }) => _jsx("button", { onClick: onClick, children: children }),
+    Tooltip: ({ children, title }) => _jsx("div", { "data-title": title, children: children }),
+    styled: (component) => () => component
+}));
+vi.mock('@cccsaurora/howler-ui/i18n', () => ({
+    default: {
+        t: (key) => `translated:${key}`
+    }
+}));
+vi.mock('components/app/providers/SocketProvider', () => ({
+    SocketContext: socketContextToken,
+    Status: { CONNECTING: 0, OPEN: 1, CLOSING: 2, CLOSED: 3 }
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context === socketContextToken)
+                return socketValue;
+            return actual.useContext(context);
+        }
+    };
+});
+import SocketBadge from './SocketBadge';
+describe('SocketBadge', () => {
+    it('renders translated titles and reconnects on click', () => {
+        socketValue = { status: 0, reconnect };
+        const { rerender, container } = render(_jsx(SocketBadge, {}));
+        expect(container.querySelector('[data-title="translated:live.connecting"]')).toBeTruthy();
+        socketValue = { status: 3, reconnect };
+        rerender(_jsx(SocketBadge, { size: "large" }));
+        expect(container.querySelector('[data-title="translated:live.closed"]')).toBeTruthy();
+        fireEvent.click(screen.getByRole('button'));
+        expect(reconnect).toHaveBeenCalled();
+    });
+});

package/components/elements/display/markdownPlugins/tabs.test.d.ts

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

package/components/elements/display/markdownPlugins/tabs.test.js

@@ -0,0 +1,50 @@
+/// <reference types="vitest" />
+import { describe, expect, it, vi } from 'vitest';
+import { codeTabs } from './tabs';
+describe('markdown codeTabs plugin', () => {
+    it('converts consecutive tabbed code blocks into a tabs payload', () => {
+        const tree = {
+            type: 'root',
+            children: [
+                { type: 'code', lang: 'ts', meta: 'tab="Alpha"', value: 'a()' },
+                { type: 'code', lang: 'py', meta: 'tab="Beta"', value: 'b()' }
+            ]
+        };
+        const file = { message: vi.fn() };
+        codeTabs()(tree, file);
+        expect(tree.children).toHaveLength(1);
+        expect(tree.children[0]).toMatchObject({ lang: 'tabs' });
+        expect(JSON.parse(tree.children[0].value)).toEqual([
+            { title: 'Alpha', lang: 'ts', value: 'a()' },
+            { title: 'Beta', lang: 'py', value: 'b()' }
+        ]);
+    });
+    it('inserts a title node for a single tabbed block and reports invalid metadata', () => {
+        const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+        const tree = {
+            type: 'root',
+            children: [{ type: 'code', lang: 'ts', meta: 'tab="Alpha"', value: 'a()' }]
+        };
+        const file = { message: vi.fn() };
+        codeTabs()(tree, file);
+        expect(tree.children[0]).toMatchObject({
+            type: 'paragraph',
+            data: { hProperties: { 'data-remark-code-title': true, 'data-language': 'ts' } }
+        });
+        const invalidTree = {
+            type: 'root',
+            children: [{ type: 'code', lang: 'ts', meta: 'tab=', value: 'oops' }]
+        };
+        codeTabs()(invalidTree, file);
+        expect(file.message).toHaveBeenCalledWith('Invalid tab title', invalidTree.children[0], 'remark-code-title');
+        const brokenChain = {
+            type: 'root',
+            children: [
+                { type: 'code', lang: 'ts', meta: 'tab="Alpha"', value: 'a()' },
+                { type: 'code', lang: 'py', meta: 'tab=', value: 'b()' }
+            ]
+        };
+        codeTabs()(brokenChain, file);
+        expect(warnSpy).toHaveBeenCalledWith('Failed to parse tab title.');
+    });
+});

package/components/elements/hit/HitActions.js

@@ -121,7 +121,7 @@ const HitActions = ({ hit, orientation = 'horizontal' }) => {
     // TODO: Could probably make this fancier and maybe remove the react device detect dependency, but this is fine for now
     '(min-width: 1800px)');
     const showDropdown = isMobile || !showButton;
-    return (_jsxs(Stack, { direction: "row", alignItems: "stretch", children: [showDropdown || forceDropdown ? (_jsx(DropdownActions, { currentAssessment: hit?.howler.assessment, currentStatus: hit?.howler.status, currentVote: selectedVote, actions: actions, loading: loading, orientation: orientation })) : (_jsx(ButtonActions, { currentVote: selectedVote, actions: actions, loading: loading, orientation: orientation, shortcuts: shortcuts })), (!showDropdown || !isMobile) && (_jsxs(Box, { sx: [
+    return (_jsxs(Stack, { direction: "row", alignItems: "stretch", children: [showDropdown || forceDropdown ? (_jsx(DropdownActions, { currentAssessment: hit?.howler.assessment || 'no-assessment', currentStatus: hit?.howler.status ?? '', currentVote: selectedVote, actions: actions, loading: loading, orientation: orientation })) : (_jsx(ButtonActions, { currentVote: selectedVote, actions: actions, loading: loading, orientation: orientation, shortcuts: shortcuts })), (!showDropdown || !isMobile) && (_jsxs(Box, { sx: [
                     {
                         flex: 1,
                         alignSelf: 'start',

package/components/elements/hit/HitActions.test.d.ts

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

package/components/elements/hit/HitActions.test.js

@@ -0,0 +1,166 @@
+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 { describe, expect, it, vi } from 'vitest';
+const mockAssess = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+const mockVote = vi.hoisted(() => vi.fn());
+const mockSet = vi.hoisted(() => vi.fn());
+const mockSetSelected = vi.hoisted(() => vi.fn());
+const mockClearSelectedRecords = vi.hoisted(() => vi.fn());
+const mockGetCurrentViews = vi.hoisted(() => vi.fn().mockResolvedValue([{ settings: { advance_on_triage: true } }]));
+const mockGetMatchingAnalytic = vi.hoisted(() => vi.fn().mockResolvedValue({ triage_settings: { valid_assessments: ['legitimate'], skip_rationale: true } }));
+const mockPluginAction = vi.hoisted(() => vi.fn());
+const apiConfigContextToken = vi.hoisted(() => ({ name: 'api-config-context' }));
+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 configValue = { lookups: { 'howler.assessment': ['legitimate', 'other'] } };
+let localStorageValues = { HIT_SHORTCUTS: 'hint', FORCE_DROPDOWN: false };
+let showButtonValue = true;
+vi.mock('@mui/icons-material', () => ({
+    MoreHoriz: () => _jsx("div", { children: "more-icon" })
+}));
+vi.mock('@mui/material', () => ({
+    Badge: ({ children }) => _jsx("div", { children: children }),
+    Box: ({ children }) => _jsx("div", { children: children }),
+    CircularProgress: () => _jsx("div", { children: "loading" }),
+    Divider: () => _jsx("div", { children: "divider" }),
+    FormControl: ({ children }) => _jsx("div", { children: children }),
+    FormControlLabel: ({ label, onClick }) => _jsx("button", { onClick: onClick, children: label }),
+    FormLabel: ({ children }) => _jsx("div", { children: children }),
+    IconButton: ({ children, onClick }) => _jsx("button", { onClick: onClick, children: children }),
+    Menu: ({ children, open }) => (open ? _jsx("div", { children: children }) : null),
+    Radio: () => _jsx("div", { children: "radio" }),
+    RadioGroup: ({ children, onChange }) => (_jsxs("div", { children: [_jsx("button", { onClick: () => onChange?.(null, 'shortcut'), children: "set-shortcuts" }), children] })),
+    Stack: ({ children }) => _jsx("div", { children: children }),
+    Switch: ({ checked, onChange }) => (_jsx("button", { onClick: () => onChange?.(null, !checked), children: checked ? 'dropdown-on' : 'dropdown-off' })),
+    styled: (_component) => (styles) => {
+        void styles;
+        return ({ children }) => _jsx("div", { children: children });
+    },
+    useMediaQuery: () => showButtonValue
+}));
+vi.mock('components/app/hooks/useMatchers', () => ({
+    default: () => ({ getMatchingAnalytic: mockGetMatchingAnalytic })
+}));
+vi.mock('components/app/providers/ApiConfigProvider', () => ({
+    ApiConfigContext: apiConfigContextToken
+}));
+vi.mock('components/app/providers/ParameterProvider', () => ({
+    ParameterContext: parameterContextToken
+}));
+vi.mock('components/app/providers/RecordProvider', () => ({
+    RecordContext: recordContextToken
+}));
+vi.mock('components/app/providers/RecordSearchProvider', () => ({
+    RecordSearchContext: recordSearchContextToken
+}));
+vi.mock('components/app/providers/ViewProvider', () => ({
+    ViewContext: viewContextToken
+}));
+vi.mock('components/hooks/useHitActions', () => ({
+    default: () => ({
+        availableTransitions: [{ type: 'action', name: 'Transition', actionFunction: vi.fn(), key: 'T' }],
+        canVote: true,
+        canAssess: true,
+        loading: false,
+        assess: mockAssess,
+        vote: mockVote,
+        selectedVote: 'benign'
+    })
+}));
+vi.mock('components/hooks/useMyLocalStorage', () => ({
+    useMyLocalStorageProvider: () => ({ values: localStorageValues, set: mockSet })
+}));
+vi.mock('plugins/store', () => ({
+    default: { plugins: ['plugin-a'] }
+}));
+vi.mock('react-device-detect', () => ({
+    isMobile: false
+}));
+vi.mock('react-i18next', () => ({
+    Trans: ({ i18nKey }) => _jsx(_Fragment, { children: i18nKey })
+}));
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({
+        executeFunction: () => [{ type: 'action', name: 'PluginAction', actionFunction: mockPluginAction, key: 'P' }]
+    })
+}));
+vi.mock('use-context-selector', () => ({
+    useContextSelector: (context, selector) => {
+        if (context === viewContextToken)
+            return selector({ getCurrentViews: mockGetCurrentViews });
+        if (context === parameterContextToken)
+            return selector({ selected: 'hit-1', setSelected: mockSetSelected });
+        if (context === recordContextToken)
+            return selector({ clearSelectedRecords: mockClearSelectedRecords });
+        if (context === recordSearchContextToken) {
+            return selector({
+                response: { items: [{ howler: { id: 'hit-1' } }, { howler: { id: 'hit-2' } }] }
+            });
+        }
+        return undefined;
+    }
+}));
+vi.mock('utils/Throttler', () => ({
+    default: class {
+        debounce(fn) {
+            fn();
+        }
+    }
+}));
+vi.mock('utils/constants', () => ({
+    StorageKey: {
+        HIT_SHORTCUTS: 'HIT_SHORTCUTS',
+        FORCE_DROPDOWN: 'FORCE_DROPDOWN'
+    }
+}));
+vi.mock('./actions/ButtonActions', () => ({
+    default: ({ actions }) => (_jsx("div", { children: actions.map((action) => (_jsx("button", { onClick: action.actionFunction, children: action.name }, action.name))) }))
+}));
+vi.mock('./actions/DropdownActions', () => ({
+    default: ({ actions, currentAssessment }) => (_jsxs("div", { children: [_jsx("span", { children: `dropdown:${actions.length}` }), _jsx("span", { children: `assessment:${currentAssessment}` })] }))
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context === apiConfigContextToken)
+                return { config: configValue };
+            return actual.useContext(context);
+        }
+    };
+});
+import HitActions from './HitActions';
+describe('HitActions', () => {
+    it('builds desktop actions, supports keyboard shortcuts, advances after assessment, and saves settings', async () => {
+        localStorageValues = { HIT_SHORTCUTS: 'hint', FORCE_DROPDOWN: false };
+        showButtonValue = true;
+        render(_jsx(HitActions, { hit: { howler: { id: 'hit-1', status: 'open', assessment: '' } } }));
+        await waitFor(() => expect(mockGetMatchingAnalytic).toHaveBeenCalled());
+        expect(screen.getByText('Transition')).toBeInTheDocument();
+        expect(screen.getByText('PluginAction')).toBeInTheDocument();
+        expect(screen.getByText('legitimate')).toBeInTheDocument();
+        expect(screen.getByText('Benign')).toBeInTheDocument();
+        fireEvent.keyDown(window, { key: 'P' });
+        expect(mockPluginAction).toHaveBeenCalled();
+        fireEvent.click(screen.getByText('legitimate'));
+        await waitFor(() => expect(mockAssess).toHaveBeenCalledWith('legitimate', true));
+        expect(mockClearSelectedRecords).toHaveBeenCalledWith('hit-2');
+        expect(mockSetSelected).toHaveBeenCalledWith('hit-2');
+        fireEvent.click(screen.getByText('more-icon'));
+        fireEvent.click(screen.getByText('set-shortcuts'));
+        fireEvent.click(screen.getByText('dropdown-off'));
+        expect(mockSet).toHaveBeenCalledWith('HIT_SHORTCUTS', 'shortcut');
+        expect(mockSet).toHaveBeenCalledWith('FORCE_DROPDOWN', true);
+    });
+    it('renders dropdown actions when forced', async () => {
+        localStorageValues = { HIT_SHORTCUTS: 'no', FORCE_DROPDOWN: true };
+        showButtonValue = false;
+        render(_jsx(HitActions, { hit: { howler: { id: 'hit-1', status: 'open', assessment: '' } }, orientation: "vertical" }));
+        await waitFor(() => expect(screen.getByText('dropdown:6')).toBeInTheDocument());
+        expect(screen.getByText('assessment:no-assessment')).toBeInTheDocument();
+    });
+});