@spectral_labs/ui 1.7.0 → 1.8.0-next.0

package/dist/components/dropdown-menu/__tests__/dropdown-menu-radio-group.test.svelte.js

@@ -1,306 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import DropdownMenuRadioTest from './DropdownMenuRadioTest.svelte';
-/**
- * `DropdownMenu.RadioGroup` / `RadioItem` — the single-choice row family.
- *
- * These rows exist because a menu that offers "pick exactly one of N" had no
- * honest markup here: `CheckboxItem` announces `menuitemcheckbox`, which tells
- * a screen-reader user the options are independent when they are not.
- *
- * The suite also pins the two properties this family is REQUIRED to have from
- * birth, and which the older rows lack (spectral-ui#201): consumer HTML
- * attributes reach the DOM node, and a consumer event handler COMPOSES with
- * the built-in one instead of being dropped.
- */
-describe('dropdown-menu radio group', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(DropdownMenuRadioTest, {
-            target,
-            props: { portalTo: target, ...props },
-        });
-        flushSync();
-        return target;
-    }
-    function radios() {
-        return Array.from(target.querySelectorAll('[role="menuitemradio"]'));
-    }
-    function radio(value) {
-        const el = target.querySelector(`[role="menuitemradio"][data-value="${value}"]`);
-        if (!el)
-            throw new Error(`no radio item for value "${value}"`);
-        return el;
-    }
-    /** Same idiom as `dropdown-menu.test.svelte.ts`: drive the REAL focused
-     *  element, so the Content -> collection -> focus chain is exercised rather
-     *  than merely inspected. */
-    function pressKey(key) {
-        const el = document.activeElement;
-        el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }));
-        flushSync();
-    }
-    function activeValue() {
-        return document.activeElement?.getAttribute('data-value') ?? null;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        instance = undefined;
-        target?.remove();
-    });
-    // ── ARIA ──────────────────────────────────────────────────────────────
-    it('wraps its rows in role="group" — never role="radiogroup", invalid inside a menu', () => {
-        setup();
-        expect(target.querySelector('.sp-dropdown-menu-radio-group')?.getAttribute('role')).toBe('group');
-        // The ratified contract FORBIDS `radiogroup`: a `menu` may only own
-        // menuitem / menuitemcheckbox / menuitemradio / group / separator.
-        expect(target.querySelector('[role="radiogroup"]')).toBeNull();
-        const items = radios();
-        expect(items).toHaveLength(3);
-        expect(items.map((el) => el.getAttribute('aria-checked'))).toEqual(['true', 'false', 'false']);
-    });
-    it('reflects the selected value in data-state, for styling parity with CheckboxItem', () => {
-        setup();
-        expect(radio('document').getAttribute('data-state')).toBe('checked');
-        expect(radio('placeholders').getAttribute('data-state')).toBe('unchecked');
-    });
-    it('moves the checked row when the PARENT changes `value` after mount', () => {
-        // Mounting straight at the target value would stay green even if the group
-        // snapshotted the prop at init — the move has to happen AFTER mount, driven
-        // from outside, with the menu open.
-        const calls = [];
-        setup({ onValueChange: (v) => calls.push(v) });
-        expect(radios().map((el) => el.getAttribute('aria-checked'))).toEqual([
-            'true',
-            'false',
-            'false',
-        ]);
-        target.querySelector('[data-testid="parent-set"]').click();
-        flushSync();
-        expect(radios().map((el) => el.getAttribute('aria-checked'))).toEqual([
-            'false',
-            'false',
-            'true',
-        ]);
-        expect(radio('bibliographie').getAttribute('data-state')).toBe('checked');
-        // The parent moved it; the group has nothing to report back.
-        expect(calls).toEqual([]);
-    });
-    // ── Selection ─────────────────────────────────────────────────────────
-    // `closeOnSelect: false` in the selection tests below is not incidental: the
-    // default closes the menu, which unmounts the rows — a post-click assertion
-    // on `aria-checked` would then fail for the wrong reason. Closing has its
-    // own test.
-    it('selects on click and notifies once with the new value', () => {
-        const calls = [];
-        let selects = 0;
-        setup({
-            closeOnSelect: false,
-            onItemSelect: () => selects++,
-            onValueChange: (v) => calls.push(v),
-        });
-        radio('placeholders').click();
-        flushSync();
-        expect(calls).toEqual(['placeholders']);
-        expect(radio('placeholders').getAttribute('aria-checked')).toBe('true');
-        expect(radio('document').getAttribute('aria-checked')).toBe('false');
-        // Proves the `onSelect` wiring is live — without this, the `select: 0` of
-        // the disabled test below would hold no matter what the component did.
-        expect(selects).toBe(1);
-    });
-    it('does NOT re-notify when the already-selected row is chosen again', () => {
-        const calls = [];
-        setup({ onValueChange: (v) => calls.push(v) });
-        radio('document').click();
-        flushSync();
-        expect(calls).toEqual([]);
-    });
-    it('selects on Enter and on Space', () => {
-        const calls = [];
-        setup({ closeOnSelect: false, onValueChange: (v) => calls.push(v) });
-        radio('placeholders').dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
-        flushSync();
-        expect(calls).toEqual(['placeholders']);
-        radio('bibliographie').dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
-        flushSync();
-        expect(calls).toEqual(['placeholders', 'bibliographie']);
-    });
-    it('closes the menu after a selection, and keeps it open when closeOnSelect is false', () => {
-        setup();
-        radio('placeholders').click();
-        flushSync();
-        expect(target.querySelector('[role="menu"]')).toBeNull();
-        unmount(instance);
-        instance = undefined;
-        target.remove();
-        setup({ closeOnSelect: false });
-        radio('placeholders').click();
-        flushSync();
-        expect(target.querySelector('[role="menu"]')).toBeTruthy();
-    });
-    // ── Disabled ──────────────────────────────────────────────────────────
-    it('a disabled row is TOTALLY inert — the consumer handler does not run either', () => {
-        const counts = { click: 0, keydown: 0, select: 0, change: 0 };
-        setup({
-            disabledValue: 'placeholders',
-            onItemClick: () => counts.click++,
-            onItemKeydown: () => counts.keydown++,
-            onItemSelect: () => counts.select++,
-            onValueChange: () => counts.change++,
-        });
-        const disabled = radio('placeholders');
-        expect(disabled.getAttribute('aria-disabled')).toBe('true');
-        expect(disabled.hasAttribute('data-disabled')).toBe(true);
-        disabled.click();
-        flushSync();
-        disabled.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
-        flushSync();
-        disabled.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
-        flushSync();
-        // A dimmed, unselectable row that still fires an application effect is not
-        // disabled — it only LOOKS disabled.
-        expect(counts).toEqual({ click: 0, keydown: 0, select: 0, change: 0 });
-        expect(disabled.getAttribute('aria-checked')).toBe('false');
-        // ... and none of it dismissed the menu.
-        expect(target.querySelector('[role="menu"]')).toBeTruthy();
-        // `getOwnLevelMenuItems` filters on `[data-roving-focus-item]:not([data-disabled])`.
-        const rovable = target.querySelectorAll('[data-roving-focus-item]:not([data-disabled])');
-        expect(Array.from(rovable)).not.toContain(disabled);
-    });
-    // ── Keyboard: the chain, not the wiring ───────────────────────────────
-    //
-    // The `data-*` hooks below can all be present while the
-    // Content -> collection -> focus chain is broken, so these drive the real
-    // focused element instead of asserting attributes.
-    it('is reachable by ArrowDown from a plain Item, and Enter selects the FOCUSED row', () => {
-        const calls = [];
-        setup({
-            withLeadingItem: true,
-            closeOnSelect: false,
-            onValueChange: (v) => calls.push(v),
-        });
-        // Opening autofocuses the first roving row — the plain Item.
-        expect(document.activeElement?.textContent?.trim()).toBe('Plan');
-        pressKey('ArrowDown');
-        expect(document.activeElement?.getAttribute('role')).toBe('menuitemradio');
-        expect(activeValue()).toBe('document');
-        pressKey('ArrowDown');
-        expect(activeValue()).toBe('placeholders');
-        pressKey('Enter');
-        expect(calls).toEqual(['placeholders']);
-        expect(radio('placeholders').getAttribute('aria-checked')).toBe('true');
-    });
-    it('roving SKIPS a disabled row on ArrowDown', () => {
-        setup({ withLeadingItem: true, disabledValue: 'placeholders' });
-        expect(document.activeElement?.textContent?.trim()).toBe('Plan');
-        pressKey('ArrowDown');
-        expect(activeValue()).toBe('document');
-        pressKey('ArrowDown');
-        // `placeholders` is disabled — roving lands on the next enabled row.
-        expect(activeValue()).toBe('bibliographie');
-    });
-    it('typeahead focuses the matching row, and `textValue` redirects the match', () => {
-        setup({ withLeadingItem: true });
-        pressKey('b');
-        expect(activeValue()).toBe('bibliographie');
-        unmount(instance);
-        instance = undefined;
-        target.remove();
-        // With the override, `Bibliographie` no longer answers to `b` — and no
-        // other row does, so focus stays put.
-        setup({ withLeadingItem: true, textValues: { bibliographie: 'zzz' } });
-        const before = document.activeElement;
-        pressKey('b');
-        expect(document.activeElement).toBe(before);
-        // Remount before the second probe: typeahead ACCUMULATES a buffer, so a
-        // `z` typed after a failed `b` searches for "bz" and would match nothing —
-        // the test would then pass or fail for a reason unrelated to `textValue`.
-        unmount(instance);
-        instance = undefined;
-        target.remove();
-        setup({ withLeadingItem: true, textValues: { bibliographie: 'zzz' } });
-        pressKey('z');
-        expect(activeValue()).toBe('bibliographie');
-    });
-    // ── Roving focus + typeahead wiring ───────────────────────────────────
-    it('joins the roving collection alongside plain items', () => {
-        setup({ withLeadingItem: true });
-        const rovable = Array.from(target.querySelectorAll('[data-roving-focus-item]:not([data-disabled])'));
-        // Plan + the three radio rows, in document order.
-        expect(rovable).toHaveLength(4);
-        expect(rovable[0].getAttribute('role')).toBe('menuitem');
-        expect(rovable.slice(1).map((el) => el.getAttribute('role'))).toEqual([
-            'menuitemradio',
-            'menuitemradio',
-            'menuitemradio',
-        ]);
-    });
-    it('exposes its label to typeahead, and lets `textValue` override it', () => {
-        setup({ textValues: { bibliographie: 'zzz' } });
-        // No override → the content's typeahead falls back to textContent.
-        expect(radio('document').getAttribute('data-text-value')).toBeNull();
-        expect(radio('document').textContent?.trim()).toBe('Document');
-        // Override → the attribute the content reads FIRST.
-        expect(radio('bibliographie').getAttribute('data-text-value')).toBe('zzz');
-    });
-    // ── The two properties #201 costs the older rows ───────────────────────
-    it('forwards consumer HTML attributes to the GROUP element', () => {
-        setup({ groupAttrs: { 'aria-label': 'Panneau', 'data-testid': 'view-group' } });
-        const group = target.querySelector('.sp-dropdown-menu-radio-group');
-        expect(group.getAttribute('aria-label')).toBe('Panneau');
-        expect(group.getAttribute('data-testid')).toBe('view-group');
-        // The role stays ours.
-        expect(group.getAttribute('role')).toBe('group');
-    });
-    it('forwards consumer HTML attributes to the row element', () => {
-        setup({ itemAttrs: { 'data-testid': 'view-placeholders', 'aria-keyshortcuts': 'p' } });
-        const el = radio('placeholders');
-        expect(el.getAttribute('data-testid')).toBe('view-placeholders');
-        expect(el.getAttribute('aria-keyshortcuts')).toBe('p');
-    });
-    it('keeps its own class alongside a consumer class', () => {
-        setup({ itemAttrs: { class: 'view-row' } });
-        const el = radio('placeholders');
-        expect(el.classList.contains('view-row')).toBe(true);
-        expect(el.classList.contains('sp-dropdown-menu-item')).toBe(true);
-    });
-    it('cOMPOSES a consumer handler with the built-in selection', () => {
-        const seen = [];
-        setup({
-            closeOnSelect: false,
-            onItemClick: () => seen.push('consumer'),
-            onValueChange: (v) => seen.push(`selected:${v}`),
-        });
-        radio('placeholders').click();
-        flushSync();
-        // Both ran, consumer first — and selection actually happened.
-        expect(seen).toEqual(['consumer', 'selected:placeholders']);
-    });
-    it('lets a consumer handler cancel the selection with preventDefault', () => {
-        const calls = [];
-        setup({
-            onItemClick: (event) => event.preventDefault(),
-            onValueChange: (v) => calls.push(v),
-        });
-        radio('placeholders').click();
-        flushSync();
-        expect(calls).toEqual([]);
-        expect(radio('placeholders').getAttribute('aria-checked')).toBe('false');
-        // A cancelled selection must not close the menu either.
-        expect(target.querySelector('[role="menu"]')).toBeTruthy();
-    });
-    // ── Guard rail ────────────────────────────────────────────────────────
-    it('throws a NAMED error when a RadioItem is used outside a RadioGroup', () => {
-        const spy = vi.spyOn(console, 'error').mockImplementation(() => { });
-        try {
-            expect(() => setup({ orphan: true })).toThrow(/RadioGroup/);
-        }
-        finally {
-            spy.mockRestore();
-        }
-    });
-});