@prenta/admin 2.6.0 → 2.7.0

package/src/__tests__/layout/topbar.render.test.tsx

@@ -0,0 +1,464 @@
+// @vitest-environment happy-dom
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { hydrateRoot, type Root } from 'react-dom/client'
+import { renderToString } from 'react-dom/server'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const unreadCount = vi.fn(async () => ({ ok: true as const, result: 0 }))
+vi.mock('../../lib/notifications-client.js', () => ({
+  listNotifications: async () => ({ ok: true, result: [] }),
+  unreadCount: () => unreadCount(),
+  markNotificationRead: async () => ({ ok: false, error: 'unused' }),
+  markAllNotificationsRead: async () => ({ ok: true, result: 0 }),
+  subscribeNotificationStream: () => ({ close() {} }),
+  notificationSummary: () => '',
+}))
+
+vi.mock('../../lib/forms-service.js', () => ({
+  fetchFormsSidebarCounts: async () => [],
+}))
+
+const setTheme = vi.fn()
+vi.mock('../../components/ThemeProvider.js', () => ({
+  useTheme: () => ({
+    adminBrand: { primaryUrl: null, markUrl: null, darkUrl: null, initials: 'P' },
+    resolvedTheme: 'light',
+    setTheme,
+    density: 'default',
+  }),
+}))
+
+const { Header } = await import('../../layout/Header.js')
+const { Layout } = await import('../../layout/Layout.js')
+
+/** The signed-in user on every kit screen (TRACKING.md P-04). */
+const BRANDON = { user: { id: 'u1', name: 'Brandon West', email: 'brandon@example.com' } }
+
+const NAVIGATOR_PLATFORM_KEYS = ['platform', 'userAgentData'] as const
+const navigatorPlatformDescriptors = NAVIGATOR_PLATFORM_KEYS.map(
+  (key) => [key, Object.getOwnPropertyDescriptor(navigator, key)] as const,
+)
+
+/**
+ * Sets `navigator.platform` and, when given, Chromium's
+ * `navigator.userAgentData.platform`, which the search hint reads first.
+ */
+function stubPlatform(platform: string, userAgentDataPlatform?: string) {
+  Object.defineProperty(navigator, 'platform', { value: platform, configurable: true })
+  Object.defineProperty(navigator, 'userAgentData', {
+    value: userAgentDataPlatform === undefined ? undefined : { platform: userAgentDataPlatform },
+    configurable: true,
+  })
+}
+
+function restorePlatform() {
+  for (const [key, descriptor] of navigatorPlatformDescriptors) {
+    if (descriptor) Object.defineProperty(navigator, key, descriptor)
+    else delete (navigator as unknown as Record<string, unknown>)[key]
+  }
+}
+
+beforeEach(() => {
+  unreadCount.mockImplementation(async () => ({ ok: true as const, result: 0 }))
+  // The kit is drawn on a Mac; tests that are about the hint pick their own.
+  stubPlatform('MacIntel')
+})
+
+afterEach(() => {
+  cleanup()
+  restorePlatform()
+  vi.unstubAllGlobals()
+  vi.clearAllMocks()
+})
+
+function renderHeader(props: Partial<Parameters<typeof Header>[0]> = {}) {
+  return render(<Header session={BRANDON} onNavigate={vi.fn()} {...props} />)
+}
+
+const classesOf = (el: Element) => el.getAttribute('class')?.split(/\s+/) ?? []
+
+/**
+ * Answers `matchMedia` from a fixed width; reads `min-width` and the range
+ * forms the shell uses (`width < 769px`, `769px <= width < 1025px`).
+ */
+function stubWidth(width: number) {
+  const compare = (a: number, op: string, b: number) =>
+    op === '<' ? a < b : op === '<=' ? a <= b : op === '>' ? a > b : a >= b
+  const matches = (query: string) => {
+    const part = query.replace(/[()\s]/g, '')
+    const min = /^min-width:(\d+)px$/.exec(part)
+    if (min) return width >= Number(min[1])
+    const range = /^(?:(\d+)px(<=?|>=?))?width(?:(<=?|>=?)(\d+)px)?$/.exec(part)
+    if (!range) throw new Error(`stubWidth can't read ${query}`)
+    const [, lo, loOp, hiOp, hi] = range
+    return (
+      (lo === undefined || compare(Number(lo), loOp!, width)) &&
+      (hi === undefined || compare(width, hiOp!, Number(hi)))
+    )
+  }
+  vi.stubGlobal('matchMedia', (query: string) => ({
+    matches: matches(query),
+    media: query,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  }))
+}
+
+/** P-04 topbar (docs/design/prenta/TRACKING.md, specs/SHELL.md §1, §3). */
+describe('Topbar search trigger', () => {
+  it('is a focusable button with the ⌘K hint that opens the command palette', async () => {
+    renderHeader()
+    const search = screen.getByRole('button', { name: 'Search (Command K)' })
+    expect(search.tagName).toBe('BUTTON')
+    expect(search.getAttribute('aria-keyshortcuts')).toBe('Meta+K Control+K')
+    expect(within(search).getByText('Search…')).toBeTruthy()
+    const kbd = within(search).getByText('⌘K')
+    expect(kbd.tagName).toBe('KBD')
+    expect(classesOf(kbd)).toEqual(
+      expect.arrayContaining(['text-[10px]', 'font-mono', 'rounded-4', 'border-bdr', 'bg-card']),
+    )
+    expect(classesOf(search)).toEqual(
+      expect.arrayContaining([
+        'bg-bg',
+        'border',
+        'border-bdr',
+        'rounded-8',
+        'px-3',
+        'py-1.5',
+        'text-[13px]',
+        'max-w-[280px]',
+      ]),
+    )
+
+    search.focus()
+    expect(document.activeElement).toBe(search)
+    expect(screen.queryByRole('dialog')).toBeNull()
+    fireEvent.click(search)
+    await screen.findByRole('dialog')
+    // Focus moves into the palette...
+    const input = screen.getByPlaceholderText(/Search, jump to/)
+    await waitFor(() => expect(document.activeElement).toBe(input))
+    // ...and comes back to the trigger when it closes.
+    fireEvent.keyDown(input, { key: 'Escape' })
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+    await waitFor(() => expect(document.activeElement).toBe(search))
+  })
+
+  it('still opens with Ctrl+K and returns focus to where it was pressed', async () => {
+    render(
+      <>
+        <button type="button">Elsewhere</button>
+        <Header session={BRANDON} onNavigate={vi.fn()} />
+      </>,
+    )
+    const elsewhere = screen.getByRole('button', { name: 'Elsewhere' })
+    elsewhere.focus()
+    fireEvent.keyDown(elsewhere, { key: 'k', ctrlKey: true })
+    const input = await screen.findByPlaceholderText(/Search, jump to/)
+    fireEvent.keyDown(input, { key: 'Escape' })
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+    await waitFor(() => expect(document.activeElement).toBe(elsewhere))
+  })
+})
+
+// Owner's decision (2026-10-20): Ctrl+K on Windows and Linux, ⌘K on Mac, with
+// the name matching.
+describe('Topbar search hint', () => {
+  const kbdOf = (search: HTMLElement) => search.querySelector('kbd')?.textContent
+
+  it.each([
+    ['a Mac', 'MacIntel', undefined],
+    ['an iPhone', 'iPhone', undefined],
+    ['an iPad', 'iPad', undefined],
+    ['Chromium on macOS', '', 'macOS'],
+  ])('shows ⌘K and says Command K on %s', (_, platform, userAgentDataPlatform) => {
+    stubPlatform(platform, userAgentDataPlatform)
+    renderHeader()
+    const search = screen.getByRole('button', { name: 'Search (Command K)' })
+    expect(kbdOf(search)).toBe('⌘K')
+    expect(search.getAttribute('aria-keyshortcuts')).toBe('Meta+K Control+K')
+  })
+
+  it.each([
+    ['Windows', 'Win32', undefined],
+    ['Linux', 'Linux x86_64', undefined],
+    ['Chromium on Windows', 'Win32', 'Windows'],
+    ['ChromeOS', 'Linux x86_64', 'Chrome OS'],
+    ['Android', 'Linux armv81', 'Android'],
+  ])('shows Ctrl+K and says Ctrl+K on %s', (_, platform, userAgentDataPlatform) => {
+    stubPlatform(platform, userAgentDataPlatform)
+    renderHeader()
+    const search = screen.getByRole('button', { name: 'Search (Ctrl+K)' })
+    // The visible hint is part of the name (WCAG 2.5.3).
+    expect(kbdOf(search)).toBe('Ctrl+K')
+    expect(search.getAttribute('aria-label')).toContain(kbdOf(search))
+    // Windows keeps Win+K for itself, so only Ctrl+K is advertised.
+    expect(search.getAttribute('aria-keyshortcuts')).toBe('Control+K')
+    expect(screen.queryByText('⌘K')).toBeNull()
+  })
+
+  it('opens the palette with Caps Lock on, and leaves Ctrl+Shift+K to the browser', async () => {
+    stubPlatform('Win32')
+    renderHeader()
+    fireEvent.keyDown(document.body, { key: 'K', ctrlKey: true, shiftKey: true })
+    expect(screen.queryByRole('dialog', { name: 'Command palette' })).toBeNull()
+    fireEvent.keyDown(document.body, { key: 'K', ctrlKey: true })
+    expect(await screen.findByRole('dialog', { name: 'Command palette' })).toBeTruthy()
+  })
+
+  it.each([
+    ['Windows', 'Win32', { ctrlKey: true }],
+    ['Windows', 'Win32', { metaKey: true }],
+    ['a Mac', 'MacIntel', { metaKey: true }],
+    ['a Mac', 'MacIntel', { ctrlKey: true }],
+  ])('opens the palette on %s with %o', async (_, platform, modifier) => {
+    stubPlatform(platform)
+    renderHeader()
+    fireEvent.keyDown(document.body, { key: 'k', ...modifier })
+    expect(await screen.findByRole('dialog', { name: 'Command palette' })).toBeTruthy()
+  })
+
+  it('renders the same markup on the server and in the first client render', async () => {
+    stubPlatform('Win32')
+    const tree = <Header session={BRANDON} onNavigate={vi.fn()} />
+    // The server can't know the platform: no hint yet, and a plain name.
+    const html = renderToString(tree)
+    const container = document.createElement('div')
+    container.innerHTML = html
+    document.body.appendChild(container)
+    const errors = vi.spyOn(console, 'error').mockImplementation(() => {})
+    let root: Root | undefined
+    try {
+      const serverSearch = within(container).getByRole('button', { name: 'Search' })
+      expect(serverSearch.querySelector('kbd')).toBeNull()
+
+      const recoverable = vi.fn()
+      await act(async () => {
+        root = hydrateRoot(container, tree, { onRecoverableError: recoverable })
+      })
+      expect(errors).not.toHaveBeenCalled()
+      expect(recoverable).not.toHaveBeenCalled()
+      // Then the browser's platform settles it.
+      const search = within(container).getByRole('button', { name: 'Search (Ctrl+K)' })
+      expect(search).toBe(serverSearch)
+      expect(kbdOf(search)).toBe('Ctrl+K')
+    } finally {
+      // A failure here mustn't leave a second topbar for the next tests.
+      if (root) act(() => root!.unmount())
+      container.remove()
+      errors.mockRestore()
+    }
+  })
+})
+
+describe('Command palette dialog', () => {
+  // P-04 review: aria-modal promised an inert page, but Tab walked out to it.
+  it('is named and keeps Tab and Shift+Tab inside', async () => {
+    renderHeader()
+    fireEvent.click(screen.getByRole('button', { name: 'Search (Command K)' }))
+    const dialog = await screen.findByRole('dialog', { name: 'Command palette' })
+    expect(dialog.getAttribute('aria-modal')).toBe('true')
+    const input = within(dialog).getByPlaceholderText(/Search, jump to/)
+    await waitFor(() => expect(document.activeElement).toBe(input))
+    // fireEvent returns false when the default action (moving focus) was
+    // prevented.
+    expect(fireEvent.keyDown(input, { key: 'Tab' })).toBe(false)
+    expect(fireEvent.keyDown(input, { key: 'Tab', shiftKey: true })).toBe(false)
+    expect(document.activeElement).toBe(input)
+    // Other keys still reach cmdk.
+    expect(fireEvent.keyDown(input, { key: 'a' })).toBe(true)
+  })
+
+  it('pulls focus back in when Tab starts from outside its controls', async () => {
+    renderHeader()
+    fireEvent.click(screen.getByRole('button', { name: 'Search (Command K)' }))
+    const dialog = await screen.findByRole('dialog', { name: 'Command palette' })
+    const input = within(dialog).getByPlaceholderText(/Search, jump to/)
+    // happy-dom lays nothing out; give rendered elements a client rect.
+    const rects = vi
+      .spyOn(HTMLElement.prototype, 'getClientRects')
+      .mockImplementation(() => [{}] as unknown as DOMRectList)
+    const list = within(dialog).getByRole('listbox')
+    list.focus()
+    expect(fireEvent.keyDown(list, { key: 'Tab' })).toBe(false)
+    expect(document.activeElement).toBe(input)
+    rects.mockRestore()
+  })
+})
+
+describe('Topbar avatar', () => {
+  it('shows BW for Brandon West and keeps the account menu behind it', async () => {
+    const onLogout = vi.fn()
+    const onNavigate = vi.fn()
+    renderHeader({ onLogout, onNavigate })
+    const avatar = screen.getByRole('button', { name: 'Account menu' })
+    expect(avatar.textContent).toBe('BW')
+    expect(avatar.getAttribute('title')).toBe('Brandon West')
+    expect(classesOf(avatar)).toEqual(
+      expect.arrayContaining([
+        'h-8',
+        'w-8',
+        'rounded-full',
+        'bg-acc',
+        'text-acc-on',
+        'text-[12px]',
+        'font-bold',
+      ]),
+    )
+
+    // Radix hides its positioned menu in happy-dom, so read the open state
+    // from the trigger and query the items with `hidden`.
+    fireEvent.keyDown(avatar, { key: 'Enter' })
+    await waitFor(() => expect(avatar.getAttribute('aria-expanded')).toBe('true'))
+    expect(screen.getByText('brandon@example.com')).toBeTruthy()
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Profile', hidden: true }))
+    expect(onNavigate).toHaveBeenCalledWith('/profile')
+
+    fireEvent.keyDown(avatar, { key: 'Enter' })
+    await waitFor(() => expect(avatar.getAttribute('aria-expanded')).toBe('true'))
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Logout', hidden: true }))
+    expect(onLogout).toHaveBeenCalledOnce()
+  })
+
+  it.each([
+    ['first and last words', { name: '  Brandon  van  West ' }, 'BW'],
+    ['a single name', { name: 'cher' }, 'C'],
+    ['the email when there is no name', { name: '', email: 'ops@example.com' }, 'O'],
+    ['a letter outside the BMP whole', { name: '𝒜da Lovelace' }, '𝒜L'],
+  ])('reads initials from %s', (_, user, initials) => {
+    renderHeader({ session: { user } })
+    expect(screen.getByRole('button', { name: 'Account menu' }).textContent).toBe(initials)
+  })
+})
+
+describe('Topbar bell', () => {
+  it('shows no dot while nothing is unread', async () => {
+    renderHeader()
+    await waitFor(() => expect(unreadCount).toHaveBeenCalled())
+    const bell = screen.getByRole('button', { name: 'Notifications' })
+    expect(within(bell).queryByTestId('bell-badge')).toBeNull()
+  })
+
+  it('shows the 7px dot at top 5 / right 5 with a --sb ring when something is unread', async () => {
+    unreadCount.mockImplementation(async () => ({ ok: true as const, result: 3 }))
+    renderHeader()
+    const bell = await screen.findByRole('button', { name: 'Notifications, 3 unread' })
+    const dot = within(bell).getByTestId('bell-badge')
+    expect(dot.getAttribute('aria-hidden')).toBe('true')
+    expect(classesOf(dot)).toEqual(
+      expect.arrayContaining([
+        'absolute',
+        'top-[5px]',
+        'right-[5px]',
+        'h-[7px]',
+        'w-[7px]',
+        'rounded-full',
+        'bg-notify-dot',
+        'border-[1.5px]',
+        'border-sb',
+      ]),
+    )
+  })
+})
+
+describe('Topbar layout', () => {
+  it('is the 56px --sb bar with a bottom border, 20px padding and a 10px gap', () => {
+    renderHeader()
+    expect(classesOf(screen.getByRole('banner'))).toEqual(
+      expect.arrayContaining([
+        'h-[var(--tbh)]',
+        'bg-sb',
+        'border-b',
+        'border-bdr',
+        'px-5',
+        'gap-2.5',
+        'shrink-0',
+      ]),
+    )
+  })
+
+  it('orders the right cluster dark mode, notifications, avatar, with 34px icon buttons', async () => {
+    renderHeader()
+    const header = screen.getByRole('banner')
+    const names = within(header)
+      .getAllByRole('button')
+      .map((b) => b.getAttribute('aria-label'))
+    expect(names).toEqual([
+      'Search (Command K)',
+      'Switch to dark mode',
+      'Notifications',
+      'Account menu',
+    ])
+
+    const theme = screen.getByRole('button', { name: 'Switch to dark mode' })
+    const bell = screen.getByRole('button', { name: 'Notifications' })
+    expect(classesOf(theme.parentElement!)).toEqual(expect.arrayContaining(['gap-[3px]']))
+    for (const button of [theme, bell]) {
+      expect(classesOf(button)).toEqual(
+        expect.arrayContaining([
+          'h-[34px]',
+          'w-[34px]',
+          'rounded-8',
+          'text-sub',
+          'hover:bg-acc-l',
+          'hover:text-acc',
+          // 44×44 on mobile and on touch screens.
+          'mobile:h-11',
+          'mobile:w-11',
+          'prenta-touch-target',
+        ]),
+      )
+      const icon = button.querySelector('svg')!
+      expect(icon.getAttribute('width')).toBe('16')
+      expect(icon.getAttribute('stroke-width')).toBe('1.75')
+    }
+    expect(
+      screen
+        .getByRole('button', { name: 'Search (Command K)' })
+        .querySelector('svg')!
+        .getAttribute('width'),
+    ).toBe('14')
+  })
+
+  it('toggles the theme from the moon button', () => {
+    renderHeader()
+    fireEvent.click(screen.getByRole('button', { name: 'Switch to dark mode' }))
+    expect(setTheme).toHaveBeenCalledWith('dark')
+  })
+
+  it('keeps the page actions slot, before the utility icons', () => {
+    renderHeader({ pageActions: <button type="button">New Post Type</button> })
+    const header = screen.getByRole('banner')
+    const names = within(header)
+      .getAllByRole('button')
+      .map((b) => b.getAttribute('aria-label') ?? b.textContent)
+    expect(names.indexOf('New Post Type')).toBeGreaterThan(names.indexOf('Search (Command K)'))
+    expect(names.indexOf('New Post Type')).toBeLessThan(names.indexOf('Switch to dark mode'))
+  })
+})
+
+describe('Topbar menu button', () => {
+  it('is gone from the admin Layout on mobile, where More opens the drawer', async () => {
+    stubWidth(390)
+    render(
+      <Layout config={{}} session={BRANDON} currentPath="/" onNavigate={vi.fn()}>
+        Body
+      </Layout>,
+    )
+    const bar = await screen.findByRole('navigation', { name: 'Tab bar' })
+    expect(screen.queryByRole('button', { name: 'Toggle sidebar' })).toBeNull()
+    expect(within(bar).getByRole('button', { name: 'More' })).toBeTruthy()
+    // The topbar keeps search, theme, bell and avatar.
+    const header = screen.getByRole('banner')
+    expect(within(header).getByRole('button', { name: 'Account menu' }).textContent).toBe('BW')
+  })
+
+  it('still renders for a custom shell that passes onToggleSidebar', () => {
+    const onToggleSidebar = vi.fn()
+    renderHeader({ onToggleSidebar })
+    const menu = screen.getByRole('button', { name: 'Toggle sidebar' })
+    expect(classesOf(menu)).toContain('not-mobile:hidden')
+    fireEvent.click(menu)
+    expect(onToggleSidebar).toHaveBeenCalledOnce()
+  })
+})

package/src/__tests__/lib/api.test.ts

@@ -21,8 +21,10 @@ describe('cmsApi', () => {
   it('unwraps a 2xx { data } envelope once and reports the status', async () => {
     const fetchMock = vi.fn(async () => jsonResponse(200, { data: { docs: [], total: 0 } }))
     vi.stubGlobal('fetch', fetchMock)
+    // `body` is the envelope as sent, for fields beside `data` (a review decision's notice).
     await expect(cmsApi('/seo/autopilot/applied?page=1')).resolves.toEqual({
       data: { docs: [], total: 0 },
+      body: { data: { docs: [], total: 0 } },
       status: 200,
     })
     expect(fetchMock).toHaveBeenCalledTimes(1)