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

package/components/elements/PluginChip.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Chip } from '@mui/material';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import { createElement } from 'react';
 import { usePluginStore } from 'react-pluggable';
 const PluginChip = ({ children, value, context, field, hit, ...props }) => {
     const pluginStore = usePluginStore();
@@ -17,6 +17,6 @@ const PluginChip = ({ children, value, context, field, hit, ...props }) => {
             return component;
         }
     }
-    return _jsx(Chip, { ...props, children: children });
+    return createElement(Chip, { ...props, children });
 };
 export default PluginChip;

package/components/elements/PluginChip.test.d.ts

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

package/components/elements/PluginChip.test.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockExecuteFunction = vi.hoisted(() => vi.fn());
+vi.mock('@mui/material', () => ({
+    Chip: ({ children }) => _jsx("div", { children: `fallback:${children}` })
+}));
+vi.mock('plugins/store', () => ({
+    default: { plugins: ['plugin-a', 'plugin-b'] }
+}));
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({ executeFunction: mockExecuteFunction })
+}));
+import PluginChip from './PluginChip';
+describe('PluginChip', () => {
+    beforeEach(() => {
+        mockExecuteFunction.mockReset();
+    });
+    it('renders the first plugin-provided chip component', () => {
+        mockExecuteFunction.mockImplementation((name) => name === 'plugin-b.chip' ? _jsx("div", { children: "plugin-chip" }) : null);
+        render(_jsx(PluginChip, { value: "v", context: "ctx", children: "child" }));
+        expect(screen.getByText('plugin-chip')).toBeInTheDocument();
+    });
+    it('falls back to the default MUI chip when no plugin handles the value', () => {
+        mockExecuteFunction.mockReturnValue(null);
+        render(_jsx(PluginChip, { value: "v", context: "ctx", children: "child" }));
+        expect(screen.getByText('fallback:child')).toBeInTheDocument();
+    });
+});

package/components/elements/ThemedEditor.test.d.ts

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

package/components/elements/ThemedEditor.test.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+const mockDefineTheme = vi.hoisted(() => vi.fn());
+const mockRegisterLanguage = vi.hoisted(() => vi.fn());
+const mockSetTheme = vi.hoisted(() => vi.fn());
+const capturedProps = vi.hoisted(() => ({ current: null }));
+let themeMode = 'light';
+let monacoValue = null;
+vi.mock('@monaco-editor/react', () => ({
+    Editor: (props) => {
+        capturedProps.current = props;
+        return _jsx("div", { children: "editor" });
+    },
+    useMonaco: () => monacoValue
+}));
+vi.mock('@mui/material', () => ({
+    useTheme: () => ({ palette: { mode: themeMode, background: { paper: themeMode === 'light' ? '#fff' : '#111' } } })
+}));
+vi.mock('@tui/core', () => ({
+    useAppTheme: () => ({ current: 'default', optionsOverride: { dense: true } }),
+    useAppThemeBuilder: () => () => ({
+        lightTheme: {
+            palette: {
+                background: { paper: '#fff' },
+                warning: { dark: '#abc', light: '#def' },
+                error: { main: '#123456' },
+                success: { main: '#654321' }
+            }
+        },
+        darkTheme: {
+            palette: {
+                background: { paper: '#111' },
+                warning: { dark: '#aaa', light: '#bbb' },
+                error: { main: '#222222' },
+                success: { main: '#333333' }
+            }
+        }
+    })
+}));
+import ThemedEditor from './ThemedEditor';
+describe('ThemedEditor', () => {
+    it('defines custom monaco themes and merges editor options', () => {
+        monacoValue = { editor: { setTheme: mockSetTheme } };
+        render(_jsx(ThemedEditor, { id: "the-editor", options: { readOnly: true }, beforeMount: vi.fn(), value: "x" }));
+        const fakeMonaco = {
+            editor: { defineTheme: mockDefineTheme },
+            languages: { register: mockRegisterLanguage }
+        };
+        capturedProps.current.beforeMount(fakeMonaco);
+        expect(mockDefineTheme).toHaveBeenCalledWith('howler', expect.objectContaining({ colors: { 'editor.background': '#ffffff' } }));
+        expect(mockDefineTheme).toHaveBeenCalledWith('howler-dark', expect.objectContaining({ colors: { 'editor.background': '#111111' } }));
+        expect(mockRegisterLanguage).toHaveBeenCalledWith({ id: 'lucene' });
+        expect(capturedProps.current.wrapperProps).toEqual({ id: 'the-editor' });
+        expect(capturedProps.current.options).toMatchObject({ readOnly: true, automaticLayout: true });
+        expect(mockSetTheme).toHaveBeenCalledWith('howler');
+    });
+    it('switches to the dark theme when the mui theme changes', () => {
+        themeMode = 'dark';
+        monacoValue = { editor: { setTheme: mockSetTheme } };
+        render(_jsx(ThemedEditor, { value: "x" }));
+        expect(capturedProps.current.theme).toBe('howler-dark');
+        expect(mockSetTheme).toHaveBeenCalledWith('howler-dark');
+    });
+});

package/components/elements/addons/layout/FlexPort.test.d.ts

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

package/components/elements/addons/layout/FlexPort.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';
+vi.mock('@tui/core', () => ({
+    usePageProps: ({ props }) => ({
+        className: 'page-class',
+        style: {
+            marginBottom: `${props.mb ?? 0}px`,
+            marginLeft: `${props.ml ?? 0}px`,
+            marginRight: `${props.mr ?? 0}px`,
+            marginTop: `${props.mt ?? 0}px`
+        }
+    })
+}));
+import FlexPort from './FlexPort';
+describe('FlexPort', () => {
+    it('renders page props margins and default overflow', () => {
+        render(_jsx(FlexPort, { id: "content", mt: 1, mr: 2, mb: 3, ml: 4, children: _jsx("div", { children: "child" }) }));
+        const inner = screen.getByText('child').parentElement;
+        const outer = inner.parentElement;
+        expect(outer.className).toBe('page-class');
+        expect(outer.style.marginTop).toBe('1px');
+        expect(outer.style.marginRight).toBe('2px');
+        expect(outer.style.marginBottom).toBe('3px');
+        expect(outer.style.marginLeft).toBe('4px');
+        expect(inner).toHaveAttribute('id', 'content');
+        expect(inner.style.overflow).toBe('auto');
+    });
+    it('omits overflow when disableOverflow is true', () => {
+        render(_jsx(FlexPort, { disableOverflow: true, children: _jsx("div", { children: "child" }) }));
+        expect(screen.getByText('child').parentElement.style.overflow).toBe('');
+    });
+});

package/components/elements/addons/lists/TuiListBase.test.d.ts

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

package/components/elements/addons/lists/TuiListBase.test.js

@@ -0,0 +1,44 @@
+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 registerSpy = vi.hoisted(() => vi.fn(() => vi.fn()));
+vi.mock('@mui/material', () => ({
+    emphasize: (_color, value) => `emphasis-${value}`,
+    styled: (tag) => (styles) => {
+        styles({
+            theme: {
+                palette: { background: { default: '#fff' }, text: { disabled: '#999' } }
+            }
+        });
+        return tag;
+    }
+}));
+vi.mock('@tui/core', () => ({
+    useAppBar: () => ({ autoHide: true }),
+    useAppBarHeight: () => 42,
+    useAppLayout: () => ({ current: 'wide' })
+}));
+vi.mock('components/elements/addons/lists/hooks/useTuiListKeyboard', () => ({
+    default: () => ({ register: registerSpy })
+}));
+import TuiListBase from './TuiListBase';
+import { TuiListItemsContext, TuiListMethodContext } from './TuiListProvider';
+describe('TuiListBase', () => {
+    it('renders items, exposes layout metadata, and forwards selection', () => {
+        const onSelect = vi.fn();
+        const select = vi.fn(item => ({ ...item, selected: !item.selected, cursor: true }));
+        render(_jsx(TuiListMethodContext.Provider, { value: { select }, children: _jsx(TuiListItemsContext.Provider, { value: { items: [{ id: '1', item: 'one', selected: false, cursor: false }] }, children: _jsx(TuiListBase, { onSelect: onSelect, children: (items, handleSelect) => (_jsxs("div", { children: [_jsx("button", { onClick: () => handleSelect(items[0], 0), children: "pick" }), _jsx("div", { children: items[0].item })] })) }) }) }));
+        const root = screen.getByText('one').closest('[data-tuiappbar-height]');
+        expect(root).toHaveAttribute('data-tuiappbar-height', '42');
+        expect(root).toHaveAttribute('data-tuilayout', 'wide');
+        expect(root).toHaveAttribute('data-tuiappbar-autohide', 'true');
+        screen.getByText('pick').click();
+        expect(select).toHaveBeenCalledWith({ id: '1', item: 'one', selected: false, cursor: false }, 0);
+        expect(onSelect).toHaveBeenCalledWith({ id: '1', item: 'one', selected: true, cursor: true }, 0);
+    });
+    it('registers keyboard handlers when keyboard mode is enabled', () => {
+        render(_jsx(TuiListMethodContext.Provider, { value: { select: vi.fn(item => item) }, children: _jsx(TuiListItemsContext.Provider, { value: { items: [] }, children: _jsx(TuiListBase, { keyboard: true, onSelect: vi.fn(), children: () => _jsx("div", { children: "content" }) }) }) }));
+        expect(registerSpy).toHaveBeenCalled();
+    });
+});

package/components/elements/addons/lists/TuiListProvider.test.d.ts

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

package/components/elements/addons/lists/TuiListProvider.test.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useContext } from 'react';
+import { describe, expect, it } from 'vitest';
+import TuiListProvider, { TuiListItemsContext, TuiListMethodContext } from './TuiListProvider';
+const Probe = () => {
+    const methods = useContext(TuiListMethodContext);
+    const { items, moveNext, movePrevious } = useContext(TuiListItemsContext);
+    return (_jsxs("div", { children: [_jsx("button", { onClick: () => methods.load([{ id: '1', item: 'one', selected: false, cursor: false }]), children: "load-one" }), _jsx("button", { onClick: () => methods.load([
+                    {
+                        id: '1',
+                        item: 'updated',
+                        selected: undefined,
+                        cursor: undefined,
+                        details: undefined
+                    },
+                    { id: '2', item: 'two', selected: false, cursor: false }
+                ]), children: "merge-load" }), _jsx("button", { onClick: () => methods.load([
+                    { id: '1', item: 'one', selected: false, cursor: false },
+                    { id: '2', item: 'two', selected: false, cursor: false }
+                ]), children: "load-two" }), _jsx("button", { onClick: () => methods.select(items[0], 0), children: "select-first" }), _jsx("button", { onClick: () => methods.move(1), children: "move-second" }), _jsx("button", { onClick: () => methods.replace(items[0], { id: '1', item: 'replace-ref', details: 'details' }), children: "replace-ref" }), _jsx("button", { onClick: () => methods.replaceById({ id: '2' }, { id: '2', item: 'replace-id' }), children: "replace-id" }), _jsx("button", { onClick: () => methods.remove('1'), children: "remove-first" }), _jsx("button", { onClick: () => moveNext(), children: "move-next" }), _jsx("button", { onClick: () => movePrevious(), children: "move-previous" }), _jsx("pre", { children: JSON.stringify(items) })] }));
+};
+describe('TuiListProvider', () => {
+    it('loads, preserves state, selects, moves, replaces, and removes items', () => {
+        render(_jsx(TuiListProvider, { children: _jsx(Probe, {}) }));
+        fireEvent.click(screen.getByText('load-one'));
+        expect(screen.getByText('[{"id":"1","item":"one","selected":false,"cursor":false}]')).toBeInTheDocument();
+        fireEvent.click(screen.getByText('select-first'));
+        expect(screen.getByText('[{"id":"1","item":"one","selected":true,"cursor":true}]')).toBeInTheDocument();
+        fireEvent.click(screen.getByText('merge-load'));
+        expect(screen.getByText('[{"id":"1","item":"updated","selected":true,"cursor":true},{"id":"2","item":"two","selected":false,"cursor":false}]')).toBeInTheDocument();
+        fireEvent.click(screen.getByText('replace-ref'));
+        expect(screen.getByText('[{"id":"1","item":"replace-ref","selected":true,"cursor":true,"details":"details"},{"id":"2","item":"two","selected":false,"cursor":false}]')).toBeInTheDocument();
+        fireEvent.click(screen.getByText('replace-id'));
+        expect(screen.getByText('[{"id":"1","item":"replace-ref","selected":true,"cursor":true,"details":"details"},{"id":"2","item":"replace-id","selected":false,"cursor":false}]')).toBeInTheDocument();
+        fireEvent.click(screen.getByText('remove-first'));
+        expect(screen.getByText('[{"id":"2","item":"replace-id","selected":false,"cursor":false}]')).toBeInTheDocument();
+    });
+    it('supports move and wraparound keyboard helpers', () => {
+        render(_jsx(TuiListProvider, { children: _jsx(Probe, {}) }));
+        fireEvent.click(screen.getByText('load-two'));
+        fireEvent.click(screen.getByText('move-second'));
+        expect(screen.getByText('[{"id":"1","item":"one","selected":false,"cursor":false},{"id":"2","item":"two","selected":false,"cursor":true}]')).toBeInTheDocument();
+        fireEvent.click(screen.getByText('move-next'));
+        expect(screen.getByText('[{"id":"1","item":"one","selected":false,"cursor":true},{"id":"2","item":"two","selected":false,"cursor":false}]')).toBeInTheDocument();
+        fireEvent.click(screen.getByText('move-previous'));
+        expect(screen.getByText('[{"id":"1","item":"one","selected":false,"cursor":false},{"id":"2","item":"two","selected":false,"cursor":true}]')).toBeInTheDocument();
+    });
+});

package/components/elements/addons/search/phrase/Phrase.test.d.ts

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

package/components/elements/addons/search/phrase/Phrase.test.js

@@ -0,0 +1,77 @@
+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 mockExecCommand = vi.hoisted(() => vi.fn());
+const mockParse = vi.hoisted(() => vi.fn());
+const mockSuggest = vi.hoisted(() => vi.fn());
+vi.mock('@mui/material', async () => {
+    const React = await import('react');
+    return {
+        ClickAwayListener: ({ children, onClickAway }) => _jsx("div", { onClick: onClickAway, children: children }),
+        InputAdornment: ({ children }) => _jsx("div", { children: children }),
+        ListItemText: ({ children }) => _jsx("div", { children: children }),
+        MenuItem: ({ children, onClick }) => _jsx("button", { onClick: onClick, children: children }),
+        MenuList: ({ children, ref, onKeyDown }) => (_jsx("div", { ref: ref, tabIndex: 0, onKeyDown: onKeyDown, children: children })),
+        Paper: ({ children }) => _jsx("div", { children: children }),
+        Popper: ({ children, open }) => (open ? _jsx("div", { children: children }) : null),
+        TextField: React.forwardRef(({ value, onChange, onKeyDown, InputProps, label }, ref) => (_jsxs("div", { ref: ref, children: [_jsx("label", { children: label }), _jsx("input", { "aria-label": label ?? 'phrase', value: value, onChange: onChange, onKeyDown: onKeyDown, onSelect: InputProps?.onSelectCapture }), InputProps?.startAdornment, InputProps?.endAdornment] })))
+    };
+});
+vi.mock('@tui/core', () => ({
+    parseEvent: (event) => ({
+        isEnter: event.key === 'Enter',
+        isCtrl: !!event.ctrlKey,
+        isSpace: event.key === ' ',
+        isEscape: event.key === 'Escape',
+        isArrowDown: event.key === 'ArrowDown'
+    })
+}));
+vi.mock('./word/WordLexer', () => ({
+    default: class {
+        parse(value, cursor) {
+            return mockParse(value, cursor);
+        }
+    }
+}));
+vi.mock('./word/WordSuggester', () => ({
+    default: class {
+        constructor(_suggestions) { }
+        suggest(analysis) {
+            return mockSuggest(analysis);
+        }
+    }
+}));
+import Phrase from './Phrase';
+describe('Phrase', () => {
+    beforeEach(() => {
+        mockParse.mockReset().mockReturnValue({
+            suggest: { token: { startIndex: 0, endIndex: 2 } },
+            tokens: ['abc']
+        });
+        mockSuggest.mockReset().mockReturnValue(['alpha']);
+        document.execCommand = mockExecCommand;
+    });
+    it('updates the phrase and supports ctrl-space, enter, click, and escape suggestion flows', () => {
+        const onChange = vi.fn();
+        const onKeyDown = vi.fn();
+        render(_jsx(Phrase, { label: "phrase", value: "abc", suggestions: ['alpha', 'beta'], onChange: onChange, onKeyDown: onKeyDown }));
+        const input = screen.getByLabelText('phrase');
+        Object.defineProperty(input, 'selectionStart', { configurable: true, value: 1 });
+        input.setSelectionRange = vi.fn();
+        input.focus = vi.fn();
+        fireEvent.change(input, { target: { value: 'next' } });
+        expect(onChange).toHaveBeenCalledWith('next');
+        fireEvent.keyDown(input, { key: ' ', ctrlKey: true });
+        expect(screen.getByText('alpha')).toBeInTheDocument();
+        fireEvent.keyDown(input, { key: 'Enter' });
+        expect(mockExecCommand).toHaveBeenCalledWith('insertText', false, 'alpha');
+        fireEvent.keyDown(input, { key: 'Escape' });
+        fireEvent.select(input);
+        fireEvent.keyDown(input, { key: 'ArrowDown' });
+        fireEvent.keyDown(input, { key: 'Tab' });
+        expect(onKeyDown).toHaveBeenCalled();
+        fireEvent.click(screen.getByText('alpha'));
+        expect(mockExecCommand).toHaveBeenCalledTimes(2);
+    });
+});

package/components/elements/addons/search/phrase/PhraseLexer.test.d.ts

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

package/components/elements/addons/search/phrase/PhraseLexer.test.js

@@ -0,0 +1,92 @@
+/// <reference types="vitest" />
+import { describe, expect, it } from 'vitest';
+import PhraseConsumer from './PhraseConsumer';
+import PhraseLexer from './PhraseLexer';
+class WordConsumer extends PhraseConsumer {
+    lock(lexer) {
+        return /^[A-Za-z[]/.test(lexer.bufferValue());
+    }
+    consume(lexer) {
+        const value = this.bufferValue();
+        if (value.startsWith('[') && value.endsWith(']')) {
+            return {
+                type: 'group',
+                value,
+                startIndex: lexer.start(),
+                endIndex: lexer.end(),
+                children: [
+                    {
+                        type: 'open',
+                        value: '[',
+                        startIndex: lexer.start(),
+                        endIndex: lexer.start()
+                    },
+                    {
+                        type: 'value',
+                        value: value.slice(1, -1),
+                        startIndex: lexer.start() + 1,
+                        endIndex: lexer.end() - 1
+                    },
+                    {
+                        type: 'close',
+                        value: ']',
+                        startIndex: lexer.end(),
+                        endIndex: lexer.end()
+                    }
+                ]
+            };
+        }
+        if (lexer.aheadStartsWithAny(false, ' ') || lexer.aheadIsEmpty()) {
+            return { type: 'word', value, startIndex: lexer.start(), endIndex: lexer.end() };
+        }
+        return null;
+    }
+}
+class SpaceConsumer extends PhraseConsumer {
+    lock(lexer) {
+        return lexer.bufferValue() === ' ';
+    }
+    consume(lexer) {
+        return { type: 'space', value: ' ', startIndex: lexer.start(), endIndex: lexer.end() };
+    }
+}
+class TestLexer extends PhraseLexer {
+    consumers() {
+        return [new SpaceConsumer(), new WordConsumer()];
+    }
+}
+describe('PhraseLexer', () => {
+    it('parses tokens and suggestion context from the cursor', () => {
+        const lexer = new TestLexer();
+        const analysis = lexer.parse('alpha beta', 7);
+        expect(analysis.tokens).toEqual([
+            { type: 'word', value: 'alpha', startIndex: 0, endIndex: 4 },
+            { type: 'space', value: ' ', startIndex: 5, endIndex: 5 },
+            { type: 'word', value: 'beta', startIndex: 6, endIndex: 9 },
+            { type: 'eop', startIndex: 10, endIndex: 10, value: '' }
+        ]);
+        expect(analysis.parent.value).toBe('beta');
+        expect(analysis.current.value).toBe('beta');
+        expect(analysis.suggest.value).toBe('b');
+    });
+    it('flattens child tokens when selecting the current token', () => {
+        const lexer = new TestLexer();
+        const analysis = lexer.parse('[xy]', 1);
+        expect(analysis.parent.type).toBe('group');
+        expect(analysis.current).toMatchObject({ type: 'value', value: 'xy' });
+        expect(analysis.suggest.parent).toMatchObject({ type: 'group', value: '[xy]' });
+    });
+    it('exposes buffer navigation helpers while parsing', () => {
+        const lexer = new TestLexer();
+        lexer.parse('one two');
+        expect(lexer.start()).toBe(7);
+        expect(lexer.end()).toBe(6);
+        expect(lexer.buffer()).toEqual([]);
+        expect(lexer.ahead()).toBe('');
+        expect(lexer.aheadIsEmpty()).toBe(true);
+        expect(lexer.behind()).toBe('');
+        expect(lexer.behindEndsWithAny(false, '')).toBe(true);
+        expect(lexer.testAhead(/^$/)).toBe(true);
+        expect(lexer.testBehind(/^$/)).toBe(true);
+    });
+});

package/components/elements/addons/search/phrase/index.test.d.ts

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

package/components/elements/addons/search/phrase/index.test.js

@@ -0,0 +1,20 @@
+/// <reference types="vitest" />
+import { describe, expect, it } from 'vitest';
+import { PhraseBuffer } from '.';
+describe('PhraseBuffer', () => {
+    it('builds tokens from appended content', () => {
+        const buffer = new PhraseBuffer('word').init(3, ['a']).append('b').append('c');
+        expect(buffer.value()).toBe('abc');
+        expect(buffer.start()).toBe(3);
+        expect(buffer.end()).toBe(6);
+        expect(buffer.token()).toEqual({ type: 'word', value: 'abc', startIndex: 3, endIndex: 5 });
+    });
+    it('allows explicit start and end overrides and returns null for empty buffers', () => {
+        const buffer = new PhraseBuffer().init(0);
+        expect(buffer.token()).toBeNull();
+        buffer.start(5);
+        buffer.end(9);
+        expect(buffer.start()).toBe(5);
+        expect(buffer.end()).toBe(9);
+    });
+});

package/components/elements/case/CaseCard.test.d.ts

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

package/components/elements/case/CaseCard.test.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+vi.mock('@mui/icons-material', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        CheckCircleOutline: () => _jsx("div", { children: "complete-icon" }),
+        HourglassBottom: () => _jsx("div", { children: "range-icon" }),
+        RadioButtonUnchecked: () => _jsx("div", { children: "task-icon" }),
+        UpdateOutlined: () => _jsx("div", { children: "updated-icon" })
+    };
+});
+vi.mock('@mui/material', () => ({
+    Chip: ({ label }) => _jsx("div", { children: label }),
+    Divider: () => _jsx("div", { children: "divider" }),
+    Grid: ({ children }) => _jsx("div", { children: children }),
+    Skeleton: () => _jsx("div", { children: "loading" }),
+    Stack: ({ children }) => _jsx("div", { children: children }),
+    Tooltip: ({ children }) => _jsx("div", { children: children }),
+    Typography: ({ children }) => _jsx("div", { children: children }),
+    useTheme: () => ({ palette: { success: { main: 'green' } }, spacing: (n) => `${n * 8}px` })
+}));
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            case: {
+                get: (id) => ({ id })
+            }
+        }
+    }
+}));
+vi.mock('components/elements/case/StatusIcon', () => ({
+    default: ({ status }) => _jsx("div", { children: `status:${status}` })
+}));
+vi.mock('components/elements/display/HowlerAvatar', () => ({
+    default: ({ userId }) => _jsx("div", { children: `avatar:${userId}` })
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('dayjs', () => ({
+    default: (value) => ({ toString: () => `date:${value}` })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('utils/utils', () => ({
+    twitterShort: (value) => `short:${value}`
+}));
+vi.mock('../display/HowlerCard', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+import CaseCard from './CaseCard';
+describe('CaseCard', () => {
+    beforeEach(() => {
+        mockDispatchApi.mockReset();
+    });
+    it('shows a skeleton while no case data is available', () => {
+        render(_jsx(CaseCard, {}));
+        expect(screen.getByText('loading')).toBeInTheDocument();
+    });
+    it('renders provided case details and loads by case id when needed', async () => {
+        mockDispatchApi.mockResolvedValueOnce({
+            case_id: 'case-2',
+            title: 'Loaded case',
+            status: 'resolved',
+            updated: '2024-01-02T00:00:00Z',
+            summary: 'Loaded summary',
+            participants: ['alice'],
+            targets: ['target-1'],
+            indicators: ['indicator-1'],
+            threats: ['threat-1'],
+            tasks: [
+                { id: 't1', summary: 'done task', complete: true },
+                { id: 't2', summary: 'todo task', complete: false }
+            ]
+        });
+        const { rerender } = render(_jsx(CaseCard, { case: {
+                case_id: 'case-1',
+                title: 'Case title',
+                status: 'resolved',
+                updated: '2024-01-01T00:00:00Z',
+                start: '2024-01-01',
+                end: '2024-01-02',
+                summary: 'First line\nSecond line',
+                participants: ['alice', 'bob'],
+                tasks: [
+                    { id: 't1', summary: 'done task', complete: true },
+                    { id: 't2', summary: 'todo task', complete: false }
+                ]
+            } }));
+        expect(screen.getByText('Case title')).toBeInTheDocument();
+        expect(screen.getByText('status:resolved')).toBeInTheDocument();
+        expect(screen.getByText('short:2024-01-01 - short:2024-01-02')).toBeInTheDocument();
+        expect(screen.getByText('short:2024-01-01T00:00:00Z')).toBeInTheDocument();
+        expect(screen.getByText('First line')).toBeInTheDocument();
+        expect(screen.getByText('avatar:alice')).toBeInTheDocument();
+        expect(screen.getByText('1 complete')).toBeInTheDocument();
+        expect(screen.getByText('todo task')).toBeInTheDocument();
+        rerender(_jsx(CaseCard, { caseId: "case-2" }));
+        await waitFor(() => expect(mockDispatchApi).toHaveBeenCalledWith({ id: 'case-2' }, { throwError: false }));
+        await waitFor(() => expect(screen.getByText('Loaded case')).toBeInTheDocument());
+    });
+});

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

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

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

@@ -0,0 +1,60 @@
+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 apiConfigContextToken = vi.hoisted(() => ({ name: 'api-config-context' }));
+let configValue = {
+    config: {
+        c12nDef: {
+            levels_map: { 0: 'secret' },
+            levels_styles_map: { secret: { color: 'primary' } }
+        }
+    }
+};
+const mockGetParts = vi.hoisted(() => vi.fn(() => ({ lvlIdx: 0 })));
+const mockNormalized = vi.hoisted(() => vi.fn(() => 'S'));
+vi.mock('@mui/material', () => ({
+    Chip: ({ label, color, sx, variant }) => (_jsx("div", { "data-color": color, "data-variant": variant, "data-sx": JSON.stringify(sx), children: label })),
+    Tooltip: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/app/providers/ApiConfigProvider', () => ({
+    ApiConfigContext: apiConfigContextToken
+}));
+vi.mock('utils/classificationParser', () => ({
+    getParts: mockGetParts,
+    normalizedClassification: mockNormalized
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context === apiConfigContextToken)
+                return configValue;
+            return actual.useContext(context);
+        }
+    };
+});
+import ClassificationChip from './ClassificationChip';
+describe('ClassificationChip', () => {
+    it('renders normalized values with theme colors', () => {
+        render(_jsx(ClassificationChip, { classification: "SECRET" }));
+        expect(screen.getByText('S')).toHaveAttribute('data-color', 'primary');
+    });
+    it('falls back to sx colors or the original classification', () => {
+        configValue = {
+            config: {
+                c12nDef: {
+                    levels_map: { 0: 'secret' },
+                    levels_styles_map: { secret: { color: '#ff0000' } }
+                }
+            }
+        };
+        const { rerender } = render(_jsx(ClassificationChip, { classification: "SECRET", variant: "filled", sx: { m: 1 } }));
+        expect(screen.getByText('S')).toHaveAttribute('data-variant', 'filled');
+        expect(screen.getByText('S').getAttribute('data-sx')).toContain('#ff0000');
+        configValue = { config: { c12nDef: undefined } };
+        rerender(_jsx(ClassificationChip, { classification: "RAW" }));
+        expect(screen.getByText('RAW')).toHaveAttribute('data-color', 'default');
+    });
+});

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

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