@happyvertical/smrt-svelte 0.53.1 → 0.53.3

package/dist/components/forms/__tests__/AddressInput.behavior.test.js

@@ -1,216 +0,0 @@
-/**
- * Behavior tests for AddressInput (Sweep S11, #1416).
- *
- * Exercises the sub-field wiring: typing/selecting each field composes a
- * Partial<AddressValue> emitted via onchange, the `fields` prop gates which
- * sub-fields render (and thus which keys appear in the composed value),
- * province/country selects populate from options, and the error prop marks
- * every field invalid with a single linked alert. useAppState (default mode)
- * is mocked since the hook throws outside a <Provider>.
- */
-import { expectNoA11yViolations } from '@happyvertical/smrt-ui/test-support/a11y';
-import { fireEvent, render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { tick } from 'svelte';
-import { describe, expect, it, vi } from 'vitest';
-const formCapture = vi.hoisted(() => ({
-    field: undefined,
-}));
-vi.mock('../../../hooks/useAppState.svelte.js', () => ({
-    useAppState: () => ({ state: { mode: 'default' }, setMode: vi.fn() }),
-}));
-vi.mock('../../../state/form-context.js', () => ({
-    tryGetFormContext: () => ({
-        registerField: (field) => {
-            formCapture.field = field;
-        },
-    }),
-}));
-import AddressInput from '../AddressInput.svelte';
-describe('AddressInput — behavior', () => {
-    it('typing the street composes a value including the street', async () => {
-        const onchange = vi.fn();
-        render(AddressInput, {
-            props: { name: 'addr', label: 'Address', onchange },
-        });
-        await userEvent.type(screen.getByLabelText('Street Address'), '123 Main St');
-        expect(onchange).toHaveBeenLastCalledWith(expect.objectContaining({ street: '123 Main St' }));
-    });
-    it('typing the city updates the composed value', async () => {
-        const onchange = vi.fn();
-        render(AddressInput, {
-            props: { name: 'addr', label: 'Address', onchange },
-        });
-        await userEvent.type(screen.getByLabelText('City'), 'Toronto');
-        expect(onchange).toHaveBeenLastCalledWith(expect.objectContaining({ city: 'Toronto' }));
-    });
-    it('selecting a province emits its value code', async () => {
-        const onchange = vi.fn();
-        render(AddressInput, {
-            props: { name: 'addr', label: 'Address', onchange },
-        });
-        await userEvent.selectOptions(screen.getByLabelText('Province/State'), 'ON');
-        expect(onchange).toHaveBeenLastCalledWith(expect.objectContaining({ province: 'ON' }));
-    });
-    it('selecting a country emits its value code', async () => {
-        const onchange = vi.fn();
-        render(AddressInput, {
-            props: { name: 'addr', label: 'Address', onchange },
-        });
-        await userEvent.selectOptions(screen.getByLabelText('Country'), 'US');
-        expect(onchange).toHaveBeenLastCalledWith(expect.objectContaining({ country: 'US' }));
-    });
-    it('defaults the country to CA', () => {
-        render(AddressInput, { props: { name: 'addr', label: 'Address' } });
-        expect(screen.getByLabelText('Country')).toHaveValue('CA');
-    });
-    it('composes a complete address object across all fields', async () => {
-        const onchange = vi.fn();
-        render(AddressInput, {
-            props: { name: 'addr', label: 'Address', onchange },
-        });
-        await userEvent.type(screen.getByLabelText('Postal/ZIP Code'), 'M5V 2T6');
-        expect(onchange).toHaveBeenLastCalledWith(expect.objectContaining({
-            street: '',
-            city: '',
-            province: '',
-            postalCode: 'M5V 2T6',
-            country: 'CA',
-        }));
-    });
-    it('only emits keys for the fields it was told to render', async () => {
-        const onchange = vi.fn();
-        render(AddressInput, {
-            props: {
-                name: 'addr',
-                label: 'Address',
-                fields: ['city', 'country'],
-                onchange,
-            },
-        });
-        expect(screen.queryByLabelText('Street Address')).toBeNull();
-        expect(screen.queryByLabelText('Postal/ZIP Code')).toBeNull();
-        await userEvent.type(screen.getByLabelText('City'), 'Ottawa');
-        const composed = onchange.mock.calls.at(-1)?.[0];
-        expect(Object.keys(composed).sort()).toEqual(['city', 'country']);
-        expect(composed.city).toBe('Ottawa');
-    });
-    it('seeds sub-fields from the bound value object', () => {
-        render(AddressInput, {
-            props: {
-                name: 'addr',
-                label: 'Address',
-                value: { city: 'Calgary', province: 'AB', country: 'CA' },
-            },
-        });
-        expect(screen.getByLabelText('City')).toHaveValue('Calgary');
-        expect(screen.getByLabelText('Province/State')).toHaveValue('AB');
-    });
-    it('renders the province and country option sets', () => {
-        render(AddressInput, { props: { name: 'addr', label: 'Address' } });
-        const provinces = screen.getByLabelText('Province/State');
-        expect(provinces.querySelector('option[value="QC"]')?.textContent).toBe('Quebec');
-        const countries = screen.getByLabelText('Country');
-        expect(countries.querySelector('option[value="US"]')?.textContent).toBe('United States');
-    });
-    it('parses spoken countries only from the live configured options', async () => {
-        const onchange = vi.fn();
-        render(AddressInput, {
-            props: {
-                name: 'addr',
-                label: 'Address',
-                fields: ['country'],
-                countries: [{ value: 'FR', label: 'France' }],
-                onchange,
-            },
-        });
-        await tick();
-        const field = formCapture.field;
-        if (!field)
-            throw new Error('AddressInput did not register its field');
-        field.setValue('Canada');
-        expect(onchange).not.toHaveBeenCalled();
-        expect(field.getValue()).toEqual({ country: 'FR' });
-        field.setValue('France');
-        expect(onchange).toHaveBeenLastCalledWith({ country: 'FR' });
-        field.setValue('FR');
-        expect(onchange).toHaveBeenLastCalledWith({ country: 'FR' });
-    });
-    it('retains spoken Canada and United States defaults', async () => {
-        const onchange = vi.fn();
-        render(AddressInput, {
-            props: {
-                name: 'addr',
-                label: 'Address',
-                fields: ['country'],
-                onchange,
-            },
-        });
-        await tick();
-        const field = formCapture.field;
-        if (!field)
-            throw new Error('AddressInput did not register its field');
-        field.setValue('Canada');
-        expect(onchange).toHaveBeenLastCalledWith({ country: 'CA' });
-        field.setValue('United States');
-        expect(onchange).toHaveBeenLastCalledWith({ country: 'US' });
-    });
-    it('accepts valid incremental setters for a required address', async () => {
-        const onchange = vi.fn();
-        render(AddressInput, {
-            props: {
-                name: 'addr',
-                label: 'Address',
-                required: true,
-                countries: [{ value: 'FR', label: 'France' }],
-                onchange,
-            },
-        });
-        await tick();
-        const field = formCapture.field;
-        if (!field)
-            throw new Error('AddressInput did not register its field');
-        field.setValue({ city: 'Paris' });
-        expect(onchange).toHaveBeenLastCalledWith({
-            street: '',
-            city: 'Paris',
-            province: '',
-            postalCode: '',
-            country: 'FR',
-        });
-        expect(field.validateValue?.({ city: 'Paris' })).toBe(false);
-        expect(field.validate?.()).toBe(false);
-        expect(field.webMcpSchema).toMatchObject({
-            required: ['street', 'city', 'province', 'postalCode', 'country'],
-        });
-        field.setValue('France');
-        expect(onchange).toHaveBeenLastCalledWith(expect.objectContaining({ city: 'Paris', country: 'FR' }));
-        onchange.mockClear();
-        field.setValue({ country: 'CA' });
-        expect(onchange).not.toHaveBeenCalled();
-        expect(field.getValue()).toEqual({
-            street: '',
-            city: 'Paris',
-            province: '',
-            postalCode: '',
-            country: 'FR',
-        });
-    });
-    it('marks every field invalid and links one alert when error is set', () => {
-        render(AddressInput, {
-            props: { name: 'addr', label: 'Address', error: 'Address required' },
-        });
-        const street = screen.getByLabelText('Street Address');
-        expect(street).toHaveAttribute('aria-invalid', 'true');
-        expect(street).toHaveAttribute('aria-describedby', 'addr-error');
-        const err = document.getElementById('addr-error');
-        expect(err).toHaveTextContent('Address required');
-        expect(err).toHaveAttribute('role', 'alert');
-    });
-    it('is axe-clean with all fields labelled', async () => {
-        const { container } = render(AddressInput, {
-            props: { name: 'addr', label: 'Address' },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

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

@@ -1,92 +0,0 @@
-/**
- * Component test for CheckboxInput (Sweep S11, #1416).
- *
- * Follows the golden pattern (src/components/ui/__tests__/Button.test.ts).
- * CheckboxInput calls `useAppState` (throws outside a <Provider>), so we mock it
- * to a stub default mode. Its form-context lookup uses `getContext` and safely
- * returns undefined outside a provider, so no further stubbing is needed.
- */
-import { expectNoA11yViolations } from '@happyvertical/smrt-ui/test-support/a11y';
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it, vi } from 'vitest';
-vi.mock('../../../hooks/useAppState.svelte.js', () => ({
-    useAppState: () => ({ state: { mode: 'default' }, setMode: vi.fn() }),
-}));
-import CheckboxInput from '../CheckboxInput.svelte';
-describe('CheckboxInput', () => {
-    it('renders a checkbox labelled by its label, wired via for/id', () => {
-        render(CheckboxInput, { props: { name: 'terms', label: 'Accept terms' } });
-        const checkbox = screen.getByRole('checkbox', { name: 'Accept terms' });
-        expect(checkbox).toBeInTheDocument();
-        expect(checkbox).toHaveAttribute('id', 'terms');
-        expect(checkbox).not.toBeChecked();
-    });
-    it('reflects the checked prop', () => {
-        render(CheckboxInput, {
-            props: { name: 'terms', label: 'Accept terms', checked: true },
-        });
-        expect(screen.getByRole('checkbox', { name: 'Accept terms' })).toBeChecked();
-    });
-    it('reflects the disabled prop', () => {
-        render(CheckboxInput, {
-            props: { name: 'terms', label: 'Accept terms', disabled: true },
-        });
-        expect(screen.getByRole('checkbox', { name: 'Accept terms' })).toBeDisabled();
-    });
-    it('reflects the required prop (and marks the label with *)', () => {
-        render(CheckboxInput, {
-            props: { name: 'terms', label: 'Accept terms', required: true },
-        });
-        // Required appends a "*" to the visible label, so the accessible name is "Accept terms*".
-        expect(screen.getByRole('checkbox', { name: 'Accept terms*' })).toBeRequired();
-    });
-    it('toggles checked and fires onchange when clicked', async () => {
-        const onchange = vi.fn();
-        render(CheckboxInput, {
-            props: { name: 'terms', label: 'Accept terms', onchange },
-        });
-        const checkbox = screen.getByRole('checkbox', { name: 'Accept terms' });
-        await userEvent.click(checkbox);
-        expect(checkbox).toBeChecked();
-        expect(onchange).toHaveBeenCalledWith(true);
-        await userEvent.click(checkbox);
-        expect(checkbox).not.toBeChecked();
-        expect(onchange).toHaveBeenLastCalledWith(false);
-    });
-    it('toggles when its label text is clicked', async () => {
-        const onchange = vi.fn();
-        render(CheckboxInput, {
-            props: { name: 'terms', label: 'Accept terms', onchange },
-        });
-        await userEvent.click(screen.getByText('Accept terms'));
-        expect(screen.getByRole('checkbox', { name: 'Accept terms' })).toBeChecked();
-        expect(onchange).toHaveBeenCalledWith(true);
-    });
-    it('does not fire onchange when disabled', async () => {
-        const onchange = vi.fn();
-        render(CheckboxInput, {
-            props: { name: 'terms', label: 'Accept terms', disabled: true, onchange },
-        });
-        await userEvent.click(screen.getByRole('checkbox', { name: 'Accept terms' }));
-        expect(onchange).not.toHaveBeenCalled();
-    });
-    it('is axe-clean with a label', async () => {
-        const { container } = render(CheckboxInput, {
-            props: { name: 'newsletter', label: 'Subscribe to the newsletter' },
-        });
-        await expectNoA11yViolations(container);
-    });
-    it('is axe-clean when checked, required, and disabled', async () => {
-        const { container } = render(CheckboxInput, {
-            props: {
-                name: 'newsletter',
-                label: 'Subscribe to the newsletter',
-                checked: true,
-                required: true,
-                disabled: true,
-            },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/components/forms/__tests__/DateRangeInput.behavior.test.js

@@ -1,135 +0,0 @@
-/**
- * Behavior tests for DateRangeInput (Sweep S11, #1416).
- *
- * In default mode the component renders two native date pickers (Start / End)
- * with cross-linked min/max, emits a { startDate, endDate } range via
- * onchange, and validates start <= end. The hooks throw outside a <Provider>,
- * so useAppState (default mode) + useSTT (stub) are mocked.
- */
-import { expectNoA11yViolations } from '@happyvertical/smrt-ui/test-support/a11y';
-import { fireEvent, render, screen } from '@testing-library/svelte';
-import { describe, expect, it, vi } from 'vitest';
-vi.mock('../../../hooks/useAppState.svelte.js', () => ({
-    useAppState: () => ({ state: { mode: 'default' }, setMode: vi.fn() }),
-}));
-vi.mock('../../../hooks/useSTT.svelte.js', () => ({
-    useSTT: () => ({
-        isListening: false,
-        isInitializing: false,
-        isReady: false,
-        adapterType: null,
-        downloadProgress: 0,
-        lastResult: '',
-        initialize: vi.fn(),
-        start: vi.fn(),
-        stop: vi.fn(),
-    }),
-}));
-import DateRangeInput from '../DateRangeInput.svelte';
-describe('DateRangeInput — behavior', () => {
-    it('renders labelled Start and End date pickers', () => {
-        render(DateRangeInput, { props: { name: 'range', label: 'Dates' } });
-        expect(screen.getByLabelText('Start')).toHaveAttribute('type', 'date');
-        expect(screen.getByLabelText('End')).toHaveAttribute('type', 'date');
-    });
-    it('setting the start date emits the range with the new start', async () => {
-        const onchange = vi.fn();
-        render(DateRangeInput, {
-            props: { name: 'range', label: 'Dates', onchange },
-        });
-        await fireEvent.change(screen.getByLabelText('Start'), {
-            target: { value: '2024-01-10' },
-        });
-        expect(onchange).toHaveBeenLastCalledWith({
-            startDate: '2024-01-10',
-            endDate: '',
-        });
-    });
-    it('setting both dates emits the full range', async () => {
-        const onchange = vi.fn();
-        render(DateRangeInput, {
-            props: {
-                name: 'range',
-                label: 'Dates',
-                startDate: '2024-01-10',
-                onchange,
-            },
-        });
-        await fireEvent.change(screen.getByLabelText('End'), {
-            target: { value: '2024-03-20' },
-        });
-        expect(onchange).toHaveBeenLastCalledWith({
-            startDate: '2024-01-10',
-            endDate: '2024-03-20',
-        });
-    });
-    it('flags an end-before-start range as invalid with a linked alert', () => {
-        render(DateRangeInput, {
-            props: {
-                name: 'range',
-                label: 'Dates',
-                startDate: '2024-05-01',
-                endDate: '2024-01-01',
-            },
-        });
-        const start = screen.getByLabelText('Start');
-        expect(start).toHaveAttribute('aria-invalid', 'true');
-        expect(start).toHaveAttribute('aria-describedby', 'range-error');
-        const err = document.getElementById('range-error');
-        expect(err).toHaveAttribute('role', 'alert');
-        expect(err).toHaveTextContent('End date must be after start date');
-    });
-    it('treats start <= end as a valid range (no error)', () => {
-        render(DateRangeInput, {
-            props: {
-                name: 'range',
-                label: 'Dates',
-                startDate: '2024-01-01',
-                endDate: '2024-05-01',
-            },
-        });
-        expect(screen.getByLabelText('Start')).not.toHaveAttribute('aria-invalid');
-        expect(document.getElementById('range-error')).toBeNull();
-    });
-    it('caps the start picker max at the chosen end date', () => {
-        render(DateRangeInput, {
-            props: { name: 'range', label: 'Dates', endDate: '2024-03-20' },
-        });
-        expect(screen.getByLabelText('Start')).toHaveAttribute('max', '2024-03-20');
-    });
-    it('floors the end picker min at the chosen start date', () => {
-        render(DateRangeInput, {
-            props: { name: 'range', label: 'Dates', startDate: '2024-01-10' },
-        });
-        expect(screen.getByLabelText('End')).toHaveAttribute('min', '2024-01-10');
-    });
-    it('mirrors the dates into hidden submission inputs', async () => {
-        const { container } = render(DateRangeInput, {
-            props: { name: 'range', label: 'Dates', startDate: '2024-01-10' },
-        });
-        await fireEvent.change(screen.getByLabelText('End'), {
-            target: { value: '2024-03-20' },
-        });
-        expect(container.querySelector('input[name="range_start"]')).toHaveValue('2024-01-10');
-        expect(container.querySelector('input[name="range_end"]')).toHaveValue('2024-03-20');
-    });
-    it('renders an explicit error prop as a linked alert', () => {
-        render(DateRangeInput, {
-            props: { name: 'range', label: 'Dates', error: 'Pick a range' },
-        });
-        const err = document.getElementById('range-error');
-        expect(err).toHaveTextContent('Pick a range');
-        expect(err).toHaveAttribute('role', 'alert');
-    });
-    it('is axe-clean in a labelled + error state', async () => {
-        const { container } = render(DateRangeInput, {
-            props: {
-                name: 'range',
-                label: 'Dates',
-                startDate: '2024-05-01',
-                endDate: '2024-01-01',
-            },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/components/forms/__tests__/DateTimeInput.behavior.test.js

@@ -1,113 +0,0 @@
-/**
- * Behavior tests for DateTimeInput (Sweep S11, #1416).
- *
- * In default (non-smrt) mode the component renders a native date /
- * datetime-local picker, echoes the picked value through onchange, and
- * formats the bound ISO value for display via Intl. The hooks throw outside a
- * <Provider>, so useAppState (default mode) + useSTT (stub) are mocked.
- *
- * Date assertions are timezone/locale-robust: for date-only the component
- * parses YYYY-MM-DD into a *local* Date, so we derive the expected display the
- * same way (new Date(y, m-1, d).toLocaleDateString) rather than hardcoding.
- */
-import { expectNoA11yViolations } from '@happyvertical/smrt-ui/test-support/a11y';
-import { fireEvent, render, screen } from '@testing-library/svelte';
-import { describe, expect, it, vi } from 'vitest';
-vi.mock('../../../hooks/useAppState.svelte.js', () => ({
-    useAppState: () => ({ state: { mode: 'default' }, setMode: vi.fn() }),
-}));
-vi.mock('../../../hooks/useSTT.svelte.js', () => ({
-    useSTT: () => ({
-        isListening: false,
-        isInitializing: false,
-        isReady: false,
-        adapterType: null,
-        downloadProgress: 0,
-        lastResult: '',
-        initialize: vi.fn(),
-        start: vi.fn(),
-        stop: vi.fn(),
-    }),
-}));
-import DateTimeInput from '../DateTimeInput.svelte';
-import dateTimeInputSource from '../DateTimeInput.svelte?raw';
-describe('DateTimeInput — behavior', () => {
-    it('allows its native input to shrink inside a narrow form track', () => {
-        const { container } = render(DateTimeInput, {
-            props: { name: 'when', label: 'When' },
-        });
-        container.style.width = '80px';
-        const input = screen.getByLabelText('When');
-        expect(input).toHaveClass('smrt-input');
-        expect(dateTimeInputSource).toMatch(/\.smrt-input\s*\{[^}]*box-sizing:\s*border-box;[^}]*min-width:\s*0;[^}]*width:\s*100%;/);
-    });
-    it('renders a datetime-local input when includeTime is true (default)', () => {
-        render(DateTimeInput, { props: { name: 'when', label: 'When' } });
-        expect(screen.getByLabelText('When')).toHaveAttribute('type', 'datetime-local');
-    });
-    it('renders a date input when includeTime is false', () => {
-        render(DateTimeInput, {
-            props: { name: 'when', label: 'When', includeTime: false },
-        });
-        expect(screen.getByLabelText('When')).toHaveAttribute('type', 'date');
-    });
-    it('emits the picked date value via onchange', async () => {
-        const onchange = vi.fn();
-        render(DateTimeInput, {
-            props: { name: 'when', label: 'When', includeTime: false, onchange },
-        });
-        const input = screen.getByLabelText('When');
-        await fireEvent.change(input, { target: { value: '2024-03-15' } });
-        expect(onchange).toHaveBeenLastCalledWith('2024-03-15');
-    });
-    it('emits a datetime-local value through onchange unchanged', async () => {
-        const onchange = vi.fn();
-        render(DateTimeInput, {
-            props: { name: 'when', label: 'When', onchange },
-        });
-        const input = screen.getByLabelText('When');
-        await fireEvent.change(input, { target: { value: '2024-03-15T13:30' } });
-        expect(onchange).toHaveBeenLastCalledWith('2024-03-15T13:30');
-    });
-    it('seeds the native input with the bound ISO value', () => {
-        render(DateTimeInput, {
-            props: {
-                name: 'when',
-                label: 'When',
-                includeTime: false,
-                value: '1990-06-18',
-            },
-        });
-        expect(screen.getByLabelText('When')).toHaveValue('1990-06-18');
-    });
-    it('clearing the picker emits an empty string', async () => {
-        const onchange = vi.fn();
-        render(DateTimeInput, {
-            props: {
-                name: 'when',
-                label: 'When',
-                includeTime: false,
-                value: '2024-03-15',
-                onchange,
-            },
-        });
-        const input = screen.getByLabelText('When');
-        await fireEvent.change(input, { target: { value: '' } });
-        expect(onchange).toHaveBeenLastCalledWith('');
-    });
-    it('uses a date-aware placeholder for date-only mode', () => {
-        render(DateTimeInput, {
-            props: { name: 'when', label: 'When', includeTime: false },
-        });
-        // default mode native input has no placeholder attribute; the prop default
-        // still reflects includeTime — assert via the smrt-mode path being absent
-        // and the input rendering as a plain date control.
-        expect(screen.getByLabelText('When')).toHaveAttribute('type', 'date');
-    });
-    it('is axe-clean in a labelled state', async () => {
-        const { container } = render(DateTimeInput, {
-            props: { name: 'when', label: 'When', value: '2024-03-15T09:00' },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/components/forms/__tests__/FileUpload.error-alert.test.js

@@ -1,37 +0,0 @@
-/**
- * Regression: FileUpload validation errors are announced (C7).
- *
- * The error `<p>` was a plain element, so async reject errors (wrong type /
- * oversize) were not surfaced to screen readers — unlike Form/TextInput which
- * announce. The fix makes it a live region (role="alert" + aria-live).
- */
-import { render, screen, waitFor } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it } from 'vitest';
-import FileUpload from '../FileUpload.svelte';
-function fileInput(container) {
-    const input = container.querySelector('input[type="file"]');
-    if (!input)
-        throw new Error('file input not found');
-    return input;
-}
-describe('FileUpload — error live region (C7)', () => {
-    it('announces a max-size error via role="alert"', async () => {
-        const { container } = render(FileUpload, {
-            // maxSize forces a validation error without an `accept` filter (which
-            // userEvent.upload would otherwise apply before the file reaches the
-            // component, suppressing the error path under test).
-            props: { label: 'Upload', maxSize: 4 },
-        });
-        const big = new File(['way too many bytes'], 'big.bin', {
-            type: 'application/octet-stream',
-        });
-        await userEvent.upload(fileInput(container), big);
-        await waitFor(() => {
-            const alert = screen.getByRole('alert');
-            expect(alert).toBeInTheDocument();
-            expect(alert).toHaveAttribute('aria-live');
-            expect(alert.textContent).toMatch(/maximum size/i);
-        });
-    });
-});