@happyvertical/smrt-ui 0.53.1 → 0.53.2

package/dist/components/forms/__tests__/MultiSelect.test.js

@@ -1,281 +0,0 @@
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { tick } from 'svelte';
-import { describe, expect, it, vi } from 'vitest';
-import { createControlInteractionRegistry, executeLocalControlCommand, } from '../control-interaction.js';
-import MultiSelect from '../MultiSelect.svelte';
-import Fixture from './multiselect-form.fixture.svelte';
-function form() {
-    return screen.getByRole('form', { name: 'Roles form' });
-}
-function data() {
-    return new FormData(form());
-}
-async function open() {
-    await userEvent.click(screen.getByRole('button', { name: /Roles/ }));
-}
-describe('MultiSelect native form values', () => {
-    it('posts repeated values in selection order and removes deselected inputs', async () => {
-        render(Fixture);
-        await open();
-        await userEvent.click(screen.getByRole('option', { name: 'Administrator' }));
-        await userEvent.click(screen.getByRole('option', { name: 'Operator' }));
-        expect(data().getAll('roles')).toEqual(['admin', '42']);
-        await userEvent.click(screen.getByRole('option', { name: 'Administrator' }));
-        expect(data().getAll('roles')).toEqual(['42']);
-        await userEvent.click(screen.getByRole('option', { name: 'Disabled role' }));
-        expect(data().getAll('roles')).toEqual(['42']);
-    });
-    it('posts canonical numeric selections from legacy strings', () => {
-        render(Fixture, { props: { values: ['42'] } });
-        expect(data().getAll('roles')).toEqual(['42']);
-    });
-    it('omits empty selections, empty names and unnamed controls', async () => {
-        const { rerender } = render(Fixture);
-        expect([...data()]).toEqual([]);
-        await rerender({ values: [42], name: '' });
-        expect([...data()]).toEqual([]);
-        await rerender({ values: [42], unnamed: true });
-        expect([...data()]).toEqual([]);
-    });
-    it.each([
-        { disabled: true },
-        { fieldsetDisabled: true },
-    ])('omits disabled selections %j', (props) => {
-        render(Fixture, { props: { ...props, values: [42, 'admin'] } });
-        expect([...data()]).toEqual([]);
-    });
-    it('restores initial selected values on native reset', async () => {
-        render(Fixture, { props: { values: [42] } });
-        await open();
-        await userEvent.click(screen.getByRole('option', { name: 'Administrator' }));
-        form().reset();
-        await settleReset();
-        expect(data().getAll('roles')).toEqual(['42']);
-        await open();
-        expect(screen.getByRole('option', { name: 'Operator' })).toHaveAttribute('aria-selected', 'true');
-        expect(screen.getByRole('option', { name: 'Administrator' })).toHaveAttribute('aria-selected', 'false');
-    });
-    it('preserves changed values when reset is canceled', async () => {
-        render(Fixture);
-        await open();
-        await userEvent.click(screen.getByRole('option', { name: 'Operator' }));
-        form().addEventListener('reset', (event) => event.preventDefault());
-        form().reset();
-        await settleReset();
-        expect(data().getAll('roles')).toEqual(['42']);
-    });
-    it('preserves registry identity and posts only applied canonical values', async () => {
-        const registry = createControlInteractionRegistry({
-            isLocalGesture: () => true,
-        });
-        render(Fixture, { props: { registry } });
-        const identity = { formId: 'roles-form', controlId: 'roles' };
-        await registry.execute({ action: 'stage', identity, value: ['42', 'admin'] }, { source: 'agent' });
-        expect([...data()]).toEqual([]);
-        await userEvent.click(screen.getByRole('button', { name: 'Apply valid changes' }));
-        expect(data().getAll('roles')).toEqual(['42', 'admin']);
-        expect(registry.get(identity)?.state.value).toEqual([42, 'admin']);
-    });
-});
-async function settleReset() {
-    await new Promise((resolve) => setTimeout(resolve));
-    await tick();
-}
-describe('MultiSelect deferred native reset', () => {
-    it('preserves a newer programmatic value before reset completion', async () => {
-        const target = document.createElement('form');
-        document.body.append(target);
-        const view = render(MultiSelect, {
-            target,
-            props: {
-                options: [
-                    { value: 42, label: 'Initial' },
-                    { value: 'other', label: 'Other' },
-                    { value: 'changed', label: 'Changed' },
-                ],
-                label: 'Choice',
-                name: 'choice',
-                values: [42],
-            },
-        });
-        await view.rerender({ values: ['changed'] });
-        target.reset();
-        await view.rerender({ values: ['other'] });
-        await settleReset();
-        expect(new FormData(target).getAll('choice')).toEqual(['other']);
-        await view.unmount();
-        target.remove();
-    });
-    it('cancels pending completion when unmounted', async () => {
-        const target = document.createElement('form');
-        document.body.append(target);
-        const onChange = vi.fn();
-        const view = render(MultiSelect, {
-            target,
-            props: {
-                options: [
-                    { value: 42, label: 'Initial' },
-                    { value: 'other', label: 'Other' },
-                    { value: 'changed', label: 'Changed' },
-                ],
-                label: 'Choice',
-                name: 'choice',
-                values: [42],
-                onvalueschange: onChange,
-            },
-        });
-        target.reset();
-        await view.unmount();
-        await settleReset();
-        expect(onChange).not.toHaveBeenCalled();
-        target.remove();
-    });
-});
-describe('MultiSelect selected disabled option posting', () => {
-    it('omits initially disabled selections and responds to dynamic disable without losing state', async () => {
-        const target = document.createElement('form');
-        document.body.append(target);
-        const options = [
-            { value: 42, label: 'Selected', disabled: true },
-            { value: 'other', label: 'Other' },
-        ];
-        const view = render(MultiSelect, {
-            target,
-            props: {
-                options,
-                label: 'Choice',
-                name: 'choice',
-                values: [42, 'other'],
-            },
-        });
-        expect(new FormData(target).getAll('choice')).toEqual(['other']);
-        await view.rerender({
-            options: options.map((option) => ({ ...option, disabled: false })),
-        });
-        expect(new FormData(target).getAll('choice')).toEqual(['42', 'other']);
-        await view.rerender({ options });
-        expect(new FormData(target).getAll('choice')).toEqual(['other']);
-        await view.rerender({
-            options: options.map((option) => ({ ...option, disabled: false })),
-        });
-        expect(new FormData(target).getAll('choice')).toEqual(['42', 'other']);
-        await view.unmount();
-        target.remove();
-    });
-});
-describe('MultiSelect reset listener ordering', () => {
-    it('honors cancellation from a later listener microtask', async () => {
-        const target = document.createElement('form');
-        document.body.append(target);
-        const onChange = vi.fn();
-        const view = render(MultiSelect, {
-            target,
-            props: {
-                options: [
-                    { value: 42, label: 'Initial' },
-                    { value: 'changed', label: 'Changed' },
-                ],
-                label: 'Choice',
-                name: 'choice',
-                values: [42],
-                onvalueschange: onChange,
-            },
-        });
-        await view.rerender({ values: ['changed'] });
-        target.addEventListener('reset', (event) => {
-            queueMicrotask(() => event.preventDefault());
-        });
-        target.reset();
-        await settleReset();
-        expect(new FormData(target).getAll('choice')).toEqual(['changed']);
-        expect(onChange).not.toHaveBeenCalled();
-        await view.unmount();
-        target.remove();
-    });
-});
-function dispatchLocalCommand(registry, command) {
-    const target = new EventTarget();
-    let pending;
-    target.addEventListener('click', (event) => {
-        pending = executeLocalControlCommand(registry, command, event);
-    }, { once: true });
-    target.dispatchEvent(new Event('click'));
-    if (!pending)
-        throw new Error('local command handler did not run');
-    return pending;
-}
-describe('MultiSelect reset registry currency', () => {
-    it.each([
-        false,
-        true,
-    ])('keeps staged proposal currency correct when cancellation is %s', async (cancel) => {
-        const registry = createControlInteractionRegistry({
-            isLocalGesture: () => true,
-        });
-        render(Fixture, { props: { ...{ values: [42] }, registry } });
-        const identity = { formId: 'roles-form', controlId: 'roles' };
-        const target = form();
-        await open();
-        await userEvent.click(screen.getByRole('option', { name: 'Administrator' }));
-        expect((await registry.execute({ action: 'stage', identity, value: ['admin'] }, { source: 'agent' })).ok).toBe(true);
-        if (cancel)
-            target.addEventListener('reset', (event) => event.preventDefault());
-        target.reset();
-        await settleReset();
-        expect(registry.get(identity)?.state.staged?.stale).toBe(!cancel);
-        const applied = await dispatchLocalCommand(registry, {
-            action: 'apply',
-            identity,
-        });
-        expect(applied.ok).toBe(cancel);
-        if (!cancel) {
-            expect(applied.reason).toBe('staged_value_stale');
-            expect(new FormData(target).getAll('roles')).toEqual(['42']);
-        }
-    });
-    it.each([
-        false,
-        true,
-    ])('preserves reset over an async local clear when cancellation is %s', async (cancel) => {
-        let releasePolicy;
-        let policyStarted;
-        const blocked = new Promise((resolve) => {
-            releasePolicy = resolve;
-        });
-        const started = new Promise((resolve) => {
-            policyStarted = resolve;
-        });
-        const registry = createControlInteractionRegistry({
-            isLocalGesture: () => true,
-            policy: async (command) => {
-                if (command.action === 'clear') {
-                    policyStarted();
-                    await blocked;
-                }
-                return { allowed: true };
-            },
-        });
-        render(Fixture, { props: { ...{ values: [42] }, registry } });
-        const identity = { formId: 'roles-form', controlId: 'roles' };
-        const target = form();
-        await open();
-        await userEvent.click(screen.getByRole('option', { name: 'Administrator' }));
-        const clearing = dispatchLocalCommand(registry, {
-            action: 'clear',
-            identity,
-        });
-        await started;
-        if (cancel)
-            target.addEventListener('reset', (event) => event.preventDefault());
-        target.reset();
-        await settleReset();
-        releasePolicy();
-        const result = await clearing;
-        await tick();
-        expect(result.ok).toBe(cancel);
-        if (!cancel)
-            expect(result.reason).toBe('staged_value_stale');
-        expect(new FormData(target).getAll('roles')).toEqual(cancel ? [] : ['42']);
-    });
-});

package/dist/components/forms/__tests__/SearchInput.test.js

@@ -1,92 +0,0 @@
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import SearchInput from '../SearchInput.svelte';
-describe('SearchInput', () => {
-    beforeEach(() => vi.useFakeTimers({ shouldAdvanceTime: true }));
-    afterEach(() => vi.useRealTimers());
-    it('is a labelled search field in a search landmark', () => {
-        render(SearchInput, {
-            props: { value: '', onsearch: vi.fn(), placeholder: 'Search by title' },
-        });
-        expect(screen.getByRole('search')).toBeInTheDocument();
-        expect(screen.getByRole('searchbox', { name: 'Search' })).toHaveAttribute('placeholder', 'Search by title');
-    });
-    it('searches once, trimmed and single-line, after the last key', async () => {
-        const onsearch = vi.fn();
-        const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-        render(SearchInput, { props: { value: '', onsearch, debounceMs: 300 } });
-        await user.type(screen.getByRole('searchbox'), '  council   hall ');
-        expect(onsearch).not.toHaveBeenCalled();
-        vi.advanceTimersByTime(300);
-        expect(onsearch).toHaveBeenCalledTimes(1);
-        expect(onsearch).toHaveBeenCalledWith('council hall');
-    });
-    it('searches at once on Enter', async () => {
-        const onsearch = vi.fn();
-        const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-        render(SearchInput, { props: { value: '', onsearch } });
-        await user.type(screen.getByRole('searchbox'), 'roads{Enter}');
-        expect(onsearch).toHaveBeenCalledWith('roads');
-    });
-    it('does not search for the search it is already showing', async () => {
-        const onsearch = vi.fn();
-        const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-        render(SearchInput, { props: { value: 'roads', onsearch } });
-        await user.type(screen.getByRole('searchbox'), '{Enter}');
-        expect(onsearch).not.toHaveBeenCalled();
-    });
-    it('clears with the x and focuses the field', async () => {
-        const onsearch = vi.fn();
-        const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-        render(SearchInput, { props: { value: 'roads', onsearch } });
-        const field = screen.getByRole('searchbox');
-        expect(field).toHaveValue('roads');
-        await user.click(screen.getByRole('button', { name: 'Clear search' }));
-        expect(onsearch).toHaveBeenCalledWith('');
-        expect(field).toHaveValue('');
-        expect(field).toHaveFocus();
-        expect(screen.queryByRole('button', { name: 'Clear search' })).toBeNull();
-    });
-    it('follows the applied search when it changes from outside', async () => {
-        const { rerender } = render(SearchInput, {
-            props: { value: 'roads', onsearch: vi.fn() },
-        });
-        await rerender({ value: 'parks', onsearch: vi.fn() });
-        expect(screen.getByRole('searchbox')).toHaveValue('parks');
-    });
-    it('inside a host form, Enter searches and never submits the host form', async () => {
-        const onsearch = vi.fn();
-        const onsubmit = vi.fn((event) => event.preventDefault());
-        const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-        const host = document.createElement('form');
-        host.addEventListener('submit', onsubmit);
-        document.body.append(host);
-        render(SearchInput, { target: host, props: { value: '', onsearch } });
-        expect(host.querySelector('form')).toBeNull();
-        await user.type(screen.getByRole('searchbox'), 'roads{Enter}');
-        expect(onsearch).toHaveBeenCalledWith('roads');
-        expect(onsubmit).not.toHaveBeenCalled();
-        host.remove();
-    });
-    it('a value the host normalized differently does not swallow a later one', async () => {
-        const onsearch = vi.fn();
-        const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-        const view = render(SearchInput, { props: { value: '', onsearch } });
-        await user.type(screen.getByRole('searchbox'), 'Roads{Enter}');
-        expect(onsearch).toHaveBeenCalledWith('Roads');
-        // The host applies its own normalization, then later navigates to the
-        // exact text the box once sent: the box must follow both.
-        await view.rerender({ value: 'roads', onsearch });
-        expect(screen.getByRole('searchbox')).toHaveValue('roads');
-        await view.rerender({ value: 'Roads', onsearch });
-        expect(screen.getByRole('searchbox')).toHaveValue('Roads');
-    });
-    it('is axe-clean', async () => {
-        const { container } = render(SearchInput, {
-            props: { value: 'roads', onsearch: vi.fn() },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/components/forms/__tests__/Select.test.js

@@ -1,37 +0,0 @@
-/**
- * Golden test for Select (Sweep L1, #1420).
- *
- * Select forwards aria attributes (so it can be labelled / error-associated)
- * and inherits id / describedby / invalid from a wrapping FormGroup via context.
- */
-import { render, screen } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import { describe, expect, it } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import Select from '../Select.svelte';
-function options() {
-    return createRawSnippet(() => ({
-        render: () => `<option value="a">A</option><option value="b">B</option>`,
-    }));
-}
-describe('Select', () => {
-    it('forwards aria-label / aria-describedby / aria-invalid', () => {
-        render(Select, {
-            props: {
-                'aria-label': 'Country',
-                'aria-describedby': 'country-hint',
-                'aria-invalid': 'true',
-                children: options(),
-            },
-        });
-        const select = screen.getByRole('combobox', { name: 'Country' });
-        expect(select).toHaveAttribute('aria-describedby', 'country-hint');
-        expect(select).toHaveAttribute('aria-invalid', 'true');
-    });
-    it('is axe-clean when labelled', async () => {
-        const { container } = render(Select, {
-            props: { 'aria-label': 'Country', children: options() },
-        });
-        await expectNoA11yViolations(container);
-    });
-});