@classic-homes/theme-svelte 1.22.0 → 1.22.2

package/dist/__tests__/studio.test.js

@@ -1,240 +0,0 @@
-/**
- * Studio editor frame: outline selection and reordering (pointer-free, by
- * keyboard), the save and issues signals, and the responsive move of the
- * outline and inspector into sheets.
- */
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import { mount, unmount, flushSync, tick, createRawSnippet } from 'svelte';
-import StudioOutline from '../lib/components/studio/StudioOutline.svelte';
-import SaveStatus from '../lib/components/studio/SaveStatus.svelte';
-import IssuesButton from '../lib/components/studio/IssuesButton.svelte';
-import Studio from '../lib/components/studio/Studio.svelte';
-import StudioCanvasItem from '../lib/components/studio/StudioCanvasItem.svelte';
-let instance = null;
-let host;
-function render(component, props) {
-    host = document.createElement('div');
-    document.body.appendChild(host);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    instance = mount(component, { target: host, props });
-    flushSync();
-    return host;
-}
-function viewport(width) {
-    vi.spyOn(window, 'matchMedia').mockImplementation((query) => {
-        const min = Number(/min-width:\s*(\d+)/.exec(query)?.[1] ?? 0);
-        return {
-            matches: width >= min,
-            media: query,
-            onchange: null,
-            addEventListener: vi.fn(),
-            removeEventListener: vi.fn(),
-            addListener: vi.fn(),
-            removeListener: vi.fn(),
-            dispatchEvent: vi.fn(),
-        };
-    });
-}
-const html = (markup) => createRawSnippet(() => ({ render: () => markup }));
-function key(target, k, init = {}) {
-    target.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, ...init }));
-    flushSync();
-}
-afterEach(() => {
-    if (instance)
-        unmount(instance);
-    instance = null;
-    host?.remove();
-    document.body.innerHTML = '';
-    vi.restoreAllMocks();
-});
-const entries = [
-    { id: 'a', title: 'Name' },
-    { id: 'b', title: 'Email', issues: 2 },
-    { id: 'c', title: 'Rating' },
-];
-describe('StudioOutline', () => {
-    it('selects a row and marks it current', () => {
-        const onSelect = vi.fn();
-        const el = render(StudioOutline, { items: entries, selected: 'a', onSelect });
-        const rows = el.querySelectorAll('[data-outline-row]');
-        rows[2].click();
-        flushSync();
-        expect(onSelect).toHaveBeenCalledWith('c');
-        expect(rows[2].getAttribute('aria-current')).toBe('true');
-        expect(rows[0].hasAttribute('aria-current')).toBe(false);
-    });
-    it('keeps one row in the tab order and moves focus with the arrow keys', () => {
-        const el = render(StudioOutline, { items: entries, selected: 'b' });
-        const rows = el.querySelectorAll('[data-outline-row]');
-        expect([...rows].map((r) => r.tabIndex)).toEqual([-1, 0, -1]);
-        rows[1].focus();
-        key(rows[1], 'ArrowDown');
-        expect(document.activeElement).toBe(rows[2]);
-    });
-    it('shows issue counts as text, not only colour', () => {
-        const el = render(StudioOutline, { items: entries });
-        expect(el.textContent).toContain('2');
-        expect(el.textContent).toContain('issues');
-    });
-    it('reorders with the keyboard: pick up, move, drop', () => {
-        const onReorder = vi.fn();
-        const el = render(StudioOutline, { items: entries, onReorder });
-        const handle = el.querySelector('[data-sortable-handle="a"]');
-        expect(handle.getAttribute('aria-label')).toBe('Reorder Name');
-        key(handle, ' ');
-        expect(handle.getAttribute('aria-pressed')).toBe('true');
-        key(handle, 'ArrowDown');
-        expect(onReorder).toHaveBeenCalledWith(0, 1);
-    });
-    it('moves in one step with Alt+Arrow', () => {
-        const onReorder = vi.fn();
-        const el = render(StudioOutline, { items: entries, onReorder });
-        const handle = el.querySelector('[data-sortable-handle="c"]');
-        key(handle, 'ArrowUp', { altKey: true });
-        expect(onReorder).toHaveBeenCalledWith(2, 1);
-    });
-    it('ignores arrows on a handle that is not picked up', () => {
-        const onReorder = vi.fn();
-        const el = render(StudioOutline, { items: entries, onReorder });
-        key(el.querySelector('[data-sortable-handle="a"]'), 'ArrowDown');
-        expect(onReorder).not.toHaveBeenCalled();
-    });
-    it('has no drag handles when reordering is off', () => {
-        const el = render(StudioOutline, { items: entries });
-        expect(el.querySelector('[data-sortable-handle]')).toBeNull();
-    });
-    it('renders the add button only when onAdd is given', () => {
-        const onAdd = vi.fn();
-        const el = render(StudioOutline, { items: entries, onAdd, addLabel: 'Add question' });
-        const add = [...el.querySelectorAll('button')].find((b) => b.textContent?.includes('Add question'));
-        add.click();
-        expect(onAdd).toHaveBeenCalled();
-    });
-});
-describe('SaveStatus', () => {
-    it('shows one word for routine states and announces nothing', () => {
-        const el = render(SaveStatus, { state: 'saved' });
-        expect(el.textContent).toContain('Saved');
-        expect(el.querySelector('[role="status"]').textContent).toBe('');
-    });
-    it('announces failures and offers Retry in its details', async () => {
-        const onRetry = vi.fn();
-        const el = render(SaveStatus, {
-            state: 'error',
-            detail: 'The server did not answer.',
-            onRetry,
-        });
-        expect(el.querySelector('[role="status"]').textContent).toBe('Not saved');
-        const trigger = el.querySelector('button');
-        expect(trigger.getAttribute('aria-label')).toContain('Not saved');
-        trigger.click();
-        flushSync();
-        await tick();
-        const retry = [...document.querySelectorAll('button')].find((b) => b.textContent?.includes('Retry'));
-        expect(document.body.textContent).toContain('The server did not answer.');
-        retry.click();
-        expect(onRetry).toHaveBeenCalled();
-    });
-});
-describe('IssuesButton', () => {
-    const issues = [
-        { id: '1', message: 'Add a question', location: 'Questions' },
-        { id: '2', message: 'Add at least two options', location: 'Question 2' },
-        { id: '3', message: 'Consider a close date', severity: 'warning' },
-    ];
-    it('is hidden when there is nothing to fix', () => {
-        const el = render(IssuesButton, { issues: [] });
-        expect(el.querySelector('button')).toBeNull();
-    });
-    it('names errors and suggestions in its label', () => {
-        const el = render(IssuesButton, { issues });
-        expect(el.querySelector('button').getAttribute('aria-label')).toBe('2 issues to fix, 1 suggestion');
-    });
-    it('jumps to an issue and closes', async () => {
-        const onSelect = vi.fn();
-        const el = render(IssuesButton, { issues, onSelect });
-        el.querySelector('button').click();
-        flushSync();
-        await tick();
-        const entry = [...document.querySelectorAll('button')].find((b) => b.textContent?.includes('Add at least two options'));
-        entry.click();
-        flushSync();
-        expect(onSelect).toHaveBeenCalledWith(issues[1]);
-    });
-});
-describe('Studio layout', () => {
-    const parts = {
-        bar: html('<header>Bar</header>'),
-        rail: html('<nav>Rail</nav>'),
-        canvas: html('<p>Canvas</p>'),
-        inspector: html('<div>Inspector</div>'),
-    };
-    it('shows rail, canvas and inspector side by side when wide', () => {
-        viewport(1440);
-        const el = render(Studio, parts);
-        expect(el.querySelector('aside[aria-label="Outline"]')).not.toBeNull();
-        expect(el.querySelector('aside[aria-label="Properties"]')).not.toBeNull();
-        expect(el.textContent).not.toContain('Outline');
-    });
-    it('moves the rail into a sheet below 1280px', () => {
-        viewport(1024);
-        const el = render(Studio, parts);
-        expect(el.querySelector('aside[aria-label="Outline"]')).toBeNull();
-        expect(el.querySelector('aside[aria-label="Properties"]')).not.toBeNull();
-        const open = [...el.querySelectorAll('button')].find((b) => b.textContent?.includes('Outline'));
-        open.click();
-        flushSync();
-        expect(document.body.textContent).toContain('Rail');
-    });
-    it('leaves only the canvas on phones', () => {
-        viewport(390);
-        const el = render(Studio, parts);
-        expect(el.querySelector('aside')).toBeNull();
-        expect(el.textContent).toContain('Canvas');
-        const labels = [...el.querySelectorAll('button')].map((b) => b.textContent?.trim());
-        expect(labels).toEqual(['Outline', 'Properties']);
-    });
-});
-describe('StudioCanvasItem', () => {
-    it('selects on click and offers a keyboard way in', () => {
-        const onSelect = vi.fn();
-        const el = render(StudioCanvasItem, {
-            label: 'Question 1',
-            onSelect,
-            children: html('<p>Body</p>'),
-        });
-        const edit = el.querySelector('button');
-        expect(edit.textContent?.trim()).toBe('Edit Question 1');
-        el.querySelector('p').click();
-        expect(onSelect).toHaveBeenCalled();
-    });
-    it('inserts below without needing a selection change', () => {
-        const onInsert = vi.fn();
-        const el = render(StudioCanvasItem, {
-            label: 'Question 1',
-            selected: true,
-            onInsert,
-            children: html('<p>Body</p>'),
-        });
-        el.querySelector('button[aria-label="Add below Question 1"]').click();
-        expect(onInsert).toHaveBeenCalled();
-    });
-});
-describe('StudioCanvasItem quick actions', () => {
-    it('does not select the item when focus lands on its "+" (a closing dialog returns it there)', () => {
-        const onSelect = vi.fn();
-        const el = render(StudioCanvasItem, {
-            label: 'Question 1',
-            onSelect,
-            onInsert: () => { },
-            children: html('<p>Body</p>'),
-        });
-        el.querySelector('button[aria-label="Add below Question 1"]').focus();
-        flushSync();
-        expect(onSelect).not.toHaveBeenCalled();
-        el.querySelector('button').focus(); // the "Edit Question 1" button
-        flushSync();
-        expect(onSelect).toHaveBeenCalledTimes(1);
-    });
-});