@prenta/admin 2.6.1 → 2.8.0

package/src/__tests__/components/responsive-tiers.render.test.tsx

@@ -0,0 +1,461 @@
+// @vitest-environment happy-dom
+import { useRef, useState } from 'react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { Download, Plus } from 'lucide-react'
+
+/**
+ * P-05 (SHELL.md §8): what the responsive layer needs from the markup. happy-dom
+ * applies no stylesheet, so these pin the hooks and classes the rules in
+ * responsive.css and the tier variants act on; responsive-layer.test.ts pins
+ * the rules themselves.
+ */
+
+function makePost(index: number) {
+  return {
+    id: `p${index}`,
+    postTypeId: 'articles',
+    postTypeName: 'Article',
+    postTypeAccentColor: 'blue',
+    title: `Post ${index}`,
+    slug: `post-${index}`,
+    publicPath: `/blog/post-${index}`,
+    authorName: 'Brandon West',
+    authorInitials: 'BW',
+    status: 'PUBLISHED',
+    updatedDate: '2026-10-01T00:00:00.000Z',
+    seoScore: 80,
+  }
+}
+
+// 30 rows: more than the virtual window mounts in a shell with no layout
+// height (a 640px viewport at 56px a row, plus overscan: 20).
+const POSTS = Array.from({ length: 30 }, (_, index) => makePost(index + 1))
+
+const fetchPosts = vi.fn(async (_args: Record<string, unknown>) => ({
+  posts: POSTS,
+  total: POSTS.length,
+  types: [{ slug: 'articles', name: 'Article', postCount: POSTS.length }],
+  authors: [],
+}))
+
+vi.mock('../../lib/posts-service.js', () => ({
+  fetchPosts: (args: Record<string, unknown>) => fetchPosts(args),
+  bulkUpdatePosts: async () => ({ ok: 0, failed: 0 }),
+  bulkDeletePosts: async () => ({ ok: 0, failed: 0 }),
+}))
+
+const { Button } = await import('../../components/ui/Button.js')
+const { PageHeader } = await import('../../components/ui/PageHeader.js')
+const { Modal } = await import('../../components/ui/Modal.js')
+const { ConfirmDialog } = await import('../../components/ui/ConfirmDialog.js')
+const { InspectorPane, InspectorPaneHeader, SplitPaneLayout, SplitPaneList } =
+  await import('../../components/ui/InspectorPane.js')
+const { PostsListView } = await import('../../views/Posts/PostsListView.js')
+const { returnTarget, useSheetFocus } = await import('../../lib/sheet-focus.js')
+
+afterEach(() => {
+  cleanup()
+  vi.unstubAllGlobals()
+})
+
+/** Answers the tier queries (`width < 769px`, `769px <= width < 1025px` …) at a width. */
+function stubWidth(width: number) {
+  vi.stubGlobal('matchMedia', (query: string) => {
+    const range = /^\((?:(\d+)px (<=?) )?width(?: (<=?|>=?) (\d+)px)?\)$/.exec(query)
+    if (!range) throw new Error(`stubWidth can't read ${query}`)
+    const [, lo, loOp, hiOp, hi] = range
+    const below = (a: number, op: string, b: number) => (op === '<' ? a < b : a <= b)
+    const above = (a: number, op: string, b: number) => (op === '>' ? a > b : a >= b)
+    const matches =
+      (lo === undefined || below(Number(lo), loOp!, width)) &&
+      (hi === undefined ||
+        (hiOp!.startsWith('<') ? below(width, hiOp!, Number(hi)) : above(width, hiOp!, Number(hi))))
+    return { matches, media: query, addEventListener: () => {}, removeEventListener: () => {} }
+  })
+}
+
+const classesOf = (el: Element) => (el.getAttribute('class') ?? '').split(/\s+/)
+
+describe('header actions collapse (tablet: icons, AI keeps its text)', () => {
+  function Header() {
+    return (
+      <PageHeader
+        title="Pages"
+        subtitle="14 pages"
+        actions={
+          <>
+            <Button variant="secondary" leftIcon={<Download size={14} aria-hidden />}>
+              Export
+            </Button>
+            <Button variant="ai">AI Copilot</Button>
+            <Button leftIcon={<Plus size={16} aria-hidden />} data-fab="">
+              New page
+            </Button>
+          </>
+        }
+      />
+    )
+  }
+
+  it('marks the action cluster and each action’s kind for the collapse rules', () => {
+    render(<Header />)
+    const cluster = screen.getByRole('button', { name: 'Export' }).parentElement!
+    expect(cluster.hasAttribute('data-header-actions')).toBe(true)
+
+    // Secondary: collapses to a 40px icon at tablet, still named "Export".
+    const exportButton = within(cluster).getByRole('button', { name: 'Export' })
+    expect(exportButton.getAttribute('data-variant')).toBe('secondary')
+    expect(exportButton.hasAttribute('data-keep-label')).toBe(false)
+    expect(exportButton.querySelector('svg')).not.toBeNull()
+
+    // AI keeps its label at tablet.
+    const ai = within(cluster).getByRole('button', { name: 'AI Copilot' })
+    expect(ai.getAttribute('data-variant')).toBe('ai')
+    expect(ai.hasAttribute('data-keep-label')).toBe(true)
+
+    // The primary create action is the one FAB.
+    const create = within(cluster).getByRole('button', { name: 'New page' })
+    expect(create.getAttribute('data-variant')).toBe('primary')
+    expect(create.hasAttribute('data-fab')).toBe(true)
+  })
+
+  it('keeps each label in the button as text, so a collapsed icon is still named', () => {
+    render(<Header />)
+    // The collapse hides labels with font-size 0 / clipping, never by removing
+    // them: the name is the label text, not an aria-label added later.
+    for (const name of ['Export', 'AI Copilot', 'New page']) {
+      const button = screen.getByRole('button', { name })
+      expect(button.textContent).toBe(name)
+      expect(button.getAttribute('aria-label')).toBeNull()
+    }
+  })
+
+  it('sizes the title per tier (19px tablet, 18px mobile, 26px 4K)', () => {
+    render(<Header />)
+    const title = screen.getByRole('heading', { level: 1, name: 'Pages' })
+    expect(classesOf(title)).toEqual(
+      expect.arrayContaining([
+        'text-page',
+        'tablet:text-[19px]',
+        'mobile:text-[18px]',
+        '4k:text-[26px]',
+      ]),
+    )
+    // A plain-text subtitle hides on small phones (cms-layouts.css ≤460px).
+    expect(classesOf(screen.getByText('14 pages'))).toContain('[@media(width<461px)]:hidden')
+  })
+})
+
+describe('Posts list on mobile: FAB and cards', () => {
+  it('has one floating create action, in the header cluster', async () => {
+    stubWidth(390)
+    const { container } = render(<PostsListView onNavigate={() => {}} />)
+    await screen.findByText('Post 1')
+    const fabs = container.querySelectorAll('[data-fab]')
+    expect(fabs).toHaveLength(1)
+    expect(fabs[0]!.textContent).toContain('New Post')
+    expect(fabs[0]!.closest('[data-header-actions]')).not.toBeNull()
+  })
+
+  it('renders the list table as cards: roles, labels and cell kinds', async () => {
+    stubWidth(390)
+    render(<PostsListView onNavigate={() => {}} />)
+    await screen.findByText('Post 1')
+    const table = screen.getByRole('table', { name: 'Posts' })
+    expect(table.hasAttribute('data-cards')).toBe(true)
+    // Explicit roles keep table semantics when the cards change `display`.
+    expect(within(table).getAllByRole('columnheader').length).toBeGreaterThan(5)
+    const row = screen.getByText('Post 1').closest('tr')!
+    expect(row.getAttribute('role')).toBe('row')
+    const cells = Array.from(row.querySelectorAll('td'))
+    expect(cells.every((cell) => cell.getAttribute('role') === 'cell')).toBe(true)
+    const kind = (cell: Element) =>
+      cell.getAttribute('data-role') ?? cell.getAttribute('data-label')
+    expect(cells.map(kind)).toEqual([
+      'check',
+      'title',
+      'Type',
+      'Author',
+      'Status',
+      'Date',
+      'SEO',
+      'actions',
+    ])
+    expect(within(cells[0]!).getByRole('checkbox', { name: 'Select "Post 1"' })).toBeTruthy()
+    expect(within(cells[7]!).getByRole('button', { name: 'Edit "Post 1"' })).toBeTruthy()
+  })
+
+  it('mounts every row as a card on mobile, and windows the table above it', async () => {
+    // Cards are taller than the 56px row the window places rows by, so on
+    // mobile a windowed list would scroll past rows it never mounted.
+    stubWidth(390)
+    render(<PostsListView onNavigate={() => {}} />)
+    await screen.findByText('Post 30')
+    cleanup()
+
+    stubWidth(1280)
+    render(<PostsListView onNavigate={() => {}} />)
+    await screen.findByText('Post 1')
+    expect(screen.queryByText('Post 30')).toBeNull()
+  })
+})
+
+/** Fixes from the P-05 review. */
+describe('cards keep what the hidden table header held', () => {
+  it('gives phones the header’s sort and select-all, hidden at 769px and up', async () => {
+    stubWidth(390)
+    render(<PostsListView onNavigate={() => {}} />)
+    await screen.findByText('Post 1')
+
+    const sort = screen.getByRole('combobox', { name: 'Sort by' })
+    expect(classesOf(sort.closest('div')!)).toContain('not-mobile:hidden')
+    fetchPosts.mockClear()
+    fireEvent.change(sort, { target: { value: 'title:asc' } })
+    await waitFor(() =>
+      expect(fetchPosts).toHaveBeenCalledWith(
+        expect.objectContaining({ sortBy: 'title', sortDirection: 'asc' }),
+      ),
+    )
+    expect((sort as HTMLSelectElement).value).toBe('title:asc')
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Select all' }))
+    expect(await screen.findByText('30 selected')).toBeTruthy()
+  })
+
+  it('wraps each card’s checkbox in a label, its 44px hit area on mobile', async () => {
+    stubWidth(390)
+    render(<PostsListView onNavigate={() => {}} />)
+    const box = await screen.findByRole('checkbox', { name: 'Select "Post 1"' })
+    const label = box.parentElement!
+    expect(label.tagName).toBe('LABEL')
+    expect(label.closest('td')!.getAttribute('data-role')).toBe('check')
+    fireEvent.click(label)
+    expect((box as HTMLInputElement).checked).toBe(true)
+  })
+})
+
+describe('dialogs become bottom sheets on mobile', () => {
+  it('gives every Modal the sheet classes and 44px footer buttons', () => {
+    render(
+      <Modal open onClose={() => {}} title="Delete page" actions={<Button>Delete</Button>}>
+        <p>Body</p>
+      </Modal>,
+    )
+    const dialog = screen.getByRole('dialog', { name: 'Delete page' })
+    expect(classesOf(dialog)).toEqual(
+      expect.arrayContaining([
+        'mobile:bottom-0',
+        'mobile:top-auto',
+        'mobile:w-full',
+        'mobile:max-w-none',
+        'mobile:max-h-[92dvh]',
+        'mobile:rounded-t-[16px]',
+        'mobile:translate-y-0',
+        'mobile:pb-[env(safe-area-inset-bottom,0px)]',
+      ]),
+    )
+    const footer = screen.getByRole('button', { name: 'Delete' }).parentElement!
+    expect(classesOf(footer)).toEqual(
+      expect.arrayContaining(['mobile:[&>*]:min-h-11', 'mobile:[&>*]:flex-[1_1_0]']),
+    )
+    expect(classesOf(screen.getByText('Body').parentElement!)).toContain('mobile:overflow-y-auto')
+  })
+
+  it('applies to ConfirmDialog, which every delete prompt uses', () => {
+    render(
+      <ConfirmDialog
+        open
+        onClose={() => {}}
+        onConfirm={() => {}}
+        title="Delete post?"
+        description="This cannot be undone."
+        destructive
+      />,
+    )
+    expect(classesOf(screen.getByRole('dialog', { name: 'Delete post?' }))).toContain(
+      'mobile:bottom-0',
+    )
+  })
+})
+
+describe('side panes become sheets on mobile', () => {
+  function Split() {
+    const [open, setOpen] = useState(false)
+    return (
+      <SplitPaneLayout>
+        <SplitPaneList>
+          <button type="button" onClick={() => setOpen(true)}>
+            Open row
+          </button>
+        </SplitPaneList>
+        <InspectorPane open={open} width={420} aria-label="Row editor">
+          <InspectorPaneHeader onClose={() => setOpen(false)}>Editing</InspectorPaneHeader>
+        </InspectorPane>
+      </SplitPaneLayout>
+    )
+  }
+
+  it('marks the open pane for the sheet rule and drops its card frame', () => {
+    stubWidth(390)
+    const { container } = render(<Split />)
+    expect(container.querySelector('[data-inspector-open]')).toBeNull()
+    fireEvent.click(screen.getByRole('button', { name: 'Open row' }))
+    const open = container.querySelector('[data-inspector-open]')!
+    expect(open).not.toBeNull()
+    // The list is a sibling off the pane's path, which the rule hides.
+    expect(open.parentElement!.contains(screen.getByRole('button', { name: 'Open row' }))).toBe(
+      true,
+    )
+    expect(open.contains(screen.getByRole('button', { name: 'Open row' }))).toBe(false)
+    const region = screen.getByRole('region', { name: 'Row editor' })
+    expect(classesOf(region)).toEqual(
+      expect.arrayContaining(['mobile:m-0', 'mobile:w-full!', 'mobile:rounded-none']),
+    )
+  })
+
+  it('moves focus into the pane on mobile and back to the row when it closes', async () => {
+    stubWidth(390)
+    render(<Split />)
+    const opener = screen.getByRole('button', { name: 'Open row' })
+    opener.focus()
+    fireEvent.click(opener)
+    const region = screen.getByRole('region', { name: 'Row editor' })
+    await waitFor(() => expect(document.activeElement).toBe(region))
+
+    // happy-dom lays nothing out; a hidden list would have no client rects.
+    vi.spyOn(opener, 'getClientRects').mockReturnValue([{}] as unknown as DOMRectList)
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: 'Close panel' }))
+    })
+    await waitFor(() => expect(document.activeElement).toBe(opener))
+  })
+
+  it('gives the sheet’s Close a 44px target on mobile and on touch', () => {
+    stubWidth(390)
+    render(<Split />)
+    fireEvent.click(screen.getByRole('button', { name: 'Open row' }))
+    expect(classesOf(screen.getByRole('button', { name: 'Close panel' }))).toEqual(
+      expect.arrayContaining(['prenta-touch-target', 'mobile:h-11', 'mobile:w-11']),
+    )
+  })
+
+  it('returns focus to the tapped row’s own control when a plain cell opened the pane', async () => {
+    // A tap on a table cell leaves focus on <body>; the row's title control
+    // stands in for it (collection lists, Script Tags).
+    stubWidth(390)
+    function Rows() {
+      const [open, setOpen] = useState(false)
+      return (
+        <SplitPaneLayout>
+          <SplitPaneList>
+            <table>
+              <tbody>
+                <tr onClick={() => setOpen(true)}>
+                  <td data-role="title">
+                    <button type="button">Row A</button>
+                  </td>
+                  <td>Plain text</td>
+                </tr>
+              </tbody>
+            </table>
+          </SplitPaneList>
+          <InspectorPane open={open} width={420} aria-label="Row editor">
+            <InspectorPaneHeader onClose={() => setOpen(false)}>Editing</InspectorPaneHeader>
+          </InspectorPane>
+        </SplitPaneLayout>
+      )
+    }
+    render(<Rows />)
+    const cell = screen.getByText('Plain text')
+    const title = screen.getByRole('button', { name: 'Row A' })
+    vi.spyOn(title, 'getClientRects').mockReturnValue([{}] as unknown as DOMRectList)
+    ;(document.activeElement as HTMLElement | null)?.blur()
+    fireEvent.pointerDown(cell)
+    fireEvent.click(cell)
+    await waitFor(() =>
+      expect(document.activeElement).toBe(screen.getByRole('region', { name: 'Row editor' })),
+    )
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: 'Close panel' }))
+    })
+    await waitFor(() => expect(document.activeElement).toBe(title))
+  })
+
+  it('picks the return target: the focused element, else the tapped control or row title', () => {
+    const { container } = render(
+      <table>
+        <tbody>
+          <tr>
+            <td data-role="title">
+              <a href="/x">Title</a>
+            </td>
+            <td>
+              <span>Text</span>
+            </td>
+            <td>
+              <button type="button">
+                <span>Edit</span>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>,
+    )
+    const link = screen.getByRole('link', { name: 'Title' })
+    const edit = screen.getByRole('button', { name: 'Edit' })
+    expect(returnTarget(edit, null)).toBe(edit)
+    expect(returnTarget(document.body, edit.querySelector('span'))).toBe(edit)
+    expect(returnTarget(document.body, screen.getByText('Text'))).toBe(link)
+    expect(returnTarget(document.body, container)).toBeNull()
+  })
+
+  it('lets a sheet restore its list and fall back when the opener can’t take focus', async () => {
+    // Media: its grid comes back at the top and its cards aren't focusable.
+    stubWidth(390)
+    const restore = vi.fn()
+    function Sheet() {
+      const [open, setOpen] = useState(false)
+      const sheet = useRef<HTMLDivElement>(null)
+      const list = useRef<HTMLDivElement>(null)
+      useSheetFocus(open, sheet, { restore, fallback: () => list.current })
+      return (
+        <>
+          <div ref={list} tabIndex={-1} data-testid="list">
+            {open ? null : (
+              <div onClick={() => setOpen(true)} data-testid="card">
+                Card
+              </div>
+            )}
+          </div>
+          {open ? (
+            <div ref={sheet} tabIndex={-1} data-testid="sheet">
+              <button type="button" onClick={() => setOpen(false)}>
+                Close
+              </button>
+            </div>
+          ) : null}
+        </>
+      )
+    }
+    render(<Sheet />)
+    ;(document.activeElement as HTMLElement | null)?.blur()
+    fireEvent.pointerDown(screen.getByTestId('card'))
+    fireEvent.click(screen.getByTestId('card'))
+    await waitFor(() => expect(document.activeElement).toBe(screen.getByTestId('sheet')))
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: 'Close' }))
+    })
+    expect(restore).toHaveBeenCalledTimes(1)
+    await waitFor(() => expect(document.activeElement).toBe(screen.getByTestId('list')))
+  })
+
+  it('leaves focus alone at desktop widths, where the list stays beside the pane', () => {
+    stubWidth(1280)
+    render(<Split />)
+    const opener = screen.getByRole('button', { name: 'Open row' })
+    opener.focus()
+    fireEvent.click(opener)
+    expect(document.activeElement).toBe(opener)
+  })
+})

package/src/__tests__/components/serp-preview.render.test.tsx

@@ -20,9 +20,12 @@ describe('SerpPreview', () => {
     // The card's job is to look like the thing being previewed. Painted in the
     // brand colour it previews the admin instead.
     render(<SerpPreview title="T" url="u" description="d" />)
-    // Assert on the class list rather than a CSS selector — escaping `[`, `#`
-    // and `]` in a selector is brittle and fails for the wrong reason.
-    expect(screen.getByText('T').className).toContain('#1a0dab')
+    // Assert on the class list rather than a CSS selector — escaping `[`
+    // and `]` in a selector is brittle and fails for the wrong reason. The
+    // token's Google blue is pinned in tokens-drift.test.ts.
+    const className = screen.getByText('T').className
+    expect(className).toContain('var(--serp-link)')
+    expect(className).not.toMatch(/acc|primary|brand/)
   })
 
   it('says what a missing description means rather than rendering blank', () => {