cursedbelt 5.40.0 → 5.45.0

package/src/react/components/AppShell.spec.tsx

@@ -1,7 +1,8 @@
 import { afterEach, describe, expect, test } from 'bun:test';
-import { cleanup, fireEvent, render } from '@testing-library/react';
+import { act, cleanup, fireEvent, render, waitFor } from '@testing-library/react';
 import { createRef } from 'react';
 import type { NavigationModel } from 'cursedbelt-core/navigation';
+import { useCommandSource } from '../palette/commandSources.js';
 import { AppShell } from './AppShell.js';
 
 afterEach(cleanup);
@@ -19,6 +20,21 @@ const nav: NavigationModel = {
   ],
 };
 
+// Station's real places (task 2462 — the scenario NAV-3 was written for), in five sections.
+const SECTIONED: [string, string][] = [
+  ['Console', 'Operate'], ['Requests', 'Operate'], ['Backup', 'Operate'],
+  ['Connections', 'Limits'], ['Domains', 'Limits'], ['Offline', 'Limits'],
+  ['How it is doing', 'Insight'], ['Metrics', 'Insight'], ['Openclaw', 'Insight'],
+  ['Did we?', 'Records'], ['Data', 'Records'],
+  ['Vault', 'Settings'], ['Settings', 'Settings'],
+];
+const station: NavigationModel = {
+  domains: SECTIONED.map(([label, section]) => {
+    const id = label.toLowerCase().replace(/[^a-z]+/g, '-');
+    return { id, label, section, icon: 'x', path: `/${id}`, groups: [] };
+  }),
+};
+
 describe('AppShell', () => {
   test('marks the root and renders routed children inside the ScrollArea', () => {
     const { container } = render(<AppShell>page content</AppShell>);
@@ -42,18 +58,188 @@ describe('AppShell', () => {
     expect(q(container, '[data-cb-nav-backdrop]')).toBeNull();
   });
 
-  test('with a nav: renders the desktop place rail AND the mobile PlaceBar from one model', () => {
-    const { container } = render(<AppShell nav={nav}>x</AppShell>);
-    const rail = q(container, '[data-cb-nav-rail]');
+  test('NAV-3 · 6+ places: the sectioned SideNav rail AND the mobile PlaceBar, from one model', () => {
+    const { container } = render(<AppShell nav={station}>x</AppShell>);
+    expect(q(container, '[data-cb-appshell]')?.dataset.cbNavPattern).toBe('side');
+    const rails = qa(container, '[data-cb-nav-rail]');
+    expect(rails).toHaveLength(2);
+    // The icon rail at md–lg (marked collapsed, so NAV-2 excuses its bare icons), the 240px rail at lg.
+    expect(rails[0]?.hasAttribute('data-cb-nav-collapsed')).toBe(true);
+    expect(rails[0]?.className).toContain('w-[var(--rail-w-collapsed)]');
+    expect(rails[0]?.className).toContain('lg:hidden');
+    expect(rails[1]?.className).toContain('w-[var(--rail-w)]');
+    expect(rails[1]?.className).toContain('lg:flex');
+    // The lg rail renders the sections as labeled headings.
+    expect(rails[1]?.textContent).toContain('Operate');
+    expect(rails[1]?.textContent).toContain('Records');
     const placebar = q(container, '[data-cb-placebar]');
-    expect(rail).not.toBeNull();
-    expect(placebar).not.toBeNull();
-    // Rail is md+ only (display:none below); PlaceBar is the mobile counterpart.
-    expect(rail?.className).toContain('md:flex');
-    expect(rail?.className).toContain('hidden');
     expect(placebar?.className).toContain('md:hidden');
-    // Rail hosts a SideNav rendered from the model.
-    expect(q(container, '[data-cb-sidenav]')).not.toBeNull();
+    // Top 4 + More on a phone.
+    expect(q(placebar as HTMLElement, '[aria-label^="More places"]')).not.toBeNull();
+    // No places in the header — they live in the sidebar.
+    expect(q(container, '[data-cb-appheader] [data-cb-topbar-nav]')).toBeNull();
+  });
+
+  test('NAV-3 · 2–5 places: labeled places in the header center, no sidebar, every place on the PlaceBar', () => {
+    const { container, getAllByRole } = render(
+      <AppShell nav={nav} activeHref='/library' onNavigate={() => {}}>
+        x
+      </AppShell>,
+    );
+    expect(q(container, '[data-cb-appshell]')?.dataset.cbNavPattern).toBe('top');
+    expect(q(container, '[data-cb-nav-rail]')).toBeNull();
+    const places = q(container, '[data-cb-header-zone="center"] [data-cb-topbar-nav]');
+    expect(places).not.toBeNull();
+    expect(places?.hasAttribute('data-cb-primary-nav')).toBe(true);
+    // Below 768px the PlaceBar has them, so the header strip hides.
+    expect(places?.className).toContain('max-md:hidden');
+    const labels = qa(places as HTMLElement, '[data-cb-nav-item] span.md\\:inline').map((s) => s.textContent);
+    expect(labels).toEqual(['Today', 'Library', 'People']);
+    // Every place on the phone bar — three fit, so no More.
+    const placebar = q(container, '[data-cb-placebar]') as HTMLElement;
+    expect(q(placebar, '[aria-label^="More places"]')).toBeNull();
+    expect(getAllByRole('link', { name: 'Library' }).every((a) => a.getAttribute('aria-current') === 'page')).toBe(true);
+  });
+
+  test('a header place routes through onNavigate on a plain click, and leaves a modifier click alone', () => {
+    const went: string[] = [];
+    const { container } = render(
+      <AppShell nav={nav} onNavigate={(p) => went.push(p)}>
+        x
+      </AppShell>,
+    );
+    const link = q(container, '[data-cb-topbar-nav] a[href="/people"]') as HTMLElement;
+    fireEvent.click(link);
+    fireEvent.click(link, { metaKey: true });
+    expect(went).toEqual(['/people']);
+  });
+
+  test('NAV-1 · the header is --header-h tall with three zones, a 1px bottom border and no shadow', () => {
+    const { container } = render(
+      <AppShell nav={nav} navHeader={<b>brand</b>} account={<i>me</i>}>
+        x
+      </AppShell>,
+    );
+    const header = q(container, '[data-cb-appheader]') as HTMLElement;
+    expect(header.className).toContain('h-[var(--header-h)]');
+    expect(header.className).toContain('border-b');
+    expect(header.className).not.toContain('shadow');
+    expect(qa(header, ':scope > [data-cb-header-zone]').map((z) => z.dataset.cbHeaderZone)).toEqual([
+      'left',
+      'center',
+      'right',
+    ]);
+    expect(q(header, '[data-cb-header-zone="right"]')?.className).toContain('shrink-0');
+    cleanup();
+    const dense = render(
+      <AppShell nav={nav} density='dense'>
+        x
+      </AppShell>,
+    );
+    expect(q(dense.container, '[data-cb-appheader]')?.className).toContain('h-[var(--header-h-dense)]');
+  });
+
+  test('8+ places with no sections warn in dev; sections silence it', () => {
+    const warn = console.warn;
+    const said: string[] = [];
+    console.warn = (m: string) => said.push(m);
+    try {
+      const flat: NavigationModel = { domains: station.domains.map(({ section: _s, ...d }) => d) };
+      render(<AppShell nav={flat}>x</AppShell>);
+    } finally {
+      console.warn = warn;
+    }
+    expect(said.some((m) => m.includes('no sections'))).toBe(true);
+  });
+
+  test('NAV-10 · one banner is one line; two collapse into "N problems · View"', () => {
+    const one = render(
+      <AppShell nav={nav} banners={[{ id: 'a', message: 'The Mac is asleep.', action: { label: 'Wake it', onClick: () => {} } }]}>
+        x
+      </AppShell>,
+    );
+    expect(qa(one.container, '[data-cb-banner]')).toHaveLength(1);
+    expect(q(one.container, '[data-cb-banner]')?.textContent).toContain('The Mac is asleep.');
+    expect(q(one.container, '[data-cb-banner]')?.textContent).toContain('Wake it');
+    cleanup();
+    const two = render(
+      <AppShell
+        nav={nav}
+        banners={[
+          { id: 'a', message: 'The Mac is asleep.' },
+          { id: 'b', message: 'A Google sign-in broke.', tone: 'error' },
+        ]}
+      >
+        x
+      </AppShell>,
+    );
+    const lane = q(two.container, '[data-cb-banner-lane]') as HTMLElement;
+    expect(lane.textContent).toContain('2 problems');
+    expect(lane.textContent).not.toContain('The Mac is asleep.');
+    fireEvent.click(two.getByRole('button', { name: 'View' }));
+    expect(lane.textContent).toContain('The Mac is asleep.');
+    expect(lane.textContent).toContain('A Google sign-in broke.');
+  });
+
+  test('NAV-9 · 6+ places mount the palette on ⌘K, preloaded with every place', async () => {
+    const went: string[] = [];
+    render(
+      <AppShell nav={station} onNavigate={(p) => went.push(p)}>
+        x
+      </AppShell>,
+    );
+    act(() => {
+      fireEvent.keyDown(document.body, { key: 'k', ctrlKey: true });
+    });
+    const palette = await waitFor(() => {
+      const el = document.querySelector<HTMLElement>('[data-cb-command-palette]');
+      if (!el) throw new Error('palette not open');
+      return el;
+    });
+    for (const [label] of SECTIONED) expect(palette.textContent).toContain(label);
+    // The visible trigger is in the header too: the palette is an accelerator, never the only way.
+    expect(document.querySelector('[data-cb-command-trigger]')).not.toBeNull();
+  });
+
+  test('2–5 places mount no palette unless asked', () => {
+    const { container } = render(<AppShell nav={nav}>x</AppShell>);
+    expect(q(container, '[data-cb-command-trigger]')).toBeNull();
+    cleanup();
+    const asked = render(
+      <AppShell nav={nav} commandPalette>
+        x
+      </AppShell>,
+    );
+    // Asked for, its trigger is the square ⌘K button in the locked right zone.
+    const trigger = q(asked.container, '[data-cb-header-zone="right"] [data-cb-command-trigger]');
+    expect(trigger?.getAttribute('aria-label')).toBe('Search or run a command…');
+  });
+
+  test('a page contributes records to the palette while mounted, and they leave with it', async () => {
+    function Page() {
+      useCommandSource({ group: 'Requests', items: [{ id: 'r1', label: 'Fix the backup drive', path: '/requests/r1' }] });
+      return <p>page</p>;
+    }
+    function Harness({ show }: { show: boolean }) {
+      return (
+        <AppShell nav={station} onNavigate={() => {}}>
+          {show ? <Page /> : null}
+        </AppShell>
+      );
+    }
+    const view = render(<Harness show />);
+    act(() => {
+      fireEvent.keyDown(document.body, { key: 'k', ctrlKey: true });
+    });
+    await waitFor(() => {
+      if (!document.querySelector('[data-cb-command-palette]')?.textContent?.includes('Fix the backup drive'))
+        throw new Error('source not shown');
+    });
+    view.rerender(<Harness show={false} />);
+    await waitFor(() => {
+      if (document.querySelector('[data-cb-command-palette]')?.textContent?.includes('Fix the backup drive'))
+        throw new Error('source outlived its page');
+    });
   });
 
   test('the command spine renders a visible command trigger wired to onOpenCommand', () => {
@@ -100,7 +286,7 @@ describe('AppShell', () => {
 
   test('the active place carries aria-current=page in every rail variant and the PlaceBar', () => {
     const { container } = render(
-      <AppShell nav={nav} activeHref='/' onNavigate={() => {}}>
+      <AppShell nav={station} activeHref='/console' onNavigate={() => {}}>
         x
       </AppShell>,
     );
@@ -108,7 +294,7 @@ describe('AppShell', () => {
     const current = qa(container, '[aria-current="page"]');
     expect(current.length).toBe(3);
     const named = (b: HTMLElement) =>
-      b.textContent?.includes('Today') || b.getAttribute('aria-label') === 'Today' || b.getAttribute('title') === 'Today';
+      b.textContent?.includes('Console') || b.getAttribute('aria-label') === 'Console' || b.getAttribute('title') === 'Console';
     expect(current.every(named)).toBe(true);
   });