@prenta/admin 0.92.0 → 0.94.0

package/src/__tests__/components/editor-rail.render.test.tsx

@@ -0,0 +1,192 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { EditorRail, RailHeader } from '../../components/EditorRail.js'
+import { EditorRailTabs, type RailTab } from '../../components/EditorRailTabs.js'
+
+const storage = new Map<string, string>()
+vi.stubGlobal('localStorage', {
+  getItem: (k: string) => storage.get(k) ?? null,
+  setItem: (k: string, v: string) => void storage.set(k, String(v)),
+  removeItem: (k: string) => void storage.delete(k),
+  clear: () => storage.clear(),
+})
+
+function renderRail() {
+  return render(
+    <EditorRail collapsedLabel="Sections">
+      {({ width, dragging, collapse }) => (
+        <>
+          <RailHeader
+            title="Page content"
+            width={width}
+            dragging={dragging}
+            onCollapse={collapse}
+          />
+          <p>panel body</p>
+        </>
+      )}
+    </EditorRail>,
+  )
+}
+
+describe('EditorRail', () => {
+  it('exposes the resize handle as an operable separator', () => {
+    // A bare div with a pointerdown handler is invisible to keyboard and
+    // assistive-tech users — the role and value range are what make the rail
+    // resizable without a mouse.
+    renderRail()
+    const handle = screen.getByRole('separator', { name: 'Resize panel' })
+    expect(handle.getAttribute('aria-orientation')).toBe('vertical')
+    expect(handle.getAttribute('aria-valuemin')).toBe('300')
+    expect(handle.getAttribute('aria-valuemax')).toBe('620')
+    expect(handle.getAttribute('tabindex')).toBe('0')
+  })
+
+  it('resizes with arrow keys and clamps at the range edges', () => {
+    renderRail()
+    const handle = screen.getByRole('separator', { name: 'Resize panel' })
+
+    fireEvent.keyDown(handle, { key: 'ArrowRight' })
+    expect(handle.getAttribute('aria-valuenow')).toBe('376')
+
+    fireEvent.keyDown(handle, { key: 'ArrowLeft', shiftKey: true })
+    expect(handle.getAttribute('aria-valuenow')).toBe('328')
+
+    for (let i = 0; i < 10; i++) fireEvent.keyDown(handle, { key: 'ArrowLeft', shiftKey: true })
+    expect(handle.getAttribute('aria-valuenow')).toBe('300')
+  })
+
+  it('resets to the default width on Home', () => {
+    renderRail()
+    const handle = screen.getByRole('separator', { name: 'Resize panel' })
+    fireEvent.keyDown(handle, { key: 'ArrowRight' })
+    fireEvent.keyDown(handle, { key: 'Home' })
+    expect(handle.getAttribute('aria-valuenow')).toBe('360')
+  })
+
+  it('resets to the default width on double-click', () => {
+    renderRail()
+    const handle = screen.getByRole('separator', { name: 'Resize panel' })
+    fireEvent.keyDown(handle, { key: 'ArrowRight' })
+    fireEvent.doubleClick(handle)
+    expect(handle.getAttribute('aria-valuenow')).toBe('360')
+  })
+
+  it('persists the width across mounts', () => {
+    const first = renderRail()
+    fireEvent.keyDown(screen.getByRole('separator', { name: 'Resize panel' }), {
+      key: 'ArrowRight',
+      shiftKey: true,
+    })
+    expect(localStorage.getItem('pb.panelW')).toBe('408')
+    first.unmount()
+
+    renderRail()
+    expect(
+      screen.getByRole('separator', { name: 'Resize panel' }).getAttribute('aria-valuenow'),
+    ).toBe('408')
+    storage.clear()
+  })
+
+  it('unmounts the panel when collapsed instead of leaving a zero-width sliver', () => {
+    // A 0-width panel keeps its contents in the accessibility tree, so a
+    // screen-reader user lands inside a panel sighted users cannot see.
+    renderRail()
+    fireEvent.click(screen.getByRole('button', { name: 'Collapse Page content panel' }))
+
+    expect(screen.queryByText('panel body')).toBeNull()
+    expect(screen.queryByRole('separator', { name: 'Resize panel' })).toBeNull()
+    expect(screen.getByRole('button', { name: 'Expand Sections panel' })).toBeTruthy()
+  })
+
+  it('restores the panel from the collapsed strip', () => {
+    renderRail()
+    fireEvent.click(screen.getByRole('button', { name: 'Collapse Page content panel' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Expand Sections panel' }))
+    expect(screen.getByText('panel body')).toBeTruthy()
+  })
+})
+
+const TABS: RailTab[] = [
+  { id: 'sections', label: 'Sections', title: 'Page content', count: 4 },
+  { id: 'seo', label: 'SEO & GEO', title: 'Search & AI readiness', score: 72 },
+]
+
+describe('EditorRailTabs', () => {
+  it('marks the active tab and links it to its panel', () => {
+    render(<EditorRailTabs tabs={TABS} active="sections" onChange={vi.fn()} />)
+    const active = screen.getByRole('tab', { selected: true })
+    expect(active.textContent).toContain('Sections')
+    expect(active.getAttribute('aria-controls')).toBe('rail-panel-sections')
+  })
+
+  it('shows the section count without opening the tab', () => {
+    render(<EditorRailTabs tabs={TABS} active="seo" onChange={vi.fn()} />)
+    expect(screen.getByRole('tab', { name: /Sections/ }).textContent).toContain('4')
+  })
+
+  it('carries the score as text, not colour alone', () => {
+    // The band dot is aria-hidden; anyone who cannot distinguish the hues still
+    // needs the number.
+    render(<EditorRailTabs tabs={TABS} active="sections" onChange={vi.fn()} />)
+    expect(screen.getByRole('tab', { name: /score 72 of 100/i })).toBeTruthy()
+  })
+
+  it('moves between tabs with arrow keys', () => {
+    // Inactive tabs have tabIndex -1, so arrows are the only way to reach them.
+    const onChange = vi.fn()
+    render(<EditorRailTabs tabs={TABS} active="sections" onChange={onChange} />)
+    fireEvent.keyDown(screen.getByRole('tab', { selected: true }), { key: 'ArrowRight' })
+    expect(onChange).toHaveBeenCalledWith('seo')
+  })
+
+  it('bands the dot on the audit scale, not the content-analysis one', () => {
+    // The two disagree between 55 and 59: `gradeFromScore` calls 57 "poor",
+    // the audit calls it "fair". The dot summarises the audit's rings, so a
+    // page scoring 57 must not read worse on the tab than in the panel.
+    render(
+      <EditorRailTabs
+        tabs={[{ id: 'seo', label: 'SEO & GEO', title: 'x', score: 57 }]}
+        active="seo"
+        onChange={vi.fn()}
+      />,
+    )
+    const dot = screen.getByRole('tab').querySelector('span[aria-hidden]')
+    expect(dot?.className).toContain('bg-warning')
+    expect(dot?.className).not.toContain('bg-destructive')
+  })
+
+  it('shows no dot at all until a score is known', () => {
+    // An absent audit must not borrow a number from another scorer — no dot
+    // beats a dot computed by a different model with different bands.
+    render(
+      <EditorRailTabs
+        tabs={[{ id: 'seo', label: 'SEO & GEO', title: 'x' }]}
+        active="seo"
+        onChange={vi.fn()}
+      />,
+    )
+    expect(screen.getByRole('tab').querySelector('span[aria-hidden]')).toBeNull()
+  })
+
+  it('reads a deliberately unrated page as not rated, never as a low score', () => {
+    render(
+      <EditorRailTabs
+        tabs={[{ id: 'seo', label: 'SEO & GEO', title: 'x', score: null }]}
+        active="seo"
+        onChange={vi.fn()}
+      />,
+    )
+    expect(screen.getByRole('tab', { name: /not rated/i })).toBeTruthy()
+    const dot = screen.getByRole('tab').querySelector('span[aria-hidden]')
+    expect(dot?.className).not.toContain('bg-destructive')
+  })
+
+  it('wraps around at the ends', () => {
+    const onChange = vi.fn()
+    render(<EditorRailTabs tabs={TABS} active="sections" onChange={onChange} />)
+    fireEvent.keyDown(screen.getByRole('tab', { selected: true }), { key: 'ArrowLeft' })
+    expect(onChange).toHaveBeenCalledWith('seo')
+  })
+})

package/src/__tests__/components/media-block.render.test.tsx

@@ -0,0 +1,126 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi, afterEach } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+
+const LIBRARY = {
+  items: [
+    {
+      id: 'm1',
+      filename: 'team-offsite-2026.jpg',
+      storageKey: 'k1',
+      url: '/media/team-offsite-2026.jpg',
+      mimeType: 'image/jpeg',
+      width: 2400,
+      height: 1600,
+    },
+    {
+      id: 'm2',
+      filename: 'notes.pdf',
+      storageKey: 'k2',
+      url: '/media/notes.pdf',
+      mimeType: 'application/pdf',
+    },
+  ],
+}
+
+/**
+ * `useApiData` is mocked rather than `fetch`: the hook layers caching, retries
+ * and abort handling on top, none of which this component owns, and driving it
+ * through a fake network makes the test about the hook instead of the block.
+ */
+let requested: string | null = null
+
+vi.mock('../../lib/useApiData.js', () => ({
+  useApiData: (endpoint: string | null) => {
+    requested = endpoint
+    return { data: endpoint ? LIBRARY : null, loading: false, error: null, refetch: vi.fn() }
+  },
+}))
+
+const { MediaBlock } = await import('../../components/MediaBlock.js')
+
+afterEach(() => {
+  cleanup()
+  requested = null
+})
+
+describe('MediaBlock', () => {
+  it('shows the toolbar without hovering, in both states', () => {
+    // Replace and Remove are the two things an editor comes here to do. Behind
+    // a hover they are undiscoverable on touch and invisible when scanning.
+    render(<MediaBlock value="" onChange={() => {}} />)
+    expect(screen.getByRole('button', { name: 'Choose' })).toBeTruthy()
+    cleanup()
+
+    render(<MediaBlock value="/media/hero.jpg" onChange={() => {}} label="Hero image" />)
+    expect(screen.getByRole('button', { name: 'Replace' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Remove hero image' })).toBeTruthy()
+  })
+
+  it('names the file and its format rather than the raw URL', () => {
+    render(
+      <MediaBlock value="https://cdn.example.com/a/team-offsite.jpg?sig=abc" onChange={() => {}} />,
+    )
+    expect(screen.getByText('team-offsite.jpg')).toBeTruthy()
+    expect(screen.getByText('JPG')).toBeTruthy()
+    // The signing token is noise in a narrow toolbar and never what is being read.
+    expect(screen.queryByText(/sig=abc/)).toBeNull()
+  })
+
+  it('opens the picker inside the shell, not as a dialog', () => {
+    // Choosing an image is a comparison against the slot it goes into. A modal
+    // covering the slot removes the only context that matters.
+    render(<MediaBlock value="" onChange={() => {}} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Choose' }))
+    expect(screen.getByText('team-offsite-2026.jpg')).toBeTruthy()
+    expect(screen.queryByRole('dialog')).toBeNull()
+  })
+
+  it('reports each asset’s real dimensions and ratio', () => {
+    render(<MediaBlock value="" onChange={() => {}} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Choose' }))
+    // The frame shows the template's crop, so the asset's own shape has to be
+    // stated somewhere or an editor cannot tell what will be cropped.
+    expect(screen.getByText('2400 × 1600 · 3:2')).toBeTruthy()
+  })
+
+  it('offers only images', () => {
+    render(<MediaBlock value="" onChange={() => {}} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Choose' }))
+    expect(screen.getByText('team-offsite-2026.jpg')).toBeTruthy()
+    expect(screen.queryByText('notes.pdf')).toBeNull()
+  })
+
+  it('returns the chosen asset with its dimensions', () => {
+    const onChange = vi.fn()
+    render(<MediaBlock value="" onChange={onChange} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Choose' }))
+    fireEvent.click(screen.getByText('team-offsite-2026.jpg'))
+    expect(onChange).toHaveBeenCalledWith(
+      '/media/team-offsite-2026.jpg',
+      expect.objectContaining({ width: 2400, height: 1600 }),
+    )
+  })
+
+  it('clears the slot with an empty url', () => {
+    const onChange = vi.fn()
+    render(<MediaBlock value="/media/hero.jpg" onChange={onChange} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Remove image' }))
+    expect(onChange).toHaveBeenCalledWith('')
+  })
+
+  it('disables every control when the editor cannot edit', () => {
+    render(<MediaBlock value="/media/hero.jpg" onChange={() => {}} disabled />)
+    expect(screen.getByRole('button', { name: 'Replace' }).hasAttribute('disabled')).toBe(true)
+    expect(screen.getByRole('button', { name: 'Remove image' }).hasAttribute('disabled')).toBe(true)
+  })
+})
+
+describe('MediaBlock — library requests', () => {
+  it('does not fetch the library until the picker is opened', () => {
+    render(<MediaBlock value="/media/hero.jpg" onChange={() => {}} />)
+    expect(requested).toBeNull()
+    fireEvent.click(screen.getByRole('button', { name: 'Replace' }))
+    expect(requested).toContain('/media')
+  })
+})

package/src/__tests__/components/page-audit-panel.render.test.tsx

@@ -0,0 +1,64 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { auditPage, type PageAuditInput } from '@prenta/core/seo/page-audit'
+import { PageAuditPanel } from '../../components/seo/PageAuditPanel.js'
+
+const blank: PageAuditInput = {
+  sections: [],
+  seo: {
+    title: '',
+    description: '',
+    slug: '',
+    keyword: '',
+    schema: '',
+    ogImage: null,
+    robots: { index: true, snippet: true },
+  },
+  llmsTxt: false,
+  brand: 'Prenta',
+  author: null,
+}
+
+describe('PageAuditPanel', () => {
+  it('states both scores in text, not colour alone', () => {
+    render(<PageAuditPanel audit={auditPage(blank)} />)
+    expect(screen.getByRole('img', { name: /SEO score: 0 of 100/i })).toBeTruthy()
+    expect(screen.getByRole('img', { name: /GEO score: 0 of 100/i })).toBeTruthy()
+  })
+
+  it('names the denominator so a moving score is explainable', () => {
+    // The score changes when the set of applicable checks changes. Showing
+    // only the number is what made the old scorer feel arbitrary.
+    render(<PageAuditPanel audit={auditPage(blank)} />)
+    expect(screen.getAllByText(/of \d+ apply/).length).toBe(2)
+  })
+
+  it('reads a gated group as not rated rather than zero', () => {
+    const audit = auditPage({
+      ...blank,
+      seo: { ...blank.seo, robots: { index: false, snippet: true } },
+    })
+    render(<PageAuditPanel audit={audit} />)
+    expect(screen.getByRole('img', { name: /SEO: not rated/i })).toBeTruthy()
+    expect(screen.getByText('not rated')).toBeTruthy()
+  })
+
+  it('gives every check an outcome in text for screen readers', () => {
+    render(<PageAuditPanel audit={auditPage(blank)} />)
+    // The status square is aria-hidden, so the outcome has to live in the row.
+    expect(screen.getAllByText(/needs attention/).length).toBeGreaterThan(0)
+    expect(screen.getAllByText(/not applicable/).length).toBeGreaterThan(0)
+  })
+
+  it('explains a not-applicable check instead of just greying it', () => {
+    render(<PageAuditPanel audit={auditPage(blank)} />)
+    // All three placement checks explain themselves — none is silently greyed.
+    expect(screen.getAllByText(/Set a focus keyword to enable this check/i)).toHaveLength(3)
+  })
+
+  it('tells the editor what to do about a failing check', () => {
+    render(<PageAuditPanel audit={auditPage(blank)} />)
+    expect(screen.getByText(/Aim for 30–60 characters/i)).toBeTruthy()
+  })
+})

package/src/__tests__/components/reflow-meter.render.test.tsx

@@ -0,0 +1,144 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { ReflowMeter } from '../../components/ReflowMeter.js'
+import type { ReflowGuardResult, ReflowRow } from '../../hooks/useReflowGuard.js'
+import { BREAKPOINTS } from '../../lib/breakpoints.js'
+
+function rows(overrides: Partial<Record<string, Partial<ReflowRow>>> = {}): ReflowRow[] {
+  return BREAKPOINTS.map((bp) => {
+    const o = overrides[bp.id] ?? {}
+    const lines = o.lines ?? 2
+    const was = o.was ?? 2
+    return { id: bp.id, lines, was, diff: lines - was, state: o.state ?? 'same' }
+  })
+}
+
+function guard(partial: Partial<ReflowGuardResult> = {}): ReflowGuardResult {
+  const r = partial.rows ?? rows()
+  return {
+    rows: r,
+    grown: partial.grown ?? r.filter((x) => x.diff > 0),
+    worst: partial.worst ?? null,
+    delta: partial.delta ?? 0,
+    ...partial,
+  }
+}
+
+describe('ReflowMeter', () => {
+  it('reports the line count for the breakpoint being viewed, not the worst one', () => {
+    // "lines here" has to mean the canvas the editor is actually looking at.
+    // Showing the worst breakpoint's count under a canvas rendering a different
+    // one makes the editor mistrust both numbers.
+    const { container } = render(
+      <ReflowMeter
+        guard={guard({ rows: rows({ mobile: { lines: 5 }, laptop: { lines: 2 } }) })}
+        length={64}
+        device="laptop"
+        onProof={() => {}}
+      />,
+    )
+    const readout = container.querySelector('span')!.textContent!.replace(/\s+/g, ' ')
+    expect(readout).toContain('2 lines here')
+    expect(readout).not.toContain('5 lines here')
+    cleanup()
+  })
+
+  it('states the character delta with its direction', () => {
+    render(
+      <ReflowMeter guard={guard({ delta: 12 })} length={80} device="wide" onProof={() => {}} />,
+    )
+    expect(screen.getByText('(+12)')).toBeTruthy()
+    cleanup()
+
+    render(
+      <ReflowMeter guard={guard({ delta: -9 })} length={40} device="wide" onProof={() => {}} />,
+    )
+    expect(screen.getByText('(-9)')).toBeTruthy()
+    cleanup()
+  })
+
+  it('names the line count and its published value on every dot', () => {
+    // Colour alone must not carry the finding. Each dot's accessible name says
+    // what it measured and what it was, so the whole readout is reachable
+    // without seeing the tones.
+    render(
+      <ReflowMeter
+        guard={guard({
+          rows: rows({ mobile: { lines: 4, was: 2, state: 'grew-badly' } }),
+          worst: 'mobile',
+        })}
+        length={64}
+        device="wide"
+        onProof={() => {}}
+      />,
+    )
+    const dot = screen.getByRole('button', { name: /^Mobile: 4 lines/ })
+    expect(dot.textContent).toContain('was 2 when published')
+    // The dot and the alert's proof button are distinguishable by name — two
+    // controls reading "Proof on Mobile" in one region are the same control to
+    // anyone navigating by voice or screen reader.
+    expect(screen.getByRole('button', { name: 'Proof on Mobile' })).not.toBe(dot)
+    cleanup()
+  })
+
+  it('takes the canvas to the breakpoint a dot names', () => {
+    const onProof = vi.fn()
+    render(
+      <ReflowMeter
+        guard={guard({ rows: rows({ mobile: { lines: 4, was: 2, state: 'grew-badly' } }) })}
+        length={64}
+        device="wide"
+        onProof={onProof}
+      />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: /^Mobile: 4 lines/ }))
+    expect(onProof).toHaveBeenCalledWith('mobile')
+    cleanup()
+  })
+
+  it('stays silent when nothing grew', () => {
+    // The alert is the interrupting element. It must appear only when wrapping
+    // actually changed, or editors learn to scroll past it.
+    render(<ReflowMeter guard={guard()} length={40} device="wide" onProof={() => {}} />)
+    expect(screen.queryByText(/Wrapping changed/)).toBeNull()
+    cleanup()
+  })
+
+  it('says "every breakpoint" rather than listing all six', () => {
+    const all = rows(
+      Object.fromEntries(BREAKPOINTS.map((b) => [b.id, { lines: 3, was: 2, state: 'grew' }])),
+    )
+    render(
+      <ReflowMeter
+        guard={guard({ rows: all, worst: 'mobile' })}
+        length={90}
+        device="wide"
+        onProof={() => {}}
+      />,
+    )
+    expect(screen.getByText('every breakpoint')).toBeTruthy()
+    cleanup()
+  })
+
+  it('names the breakpoints while the list is short enough to read', () => {
+    render(
+      <ReflowMeter
+        guard={guard({
+          rows: rows({
+            mobile: { lines: 4, was: 2, state: 'grew-badly' },
+            tabletP: { lines: 3, was: 2, state: 'grew' },
+          }),
+          worst: 'mobile',
+        })}
+        length={90}
+        device="wide"
+        onProof={() => {}}
+      />,
+    )
+    expect(screen.getByText('Tablet Portrait, Mobile')).toBeTruthy()
+    // The proof button names the one worth looking at, not the list.
+    expect(screen.getByRole('button', { name: 'Proof on Mobile' })).toBeTruthy()
+    cleanup()
+  })
+})

package/src/__tests__/components/seo-char-count.test.tsx

@@ -6,22 +6,42 @@ import { SeoCharCount } from '../../components/seo/SeoCharCount.js'
 describe('SeoCharCount', () => {
   it('shows a neutral empty state', () => {
     render(<SeoCharCount value="" min={30} max={60} />)
-    expect(screen.getByText('0/60')).toBeTruthy()
+    expect(screen.getByText(/0 \/ 60 characters/)).toBeTruthy()
   })
 
   it('marks a value within the ideal range as good', () => {
     render(<SeoCharCount value={'x'.repeat(40)} min={30} max={60} />)
-    expect(screen.getByText(/40\/60 · good/)).toBeTruthy()
+    expect(screen.getByText(/40 \/ 60 characters · good/)).toBeTruthy()
   })
 
-  it('flags a value over the max as too long (destructive)', () => {
+  it('says the tail will be truncated rather than just "too long"', () => {
+    // Over and under are different problems. "Will be truncated" tells the
+    // editor the words are written but nobody will read them.
     const { container } = render(<SeoCharCount value={'x'.repeat(70)} min={30} max={60} />)
-    expect(screen.getByText(/70\/60 · too long/)).toBeTruthy()
+    expect(screen.getByText(/70 \/ 60 characters · will be truncated/)).toBeTruthy()
     expect(container.querySelector('.text-destructive')).toBeTruthy()
   })
 
-  it('hints to aim for the range when below min', () => {
+  it('says too short rather than restating the target range', () => {
+    // "Aim for 30–60" describes the goal without saying which way to edit.
     render(<SeoCharCount value={'x'.repeat(10)} min={30} max={60} />)
-    expect(screen.getByText(/aim for 30–60/)).toBeTruthy()
+    expect(screen.getByText(/10 \/ 60 characters · too short/)).toBeTruthy()
+  })
+
+  it('caps the meter at full instead of overflowing', () => {
+    // A bar that kept growing past the maximum would imply more is better.
+    const { container } = render(<SeoCharCount value={'x'.repeat(200)} min={30} max={60} />)
+    const fill = container.querySelector('span[aria-hidden] > span') as HTMLElement | null
+    expect(fill?.style.width).toBe('100%')
+  })
+
+  it('has no short or good state for a cap-only field', () => {
+    // Without a minimum there is no target to hit, only a ceiling not to cross.
+    // The count is split across JSX text nodes, so match on the rendered text.
+    const { container } = render(<SeoCharCount value={'x'.repeat(5)} max={200} />)
+    const text = container.textContent ?? ''
+    expect(text).toContain('5 / 200 characters')
+    expect(text).not.toContain('too short')
+    expect(text).not.toContain('good')
   })
 })

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

@@ -0,0 +1,32 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { SerpPreview } from '../../components/seo/SerpPreview.js'
+
+describe('SerpPreview', () => {
+  it('shows url, title and description as a searcher sees them', () => {
+    render(
+      <SerpPreview
+        title="Headless CMS for modern teams"
+        url="https://example.com/about"
+        description="Prenta gives developers an API-first architecture."
+      />,
+    )
+    expect(screen.getByText('https://example.com/about')).toBeTruthy()
+    expect(screen.getByText('Headless CMS for modern teams')).toBeTruthy()
+  })
+
+  it('renders the title in the search-result blue, not the brand accent', () => {
+    // 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')
+  })
+
+  it('says what a missing description means rather than rendering blank', () => {
+    render(<SerpPreview title="T" url="u" description="" />)
+    expect(screen.getByText(/Search engines will improvise one/i)).toBeTruthy()
+  })
+})