@prenta/admin 2.6.1 → 2.7.0

package/src/__tests__/views/kpi-grid.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+import { kpiCardSpan, kpiGridClass } from '../../views/dashboard/kpi-grid.js'
+
+/** Dashboard KPI grid (TRACKING P-06, SHELL.md §8). */
+describe('kpi grid', () => {
+  it('puts five cards on six tracks below 1400px: 3+3, then 2+2+2', () => {
+    expect(kpiGridClass(5)).toBe(
+      'grid gap-3 mobile:gap-2 grid-cols-6 mobile:grid-cols-2 min-[1400px]:grid-cols-5',
+    )
+    expect([0, 1, 2, 3, 4].map((i) => kpiCardSpan(i, 5))).toEqual([
+      'col-span-3 min-[1400px]:col-span-1 mobile:col-span-1',
+      'col-span-3 min-[1400px]:col-span-1 mobile:col-span-1',
+      'col-span-2 min-[1400px]:col-span-1 mobile:col-span-1',
+      'col-span-2 min-[1400px]:col-span-1 mobile:col-span-1',
+      'col-span-2 min-[1400px]:col-span-1 mobile:col-span-2',
+    ])
+  })
+
+  it('fills two columns with any other count, an odd last card spanning both', () => {
+    expect(kpiGridClass(4)).toBe('grid gap-3 mobile:gap-2 grid-cols-2 min-[1400px]:grid-cols-4')
+    expect([0, 1, 2, 3].map((i) => kpiCardSpan(i, 4))).toEqual(['', '', '', ''])
+    expect(kpiGridClass(3)).toContain('min-[1400px]:grid-cols-3')
+    expect([0, 1, 2].map((i) => kpiCardSpan(i, 3))).toEqual([
+      '',
+      '',
+      'col-span-2 min-[1400px]:col-span-1',
+    ])
+  })
+})

package/src/__tests__/views/post-section-editor.test.tsx

@@ -118,7 +118,11 @@ describe('PostSectionEditor new post', () => {
     render(
       <PostSectionEditor postType="blog" config={validConfig} onNavigate={() => {}} session={{}} />,
     )
-    expect(await screen.findByRole('dialog', { name: 'Post details' })).toBeTruthy()
+    // Longer than the 1s default: under full-suite load the lazy editor can
+    // take longer to mount. It doesn't change what is asserted.
+    expect(
+      await screen.findByRole('dialog', { name: 'Post details' }, { timeout: 5000 }),
+    ).toBeTruthy()
   })
 
   it('does not auto-open Post details for existing posts', async () => {

package/src/__tests__/views/script-tags.render.test.tsx

@@ -176,3 +176,32 @@ describe('ScriptTags list', () => {
     })
   })
 })
+
+/** TRACKING P-06: one count chip style, filters that never wrap. */
+describe('ScriptTags header polish', () => {
+  it('draws the header counts as count chips, consent-gated with its shield', async () => {
+    render(<ScriptTags />)
+    await screen.findByText('Google Analytics 4')
+    const chip = (label: string) =>
+      screen.getAllByText(label).find((el) => el.className.includes('rounded-pill'))!
+
+    for (const label of ['Total', 'Active', 'Inactive', 'Consent-gated']) {
+      expect(chip(label).className).toContain('whitespace-nowrap')
+    }
+    expect(chip('Active').querySelector('b')?.className).toContain('text-suc')
+    expect(chip('Inactive').querySelector('b')?.className).toContain('text-faint')
+    expect(chip('Consent-gated').querySelector('[aria-hidden="true"] > svg')).toBeTruthy()
+  })
+
+  it('keeps every filter pill on one line and the search at least 180px wide', async () => {
+    render(<ScriptTags />)
+    await screen.findByText('Google Analytics 4')
+    for (const name of ['Body start', 'Body end', 'All consent', 'No consent']) {
+      expect(screen.getByRole('button', { name }).className).toContain('whitespace-nowrap')
+    }
+    const search = screen
+      .getByPlaceholderText('Search scripts…')
+      .closest('[class*="min-w-[180px]"]')
+    expect(search?.className).toContain('max-w-[260px]')
+  })
+})

package/src/__tests__/views/security-settings.render.test.tsx

@@ -115,7 +115,7 @@ beforeEach(() => {
 })
 
 describe('SecurityTab', () => {
-  it('renders the status card and all security sections with a disabled save bar', async () => {
+  it('renders the status card and all security sections with no save bar while clean', async () => {
     render(<SecurityTab role="ADMIN" />)
 
     await screen.findByText('Security Status')
@@ -131,9 +131,8 @@ describe('SecurityTab', () => {
     // Status badge + warning surfaced.
     expect(screen.getByText('Needs attention')).toBeTruthy()
     expect(screen.getByText('MFA is not required in production')).toBeTruthy()
-    expect(
-      (screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement).disabled,
-    ).toBe(true)
+    // Clean form → no save bar (save bars render only when dirty).
+    expect(screen.queryByRole('button', { name: 'Save changes' })).toBeNull()
   })
 
   it('enables Save when concurrent-session cap changes and persists via PUT /security', async () => {
@@ -143,7 +142,7 @@ describe('SecurityTab', () => {
     const select = screen.getByLabelText(/Maximum concurrent sessions/) as HTMLSelectElement
     fireEvent.change(select, { target: { value: '3' } })
 
-    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    const save = screen.getByRole('button', { name: 'Save changes' }) as HTMLButtonElement
     expect(save.disabled).toBe(false)
     fireEvent.click(save)
 
@@ -180,7 +179,7 @@ describe('SecurityTab', () => {
     const confirm = await screen.findByRole('button', { name: 'Require MFA' })
     fireEvent.click(confirm)
 
-    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    const save = screen.getByRole('button', { name: 'Save changes' }) as HTMLButtonElement
     expect(save.disabled).toBe(false)
     fireEvent.click(save)
 
@@ -219,7 +218,7 @@ describe('SecurityTab', () => {
     fireEvent.change(screen.getByLabelText(/Session timeout/), { target: { value: '8' } })
     fireEvent.click(screen.getByRole('switch', { name: 'Idle auto-logout' }))
 
-    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Save changes' }))
     await waitFor(() =>
       expect(cmsApi).toHaveBeenCalledWith(
         '/security',
@@ -244,12 +243,12 @@ describe('SecurityTab', () => {
     // Inline + summary validation blocks the save.
     expect((await screen.findAllByText(/not-an-ip/)).length).toBeGreaterThan(0)
     expect(
-      (screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement).disabled,
+      (screen.getByRole('button', { name: 'Save changes' }) as HTMLButtonElement).disabled,
     ).toBe(true)
 
     fireEvent.change(textarea, { target: { value: '203.0.113.0/24\n1.2.3.4' } })
     fireEvent.click(screen.getByRole('switch', { name: 'Audit logging' }))
-    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Save changes' }))
 
     await waitFor(() => expect(cmsApi).toHaveBeenCalledWith('/security', expect.anything()))
     const putBody = JSON.parse(
@@ -288,7 +287,7 @@ describe('SecurityTab', () => {
     fireEvent.change(screen.getByLabelText(/Allowed IP addresses/), {
       target: { value: '10.0.0.0/8' },
     })
-    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Save changes' }))
 
     // The 409 turns into a confirm dialog, not a generic error.
     const confirm = await screen.findByRole('button', { name: 'Save anyway' })

package/src/__tests__/views/seo-settings.render.test.tsx

@@ -176,10 +176,8 @@ describe('SeoSettingsTab', () => {
     expect((screen.getByLabelText('Default meta description') as HTMLTextAreaElement).value).toBe(
       'Seed description.',
     )
-    // Clean form → Save disabled.
-    expect(
-      (screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement).disabled,
-    ).toBe(true)
+    // Clean form → no save bar (save bars render only when dirty).
+    expect(screen.queryByRole('button', { name: 'Save changes' })).toBeNull()
   })
 
   it('routes "Open SEO" to /seo', async () => {
@@ -197,7 +195,7 @@ describe('SeoSettingsTab', () => {
 
     expect((await screen.findAllByText(/Unsupported token/i)).length).toBeGreaterThan(0)
     expect(
-      (screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement).disabled,
+      (screen.getByRole('button', { name: 'Save changes' }) as HTMLButtonElement).disabled,
     ).toBe(true)
   })
 
@@ -215,7 +213,7 @@ describe('SeoSettingsTab', () => {
     const google = (await screen.findByLabelText('Google Search Console')) as HTMLInputElement
     fireEvent.change(google, { target: { value: 'goog-token' } })
 
-    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    const save = screen.getByRole('button', { name: 'Save changes' }) as HTMLButtonElement
     expect(save.disabled).toBe(false)
     fireEvent.click(save)
 
@@ -244,7 +242,7 @@ describe('SeoSettingsTab', () => {
       target: { value: 'https://linkedin.com/company/acme' },
     })
 
-    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Save changes' }))
 
     await waitFor(() =>
       expect(cmsApi).toHaveBeenCalledWith(
@@ -270,7 +268,7 @@ describe('SeoSettingsTab', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Choose image' }))
     fireEvent.click(screen.getByRole('button', { name: 'pick-asset' }))
 
-    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    const save = screen.getByRole('button', { name: 'Save changes' }) as HTMLButtonElement
     expect(save.disabled).toBe(false)
     fireEvent.click(save)
 
@@ -293,7 +291,7 @@ describe('SeoSettingsTab', () => {
     await screen.findByLabelText('Title template')
     fireEvent.click(screen.getByRole('switch', { name: 'Ping search engines on publish' }))
 
-    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Save changes' }))
 
     await waitFor(() =>
       expect(cmsApi).toHaveBeenCalledWith(

package/src/__tests__/views/settings-save-bar.render.test.tsx

@@ -0,0 +1,91 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, renderHook, screen } from '@testing-library/react'
+
+const toastSuccess = vi.fn()
+vi.mock('sonner', () => ({ toast: { success: (m: string) => toastSuccess(m) } }))
+
+const { UnsavedBar } = await import('../../components/ui/UnsavedBar.js')
+const { useSavedToast } = await import('../../views/settings/components.js')
+
+afterEach(() => {
+  cleanup()
+  toastSuccess.mockClear()
+})
+
+function renderBar(
+  overrides: Partial<{ dirty: boolean; saving: boolean; saveDisabled: boolean }> = {},
+) {
+  const onSave = vi.fn()
+  const onDiscard = vi.fn()
+  const utils = render(
+    <UnsavedBar
+      dirty={overrides.dirty ?? false}
+      saving={overrides.saving}
+      saveDisabled={overrides.saveDisabled}
+      onSave={onSave}
+      onDiscard={onDiscard}
+      discardLabel="Reset"
+      saveLabel="Save changes"
+      variant="card"
+    />,
+  )
+  return { ...utils, onSave, onDiscard }
+}
+
+const saveButton = () => screen.getByRole('button', { name: 'Save changes' }) as HTMLButtonElement
+const resetButton = () => screen.getByRole('button', { name: 'Reset' }) as HTMLButtonElement
+
+/**
+ * Kit rule (docs/design/prenta/specs/SHELL.md §7 "Unsaved bar"): the Settings
+ * tabs use the shared `UnsavedBar` in its Settings look (Settings.html
+ * `.ap-save`, CONFLICTS.md §2), rendered only when the form is dirty, with the
+ * Settings copy "Reset" / "Save changes".
+ */
+describe('Settings unsaved bar', () => {
+  it('renders no bar while the form is clean', () => {
+    renderBar()
+    expect(screen.queryByRole('region', { name: 'Unsaved changes' })).toBeNull()
+    expect(screen.queryByRole('button')).toBeNull()
+  })
+
+  it('appears once dirty, with Save and Reset wired up', () => {
+    const { onSave, onDiscard } = renderBar({ dirty: true })
+    expect(screen.getByRole('region', { name: 'Unsaved changes' })).toBeTruthy()
+
+    expect(saveButton().disabled).toBe(false)
+    fireEvent.click(saveButton())
+    expect(onSave).toHaveBeenCalledTimes(1)
+
+    expect(resetButton().disabled).toBe(false)
+    fireEvent.click(resetButton())
+    expect(onDiscard).toHaveBeenCalledTimes(1)
+  })
+
+  it('blocks Save while the dirty form has validation errors or the user cannot edit', () => {
+    renderBar({ dirty: true, saveDisabled: true })
+    expect(saveButton().disabled).toBe(true)
+    expect(resetButton().disabled).toBe(false)
+  })
+
+  it('shows a busy Save while saving', () => {
+    renderBar({ dirty: true, saving: true })
+    const save = screen.getByRole('button', { name: 'Saving…' }) as HTMLButtonElement
+    expect(save.disabled).toBe(true)
+    expect(save.getAttribute('aria-busy')).toBe('true')
+    expect(resetButton().disabled).toBe(true)
+  })
+
+  it('confirms a finished save with a toast, once per save', () => {
+    const { rerender } = renderHook(({ state }) => useSavedToast(state), {
+      initialProps: { state: 'saving' as 'idle' | 'saving' | 'success' | 'error' },
+    })
+    expect(toastSuccess).not.toHaveBeenCalled()
+    rerender({ state: 'success' })
+    expect(toastSuccess).toHaveBeenCalledWith('Saved')
+    rerender({ state: 'success' })
+    expect(toastSuccess).toHaveBeenCalledTimes(1)
+    rerender({ state: 'error' })
+    expect(toastSuccess).toHaveBeenCalledTimes(1)
+  })
+})

package/src/__tests__/views/settings-save-footer.render.test.tsx

@@ -1,18 +1,17 @@
 // @vitest-environment happy-dom
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 
 /**
- * Regression: the shared no-op "Save Changes" footer (driven by the settings
- * global `handleSave`) must only render on tabs that actually persist through
- * it (currently just Layout). On self-managed tabs like SEO it used to render a
- * SECOND footer whose click toasted "Settings saved successfully!" while
- * persisting none of the tab's edits — misleading, no-op UI.
+ * Regression: the shared "Save Changes" footer (driven by the settings global
+ * save) used to render on self-managed tabs like SEO as a SECOND footer whose
+ * click toasted "Settings saved successfully!" while persisting none of the
+ * tab's edits — misleading, no-op UI.
  *
- * The SEO tab now owns a real `SettingsSaveBar` (also labelled "Save Changes")
- * that persists through `/seo/config`, so the contract is: exactly ONE
- * "Save Changes" button on the SEO tab — the tab's own — never the global one
- * stacked on top of it.
+ * The SEO tab owns a real `UnsavedBar` ("Save changes") that persists through
+ * `/seo/config`, so the contract is: at most ONE save button on the SEO tab —
+ * the tab's own, which renders only once the form is dirty. The footer is gone
+ * everywhere: Layout has its own dirty-only bar too (settings-tabs test).
  */
 const SEO_CONFIG = {
   static: { site: null },
@@ -57,14 +56,25 @@ describe('Settings shared save footer', () => {
     expect(
       (await screen.findAllByRole('button', { name: 'Save SEO defaults' })).length,
     ).toBeGreaterThan(0)
-    // The tab's own SettingsSaveBar is the ONLY "Save Changes" button — the
-    // no-op global footer must not be stacked on top of it.
-    expect(screen.getAllByRole('button', { name: 'Save Changes' })).toHaveLength(1)
+    // Clean form: the tab's save bar is hidden, and the no-op global footer
+    // must not fill the gap.
+    expect(screen.queryAllByRole('button', { name: 'Save Changes' })).toHaveLength(0)
+
+    expect(screen.queryAllByRole('button', { name: 'Save changes' })).toHaveLength(0)
+
+    // Once dirty, the tab's own UnsavedBar is the ONLY save button — the
+    // global footer must not be stacked on top of it.
+    fireEvent.change(screen.getByLabelText('Title template'), {
+      target: { value: '%page% | %site%' },
+    })
+    expect(screen.getAllByRole('button', { name: 'Save changes' })).toHaveLength(1)
+    expect(screen.queryAllByRole('button', { name: 'Save Changes' })).toHaveLength(0)
   })
 
-  it('renders the global "Save Changes" footer on the Layout tab', async () => {
+  it('renders no always-on footer on the Layout tab either', async () => {
     render(<Settings config={LAYOUT_CONFIG} session={SESSION} initialTab="layout" />)
 
-    await waitFor(() => expect(screen.getByRole('button', { name: 'Save Changes' })).toBeTruthy())
+    await screen.findByText('Default Layout Variants')
+    expect(screen.queryByRole('button', { name: /save changes/i })).toBeNull()
   })
 })