@happyvertical/smrt-svelte 0.52.0 → 0.53.0

package/dist/components/forms/__tests__/FileUpload.native-form.test.js

@@ -0,0 +1,249 @@
+/**
+ * FileUpload native-form wiring (#3260).
+ *
+ * jsdom has no `DataTransfer` constructor, so these tests cover attribute
+ * forwarding, the visually-hidden (not `hidden`) input, the required-error
+ * announcement, and the no-DataTransfer fallback. The DataTransfer path and the
+ * `new FormData(form)` post are proven in a real browser by
+ * `e2e/file-upload.spec.ts`; the form-reset cases below also run the mirror
+ * against a jsdom `DataTransfer` stand-in.
+ */
+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 { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import FileUpload from '../FileUpload.svelte';
+import FileUploadResetFixture from './FileUploadReset.fixture.svelte';
+function fileInput(container) {
+    const input = container.querySelector('input[type="file"]');
+    if (!input)
+        throw new Error('file input not found');
+    return input;
+}
+const txt = (name, size = 4) => new File(['a'.repeat(size)], name, { type: 'text/plain' });
+describe('FileUpload — native form wiring', () => {
+    it('forwards name, capture and required to the file input', () => {
+        const { container } = render(FileUpload, {
+            props: { name: 'photo', capture: 'environment', required: true },
+        });
+        const input = fileInput(container);
+        expect(input).toHaveAttribute('name', 'photo');
+        expect(input).toHaveAttribute('capture', 'environment');
+        expect(input).toBeRequired();
+    });
+    it('omits name, capture and required by default', () => {
+        const { container } = render(FileUpload);
+        const input = fileInput(container);
+        expect(input).not.toHaveAttribute('name');
+        expect(input).not.toHaveAttribute('capture');
+        expect(input).not.toBeRequired();
+    });
+    it('keeps the input focusable for native validation but out of the a11y tree and tab order', () => {
+        const { container } = render(FileUpload, { props: { required: true } });
+        const input = fileInput(container);
+        // `hidden` would make the control unfocusable, so the browser could not
+        // show its required bubble and would silently block the submit.
+        expect(input).not.toHaveAttribute('hidden');
+        expect(input).toHaveClass('file-upload__input');
+        expect(input).toHaveAttribute('aria-hidden', 'true');
+        expect(input).toHaveAttribute('tabindex', '-1');
+        // Not nested inside the role="button" drop zone (nested-interactive).
+        expect(screen.getByRole('button').contains(input)).toBe(false);
+    });
+    it('announces a failed required check through the error live region', async () => {
+        const { container } = render(FileUpload, { props: { required: true } });
+        const input = fileInput(container);
+        expect(input.checkValidity()).toBe(false);
+        await fireEvent(input, new Event('invalid'));
+        expect(screen.getByRole('alert').textContent?.trim()).not.toBe('');
+    });
+    it('is axe-clean with name, capture and required', async () => {
+        const { container } = render(FileUpload, {
+            props: {
+                label: 'Mill cert photo',
+                name: 'photo',
+                capture: 'environment',
+                required: true,
+            },
+        });
+        await expectNoA11yViolations(container);
+    });
+});
+describe('FileUpload — fallback without the DataTransfer constructor', () => {
+    it('runs in an environment without DataTransfer', () => {
+        expect(typeof globalThis.DataTransfer).toBe('undefined');
+    });
+    it('keeps the native selection when it matches the accepted list', async () => {
+        const { container } = render(FileUpload, { props: { name: 'doc' } });
+        const input = fileInput(container);
+        await userEvent.upload(input, txt('a.txt'));
+        expect(screen.getByText('a.txt')).toBeInTheDocument();
+        expect(input.files).toHaveLength(1);
+        expect(input.files?.[0].name).toBe('a.txt');
+    });
+    it('clears the input when a file is removed, so it never posts', async () => {
+        const { container } = render(FileUpload, { props: { name: 'doc' } });
+        const input = fileInput(container);
+        await userEvent.upload(input, txt('a.txt'));
+        await userEvent.click(screen.getByRole('button', { name: /remove a\.txt/i }));
+        expect(input.files).toHaveLength(0);
+    });
+    it('clears the input when the pick is rejected, so it never posts', async () => {
+        const { container } = render(FileUpload, {
+            props: { name: 'doc', maxSize: 1 },
+        });
+        const input = fileInput(container);
+        await userEvent.upload(input, txt('big.txt'));
+        expect(screen.queryByText('big.txt')).not.toBeInTheDocument();
+        expect(input.files).toHaveLength(0);
+    });
+    it('clears the input when an accumulated list no longer matches it', async () => {
+        const { container } = render(FileUpload, {
+            props: { name: 'doc', multiple: true },
+        });
+        const input = fileInput(container);
+        await userEvent.upload(input, txt('a.txt'));
+        await userEvent.upload(input, txt('b.txt'));
+        expect(screen.getByText('a.txt')).toBeInTheDocument();
+        expect(screen.getByText('b.txt')).toBeInTheDocument();
+        expect(input.files).toHaveLength(0);
+    });
+});
+/**
+ * A real jsdom `FileList` holding `files`: jsdom's `input.files` setter only
+ * accepts genuine instances and has no constructor, so the list comes from a
+ * detached input and is filled through its implementation object (mirrors
+ * smrt-ui's capture test environment).
+ */
+function createFileList(files) {
+    const implOf = (wrapper, guard) => {
+        const holder = wrapper;
+        const key = Object.getOwnPropertySymbols(wrapper).find((s) => guard(holder[s]));
+        if (!key)
+            throw new Error('jsdom wrapper has no implementation symbol');
+        return holder[key];
+    };
+    const list = document.createElement('input');
+    list.type = 'file';
+    const fileList = list.files;
+    const impl = implOf(fileList, Array.isArray);
+    for (const file of files) {
+        impl.push(implOf(file, (v) => typeof v === 'object' && v !== null));
+    }
+    return fileList;
+}
+/** Browser-shaped `DataTransfer` for jsdom: `items.add()` plus a real `files`. */
+class TestDataTransfer {
+    #files = [];
+    items = {
+        add: (file) => {
+            this.#files.push(file);
+            return null;
+        },
+    };
+    get files() {
+        return createFileList(this.#files);
+    }
+}
+/**
+ * A reset of the owning form (#3260): SvelteKit `enhance`'s `update()` after a
+ * success, `createFormRetry()`'s conditional reset, a reset button and
+ * `form.reset()` all empty a native file input, so the list must empty with
+ * it. jsdom's reset does not empty file inputs (browsers do), so these
+ * assertions prove the component empties its own input.
+ */
+describe.each([
+    ['the DataTransfer mirror', true],
+    ['the no-DataTransfer fallback', false],
+])('FileUpload — form reset with %s', (_label, withDataTransfer) => {
+    beforeEach(() => {
+        if (withDataTransfer)
+            vi.stubGlobal('DataTransfer', TestDataTransfer);
+    });
+    afterEach(() => {
+        vi.unstubAllGlobals();
+    });
+    function mount(props = {}) {
+        const onchange = vi.fn();
+        const result = render(FileUploadResetFixture, {
+            props: { onchange, ...props },
+        });
+        const form = result.container.querySelector('form');
+        const bound = () => screen.getByTestId('bound').getAttribute('data-files');
+        return {
+            ...result,
+            form,
+            onchange,
+            bound,
+            input: fileInput(result.container),
+        };
+    }
+    async function pick(input, files) {
+        input.files = createFileList(files);
+        await fireEvent.change(input);
+    }
+    /** Names of the non-empty `doc` entries a native submit would post. */
+    const posted = (form) => new FormData(form).getAll('doc')
+        .filter((file) => file.name !== '')
+        .map((file) => file.name);
+    it('form.reset() empties the list, its error and what posts', async () => {
+        const { form, input, onchange, bound } = mount({ maxSize: 10 });
+        await pick(input, [txt('a.txt'), txt('big.txt', 50)]);
+        expect(screen.getByText('a.txt')).toBeInTheDocument();
+        expect(bound()).toBe('a.txt');
+        expect(screen.getByRole('alert')).toBeInTheDocument();
+        if (withDataTransfer)
+            expect(posted(form)).toEqual(['a.txt']);
+        form.reset();
+        await tick();
+        expect(screen.queryByText('a.txt')).not.toBeInTheDocument();
+        expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+        expect(onchange).toHaveBeenLastCalledWith([]);
+        expect(bound()).toBe('');
+        expect(input.files).toHaveLength(0);
+        expect(posted(form)).toEqual([]);
+        // The next pick posts alone; the reset list is never re-mirrored.
+        await pick(input, [txt('b.txt')]);
+        expect(screen.getByText('b.txt')).toBeInTheDocument();
+        expect(screen.queryByText('a.txt')).not.toBeInTheDocument();
+        expect(posted(form)).toEqual(['b.txt']);
+    });
+    it('a reset button empties the list and required blocks again', async () => {
+        const { form, input } = mount({ required: true });
+        await pick(input, [txt('a.txt')]);
+        expect(input.checkValidity()).toBe(true);
+        await fireEvent.click(screen.getByRole('button', { name: 'Reset form' }));
+        expect(screen.queryByText('a.txt')).not.toBeInTheDocument();
+        expect(posted(form)).toEqual([]);
+        expect(input.validity.valueMissing).toBe(true);
+    });
+    it('empties the list even while disabled, as it empties a disabled input', async () => {
+        const { form, input, rerender, bound } = mount();
+        await pick(input, [txt('a.txt')]);
+        await rerender({ disabled: true });
+        expect(screen.getByText('a.txt')).toBeInTheDocument();
+        form.reset();
+        await tick();
+        expect(screen.queryByText('a.txt')).not.toBeInTheDocument();
+        expect(bound()).toBe('');
+        expect(input.files).toHaveLength(0);
+    });
+    it('does not report an empty list that was already empty', async () => {
+        const { form, onchange } = mount();
+        form.reset();
+        await tick();
+        expect(onchange).not.toHaveBeenCalled();
+    });
+    it('ignores the reset of another form', async () => {
+        const { input, onchange } = mount();
+        await pick(input, [txt('a.txt')]);
+        onchange.mockClear();
+        const other = document.createElement('form');
+        document.body.append(other);
+        other.reset();
+        await tick();
+        expect(screen.getByText('a.txt')).toBeInTheDocument();
+        expect(onchange).not.toHaveBeenCalled();
+    });
+});

package/dist/components/forms/__tests__/FileUploadReset.fixture.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+import FileUpload from '../FileUpload.svelte';
+
+let {
+  disabled = false,
+  required = false,
+  maxSize,
+  onchange,
+}: {
+  disabled?: boolean;
+  required?: boolean;
+  maxSize?: number;
+  onchange?: (files: File[]) => void;
+} = $props();
+
+let files = $state<File[]>([]);
+</script>
+
+<!-- A plain form with a bound list and a native reset button (#3260). -->
+<form>
+  <FileUpload name="doc" multiple {disabled} {required} {maxSize} {onchange} bind:files />
+  <output data-testid="bound" data-files={files.map((file) => file.name).join(',')}></output>
+  <button type="reset">Reset form</button>
+</form>

package/dist/components/forms/__tests__/FileUploadReset.fixture.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    disabled?: boolean;
+    required?: boolean;
+    maxSize?: number;
+    onchange?: (files: File[]) => void;
+};
+declare const FileUploadReset: import("svelte").Component<$$ComponentProps, {}, "">;
+type FileUploadReset = ReturnType<typeof FileUploadReset>;
+export default FileUploadReset;
+//# sourceMappingURL=FileUploadReset.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/FileUploadReset.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploadReset.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/FileUploadReset.fixture.svelte.ts"],"names":[],"mappings":"AAKC,KAAK,gBAAgB,GAAI;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;CACpC,CAAC;AAuBF,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/workspace/__tests__/AdminShell.responsive.test.js

@@ -3,7 +3,7 @@
  * and bottom bars, form action bars, scrim, navigation, phone presentations
  * of the right edge, and resizable side edges.
  */
-import { fireEvent, render, screen } from '@testing-library/svelte';
+import { fireEvent, render, screen, waitFor } from '@testing-library/svelte';
 import { createRawSnippet, flushSync, tick } from 'svelte';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import AdminShell from '../admin-shell/AdminShell.svelte';
@@ -165,6 +165,17 @@ describe('AdminShell on a phone', () => {
         await settle();
         expect(left.inert).toBe(false);
     });
+    it('moves focus into the phone drawer without animation enumeration', async () => {
+        const { shell } = renderPhone({
+            tenantPanel: html('<a href="/phone-target">Phone navigation target</a>'),
+        });
+        await settle();
+        const left = document.getElementById('smrt-admin-shell-left-panel');
+        Object.defineProperty(left, 'getAnimations', { value: undefined });
+        shell.expandPanel('left');
+        await settle();
+        await waitFor(() => expect(left.contains(document.activeElement)).toBe(true));
+    });
     it('closes an open drawer when the path changes', async () => {
         const { shell, rerender } = renderPhone();
         await settle();

package/dist/components/workspace/__tests__/AdminShell.test.js

@@ -1,5 +1,5 @@
 import { createRawSnippet, flushSync, mount, tick, unmount } from 'svelte';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import AdminShell from '../admin-shell/AdminShell.svelte';
 import adminShellSource from '../admin-shell/AdminShell.svelte?raw';
 import { createShellState } from '../admin-shell/state.svelte.js';
@@ -15,13 +15,184 @@ function activeToolSnippet() {
 }
 let container;
 beforeEach(() => {
+    vi.stubGlobal('matchMedia', () => ({
+        matches: false,
+        addEventListener() { },
+        removeEventListener() { },
+    }));
     container = document.createElement('div');
     document.body.appendChild(container);
 });
 afterEach(() => {
+    vi.unstubAllGlobals();
     container.remove();
 });
 describe('AdminShell', () => {
+    it('keeps a single tenant footer reachable when the left edge collapses or hides', async () => {
+        const state = createShellState({
+            config: { left: { initial: 'collapsed' } },
+        });
+        const component = mount(AdminShell, {
+            target: container,
+            props: {
+                state,
+                tenantFooter: textSnippet('Dana account'),
+                children: textSnippet('main'),
+            },
+        });
+        try {
+            await tick();
+            expect(container.querySelector('header')?.textContent).toContain('Dana account');
+            state.setPanelState('left', 'expanded');
+            flushSync();
+            expect(container.querySelector('header')?.textContent).not.toContain('Dana account');
+            expect(container.querySelector('.smrt-admin-shell__tenant-footer')
+                ?.textContent).toContain('Dana account');
+            state.setPanelState('left', 'hidden');
+            flushSync();
+            expect(container.querySelector('header')?.textContent).toContain('Dana account');
+            expect(container.textContent?.match(/Dana account/g)).toHaveLength(1);
+        }
+        finally {
+            await unmount(component);
+        }
+    });
+    it('keeps an explicit account slot in a custom app bar regardless of left state', async () => {
+        const state = createShellState({
+            config: { left: { initial: 'expanded' } },
+        });
+        const component = mount(AdminShell, {
+            target: container,
+            props: {
+                state,
+                account: textSnippet('Dana account'),
+                appBar: textSnippet('Custom title'),
+                children: textSnippet('main'),
+            },
+        });
+        try {
+            await tick();
+            expect(container.querySelector('header')?.textContent).toContain('Dana account');
+        }
+        finally {
+            await unmount(component);
+        }
+    });
+    it('keeps the left collapse control with supplied navigation and permits opt-out', async () => {
+        for (const showTenantToggle of [true, false]) {
+            const state = createShellState({
+                config: { left: { initial: 'expanded' } },
+            });
+            const component = mount(AdminShell, {
+                target: container,
+                props: {
+                    state,
+                    showTenantToggle,
+                    tenantPanel: textSnippet('supplied nav'),
+                    children: textSnippet('main'),
+                },
+            });
+            try {
+                await tick();
+                const toggle = container.querySelector('.smrt-admin-shell__edge--left .smrt-admin-shell__edge-toggle');
+                expect(!!toggle).toBe(showTenantToggle);
+                if (toggle) {
+                    toggle.click();
+                    flushSync();
+                    expect(state.panels.left).toBe('collapsed');
+                }
+            }
+            finally {
+                await unmount(component);
+            }
+        }
+    });
+    it('preserves the system toggle when a custom system bar is supplied', async () => {
+        const component = mount(AdminShell, {
+            target: container,
+            props: {
+                systemBar: textSnippet('custom status'),
+                children: textSnippet('main'),
+            },
+        });
+        try {
+            await tick();
+            expect(container.querySelector('footer .smrt-admin-shell__edge-toggle')).not.toBeNull();
+        }
+        finally {
+            unmount(component);
+        }
+    });
+    it('links full and compact branding home with an accessible title', async () => {
+        const state = createShellState({
+            config: { left: { initial: 'collapsed' } },
+        });
+        const component = mount(AdminShell, {
+            target: container,
+            props: {
+                state,
+                title: 'Shop',
+                homeHref: '/home',
+                children: textSnippet('main'),
+            },
+        });
+        try {
+            await tick();
+            const links = container.querySelectorAll('.smrt-admin-shell__brand-link');
+            expect(links).toHaveLength(2);
+            expect([...links].map((link) => link.getAttribute('href'))).toEqual([
+                '/home',
+                '/home',
+            ]);
+            expect([...links].map((link) => link.getAttribute('aria-label'))).toEqual(['Shop', 'Shop']);
+            expect(links[1].textContent?.trim()).toBe('S');
+        }
+        finally {
+            unmount(component);
+        }
+    });
+    it('renders a logo and keeps default branding unlinked without homeHref', async () => {
+        const component = mount(AdminShell, {
+            target: container,
+            props: {
+                title: 'Shop',
+                logoSrc: '/shop.svg',
+                logoAlt: 'Shop mark',
+                children: textSnippet('main'),
+            },
+        });
+        try {
+            await tick();
+            expect(container.querySelector('img')?.getAttribute('src')).toBe('/shop.svg');
+            expect(container.querySelector('img')?.getAttribute('alt')).toBe('Shop mark');
+            expect(container.querySelector('.smrt-admin-shell__brand-link')).toBeNull();
+        }
+        finally {
+            unmount(component);
+        }
+    });
+    it('passes full and compact context to custom brand snippets', async () => {
+        const brand = createRawSnippet((context) => ({
+            render: () => `<span>${context().compact ? 'Compact mark' : 'Full mark'}</span>`,
+        }));
+        const component = mount(AdminShell, {
+            target: container,
+            props: {
+                title: 'Shop',
+                homeHref: '/',
+                brand,
+                children: textSnippet('main'),
+            },
+        });
+        try {
+            await tick();
+            expect(container.textContent).toContain('Full mark');
+            expect(container.textContent).toContain('Compact mark');
+        }
+        finally {
+            unmount(component);
+        }
+    });
     it('renders the four edge shell and body content', () => {
         const component = mount(AdminShell, {
             target: container,

package/dist/components/workspace/__tests__/TenantNav.test.js

@@ -11,6 +11,72 @@ afterEach(() => {
     container.remove();
 });
 describe('TenantNav', () => {
+    it('renders named groups alongside flat links and keeps grouped active children', () => {
+        const component = mount(TenantNav, {
+            target: container,
+            props: {
+                'aria-label': 'Shop navigation',
+                currentHref: '/orders/open',
+                items: [{ href: '/home', label: 'Home' }],
+                groups: [
+                    {
+                        heading: 'Floor',
+                        items: [
+                            {
+                                href: '/orders',
+                                label: 'Orders',
+                                children: [{ href: '/orders/open', label: 'Open orders' }],
+                            },
+                        ],
+                    },
+                    { heading: 'Office', items: [] },
+                ],
+            },
+        });
+        try {
+            expect(container.querySelector('nav')).toHaveAttribute('aria-label', 'Shop navigation');
+            expect(container.querySelector('details[aria-label="Floor"]')).not.toBeNull();
+            expect(container.querySelectorAll('details')).toHaveLength(2);
+            expect(container.querySelector('a[href="/orders/open"]')).toHaveAttribute('aria-current', 'page');
+            expect(container.querySelectorAll('a')).toHaveLength(3);
+        }
+        finally {
+            unmount(component);
+        }
+    });
+    it('keeps collapsed group summaries named and independent of navigation links', () => {
+        const component = mount(TenantNav, {
+            target: container,
+            props: {
+                items: [],
+                collapsed: true,
+                groups: [
+                    { heading: 'Floor', items: [{ href: '/tasks', label: 'Tasks' }] },
+                ],
+            },
+        });
+        try {
+            const summary = container.querySelector('summary');
+            expect(summary?.textContent).toContain('Floor');
+            expect(container.querySelector('details')).toHaveAttribute('open');
+            expect(container.querySelectorAll('a')).toHaveLength(1);
+        }
+        finally {
+            unmount(component);
+        }
+    });
+    it('accepts per-instance touch density while leaving the default inherited', () => {
+        const component = mount(TenantNav, {
+            target: container,
+            props: { density: 'touch', items: [{ href: '/tasks', label: 'Tasks' }] },
+        });
+        try {
+            expect(container.querySelector('nav')).toHaveAttribute('data-density', 'touch');
+        }
+        finally {
+            unmount(component);
+        }
+    });
     it('renders custom icon components for nav items', () => {
         const component = mount(TenantNav, {
             target: container,

package/dist/components/workspace/__tests__/WorkspaceAccountMenu.test.js

@@ -8,6 +8,12 @@ const tenants = [
     { id: 'tenant-b', label: 'Beta', roleLabel: 'Member' },
 ];
 describe('WorkspaceAccountMenu', () => {
+    it('exposes typed touch density without changing account actions', () => {
+        const { container } = render(WorkspaceAccountMenu, {
+            props: { userName: 'Dana', density: 'touch', onSignOut: vi.fn() },
+        });
+        expect(container.querySelector('.smrt-workspace-account-menu')).toHaveAttribute('data-density', 'touch');
+    });
     it('switches tenant and signs out through app-owned callbacks', async () => {
         const user = userEvent.setup();
         const onTenantSelect = vi.fn();

package/dist/components/workspace/__tests__/admin-shell-state.test.js

@@ -28,6 +28,31 @@ function mountMutationEffect(shell, run) {
     };
 }
 describe('ShellState', () => {
+    it('persists runtime hide/show and restores hidden preferences on hydration', async () => {
+        const write = vi.fn();
+        const shell = createShellState({
+            settingsAdapter: { read: () => null, write },
+        });
+        shell.setPanelState('left', 'hidden');
+        expect(shell.panels.left).toBe('hidden');
+        expect(write).toHaveBeenLastCalledWith(expect.objectContaining({ panels: { left: 'hidden' } }));
+        const restored = createShellState({
+            settingsAdapter: { read: () => shell.snapshot().settings, write },
+        });
+        await restored.hydrate();
+        expect(restored.panels.left).toBe('hidden');
+        restored.setPanelState('left', 'expanded');
+        expect(restored.panels.left).toBe('expanded');
+        restored.setPanelState('left', 'collapsed');
+        expect(restored.panels.left).toBe('collapsed');
+    });
+    it('keeps app-disabled edges hidden and rejects unknown runtime panel states', () => {
+        const shell = createShellState({ config: { right: false } });
+        shell.setPanelState('right', 'expanded');
+        expect(shell.panels.right).toBe('hidden');
+        shell.setPanelState('left', 'unknown');
+        expect(shell.panels.left).toBe('collapsed');
+    });
     it('allows panels to expand independently by default', () => {
         const shell = createShellState();
         shell.expandPanel('top');