@prenta/admin 2.7.0 → 2.8.0

package/src/__tests__/views/appearance-chrome.render.test.tsx

@@ -0,0 +1,818 @@
+// @vitest-environment happy-dom
+// @vitest-environment-options {"settings":{"disableIframePageLoading":true}}
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+/**
+ * Appearance → Header & Footer (P-11, P-12, P-13) against a fake `/chrome/*`
+ * API: every tab renders from the schema and saved values, saves send the
+ * ETag as `If-Match`, and the Developer tab's Copy puts the exact sample on
+ * the clipboard.
+ */
+
+interface Call {
+  endpoint: string
+  method: string
+  headers: Record<string, string>
+  body: any
+}
+
+const HOUR = 3_600_000
+
+function schemas() {
+  const readAt = new Date(Date.now() - 2 * HOUR).toISOString()
+  const source = { repo: 'actuate/website', branch: 'main', commit: 'a41f9c2e0b1d', readAt }
+  return [
+    {
+      region: 'header',
+      component: './src/components/site/Header.astro',
+      variants: { default: 'Default', centered: 'Centered', minimal: 'Logo + CTA' },
+      fields: {
+        logo: { type: 'brand', key: 'logo', label: 'Logo' },
+        menu: {
+          type: 'menu',
+          default: 'main',
+          label: 'Menu',
+          help: 'Mobile uses the menu assigned to Mobile, or this one.',
+        },
+        cta: { type: 'link', optional: true, label: 'Call-to-action button' },
+        phone: { type: 'text', optional: true, format: 'tel', label: 'Phone number' },
+        topMenu: { type: 'menu', optional: true, label: 'Top bar' },
+        search: { type: 'boolean', default: false, label: 'Search' },
+        sticky: { type: 'boolean', default: true, label: 'Stick to the top when scrolling' },
+        ...extraHeaderFields,
+      },
+      source,
+    },
+    {
+      region: 'footer',
+      component: './src/components/site/Footer.astro',
+      variants: { columns: 'Columns', compact: 'Compact', minimal: 'Single line' },
+      fields: {
+        tone: { type: 'select', options: ['dark', 'light'], default: 'dark', label: 'Background' },
+        about: { type: 'textarea', max: 200, label: 'About text' },
+        cols: { type: 'menu', list: true, max: 3, label: 'Link columns' },
+        social: { type: 'social', label: 'Social links' },
+        legalMenu: { type: 'menu', optional: true, label: 'Legal links' },
+        copy: { type: 'text', tokens: ['{year}'], label: 'Copyright' },
+      },
+      source,
+    },
+  ]
+}
+
+let extraHeaderFields: Record<string, unknown> = {}
+let header: any
+let footer: any
+let announcement: any
+let settings: { revalidateUrl: string | null; previewUrl: string | null }
+let overridesStatus = 200
+let calls: Call[] = []
+let failNext: { endpoint: string; status: number; error: string } | null = null
+
+function reset() {
+  extraHeaderFields = {}
+  header = {
+    region: 'header',
+    variant: 'default',
+    fields: {
+      menu: 'main',
+      cta: { on: true, label: 'Get a free audit', url: '/seo-audit' },
+      phone: { on: true, value: '(757) 555-0100' },
+      topMenu: { on: true, value: 'top' },
+      search: false,
+      sticky: true,
+    },
+    orphans: [{ key: 'tagline', value: 'Since 2009', orphanedAt: new Date().toISOString() }],
+    updatedBy: null,
+    updatedAt: null,
+  }
+  footer = {
+    region: 'footer',
+    variant: 'columns',
+    fields: {
+      tone: 'dark',
+      about: 'Digital marketing for growing businesses.',
+      cols: ['company'],
+      social: [{ platform: 'LinkedIn', url: 'https://linkedin.com/company/actuate' }],
+      legalMenu: { on: true, value: 'legal' },
+      copy: '© {year} Actuate Media. All rights reserved.',
+    },
+    orphans: [],
+    updatedBy: null,
+    updatedAt: null,
+  }
+  announcement = {
+    id: 'ann_1',
+    on: true,
+    text: 'Free SEO audits are back for Q4. Limited spots.',
+    link: { label: 'Book yours', url: '/seo-audit' },
+    tone: 'brand',
+    dismissible: true,
+    schedule: null,
+  }
+  settings = { revalidateUrl: 'https://actuatemedia.com/api/revalidate', previewUrl: null }
+  overridesStatus = 200
+  calls = []
+  failNext = null
+}
+
+const MENUS = [
+  {
+    slug: 'main',
+    title: 'Main',
+    data: {
+      slug: 'main',
+      name: 'Main',
+      items: [
+        { id: 'm1', label: 'Services' },
+        { id: 'm2', label: 'Work' },
+      ],
+    },
+  },
+  {
+    slug: 'top',
+    title: 'Top',
+    data: { slug: 'top', name: 'Top bar', items: [{ id: 't1', label: 'Careers' }] },
+  },
+  {
+    slug: 'company',
+    title: 'Footer · Company',
+    data: { slug: 'company', name: 'Footer · Company', items: [{ id: 'c1', label: 'About' }] },
+  },
+  {
+    slug: 'legal',
+    title: 'Legal',
+    data: { slug: 'legal', name: 'Legal', items: [{ id: 'l1', label: 'Privacy' }] },
+  },
+]
+
+const OVERRIDES = {
+  pages: [
+    {
+      id: 'p1',
+      collection: 'pages',
+      title: 'Free SEO Audit',
+      path: '/seo-audit',
+      locale: null,
+      header: { variant: 'minimal' },
+    },
+    {
+      id: 'p2',
+      collection: 'pages',
+      title: 'Careers',
+      path: '/careers',
+      locale: null,
+      header: { fields: { cta: { on: false } } },
+    },
+    {
+      id: 'p3',
+      collection: 'pages',
+      title: 'Thank you',
+      path: '/thank-you',
+      locale: null,
+      footer: null,
+    },
+  ],
+  truncated: false,
+}
+
+function etag(name: string, value: unknown) {
+  return `W/"${name}-${JSON.stringify(value).length}"`
+}
+
+const cmsApi = vi.fn(async (endpoint: string, options: any = {}) => {
+  const method = (options.method ?? 'GET').toUpperCase()
+  const body = options.body ? JSON.parse(options.body) : undefined
+  calls.push({ endpoint, method, headers: options.headers ?? {}, body })
+  if (failNext && failNext.endpoint === endpoint && method !== 'GET') {
+    const { status, error } = failNext
+    failNext = null
+    return { error, status }
+  }
+  if (endpoint === '/chrome/schema') {
+    return {
+      data: {
+        regions: schemas(),
+        sync: {
+          status: 'synced',
+          source: schemas()[0]!.source,
+          regions: ['header', 'footer'],
+          fieldCount: 13,
+        },
+      },
+      status: 200,
+    }
+  }
+  if (endpoint === '/chrome/header' || endpoint === '/chrome/footer') {
+    const region = endpoint === '/chrome/header' ? 'header' : 'footer'
+    if (method === 'PUT') {
+      const next = {
+        ...(region === 'header' ? header : footer),
+        variant: body.variant,
+        fields: body.fields,
+      }
+      if (region === 'header') header = next
+      else footer = next
+    }
+    const value = region === 'header' ? header : footer
+    return { data: value, status: 200, etag: etag(region, value) }
+  }
+  if (endpoint.startsWith('/chrome/header/orphans/') && method === 'DELETE') {
+    const key = decodeURIComponent(endpoint.split('/').pop()!)
+    header = { ...header, orphans: header.orphans.filter((o: any) => o.key !== key) }
+    return { data: header, status: 200, etag: etag('header', header) }
+  }
+  if (endpoint === '/chrome/announcement') {
+    if (method === 'PUT') {
+      const changed =
+        body.text !== announcement.text ||
+        body.tone !== announcement.tone ||
+        JSON.stringify(body.link) !== JSON.stringify(announcement.link)
+      announcement = { ...body, id: changed ? 'ann_2' : announcement.id }
+    }
+    return { data: announcement, status: 200, etag: etag('announcement', announcement) }
+  }
+  if (endpoint === '/chrome/settings') {
+    if (method === 'PUT') {
+      const created = !settings.revalidateUrl && !!body.revalidateUrl
+      // A key left out is left alone, as on the server.
+      settings = {
+        revalidateUrl: 'revalidateUrl' in body ? body.revalidateUrl : settings.revalidateUrl,
+        previewUrl: 'previewUrl' in body ? body.previewUrl : settings.previewUrl,
+      }
+      return { data: { ...settings, ...(created ? { secret: 'whsec_test' } : {}) }, status: 200 }
+    }
+    return { data: settings, status: 200 }
+  }
+  if (endpoint === '/chrome/overrides') {
+    return overridesStatus === 200
+      ? { data: OVERRIDES, status: 200 }
+      : { error: 'Not found', status: overridesStatus }
+  }
+  if (endpoint.startsWith('/collections/navigations')) {
+    return { data: { docs: MENUS }, status: 200 }
+  }
+  if (endpoint === '/appearance') return { data: { siteTitle: 'Actuate' }, status: 200 }
+  return { error: `Unhandled ${method} ${endpoint}`, status: 404 }
+})
+
+vi.mock('../../lib/api.js', () => ({ cmsApi: (e: string, o?: unknown) => cmsApi(e, o) }))
+const toast = vi.hoisted(() => Object.assign(vi.fn(), { error: vi.fn(), success: vi.fn() }))
+vi.mock('sonner', () => ({ toast }))
+
+const { AppearanceChrome } = await import('../../views/AppearanceChrome.js')
+const { CODE_SAMPLES } = await import('../../views/header-footer/code-samples.js')
+
+const navigate = vi.fn()
+const COLLECTIONS = new Map([
+  ['pages', { slug: 'pages', type: 'page' }],
+  ['navigations', { slug: 'navigations' }],
+])
+
+function renderScreen(role = 'EDITOR', tab?: string) {
+  window.history.replaceState(
+    null,
+    '',
+    tab ? `/admin/appearance/header?tab=${tab}` : '/admin/appearance/header',
+  )
+  return render(
+    <AppearanceChrome
+      onNavigate={navigate}
+      session={{ user: { role } }}
+      collections={COLLECTIONS}
+    />,
+  )
+}
+
+async function loaded() {
+  await screen.findByRole('heading', { name: 'Header & Footer', level: 1 })
+  await waitFor(() => expect(screen.queryByText(/Loading the header and footer/)).toBeNull())
+}
+
+function lastCall(endpoint: string, method: string) {
+  return [...calls].reverse().find((c) => c.endpoint === endpoint && c.method === method)
+}
+
+beforeEach(() => {
+  reset()
+  cmsApi.mockClear()
+  toast.mockClear()
+  toast.error.mockClear()
+  navigate.mockClear()
+})
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('Header & Footer frame', () => {
+  it('shows the kit header, tabs in order and the Live badge', async () => {
+    renderScreen()
+    await loaded()
+    expect(screen.getByText(/Built by your developer in code\./)).toBeTruthy()
+    const tabs = screen.getAllByRole('tab').map((tab) => tab.textContent)
+    expect(tabs).toEqual(['Announcement barLive', 'Header', 'Footer', 'Developer'])
+    expect(
+      screen.getByRole('tab', { name: /Announcement bar/ }).getAttribute('aria-selected'),
+    ).toBe('true')
+    fireEvent.click(screen.getByRole('button', { name: 'Edit menus' }))
+    expect(navigate).toHaveBeenCalledWith('/appearance/menus')
+  })
+
+  it('opens the tab named in ?tab= and puts tab changes in the URL', async () => {
+    renderScreen('EDITOR', 'footer')
+    await loaded()
+    expect(screen.getByRole('tab', { name: 'Footer' }).getAttribute('aria-selected')).toBe('true')
+    fireEvent.click(screen.getByRole('tab', { name: 'Developer' }))
+    expect(navigate).toHaveBeenCalledWith('/appearance/header?tab=developer')
+  })
+})
+
+describe('Announcement bar tab (P-12)', () => {
+  it('renders the message with a live counter, the link, tones and switches', async () => {
+    renderScreen()
+    await loaded()
+    const message = screen.getByLabelText('Message') as HTMLInputElement
+    expect(message.value).toBe(announcement.text)
+    expect(message.maxLength).toBe(110)
+    expect(screen.getByText(/· keep it to one line on mobile\./).textContent).toBe(
+      '47/110 · keep it to one line on mobile.',
+    )
+    fireEvent.change(message, { target: { value: 'Short' } })
+    expect(screen.getByText(/· keep it to one line on mobile\./).textContent).toBe(
+      '5/110 · keep it to one line on mobile.',
+    )
+    expect((screen.getByLabelText('Link text') as HTMLInputElement).value).toBe('Book yours')
+    expect((screen.getByLabelText('Links to') as HTMLInputElement).value).toBe('/seo-audit')
+    const style = screen.getByRole('radiogroup', { name: 'Style' })
+    expect(
+      within(style)
+        .getAllByRole('radio')
+        .map((r) => (r as HTMLInputElement).value),
+    ).toEqual(['brand', 'dark', 'alert'])
+    expect(screen.getByText('Your site styles each tone with its own colors.')).toBeTruthy()
+    expect(
+      screen.getByRole('switch', { name: 'Visitors can dismiss it' }).getAttribute('aria-checked'),
+    ).toBe('true')
+    // The preview mock shows the draft bar.
+    expect(document.querySelector('[data-preview-announcement]')?.textContent).toContain('Short')
+  })
+
+  it('saves with If-Match, without an id, and a changed message gets a new id', async () => {
+    renderScreen()
+    await loaded()
+    fireEvent.change(screen.getByLabelText('Message'), { target: { value: 'New message' } })
+    fireEvent.click(screen.getByRole('radio', { name: 'Alert' }))
+    fireEvent.click(await screen.findByRole('button', { name: 'Save' }))
+    await waitFor(() => expect(toast).toHaveBeenCalledWith('Saved · site revalidated'))
+    const put = lastCall('/chrome/announcement', 'PUT')!
+    expect(put.headers['If-Match']).toMatch(/^W\/"announcement-/)
+    expect(put.body).toEqual({
+      on: true,
+      text: 'New message',
+      link: { label: 'Book yours', url: '/seo-audit' },
+      tone: 'alert',
+      dismissible: true,
+      schedule: null,
+    })
+    expect(announcement.id).toBe('ann_2')
+    await waitFor(() => expect(screen.queryByRole('button', { name: 'Save' })).toBeNull())
+  })
+
+  it('turning the bar off greys the body, and the badge follows the save', async () => {
+    renderScreen()
+    await loaded()
+    fireEvent.click(screen.getByRole('switch', { name: 'Show announcement bar' }))
+    const body = document.querySelector('[data-off]') as HTMLElement
+    expect(body.className).toContain('opacity-50')
+    expect(body.hasAttribute('inert')).toBe(true)
+    // Live until the change is saved.
+    expect(screen.getByRole('tab', { name: /Announcement bar/ }).textContent).toContain('Live')
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    await waitFor(() =>
+      expect(screen.getByRole('tab', { name: /Announcement bar/ }).textContent).toContain('Off'),
+    )
+    expect(lastCall('/chrome/announcement', 'PUT')!.body.on).toBe(false)
+  })
+
+  it('schedules with zoned ISO times and refuses an end before the start', async () => {
+    renderScreen()
+    await loaded()
+    fireEvent.click(screen.getByRole('switch', { name: 'Schedule' }))
+    const starts = screen.getByLabelText('Starts')
+    const ends = screen.getByLabelText('Ends')
+    fireEvent.change(starts, { target: { value: '2026-11-01T09:00' } })
+    fireEvent.change(ends, { target: { value: '2026-10-31T09:00' } })
+    expect(await screen.findByText('The end has to be after the start.')).toBeTruthy()
+    expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(true)
+
+    fireEvent.change(ends, { target: { value: '2026-11-08T17:30' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    await waitFor(() => expect(lastCall('/chrome/announcement', 'PUT')).toBeTruthy())
+    const { schedule } = lastCall('/chrome/announcement', 'PUT')!.body
+    expect(schedule).toEqual({
+      startsAt: new Date('2026-11-01T09:00').toISOString(),
+      endsAt: new Date('2026-11-08T17:30').toISOString(),
+    })
+    expect(schedule.startsAt).toMatch(/Z$/)
+  })
+
+  it('keeps the draft and says why when the save is stale', async () => {
+    renderScreen()
+    await loaded()
+    failNext = {
+      endpoint: '/chrome/announcement',
+      status: 412,
+      error: 'This changed since you opened it. Reload to see the latest, then save again.',
+    }
+    fireEvent.change(screen.getByLabelText('Message'), { target: { value: 'Mine' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    await waitFor(() =>
+      expect(toast.error).toHaveBeenCalledWith(
+        'Announcement bar: This changed since you opened it. Reload to see the latest, then save again.',
+      ),
+    )
+    expect((screen.getByLabelText('Message') as HTMLInputElement).value).toBe('Mine')
+    expect(screen.getByRole('button', { name: 'Save' })).toBeTruthy()
+  })
+})
+
+describe('Header tab (P-11)', () => {
+  it('shows the source, variants from the schema and a field per schema key', async () => {
+    renderScreen('EDITOR', 'header')
+    await loaded()
+    expect(screen.getByText('src/components/site/Header.astro')).toBeTruthy()
+    expect(screen.getByText('Schema in sync · actuate/website@a41f9c2 · 2 hours ago')).toBeTruthy()
+    expect(screen.getByRole('link', { name: 'View in repo ↗' }).getAttribute('href')).toBe(
+      'https://github.com/actuate/website/blob/a41f9c2e0b1d/src/components/site/Header.astro',
+    )
+    const variants = screen.getByRole('radiogroup', { name: 'header variant' })
+    expect(
+      within(variants)
+        .getAllByRole('radio')
+        .map((r) => r.textContent),
+    ).toEqual(['Defaultdefault', 'Centeredcentered', 'Logo + CTAminimal'])
+    expect(
+      within(variants)
+        .getByRole('radio', { name: /Default/ })
+        .getAttribute('aria-checked'),
+    ).toBe('true')
+    const keys = [...document.querySelectorAll('[data-field]')].map((el) =>
+      el.getAttribute('data-field'),
+    )
+    expect(keys).toEqual(['logo', 'menu', 'cta', 'phone', 'topMenu', 'search', 'sticky'])
+    expect(screen.getByText('From brand settings')).toBeTruthy()
+    expect((screen.getByLabelText('Button text') as HTMLInputElement).value).toBe(
+      'Get a free audit',
+    )
+    expect((screen.getByRole('textbox', { name: 'Phone number' }) as HTMLInputElement).value).toBe(
+      '(757) 555-0100',
+    )
+    expect(
+      screen
+        .getByRole('switch', { name: 'Stick to the top when scrolling' })
+        .getAttribute('aria-checked'),
+    ).toBe('true')
+  })
+
+  it('shows a field the schema adds, with no admin change', async () => {
+    extraHeaderFields = {
+      promo: { type: 'text', label: 'Promo line', help: 'Shown beside the logo.' },
+    }
+    renderScreen('EDITOR', 'header')
+    await loaded()
+    expect(document.querySelector('[data-field="promo"]')).toBeTruthy()
+    const promo = screen.getByLabelText('Promo line') as HTMLInputElement
+    expect(screen.getByText('Shown beside the logo.')).toBeTruthy()
+    fireEvent.change(promo, { target: { value: 'Now booking' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    await waitFor(() => expect(lastCall('/chrome/header', 'PUT')).toBeTruthy())
+    expect(lastCall('/chrome/header', 'PUT')!.body.fields.promo).toBe('Now booking')
+  })
+
+  it('saves the variant and fields with If-Match', async () => {
+    renderScreen('EDITOR', 'header')
+    await loaded()
+    fireEvent.click(screen.getByRole('radio', { name: /Logo \+ CTA/ }))
+    fireEvent.click(screen.getByRole('switch', { name: 'Search' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    await waitFor(() => expect(toast).toHaveBeenCalledWith('Saved · site revalidated'))
+    const put = lastCall('/chrome/header', 'PUT')!
+    expect(put.headers['If-Match']).toMatch(/^W\/"header-/)
+    expect(put.body).toEqual({
+      variant: 'minimal',
+      fields: {
+        menu: 'main',
+        cta: { on: true, label: 'Get a free audit', url: '/seo-audit' },
+        phone: { on: true, value: '(757) 555-0100' },
+        topMenu: { on: true, value: 'top' },
+        search: true,
+        sticky: true,
+      },
+    })
+  })
+
+  it('blocks Save with the reason when a value would be refused', async () => {
+    renderScreen('EDITOR', 'header')
+    await loaded()
+    fireEvent.change(screen.getByLabelText('Links to'), {
+      target: { value: 'javascript:alert(1)' },
+    })
+    expect(
+      await screen.findByText('Links can be a site path or an http(s), mailto or tel link.'),
+    ).toBeTruthy()
+    expect((screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement).disabled).toBe(true)
+  })
+
+  it('shows the orphan row from `orphans`, and Remove now deletes it', async () => {
+    renderScreen('EDITOR', 'header')
+    await loaded()
+    expect(screen.getByText('1 saved value isn’t in the schema anymore:')).toBeTruthy()
+    expect(screen.getByText('header.tagline')).toBeTruthy()
+    expect(
+      screen.getByText(/It’s no longer sent to the site and will be removed in 30 days\./),
+    ).toBeTruthy()
+    fireEvent.click(screen.getByRole('button', { name: 'Remove now' }))
+    await waitFor(() => expect(toast).toHaveBeenCalledWith('Removed header.tagline'))
+    expect(lastCall('/chrome/header/orphans/tagline', 'DELETE')).toBeTruthy()
+    expect(screen.queryByText('header.tagline')).toBeNull()
+    // Not a form change.
+    expect(screen.queryByRole('button', { name: 'Save' })).toBeNull()
+  })
+
+  it('keeps the old ETag when Remove now shows someone else saved meanwhile', async () => {
+    const loadedTag = etag('header', header)
+    renderScreen('EDITOR', 'header')
+    await loaded()
+    // Another editor saves the header after this form loaded.
+    header = { ...header, fields: { ...header.fields, sticky: false } }
+    fireEvent.click(screen.getByRole('button', { name: 'Remove now' }))
+    await waitFor(() =>
+      expect(toast.error).toHaveBeenCalledWith(
+        'Removed. Someone else changed the header since you opened it: reload to see their changes before you save.',
+      ),
+    )
+    expect(screen.queryByText('header.tagline')).toBeNull()
+    fireEvent.change(screen.getByLabelText('Button text'), { target: { value: 'Mine' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    await waitFor(() => expect(lastCall('/chrome/header', 'PUT')).toBeTruthy())
+    // The stale form saves against the ETag it loaded with, so the server can refuse it.
+    expect(lastCall('/chrome/header', 'PUT')!.headers['If-Match']).toBe(loadedTag)
+  })
+
+  it('lists the pages that override the header', async () => {
+    renderScreen('EDITOR', 'header')
+    await loaded()
+    const card = screen.getByRole('region', { name: 'Page overrides' })
+    const rows = within(card).getAllByRole('link')
+    expect(rows.map((row) => row.textContent)).toEqual([
+      'Free SEO Auditheader:minimal/seo-audit',
+      'Careersheader.cta: off/careers',
+    ])
+    fireEvent.click(rows[0]!)
+    expect(navigate).toHaveBeenCalledWith('/pages/p1/edit')
+  })
+
+  it('says so when the CMS is too old to list overrides', async () => {
+    overridesStatus = 404
+    renderScreen('EDITOR', 'header')
+    await loaded()
+    expect(
+      screen.getByText('Update the CMS to list the pages that override the header.'),
+    ).toBeTruthy()
+  })
+
+  it('says so when the overrides fail to load', async () => {
+    overridesStatus = 500
+    renderScreen('EDITOR', 'header')
+    await loaded()
+    expect(screen.getByText('Couldn’t load the pages that override the header.')).toBeTruthy()
+  })
+
+  it('previews the draft in the mock, at desktop and mobile widths', async () => {
+    renderScreen('EDITOR', 'header')
+    await loaded()
+    expect(
+      screen.getByText('built-in mock · set a Preview URL to render your components'),
+    ).toBeTruthy()
+    const head = document.querySelector('[data-preview-header]') as HTMLElement
+    expect(head.textContent).toContain('Services')
+    expect(head.textContent).toContain('Get a free audit')
+    fireEvent.change(screen.getByLabelText('Button text'), { target: { value: 'Call us' } })
+    expect(document.querySelector('[data-preview-header]')!.textContent).toContain('Call us')
+    fireEvent.click(screen.getByRole('radio', { name: 'Mobile' }))
+    expect(document.querySelector('[data-preview-site]')!.getAttribute('data-viewport')).toBe('mob')
+  })
+
+  it('is read-only for a viewer', async () => {
+    renderScreen('VIEWER', 'header')
+    await loaded()
+    expect(screen.getByRole('note').textContent).toContain('only editors and admins can change')
+    expect((screen.getByLabelText('Button text') as HTMLInputElement).disabled).toBe(true)
+    expect((screen.getByRole('button', { name: 'Remove now' }) as HTMLButtonElement).disabled).toBe(
+      true,
+    )
+    expect((screen.getByRole('radio', { name: /Centered/ }) as HTMLButtonElement).disabled).toBe(
+      true,
+    )
+  })
+})
+
+describe('Footer tab (P-11)', () => {
+  it('renders the footer variants and fields from its schema', async () => {
+    renderScreen('EDITOR', 'footer')
+    await loaded()
+    expect(screen.getByText('src/components/site/Footer.astro')).toBeTruthy()
+    const variants = screen.getByRole('radiogroup', { name: 'footer variant' })
+    expect(
+      within(variants)
+        .getAllByRole('radio')
+        .map((r) => r.textContent),
+    ).toEqual(['Columnscolumns', 'Compactcompact', 'Single lineminimal'])
+    const background = screen.getByRole('radiogroup', { name: 'Background' })
+    expect(within(background).getAllByRole('radio')).toHaveLength(2)
+    expect((screen.getByLabelText('Link columns 1') as HTMLSelectElement).value).toBe('company')
+    expect(screen.getByLabelText('Link columns 3')).toBeTruthy()
+    expect(screen.getByText('{year} updates automatically.')).toBeTruthy()
+    const card = screen.getByRole('region', { name: 'Page overrides' })
+    expect(
+      within(card)
+        .getAllByRole('link')
+        .map((row) => row.textContent),
+    ).toEqual(['Thank youfooter: none/thank-you'])
+    // The mock fills {year}.
+    expect(document.querySelector('[data-preview-footer]')!.textContent).toContain(
+      `© ${new Date().getFullYear()} Actuate Media`,
+    )
+  })
+
+  it('adds and removes social links and saves the list', async () => {
+    renderScreen('EDITOR', 'footer')
+    await loaded()
+    fireEvent.click(screen.getByRole('button', { name: 'Add link' }))
+    const urls = screen.getAllByLabelText(/ URL$/) as HTMLInputElement[]
+    expect(urls).toHaveLength(2)
+    fireEvent.change(urls[1]!, { target: { value: 'https://facebook.com/actuate' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Remove LinkedIn' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    await waitFor(() => expect(lastCall('/chrome/footer', 'PUT')).toBeTruthy())
+    expect(lastCall('/chrome/footer', 'PUT')!.body.fields.social).toEqual([
+      { platform: 'Facebook', url: 'https://facebook.com/actuate' },
+    ])
+  })
+})
+
+describe('Preview URL', () => {
+  it('puts the token in the query, keeping a fragment and replacing an old draft', async () => {
+    settings.previewUrl = 'https://preview.example.com/__prenta/chrome?draft=old&site=main#chrome'
+    renderScreen('EDITOR', 'header')
+    await loaded()
+    const frame = screen.getByTitle('Site preview with draft values') as HTMLIFrameElement
+    const src = new URL(frame.getAttribute('src')!)
+    expect(src.pathname).toBe('/__prenta/chrome')
+    expect(src.hash).toBe('#chrome')
+    expect(src.searchParams.getAll('draft')).toHaveLength(1)
+    expect(src.searchParams.get('draft')).toMatch(/^[0-9a-f]{24}$/)
+    expect(src.searchParams.get('site')).toBe('main')
+  })
+
+  it('renders the site in an iframe and posts the draft to its origin only', async () => {
+    settings.previewUrl = 'https://preview.example.com/__prenta/chrome'
+    renderScreen('EDITOR', 'header')
+    await loaded()
+    const frame = screen.getByTitle('Site preview with draft values') as HTMLIFrameElement
+    const src = new URL(frame.getAttribute('src')!)
+    expect(src.origin + src.pathname).toBe('https://preview.example.com/__prenta/chrome')
+    const token = src.searchParams.get('draft')!
+    expect(token).toMatch(/^[0-9a-f]{24}$/)
+    expect(screen.getByText('preview.example.com · draft values')).toBeTruthy()
+
+    const post = vi.fn()
+    Object.defineProperty(frame, 'contentWindow', {
+      value: { postMessage: post },
+      configurable: true,
+    })
+    fireEvent.change(screen.getByLabelText('Button text'), { target: { value: 'Call us' } })
+    await waitFor(() => expect(post).toHaveBeenCalled())
+    const [message, origin] = post.mock.calls.at(-1)!
+    expect(origin).toBe('https://preview.example.com')
+    expect(message.type).toBe('prenta:chrome-preview')
+    expect(message.token).toBe(token)
+    expect(message.chrome.header.fields.cta).toEqual({ label: 'Call us', url: '/seo-audit' })
+    expect(message.chrome.header.fields.menu).toEqual({
+      id: 'main',
+      name: 'Main',
+      items: [
+        { label: 'Services', url: '' },
+        { label: 'Work', url: '' },
+      ],
+    })
+    expect(message.chrome.announcement).toMatchObject({ id: 'ann_1', tone: 'brand' })
+
+    // A ready message from the frame gets the draft again; one from elsewhere doesn't.
+    post.mockClear()
+    await act(async () => {
+      window.dispatchEvent(
+        new MessageEvent('message', {
+          origin: 'https://evil.example',
+          data: { type: 'prenta:chrome-preview-ready', token },
+        }),
+      )
+    })
+    expect(post).not.toHaveBeenCalled()
+  })
+})
+
+describe('Developer tab (P-13)', () => {
+  it('shows the samples, the live schema status, settings and local dev', async () => {
+    renderScreen('ADMIN', 'developer')
+    await loaded()
+    const wired = screen.getByRole('region', { name: 'How it’s wired' })
+    expect(
+      within(wired)
+        .getAllByRole('tab')
+        .map((t) => t.textContent),
+    ).toEqual(['Schema', 'Layout', 'API'])
+    expect(within(wired).getByText('prenta.config.ts')).toBeTruthy()
+    expect(within(wired).getByRole('tabpanel').textContent).toContain(
+      "import { defineRegion, field } from '@prenta/core/config';",
+    )
+    fireEvent.click(within(wired).getByRole('tab', { name: 'API' }))
+    expect(within(wired).getByText('GET /api/cms/public/chrome?path=/seo-audit')).toBeTruthy()
+
+    const schema = screen.getByRole('region', { name: 'Schema' })
+    expect(within(schema).getByText('● In sync')).toBeTruthy()
+    expect(within(schema).getByText('actuate/website@main')).toBeTruthy()
+    expect(within(schema).getByText('a41f9c2 · 2 hours ago')).toBeTruthy()
+    expect(within(schema).getByText('header · footer · announcement')).toBeTruthy()
+    expect(within(schema).getByText('13')).toBeTruthy()
+
+    expect((screen.getByLabelText('Revalidate URL') as HTMLInputElement).value).toBe(
+      'https://actuatemedia.com/api/revalidate',
+    )
+    expect((screen.getByLabelText('Preview URL') as HTMLInputElement).value).toBe('')
+    const local = screen.getByRole('region', { name: 'Local dev' })
+    expect(local.textContent).toContain('npx prenta pull chrome   // writes .prenta/chrome.json')
+  })
+
+  it('Copy puts the exact sample on the clipboard', async () => {
+    const writeText = vi.fn(async () => undefined)
+    vi.stubGlobal('navigator', { ...navigator, clipboard: { writeText } })
+    renderScreen('ADMIN', 'developer')
+    await loaded()
+    const wired = screen.getByRole('region', { name: 'How it’s wired' })
+    for (const sample of CODE_SAMPLES) {
+      fireEvent.click(within(wired).getByRole('tab', { name: sample.label }))
+      fireEvent.click(within(wired).getByRole('button', { name: `Copy ${sample.file}` }))
+      await waitFor(() => expect(writeText).toHaveBeenLastCalledWith(sample.src))
+      // The rendered code is the same text.
+      expect(within(wired).getByRole('tabpanel').textContent).toBe(
+        `Copy${sample.file}${sample.src}`,
+      )
+    }
+    expect(toast).toHaveBeenCalledWith('Copied')
+  })
+
+  it('saves the settings and shows a new signing secret once', async () => {
+    settings.revalidateUrl = null
+    renderScreen('ADMIN', 'developer')
+    await loaded()
+    fireEvent.change(screen.getByLabelText('Revalidate URL'), {
+      target: { value: 'https://example.com/api/revalidate' },
+    })
+    fireEvent.change(screen.getByLabelText('Preview URL'), {
+      target: { value: 'https://preview.example.com/__prenta/chrome' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    await waitFor(() => expect(toast).toHaveBeenCalledWith('Saved'))
+    expect(lastCall('/chrome/settings', 'PUT')!.body).toEqual({
+      revalidateUrl: 'https://example.com/api/revalidate',
+      previewUrl: 'https://preview.example.com/__prenta/chrome',
+    })
+    expect(screen.getByText('whsec_test')).toBeTruthy()
+  })
+
+  it('sends only the URL that changed', async () => {
+    renderScreen('ADMIN', 'developer')
+    await loaded()
+    fireEvent.change(screen.getByLabelText('Preview URL'), {
+      target: { value: 'https://preview.example.com/__prenta/chrome' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    await waitFor(() => expect(toast).toHaveBeenCalledWith('Saved'))
+    expect(lastCall('/chrome/settings', 'PUT')!.body).toEqual({
+      previewUrl: 'https://preview.example.com/__prenta/chrome',
+    })
+  })
+
+  it('only admins can change the settings', async () => {
+    settings.revalidateUrl = null
+    renderScreen('EDITOR', 'developer')
+    await loaded()
+    const revalidate = screen.getByLabelText('Revalidate URL') as HTMLInputElement
+    expect(revalidate.disabled).toBe(true)
+    expect(revalidate.placeholder).toBe('Only admins can see this')
+    expect((screen.getByLabelText('Preview URL') as HTMLInputElement).disabled).toBe(true)
+  })
+})