@prenta/admin 2.7.0 → 2.8.0

package/src/__tests__/views/header-footer-form.test.ts

@@ -0,0 +1,333 @@
+import { describe, expect, it } from 'vitest'
+import type { RegionSchema } from '@prenta/core'
+
+import {
+  announcementForm,
+  announcementProblem,
+  announcementSaveBody,
+  fieldProblem,
+  fromLocalInput,
+  humanizeKey,
+  menuListSlots,
+  overrideChips,
+  previewChrome,
+  regionForm,
+  regionSaveBody,
+  repoFileUrl,
+  timeAgo,
+  toLocalInput,
+} from '../../views/header-footer/chrome-form.js'
+import {
+  CODE_SAMPLES,
+  LOCAL_DEV_SAMPLE,
+  highlight,
+} from '../../views/header-footer/code-samples.js'
+
+const source = { repo: 'actuate/website', branch: 'main', commit: 'a41f9c2', readAt: '' }
+
+const header: RegionSchema = {
+  region: 'header',
+  component: './src/components/site/Header.astro',
+  variants: { default: 'Default', minimal: 'Logo + CTA' },
+  fields: {
+    logo: { type: 'brand', key: 'logo' },
+    menu: { type: 'menu', default: 'main' },
+    cols: { type: 'menu', list: true, max: 2 },
+    topMenu: { type: 'menu', optional: true },
+    cta: { type: 'link', optional: true },
+    contact: { type: 'link' },
+    phone: { type: 'text', optional: true, format: 'tel' },
+    email: { type: 'text', format: 'email' },
+    copy: { type: 'text', tokens: ['{year}'] },
+    tone: { type: 'select', options: ['dark', 'light'] },
+    sticky: { type: 'boolean', default: true },
+    social: { type: 'social' },
+  },
+  source,
+}
+
+describe('regionForm', () => {
+  it('fills every field with its default, in schema order, and skips brand fields', () => {
+    const form = regionForm(header, null)
+    expect(form.variant).toBe('default')
+    expect(Object.keys(form.fields)).toEqual([
+      'menu',
+      'cols',
+      'topMenu',
+      'cta',
+      'contact',
+      'phone',
+      'email',
+      'copy',
+      'tone',
+      'sticky',
+      'social',
+    ])
+    expect(form.fields).toMatchObject({
+      menu: 'main',
+      cols: [],
+      topMenu: { on: false, value: '' },
+      cta: { on: false, label: '', url: '' },
+      contact: { label: '', url: '' },
+      phone: { on: false, value: '' },
+      tone: 'dark',
+      sticky: true,
+      social: [],
+    })
+  })
+
+  it('keeps saved values that fit and falls back for those that do not', () => {
+    const form = regionForm(header, {
+      region: 'header',
+      variant: 'gone',
+      fields: { menu: 'other', tone: 'purple', sticky: false, phone: { on: true, value: '555' } },
+      orphans: [],
+      updatedBy: null,
+      updatedAt: null,
+    })
+    expect(form.variant).toBe('default')
+    expect(form.fields.menu).toBe('other')
+    expect(form.fields.tone).toBe('dark')
+    expect(form.fields.sticky).toBe(false)
+    expect(form.fields.phone).toEqual({ on: true, value: '555' })
+  })
+})
+
+describe('regionSaveBody', () => {
+  it('sends what PUT /chrome/:region accepts', () => {
+    const form = regionForm(header, null)
+    form.fields.menu = ''
+    form.fields.cols = ['company', '', 'company', 'legal']
+    form.fields.social = [
+      { platform: 'LinkedIn', url: 'https://linkedin.com/x' },
+      { platform: '', url: '' },
+    ]
+    const body = regionSaveBody(header, form)
+    expect(body.variant).toBe('default')
+    // An empty required menu or link is left out; brand fields never go.
+    expect('menu' in body.fields).toBe(false)
+    expect('contact' in body.fields).toBe(false)
+    expect('logo' in body.fields).toBe(false)
+    expect(body.fields.cols).toEqual(['company', 'legal'])
+    expect(body.fields.social).toEqual([{ platform: 'LinkedIn', url: 'https://linkedin.com/x' }])
+  })
+
+  it('leaves out untouched defaults, so the code keeps owning them', () => {
+    const form = regionForm(header, null)
+    form.fields.tone = 'light'
+    const body = regionSaveBody(header, form, {})
+    expect(body.fields).toEqual({ tone: 'light' })
+
+    // A saved value is sent back even when it equals the default.
+    const saved = { sticky: true, topMenu: { on: false, value: '' } }
+    const again = regionSaveBody(
+      header,
+      regionForm(header, {
+        region: 'header',
+        variant: 'default',
+        fields: saved,
+        orphans: [],
+        updatedBy: null,
+        updatedAt: null,
+      }),
+      saved,
+    )
+    expect(again.fields).toEqual(saved)
+  })
+})
+
+describe('menuListSlots', () => {
+  it('starts at three, grows as the list fills, and stops at max', () => {
+    expect(menuListSlots({ max: 3 }, 0)).toBe(3)
+    expect(menuListSlots({ max: 3 }, 3)).toBe(3)
+    expect(menuListSlots({ max: 2 }, 0)).toBe(2)
+    expect(menuListSlots({}, 0)).toBe(3)
+    expect(menuListSlots({}, 3)).toBe(4)
+    expect(menuListSlots({}, 20)).toBe(20)
+    // Never fewer than are saved, so each can be cleared.
+    expect(menuListSlots({ max: 2 }, 4)).toBe(4)
+  })
+})
+
+describe('fieldProblem', () => {
+  const fields = header.fields
+  it('mirrors the API checks', () => {
+    expect(fieldProblem(fields.topMenu!, { on: true, value: '' })).toBe(
+      'Pick a menu, or turn this off.',
+    )
+    expect(fieldProblem(fields.topMenu!, { on: false, value: '' })).toBeNull()
+    expect(fieldProblem(fields.cols!, ['a', 'b', 'c'])).toBe('Pick at most 2 menus.')
+    expect(fieldProblem({ type: 'menu', list: true }, ['a', 'b', 'c', 'd'])).toBeNull()
+    expect(fieldProblem(fields.cta!, { on: true, label: 'Go', url: '' })).toBe('Add the link URL.')
+    expect(fieldProblem(fields.cta!, { on: false, label: 'Go', url: '' })).toBeNull()
+    expect(fieldProblem(fields.cta!, { on: true, label: 'Go', url: 'javascript:x' })).toBe(
+      'Links can be a site path or an http(s), mailto or tel link.',
+    )
+    expect(fieldProblem(fields.contact!, { label: '', url: '' })).toBeNull()
+    expect(fieldProblem(fields.phone!, { on: true, value: 'call me' })).toBe(
+      'Enter a phone number.',
+    )
+    expect(fieldProblem(fields.email!, 'nope')).toBe('Enter an email address.')
+    expect(fieldProblem(fields.email!, 'a@b.co')).toBeNull()
+    expect(fieldProblem({ type: 'textarea', max: 3 }, 'abcd')).toBe('Keep it to 3 characters.')
+    expect(fieldProblem(fields.social!, [{ platform: '', url: 'https://x.com' }])).toBe(
+      'Pick a platform for each link.',
+    )
+  })
+})
+
+describe('announcement', () => {
+  const saved = {
+    id: 'ann_1',
+    on: true,
+    text: 'Hello',
+    link: null,
+    tone: 'brand' as const,
+    dismissible: true,
+    schedule: { startsAt: '2026-11-03T17:00:00.000Z', endsAt: null },
+  }
+
+  it('round-trips the schedule through datetime-local in the local zone', () => {
+    const form = announcementForm(saved)
+    expect(form.scheduled).toBe(true)
+    expect(form.startsAt).toBe(toLocalInput('2026-11-03T17:00:00.000Z'))
+    expect(fromLocalInput(form.startsAt)).toBe('2026-11-03T17:00:00.000Z')
+    expect(fromLocalInput('')).toBeNull()
+    expect(toLocalInput(null)).toBe('')
+    const body = announcementSaveBody(form)
+    expect(body).toEqual({
+      on: true,
+      text: 'Hello',
+      link: null,
+      tone: 'brand',
+      dismissible: true,
+      schedule: { startsAt: '2026-11-03T17:00:00.000Z', endsAt: null },
+    })
+    expect(announcementSaveBody({ ...form, scheduled: false }).schedule).toBeNull()
+  })
+
+  it('sends an untouched time back as saved, even in a repeated clock-change hour', () => {
+    // Each of these is the second of two equal local times somewhere: the
+    // fall-back hour in Los Angeles, New York and London.
+    for (const iso of [
+      '2026-11-01T09:30:00.000Z',
+      '2026-11-01T06:30:00.000Z',
+      '2026-10-25T01:30:00.000Z',
+    ]) {
+      const form = announcementForm({ ...saved, schedule: { startsAt: iso, endsAt: null } })
+      expect(announcementSaveBody(form).schedule?.startsAt).toBe(iso)
+    }
+  })
+
+  it('says what the API would refuse', () => {
+    const form = announcementForm(saved)
+    expect(announcementProblem(form)).toBeNull()
+    expect(announcementProblem({ ...form, text: ' ' })).toBe(
+      'Add a message before turning the bar on.',
+    )
+    expect(announcementProblem({ ...form, on: false, text: '' })).toBeNull()
+    expect(announcementProblem({ ...form, linkLabel: 'Book' })).toBe(
+      'Add the link URL, or clear the link text.',
+    )
+    expect(announcementProblem({ ...form, text: 'x'.repeat(111) })).toBe(
+      'Keep the message to 110 characters.',
+    )
+    expect(announcementProblem({ ...form, startsAt: '', endsAt: '' })).toBe(
+      'Pick when the bar starts or ends, or turn the schedule off.',
+    )
+  })
+})
+
+describe('overrideChips', () => {
+  const page = { id: 'p', collection: 'pages', title: 'T', path: '/t', locale: null }
+  it('writes the kit chips', () => {
+    expect(overrideChips({ ...page, header: { variant: 'minimal' } }, 'header')).toEqual([
+      'header:minimal',
+    ])
+    expect(
+      overrideChips({ ...page, header: { fields: { cta: { on: false }, menu: 'x' } } }, 'header'),
+    ).toEqual(['header.cta: off', 'header.menu'])
+    expect(overrideChips({ ...page, footer: null }, 'footer')).toEqual(['footer: none'])
+    expect(overrideChips({ ...page, footer: {} }, 'footer')).toEqual(['footer: inherits'])
+    expect(overrideChips({ ...page, footer: null }, 'header')).toEqual([])
+  })
+})
+
+describe('source card helpers', () => {
+  it('links the component in the repo', () => {
+    expect(repoFileUrl(source, './src/components/site/Header.astro')).toBe(
+      'https://github.com/actuate/website/blob/a41f9c2/src/components/site/Header.astro',
+    )
+    expect(
+      repoFileUrl({ ...source, repo: 'https://gitlab.com/acme/site.git' }, 'Header.astro'),
+    ).toBe('https://gitlab.com/acme/site/blob/a41f9c2/Header.astro')
+    expect(repoFileUrl({ ...source, repo: 'javascript:alert(1)' }, 'x')).toBeNull()
+    expect(repoFileUrl({ ...source, repo: '' }, 'x')).toBeNull()
+  })
+
+  it('says how long ago', () => {
+    const now = Date.parse('2026-10-21T12:00:00Z')
+    expect(timeAgo('2026-10-21T11:59:30Z', now)).toBe('just now')
+    expect(timeAgo('2026-10-21T11:59:00Z', now)).toBe('1 minute ago')
+    expect(timeAgo('2026-10-21T10:00:00Z', now)).toBe('2 hours ago')
+    expect(timeAgo('2026-10-18T12:00:00Z', now)).toBe('3 days ago')
+    expect(timeAgo(null, now)).toBe('never')
+  })
+
+  it('names keys', () => {
+    expect(humanizeKey('topMenu')).toBe('Top menu')
+    expect(humanizeKey('legal_menu')).toBe('Legal menu')
+  })
+})
+
+describe('previewChrome', () => {
+  it('sends the draft in the /public/chrome shape', () => {
+    const form = regionForm(header, null)
+    form.fields.cta = { on: false, label: 'Go', url: '/go' }
+    form.fields.copy = '© {year} Acme'
+    form.fields.cols = ['company']
+    const chrome = previewChrome({ header: { schema: header, form } }, null, {
+      menus: [
+        {
+          slug: 'company',
+          name: 'Company',
+          items: [{ id: '1', label: 'About', url: '/about', button: false, children: [] }],
+        },
+      ],
+      siteTitle: 'Acme',
+      now: new Date('2026-10-21T12:00:00Z'),
+    })
+    expect(chrome.announcement).toBeNull()
+    expect(chrome.header?.variant).toBe('default')
+    expect(chrome.header?.fields).toMatchObject({
+      logo: null,
+      cta: null,
+      copy: '© 2026 Acme',
+      cols: [{ id: 'company', name: 'Company', items: [{ label: 'About', url: '/about' }] }],
+      menu: null,
+      sticky: true,
+    })
+  })
+})
+
+describe('highlight', () => {
+  it('gives back each sample exactly, with comments, strings and keywords marked', () => {
+    for (const sample of [...CODE_SAMPLES.map((s) => s.src), LOCAL_DEV_SAMPLE]) {
+      expect(
+        highlight(sample)
+          .map((token) => token.text)
+          .join(''),
+      ).toBe(sample)
+    }
+    const tokens = highlight("import { a } from 'x'; // note")
+    expect(tokens).toEqual([
+      { kind: 'keyword', text: 'import' },
+      { kind: 'plain', text: ' { a } ' },
+      { kind: 'keyword', text: 'from' },
+      { kind: 'plain', text: ' ' },
+      { kind: 'string', text: "'x'" },
+      { kind: 'plain', text: '; ' },
+      { kind: 'comment', text: '// note' },
+    ])
+  })
+})