@prenta/admin 0.92.0 → 0.94.0

package/src/__tests__/styles/responsive-layer.test.ts

@@ -0,0 +1,152 @@
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+/**
+ * The responsive + accessibility layer (`src/styles/responsive.css`), ported
+ * from the design bundle's `design-system/cms-responsive.css`.
+ *
+ * Every way this breaks is invisible: a stylesheet that stops being imported,
+ * a rule whose class hook was renamed in a component, or a token override
+ * placed before the token it overrides all produce a page that renders
+ * perfectly and simply lacks the behaviour. None of it raises an error, and
+ * none of it shows up in a screenshot taken at a desktop width with a mouse.
+ *
+ * Reads the source rather than a compiled bundle so the suite does not depend
+ * on a build step; the entry-point assertion is what ties the two together.
+ */
+
+const PKG = fileURLToPath(new URL('../../../', import.meta.url))
+const read = (rel: string) => readFileSync(PKG + rel, 'utf8')
+
+const responsive = read('src/styles/responsive.css')
+const theme = read('src/styles/theme.css')
+const tokens = read('src/styles/prenta-tokens.css')
+
+describe('responsive + accessibility layer', () => {
+  it('is imported by theme.css, which both entry points pull in', () => {
+    // `build-input.css` (precompiled) and `tailwind.css` (advanced) each
+    // import theme.css and nothing else of ours, so importing from there is
+    // what puts this layer in front of every consumer.
+    expect(theme).toContain("@import './responsive.css'")
+    expect(read('src/styles/build-input.css')).toContain("@import './theme.css'")
+    expect(read('src/styles/tailwind.css')).toContain("@import './theme.css'")
+  })
+
+  it('is imported AFTER the token block it overrides', () => {
+    // Same specificity, so source order alone decides. Imported first, the
+    // prefers-contrast block would parse, match, and change nothing.
+    expect(theme.indexOf("@import './prenta-tokens.css'")).toBeLessThan(
+      theme.indexOf("@import './responsive.css'"),
+    )
+  })
+
+  it('scopes every rule to the admin root', () => {
+    // The admin renders inside consumer applications. A bare `:focus-visible`
+    // or `@media print` rule here would restyle the host's own pages.
+    const selectors = responsive
+      .replace(/\/\*[\s\S]*?\*\//g, '')
+      .split('\n')
+      .map((line) => line.trim())
+      .filter((line) => line.endsWith('{') && !line.startsWith('@'))
+
+    expect(selectors.length).toBeGreaterThan(10)
+    for (const selector of selectors) {
+      expect(selector, `unscoped selector: ${selector}`).toMatch(/\.prenta-admin/)
+    }
+  })
+
+  it('raises contrast rather than lowering it, in both themes', () => {
+    // The shipped --muted is already an AA correction over the handoff's own
+    // value (see prenta-tokens.css). A "more contrast" preference that moved
+    // it the other way would be worse than not honouring the preference.
+    const luminance = (hex: string) => {
+      const n = parseInt(hex.slice(1), 16)
+      return ((n >> 16) & 255) * 0.299 + ((n >> 8) & 255) * 0.587 + (n & 255) * 0.114
+    }
+    const declaration = (css: string, name: string, from = 0) => {
+      const match = new RegExp(`${name}:\\s*(#[0-9a-f]{6})`, 'i').exec(css.slice(from))
+      return match?.[1] ?? null
+    }
+
+    const contrastBlock = responsive.slice(responsive.indexOf('@media (prefers-contrast: more)'))
+    const darkStart = contrastBlock.indexOf('[data-theme=')
+
+    for (const name of ['--muted', '--sub', '--bdr']) {
+      const base = declaration(tokens, name)!
+      const raised = declaration(contrastBlock.slice(0, darkStart), name)!
+      // Light theme: darker text and borders on a light surface.
+      expect(luminance(raised), `light ${name}`).toBeLessThan(luminance(base))
+
+      const darkBase = declaration(
+        tokens,
+        name,
+        tokens.indexOf(".prenta-admin[data-theme='dark']"),
+      )!
+      const darkRaised = declaration(contrastBlock.slice(darkStart), name)!
+      // Dark theme: lighter, on a dark surface.
+      expect(luminance(darkRaised), `dark ${name}`).toBeGreaterThan(luminance(darkBase))
+    }
+  })
+
+  it('grows touch targets only under a coarse pointer', () => {
+    const coarse = responsive.slice(
+      responsive.indexOf('@media (pointer: coarse)'),
+      responsive.indexOf('@media (min-width: 2000px)'),
+    )
+    expect(coarse).toContain('min-height: 44px')
+    expect(coarse).toContain('min-width: 44px')
+    // A 26px button is right with a mouse. No control floor is imposed outside
+    // this block — the 44px that appears in the stacked-layout rules is the
+    // collapsed strip's own height, not a minimum applied to a control.
+    const elsewhere = responsive.replace(coarse, '').replace(/\/\*[\s\S]*?\*\//g, '')
+    expect(elsewhere).not.toMatch(/min-(height|width):\s*44px/)
+  })
+
+  it('grows the switch by its hit area, never by its box', () => {
+    // A switch positions its thumb against the track. Stretching the track to
+    // 44px leaves the thumb floating in dead space — the one carve-out the
+    // design bundle makes, and for this reason.
+    const hit = responsive.slice(responsive.indexOf('.prenta-touch-hit::after'))
+    expect(hit).toContain('position: absolute')
+    expect(hit.slice(0, hit.indexOf('}'))).not.toContain('min-height')
+  })
+
+  it('overrides the rail width with !important, because it is set inline', () => {
+    // The rail is drag-resizable and its width is an inline style, which no
+    // class can beat. Without this the stacked layout silently keeps a
+    // 360px-wide rail on a 390px screen.
+    const stacked = responsive.slice(responsive.indexOf('@media (max-width: 900px)'))
+    expect(stacked).toMatch(/\.prenta-editor-rail\s*\{[^}]*width:\s*100%\s*!important/)
+  })
+})
+
+describe('class hooks the layer targets', () => {
+  // A rule whose hook was renamed in a component is dead CSS with no error.
+  const hooks: Array<[string, string]> = [
+    ['prenta-skip-link', 'src/layout/primitives/AdminShell.tsx'],
+    ['prenta-editor-rail', 'src/components/EditorRail.tsx'],
+    ['prenta-editor-rail-collapsed', 'src/components/EditorRail.tsx'],
+    ['prenta-rail-label', 'src/components/EditorRail.tsx'],
+    ['prenta-editor-body', 'src/views/page-editor/PageSectionEditor.tsx'],
+    ['prenta-editor-header', 'src/views/page-editor/EditorTopBar.tsx'],
+    ['prenta-editor-inspector', 'src/views/page-editor/SectionInspector.tsx'],
+    ['prenta-canvas-scroll', 'src/views/page-editor/EditorCanvas.tsx'],
+    ['prenta-canvas-fit', 'src/views/page-editor/EditorCanvas.tsx'],
+    ['prenta-touch-target', 'src/components/EditorRail.tsx'],
+    ['prenta-touch-hit', 'src/components/page-tab/DirectiveSwitch.tsx'],
+  ]
+
+  for (const [hook, file] of hooks) {
+    it(`${hook} is applied in ${file.split('/').pop()}`, () => {
+      expect(responsive, `${hook} is unused in responsive.css`).toContain(hook)
+      expect(read(file), `${hook} is not applied by any component`).toContain(hook)
+    })
+  }
+
+  it('points the skip link at a target that exists', () => {
+    const shell = read('src/layout/primitives/AdminShell.tsx')
+    expect(shell).toContain('href="#prenta-main"')
+    expect(shell).toContain('id="prenta-main"')
+  })
+})

package/src/__tests__/styles/tokens-drift.test.ts

@@ -0,0 +1,110 @@
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+// @ts-expect-error — plain .mjs build script, intentionally untyped
+import { OUTPUTS, buildAll, readTokens } from '../../../scripts/generate-tokens.mjs'
+
+/**
+ * The token files are generated from design-system/tokens.json. Before the
+ * generator existed, the runtime copy (src/styles/prenta-tokens.css) was a
+ * hand transcription of the handoff copy (design-system/tokens.css) and the
+ * two silently diverged — the radius scale was renamed in one and not the
+ * other, and the WCAG correction to `--muted` lived only downstream where a
+ * re-import of the handoff would have reverted it without anyone noticing.
+ *
+ * This suite fails if a generated file is edited by hand, if tokens.json
+ * changes without regenerating, or if the two CSS copies stop agreeing.
+ */
+
+const PKG = fileURLToPath(new URL('../../../', import.meta.url))
+
+const read = (rel: string) => readFileSync(PKG + rel, 'utf8')
+
+/** Declarations only — comments legitimately differ between the two copies. */
+function declarationMap(css: string): Map<string, string> {
+  const body = css.replace(/\/\*[\s\S]*?\*\//g, '')
+  const out = new Map<string, string>()
+  for (const match of body.matchAll(/(--[\w-]+)\s*:\s*([^;}]+)[;}]/g)) {
+    const name = match[1]!
+    const value = match[2]!
+    // Later declarations win in CSS; the dark block legitimately re-declares
+    // names from the light block, so keep the first (light) binding per file
+    // section by only recording a name once per call.
+    if (!out.has(name)) out.set(name, value.trim())
+  }
+  return out
+}
+
+describe('design token generation', () => {
+  it('every generated file matches a fresh run of the generator', async () => {
+    const built = await buildAll(await readTokens())
+
+    for (const rel of Object.values(OUTPUTS) as string[]) {
+      const committed = read(rel)
+      expect(built[rel], `${rel} is out of date. Run: pnpm --filter @prenta/admin generate`).toBe(
+        committed,
+      )
+    }
+  })
+
+  it('marks generated files so they are not hand-edited', () => {
+    for (const rel of Object.values(OUTPUTS) as string[]) {
+      expect(read(rel), `${rel} is missing its generated-file banner`).toContain(
+        'GENERATED FILE — DO NOT EDIT',
+      )
+    }
+  })
+
+  it('the handoff copy and the runtime copy carry identical values', () => {
+    const handoff = declarationMap(read(OUTPUTS.tokensCss))
+    const runtime = declarationMap(read(OUTPUTS.runtimeCss))
+
+    expect(runtime.size).toBeGreaterThan(60)
+    expect([...handoff.keys()].sort()).toEqual([...runtime.keys()].sort())
+    for (const [name, value] of handoff) {
+      expect(runtime.get(name), `${name} differs between the two token copies`).toBe(value)
+    }
+  })
+
+  it('scopes the runtime copy to .prenta-admin and never to :root', () => {
+    const runtime = read(OUTPUTS.runtimeCss).replace(/\/\*[\s\S]*?\*\//g, '')
+    expect(runtime).toContain('.prenta-admin {')
+    expect(runtime).not.toMatch(/(^|\s):root\s*[,{]/)
+  })
+
+  it('keeps deprecated aliases resolving to their canonical token', () => {
+    const runtime = declarationMap(read(OUTPUTS.runtimeCss))
+    // `--r-control` and `--motion-*` are the pre-2.0 names. 72 call sites still
+    // read `--motion-fast`; the aliases are what make the rename non-breaking.
+    expect(runtime.get('--r-control')).toBe('var(--r-ctl)')
+    expect(runtime.get('--motion-fast')).toBe('var(--mo-fast)')
+    expect(runtime.get('--motion-base')).toBe('var(--mo-base)')
+  })
+
+  it('keeps --muted above the WCAG AA threshold in both themes', () => {
+    // The handoff specifies #B0ADBE (2.2:1 on white). The admin renders --muted
+    // as real text, so the generator ships a corrected value recorded in
+    // tokens.json as a `designValue` deviation. If someone re-imports the
+    // handoff verbatim, this fails rather than shipping illegible hints.
+    const css = read(OUTPUTS.runtimeCss)
+    const [light, dark] = css.split('.prenta-admin[data-theme=')
+    const mutedOf = (block: string) => declarationMap(block).get('--muted')
+
+    expect(contrast(mutedOf(light!)!, '#ffffff')).toBeGreaterThanOrEqual(4.5)
+    expect(contrast(mutedOf(dark!)!, '#1c1a2e')).toBeGreaterThanOrEqual(4.5)
+  })
+})
+
+/** WCAG 2.1 relative-luminance contrast ratio between two hex colors. */
+function contrast(a: string, b: string): number {
+  const lum = (hex: string) => {
+    const n = hex.trim().replace('#', '')
+    const channels = [0, 2, 4].map((i) => parseInt(n.slice(i, i + 2), 16) / 255)
+    const [r, g, bl] = channels.map((c) =>
+      c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4,
+    )
+    return 0.2126 * r! + 0.7152 * g! + 0.0722 * bl!
+  }
+  const [hi, lo] = [lum(a), lum(b)].sort((x, y) => y - x)
+  return (hi! + 0.05) / (lo! + 0.05)
+}

package/src/__tests__/views/admin-renderer-compat.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import { DEFAULT_SECTION_RENDERERS } from '@prenta/sections-react'
+import type { AdminSectionRendererMap } from '../../views/page-editor/sections/admin-renderers.js'
+import { ADMIN_RENDER_OPTIONS } from '../../views/page-editor/sections/admin-renderers.js'
+
+/**
+ * `AdminSectionRendererMap` is a hand-maintained structural mirror of
+ * `SectionRendererMap` from @prenta/sections-react — cms-admin depends on
+ * cms-core only, so the type is duplicated rather than imported.
+ *
+ * The mirror exists so a consumer can hand `<AdminRoot sectionRenderers>` the
+ * same components it registers for the public site and have the editor canvas
+ * preview what actually ships. That only works while the two shapes stay
+ * assignable, and nothing else in the build checks it — the duplication is
+ * invisible to the compiler until someone tries the assignment.
+ *
+ * This file IS that assignment. If the shapes drift, the type-check fails here
+ * rather than in a consumer's project.
+ */
+
+describe('admin renderer contract', () => {
+  it('accepts a real @prenta/sections-react renderer map', () => {
+    // The assignment is the assertion — this line fails `tsc` if the mirror
+    // drifts. Renderers are function types, so their parameters compare
+    // contravariantly: widening a field on the ADMIN side is what breaks it.
+    const supplied: AdminSectionRendererMap = DEFAULT_SECTION_RENDERERS
+
+    expect(Object.keys(supplied)).toContain('hero')
+    expect(typeof supplied.hero).toBe('function')
+  })
+
+  it('supplies every option a public renderer resolves', () => {
+    // sections-react's `ResolvedRenderOptions` — a missing key throws at
+    // render time, not compile time, because renderers destructure it.
+    for (const key of ['sanitizeHtml', 'baseUrl', 'renderImage', 'lcp', 'prefetchedForms']) {
+      expect(ADMIN_RENDER_OPTIONS, `ADMIN_RENDER_OPTIONS is missing ${key}`).toHaveProperty(key)
+    }
+  })
+
+  it('never grants the LCP priority slot in the canvas', () => {
+    // On a public page exactly one image loads eagerly. The canvas has no
+    // such budget to protect and nothing competing for bandwidth, so every
+    // image should lazy-load — `claim()` always declines.
+    expect(ADMIN_RENDER_OPTIONS.lcp.claim()).toBe(false)
+    expect(ADMIN_RENDER_OPTIONS.lcp.claim()).toBe(false)
+    expect(ADMIN_RENDER_OPTIONS.lcp.claimed).toBe(true)
+  })
+})

package/src/__tests__/views/admin-section-renderers.test.tsx

@@ -84,9 +84,20 @@ describe('pluggable admin section renderers', () => {
     })
   })
 
-  it('does not affect built-in section types', () => {
+  it('overrides built-in section types too', () => {
+    // REVERSED from the original behaviour, which consulted the map only for
+    // types the built-in switch did not know.
+    //
+    // The point of `<AdminRoot sectionRenderers>` is to hand the admin the
+    // same components the public site registers, so the canvas previews what
+    // actually ships. Excluding the built-ins made that impossible for the
+    // twelve types that matter most: a consumer passing
+    // `DEFAULT_SECTION_RENDERERS` from `@prenta/sections-react` had their
+    // hero, text, feature, stats and cta silently dropped, and the canvas
+    // rendered the admin's own approximations — different font size, weight
+    // and breakpoints — while presenting itself as a preview.
     const renderers: AdminSectionRendererMap = {
-      hero: () => <div data-testid="hijacked-hero" />,
+      hero: () => <div data-testid="supplied-hero" />,
     }
     render(
       <AdminSectionRenderersProvider value={renderers}>
@@ -95,7 +106,62 @@ describe('pluggable admin section renderers', () => {
         />
       </AdminSectionRenderersProvider>,
     )
-    // Built-in types always use the built-in canvas component.
-    expect(screen.queryByTestId('hijacked-hero')).toBeNull()
+    expect(screen.getByTestId('supplied-hero')).toBeTruthy()
+  })
+
+  it('falls back to the built-in when a supplied renderer for a built-in type throws', () => {
+    // A broken consumer renderer must degrade to the admin's own component,
+    // not to the "custom section" placeholder — the type IS known here.
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+    const renderers: AdminSectionRendererMap = {
+      hero: () => {
+        throw new Error('consumer hero exploded')
+      },
+    }
+    render(
+      <AdminSectionRenderersProvider value={renderers}>
+        <SectionRenderer
+          section={customSection({
+            sectionType: 'hero',
+            name: 'Hero',
+            content: { heading: 'Built-in hero copy' },
+          })}
+        />
+      </AdminSectionRenderersProvider>,
+    )
+    expect(screen.getByText('Built-in hero copy')).toBeTruthy()
+    vi.restoreAllMocks()
+  })
+
+  it('supplies the render options a public renderer expects', () => {
+    // sections-react renderers call `options.lcp.claim()` during render (hero,
+    // feature, gallery). A missing controller would throw on the first image,
+    // so the mirror must carry the whole shape, not just renderImage.
+    let seen: Record<string, unknown> | null = null
+    const renderers: AdminSectionRendererMap = {
+      hero: ({ options }) => {
+        seen = options as unknown as Record<string, unknown>
+        return <div />
+      },
+    }
+    render(
+      <AdminSectionRenderersProvider value={renderers}>
+        <SectionRenderer section={customSection({ sectionType: 'hero', content: {} })} />
+      </AdminSectionRenderersProvider>,
+    )
+    const options = seen as unknown as {
+      lcp: { claim: () => boolean }
+      prefetchedForms: Record<string, unknown>
+      renderImage: unknown
+      sanitizeHtml: unknown
+      baseUrl: string
+    }
+    expect(typeof options.lcp.claim).toBe('function')
+    // The canvas never grants the priority slot — nothing competes for
+    // bandwidth there, so every image should lazy-load.
+    expect(options.lcp.claim()).toBe(false)
+    expect(options.prefetchedForms).toEqual({})
+    expect(typeof options.renderImage).toBe('function')
+    expect(typeof options.sanitizeHtml).toBe('function')
   })
 })

package/src/__tests__/views/canvas-review-mode.render.test.tsx

@@ -0,0 +1,94 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { SectionRenderer } from '../../views/page-editor/sections/SectionRenderer.js'
+import type { PageSection } from '../../lib/page-editor-service.js'
+
+afterEach(cleanup)
+
+const SECTION: PageSection = {
+  id: 's1',
+  sectionType: 'hero',
+  name: 'Hero Banner',
+  visible: true,
+  content: { heading: 'A headline' },
+  settings: {},
+}
+
+function sectionEl(): HTMLElement {
+  const el = document.querySelector('[data-section-id="s1"]')
+  if (!el) throw new Error('section not rendered')
+  return el as HTMLElement
+}
+
+describe('SectionRenderer — review mode', () => {
+  it('marks a changed section and names the change in its label', () => {
+    render(<SectionRenderer section={SECTION} editable reviewing changed />)
+
+    expect(screen.getByText('Hero Banner — changed')).toBeTruthy()
+    expect(sectionEl().getAttribute('data-changed')).toBe('true')
+    expect(sectionEl().className).toContain('outline-dashed')
+  })
+
+  it('leaves an unchanged section unlabelled and unoutlined', () => {
+    render(<SectionRenderer section={SECTION} editable reviewing changed={false} />)
+
+    expect(screen.queryByText(/— changed/)).toBeNull()
+    expect(sectionEl().getAttribute('data-changed')).toBeNull()
+    expect(sectionEl().className).not.toContain('outline-dashed')
+  })
+
+  it('keeps the changed label even though review mode suppresses editing chrome', () => {
+    // The trap the handoff calls out by name: review mode and site-preview
+    // mode both drop the cursor, the hover outline and the section label, so
+    // it is tempting to share one suppression rule. Doing that hides the one
+    // label review mode exists to show.
+    render(<SectionRenderer section={SECTION} editable reviewing changed selected />)
+
+    expect(sectionEl().getAttribute('data-editable')).toBeNull()
+    expect(sectionEl().className).not.toContain('cursor-pointer')
+    // The selection label is gone…
+    expect(screen.queryByText('Hero Banner')).toBeNull()
+    // …and the changed label is not.
+    expect(screen.getByText('Hero Banner — changed')).toBeTruthy()
+  })
+
+  it('does not select a section while reviewing — that would edit the current page', () => {
+    const onSelect = vi.fn()
+    render(<SectionRenderer section={SECTION} editable reviewing changed onSelect={onSelect} />)
+
+    fireEvent.click(sectionEl())
+
+    expect(onSelect).not.toHaveBeenCalled()
+  })
+
+  it('still selects normally when not reviewing', () => {
+    const onSelect = vi.fn()
+    render(<SectionRenderer section={SECTION} editable onSelect={onSelect} />)
+
+    fireEvent.click(sectionEl())
+
+    expect(onSelect).toHaveBeenCalledWith('s1')
+    expect(sectionEl().getAttribute('data-editable')).toBe('true')
+  })
+
+  it('names the change in the accessible name, not only in colour and a dashed border', () => {
+    render(<SectionRenderer section={SECTION} editable reviewing changed />)
+    expect(sectionEl().getAttribute('aria-label')).toBe(
+      'Hero Banner section — changed in this version',
+    )
+  })
+
+  it('keeps a hidden section muted in a snapshot, as it was when saved', () => {
+    render(
+      <SectionRenderer
+        section={{ ...SECTION, visible: false }}
+        editable
+        reviewing
+        changed={false}
+      />,
+    )
+    expect(sectionEl().className).toContain('opacity-40')
+    expect(screen.getByText('Hidden')).toBeTruthy()
+  })
+})

package/src/__tests__/views/editor-top-bar.render.test.tsx

@@ -12,7 +12,7 @@ const baseProps = {
   publishing: false,
   canEdit: true,
   canPublish: true,
-  viewport: '1080p' as const,
+  viewport: 'wide' as const,
   onViewport: vi.fn(),
   onBack: vi.fn(),
   onPreview: vi.fn(),
@@ -109,3 +109,45 @@ describe('EditorTopBar view-on-site vs view-live', () => {
     expect(screen.queryByRole('button', { name: /View (live|draft)/ })).toBeNull()
   })
 })
+
+describe('EditorTopBar history button', () => {
+  it('reports whether history is showing, since it takes over the rail rather than opening a dialog', () => {
+    const { unmount } = render(<EditorTopBar {...baseProps} onHistory={vi.fn()} />)
+    expect(
+      screen.getByRole('button', { name: 'Version history' }).getAttribute('aria-pressed'),
+    ).toBe('false')
+    unmount()
+
+    render(<EditorTopBar {...baseProps} onHistory={vi.fn()} historyOpen />)
+    const open = screen.getByRole('button', { name: 'Version history' })
+    expect(open.getAttribute('aria-pressed')).toBe('true')
+    expect(open.getAttribute('title')).toBe('Close version history')
+  })
+
+  it('gives every icon-only control a touch target', () => {
+    // These buttons are 32px square, which is a fine mouse target and an
+    // unusable thumb one. `prenta-touch-target` is what grows them under a
+    // coarse pointer — and it is applied per control, so a button written with
+    // a conditional className is easy to leave out. Exactly that happened to
+    // the history button, whose pressed state made it the odd one out.
+    render(
+      <EditorTopBar
+        {...baseProps}
+        onHistory={vi.fn()}
+        onViewOnSite={vi.fn()}
+        onToggleSitePreview={vi.fn()}
+      />,
+    )
+
+    for (const name of [
+      'Page settings',
+      'Version history',
+      'Preview page',
+      'Inline site preview',
+      'View draft on site',
+    ]) {
+      const button = screen.getByRole('button', { name })
+      expect(button.className, `${name} has no touch target`).toContain('prenta-touch-target')
+    }
+  })
+})