@happyvertical/smrt-svelte 0.51.39 → 0.53.0

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,
@@ -141,6 +312,91 @@ describe('AdminShell', () => {
             unmount(component);
         }
     });
+    it('keeps a keepMounted focus panel (and its draft) mounted while collapsed', async () => {
+        const state = createShellState({
+            config: { right: { initial: 'expanded', keepMounted: true } },
+        });
+        const component = mount(AdminShell, {
+            target: container,
+            props: {
+                state,
+                children: textSnippet('main work'),
+                focusPanel: createRawSnippet(() => ({
+                    render: () => '<textarea aria-label="Message"></textarea>',
+                })),
+            },
+        });
+        try {
+            const draft = container.querySelector('textarea');
+            if (!draft)
+                throw new Error('focus panel did not render');
+            draft.value = 'half-typed question';
+            state.collapsePanel('right');
+            await tick();
+            const panel = container.querySelector('.smrt-admin-shell__panel--right');
+            expect(panel?.hidden).toBe(true);
+            expect(container.querySelector('textarea')).toBe(draft);
+            state.expandPanel('right');
+            await tick();
+            expect(panel?.hidden).toBe(false);
+            expect(container.querySelector('textarea')).toBe(draft);
+            expect(draft.value).toBe('half-typed question');
+        }
+        finally {
+            unmount(component);
+        }
+    });
+    it('unmounts a collapsed panel without keepMounted', async () => {
+        const state = createShellState({
+            config: { right: { initial: 'expanded' } },
+        });
+        const component = mount(AdminShell, {
+            target: container,
+            props: {
+                state,
+                children: textSnippet('main work'),
+                focusPanel: textSnippet('focus panel'),
+            },
+        });
+        try {
+            expect(container.querySelector('.smrt-admin-shell__panel--right')).not.toBeNull();
+            state.collapsePanel('right');
+            await tick();
+            expect(container.querySelector('.smrt-admin-shell__panel--right')).toBeNull();
+        }
+        finally {
+            unmount(component);
+        }
+    });
+    it('keeps a keepMounted tenant panel beside the collapsed rail', async () => {
+        const state = createShellState({
+            config: { left: { initial: 'collapsed', keepMounted: true } },
+        });
+        const component = mount(AdminShell, {
+            target: container,
+            props: {
+                state,
+                children: textSnippet('main work'),
+                tenantRail: textSnippet('tenant rail'),
+                tenantPanel: textSnippet('tenant navigation'),
+            },
+        });
+        try {
+            const stack = container.querySelector('.smrt-admin-shell__tenant-stack');
+            expect(stack?.hidden).toBe(true);
+            expect(stack?.textContent).toContain('tenant navigation');
+            const rail = container.querySelector('.smrt-admin-shell__rail');
+            expect(rail?.textContent).toContain('tenant rail');
+            state.expandPanel('left');
+            await tick();
+            expect(container.querySelector('.smrt-admin-shell__tenant-stack')).toBe(stack);
+            expect(stack?.hidden).toBe(false);
+            expect(rail?.textContent).not.toContain('tenant rail');
+        }
+        finally {
+            unmount(component);
+        }
+    });
     it('pins a tenant footer below the scrolling tenant panel', () => {
         const state = createShellState({
             config: { left: { initial: 'expanded' } },

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,
@@ -35,6 +101,55 @@ describe('TenantNav', () => {
             unmount(component);
         }
     });
+    it('marks items that need attention with a labelled dot', () => {
+        const component = mount(TenantNav, {
+            target: container,
+            props: {
+                currentHref: '/admin/tasks',
+                items: [
+                    { href: '/admin/tasks', label: 'Tasks' },
+                    {
+                        href: '/admin/jobs',
+                        label: 'Jobs',
+                        attention: 'A background job failed recently',
+                    },
+                    { href: '/admin/health', label: 'Health', attention: true },
+                ],
+            },
+        });
+        try {
+            const links = [...container.querySelectorAll('a')];
+            expect(links[0].querySelector('[data-attention]')).toBeNull();
+            expect(links[1].querySelector('[data-attention]')).not.toBeNull();
+            expect(links[1].querySelector('[data-attention]')?.getAttribute('aria-hidden')).toBe('true');
+            expect(links[1].textContent).toContain('(A background job failed recently)');
+            expect(links[2].textContent).toContain('(Needs attention)');
+        }
+        finally {
+            unmount(component);
+        }
+    });
+    it('keeps the attention dot on a collapsed icon link', () => {
+        const component = mount(TenantNav, {
+            target: container,
+            props: {
+                collapsed: true,
+                iconComponent: TestIcon,
+                items: [
+                    { href: '/admin/jobs', icon: 'jobs', label: 'Jobs', attention: true },
+                ],
+            },
+        });
+        try {
+            const link = container.querySelector('a');
+            expect(link?.querySelector('[data-attention]')).not.toBeNull();
+            expect(link?.textContent).toContain('Jobs');
+            expect(link?.textContent).toContain('(Needs attention)');
+        }
+        finally {
+            unmount(component);
+        }
+    });
     it('uses top-level icon links when collapsed', () => {
         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-header-overflow.test.js

@@ -0,0 +1,25 @@
+/**
+ * The header row hosts actions that open menus (a notifications bell, an
+ * account menu). Its overflow must clip sideways only, or every dropdown
+ * opened from it is cut off at the header's bottom edge.
+ */
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+const packageRoot = process.cwd().endsWith('packages/smrt-svelte')
+    ? process.cwd()
+    : join(process.cwd(), 'packages/smrt-svelte');
+const source = readFileSync(join(packageRoot, 'src/components/workspace/admin-shell/AdminShell.svelte'), 'utf8');
+function ruleBody(selector) {
+    const start = source.indexOf(`${selector} {`);
+    expect(start).toBeGreaterThan(-1);
+    return source.slice(start, source.indexOf('}', start));
+}
+describe('AdminShell header overflow', () => {
+    it('lets header menus drop below the header row', () => {
+        const header = ruleBody('.smrt-admin-shell__header');
+        expect(header).not.toMatch(/(^|\s)overflow:\s*hidden/);
+        expect(header).toMatch(/overflow-x:\s*clip/);
+        expect(header).toMatch(/overflow-y:\s*visible/);
+    });
+});

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

@@ -0,0 +1,217 @@
+/**
+ * Pure phone-chrome decisions behind AdminShell: hide-on-scroll, keyboard
+ * heuristic, viewport classes, the phone top-bar model, and bottom-bar mode.
+ */
+import { describe, expect, it } from 'vitest';
+import { bottomBarMode, findShellNavTrail, keyboardLikelyOpen, normalizeShellPath, phoneTopBarFor, ScrollChrome, shellPageTrailFor, viewportFor, } from '../admin-shell/mobile-shell.js';
+describe('ScrollChrome (hide on scroll)', () => {
+    function run(chrome, ys, extra = {}) {
+        return ys.map((y) => chrome.update({ y, ...extra }));
+    }
+    it('stays shown near the top of the page', () => {
+        expect(run(new ScrollChrome(), [0, 20, 40, 56])).toEqual([
+            false,
+            false,
+            false,
+            false,
+        ]);
+    });
+    it('hides after scrolling down and comes back on the first scroll up', () => {
+        const chrome = new ScrollChrome();
+        expect(run(chrome, [0, 100, 120, 300])).toEqual([false, true, true, true]);
+        expect(chrome.update({ y: 295 })).toBe(false);
+        expect(run(chrome, [300, 306, 310])).toEqual([false, false, true]);
+    });
+    it('ignores jitter below the thresholds', () => {
+        const chrome = new ScrollChrome();
+        run(chrome, [0, 200, 400]);
+        expect(chrome.update({ y: 398 })).toBe(true);
+    });
+    it('always shows at the top and while pinned', () => {
+        const chrome = new ScrollChrome();
+        run(chrome, [0, 200, 400]);
+        expect(chrome.update({ y: 10 })).toBe(false);
+        run(chrome, [200, 400]);
+        expect(chrome.update({ y: 600, pinned: true })).toBe(false);
+        expect(chrome.update({ y: 800, pinned: true })).toBe(false);
+    });
+    it('does not treat iOS overscroll bounce as a scroll up', () => {
+        const chrome = new ScrollChrome();
+        run(chrome, [0, 300, 500], { maxY: 500 });
+        expect(chrome.update({ y: 540, maxY: 500 })).toBe(true);
+        expect(chrome.update({ y: 500, maxY: 500 })).toBe(true);
+    });
+    it('honours custom tuning and reset', () => {
+        const chrome = new ScrollChrome({ revealWithin: 0, hideAfter: 50 });
+        expect(run(chrome, [10, 40])).toEqual([false, false]);
+        expect(chrome.update({ y: 70 })).toBe(true);
+        chrome.reset();
+        expect(chrome.hidden).toBe(false);
+    });
+});
+describe('viewportFor', () => {
+    it('classifies phone, tablet and desktop', () => {
+        expect(viewportFor({ phone: true, desktop: false })).toBe('phone');
+        expect(viewportFor({ phone: false, desktop: false })).toBe('tablet');
+        expect(viewportFor({ phone: false, desktop: true })).toBe('desktop');
+    });
+});
+describe('keyboardLikelyOpen', () => {
+    it('is open when the visual viewport is much shorter', () => {
+        expect(keyboardLikelyOpen({ layoutHeight: 844, visualHeight: 500 })).toBe(true);
+        expect(keyboardLikelyOpen({ layoutHeight: 844, visualHeight: 780 })).toBe(false);
+    });
+    it('does not mistake pinch zoom for a keyboard', () => {
+        expect(keyboardLikelyOpen({ layoutHeight: 844, visualHeight: 422, scale: 2 })).toBe(false);
+    });
+});
+describe('nav paths', () => {
+    const nav = [
+        { href: '/', label: 'Home' },
+        {
+            href: '/settings',
+            label: 'Settings',
+            children: [{ href: '/settings/health', label: 'Health' }],
+        },
+    ];
+    it('normalizes trailing slashes', () => {
+        expect(normalizeShellPath('/a/b//')).toBe('/a/b');
+        expect(normalizeShellPath('/')).toBe('/');
+    });
+    it('finds the trail to the deepest matching item without the root swallowing everything', () => {
+        expect(findShellNavTrail(nav, '/settings/health/x').map((item) => item.label)).toEqual(['Settings', 'Health']);
+        expect(findShellNavTrail(nav, '/other')).toEqual([]);
+    });
+});
+describe('phoneTopBarFor', () => {
+    const navItems = [
+        { href: '/sites/alpha/articles', label: 'Articles' },
+        {
+            href: '/sites/alpha/settings',
+            label: 'Settings',
+            children: [{ href: '/sites/alpha/settings/health', label: 'Health' }],
+        },
+    ];
+    const base = { homeHref: '/sites/alpha', homeTitle: 'Alpha Times', navItems };
+    it('shows the workspace name on section homes', () => {
+        expect(phoneTopBarFor({ ...base, path: '/sites/alpha' })).toEqual({
+            kind: 'home',
+            title: 'Alpha Times',
+        });
+        expect(phoneTopBarFor({ ...base, path: '/sites/alpha/articles/' }).kind).toBe('home');
+    });
+    it('gives a nested nav page a back arrow to its parent nav item', () => {
+        expect(phoneTopBarFor({ ...base, path: '/sites/alpha/settings/health' })).toEqual({
+            kind: 'detail',
+            title: 'Health',
+            backHref: '/sites/alpha/settings',
+            backLabel: 'Settings',
+        });
+    });
+    it('goes back to the last page-given parent', () => {
+        expect(phoneTopBarFor({
+            ...base,
+            path: '/sites/alpha/articles/a1/video/create',
+            pageTitle: 'Create video',
+            parents: [
+                { label: 'Fair opens Friday', href: '/sites/alpha/articles/a1' },
+                { label: 'Videos', href: '/sites/alpha/articles/a1/videos' },
+            ],
+        })).toEqual({
+            kind: 'detail',
+            title: 'Create video',
+            backHref: '/sites/alpha/articles/a1/videos',
+            backLabel: 'Videos',
+        });
+    });
+    it('shows back to the parent list and the page title on detail pages', () => {
+        expect(phoneTopBarFor({
+            ...base,
+            path: '/sites/alpha/articles/a1/images',
+            pageTitle: 'Fair opens Friday',
+        })).toEqual({
+            kind: 'detail',
+            title: 'Fair opens Friday',
+            backHref: '/sites/alpha/articles',
+            backLabel: 'Articles',
+        });
+    });
+    it('falls back to the parent name, then to home', () => {
+        expect(phoneTopBarFor({ ...base, path: '/sites/alpha/articles/a1' })).toMatchObject({ title: 'Articles', backHref: '/sites/alpha/articles' });
+        expect(phoneTopBarFor({ ...base, path: '/sites/alpha/other/thing' })).toMatchObject({ kind: 'detail', backHref: '/sites/alpha' });
+    });
+    it('uses a page-provided parent and back label', () => {
+        expect(phoneTopBarFor({
+            ...base,
+            path: '/sites/alpha/articles/a1/video/create',
+            pageTitle: 'Create video',
+            backHref: '/sites/alpha/articles/a1/videos',
+            backLabel: 'Videos',
+        })).toEqual({
+            kind: 'detail',
+            title: 'Create video',
+            backHref: '/sites/alpha/articles/a1/videos',
+            backLabel: 'Videos',
+        });
+    });
+});
+describe('shellPageTrailFor', () => {
+    const navItems = [
+        { href: '/sites/alpha/articles', label: 'Content' },
+        {
+            href: '/sites/alpha/settings',
+            label: 'Settings',
+            children: [{ href: '/sites/alpha/health', label: 'Health' }],
+        },
+    ];
+    const base = { homeHref: '/sites/alpha', homeTitle: 'Alpha Times', navItems };
+    const labels = (path, parents) => shellPageTrailFor({ ...base, path, parents }).crumbs.map((c) => c.label);
+    it('has no crumbs on section homes', () => {
+        expect(shellPageTrailFor({ ...base, path: '/sites/alpha' })).toMatchObject({
+            sectionHome: true,
+            crumbs: [],
+        });
+        expect(shellPageTrailFor({ ...base, path: '/sites/alpha/articles/' })).toMatchObject({
+            sectionHome: true,
+            crumbs: [],
+            current: { label: 'Content' },
+        });
+    });
+    it('shows an ancestor once when the page also names it as a parent', () => {
+        expect(labels('/sites/alpha/articles/create', [
+            { label: 'Content', href: '/sites/alpha/articles/' },
+        ])).toEqual(['Alpha Times', 'Content']);
+    });
+    it('lists ancestors only, never the current page', () => {
+        expect(labels('/sites/alpha/articles/a1')).toEqual([
+            'Alpha Times',
+            'Content',
+        ]);
+        // A nested nav page: its parent item is an ancestor even when the URL
+        // is not below it.
+        expect(labels('/sites/alpha/health')).toEqual(['Alpha Times', 'Settings']);
+        expect(labels('/sites/alpha/health/job-1')).toEqual([
+            'Alpha Times',
+            'Settings',
+            'Health',
+        ]);
+        expect(labels('/sites/alpha/other')).toEqual(['Alpha Times']);
+    });
+    it('appends page-given parents after the nav trail', () => {
+        expect(labels('/sites/alpha/articles/a1/videos', [
+            { label: 'Fair opens Friday', href: '/sites/alpha/articles/a1' },
+        ])).toEqual(['Alpha Times', 'Content', 'Fair opens Friday']);
+        // A parent on a section home makes it a child page.
+        expect(labels('/sites/alpha/articles', [
+            { label: 'Somewhere', href: '/sites/alpha/somewhere' },
+        ])).toEqual(['Alpha Times', 'Somewhere']);
+    });
+});
+describe('bottomBarMode', () => {
+    it('swaps the nav bar for a form bar and hides both with the keyboard', () => {
+        expect(bottomBarMode({ formActions: false, keyboardOpen: false })).toBe('nav');
+        expect(bottomBarMode({ formActions: true, keyboardOpen: false })).toBe('form');
+        expect(bottomBarMode({ formActions: true, keyboardOpen: true })).toBe('none');
+        expect(bottomBarMode({ formActions: false, keyboardOpen: true })).toBe('none');
+    });
+});