@prenta/admin 0.92.0

package/src/__tests__/router/plugin-nav-resolves.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest'
+import { aiPlugin } from '@prenta/plugin-ai'
+import { blocksPlugin } from '@prenta/plugin-blocks'
+import { commercePlugin } from '@prenta/plugin-commerce'
+import { formsPlugin } from '@prenta/plugin-forms'
+import { mediaPlugin } from '@prenta/plugin-media'
+import { navigationPlugin } from '@prenta/plugin-navigation'
+import { seoPlugin } from '@prenta/plugin-seo'
+import { adminPathResolves } from '../../router/admin-routes.js'
+
+/**
+ * Systemic guard for the recurring plugin-nav-404 class: a plugin advertises an
+ * `adminNavItems` path the admin router has no route for, so the sidebar link
+ * lands on the 404 page. It has shipped in published packages more than once
+ * (plugin-ai / plugin-commerce / plugin-blocks). Plugins cannot register views,
+ * so every nav path MUST resolve to a built-in route or one of the plugin's own
+ * collection routes — asserted here for every bundled plugin.
+ *
+ * When this fails: either point the nav item at a real route (a built-in, or a
+ * `/<slug>` for a collection the plugin registers) or remove it until a plugin
+ * view API exists. Do NOT add the path to ADMIN_STATIC_ROUTE_PATTERNS unless
+ * AdminRoot actually renders a view for it.
+ */
+const BUNDLED_PLUGINS = [
+  { name: 'plugin-ai', plugin: aiPlugin() },
+  { name: 'plugin-blocks', plugin: blocksPlugin() },
+  { name: 'plugin-commerce', plugin: commercePlugin() },
+  { name: 'plugin-forms', plugin: formsPlugin() },
+  { name: 'plugin-media', plugin: mediaPlugin() },
+  { name: 'plugin-navigation', plugin: navigationPlugin() },
+  { name: 'plugin-seo', plugin: seoPlugin() },
+]
+
+describe('every bundled plugin adminNavItems path resolves to a real admin view', () => {
+  for (const { name, plugin } of BUNDLED_PLUGINS) {
+    const navItems = plugin.adminNavItems ?? []
+    // A config exposing exactly this plugin's collections — the only extra
+    // destinations a plugin can legitimately point its nav at.
+    const config = { collections: plugin.collections ?? {} }
+
+    it(`${name} (${navItems.length} nav item${navItems.length === 1 ? '' : 's'})`, () => {
+      const dead = navItems
+        .map((item) => item.path)
+        .filter((path) => !adminPathResolves(path, config))
+      expect(
+        dead,
+        `${name} advertises sidebar paths with no admin route: ${dead.join(', ')}`,
+      ).toEqual([])
+    })
+  }
+})

package/src/__tests__/router/query-string.test.ts

@@ -0,0 +1,54 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest'
+import { act, renderHook } from '@testing-library/react'
+
+import { parseRouteQuery, useAdminRouter } from '../../router/index.js'
+
+// The admin router must carry the query string in `currentPath` so deep links
+// like `/pages/new?parent=<id>` survive hard reloads and back/forward — not
+// just in-app `navigate()` calls (which always carried it).
+describe('useAdminRouter query strings', () => {
+  it('includes the query string when syncing from the browser URL on mount', () => {
+    window.history.pushState({}, '', '/admin/pages/new?parent=abc')
+
+    const { result } = renderHook(() => useAdminRouter('/admin', '/pages/new'))
+
+    expect(result.current.currentPath).toBe('/pages/new?parent=abc')
+    expect(result.current.search).toBe('?parent=abc')
+    // matchRoute strips the query, so route patterns still match.
+    expect(result.current.matchRoute('/pages/new')).toEqual({})
+    expect(parseRouteQuery(result.current.currentPath).get('parent')).toBe('abc')
+  })
+
+  it('carries the query string through popstate (back/forward)', () => {
+    window.history.pushState({}, '', '/admin/settings?tab=users')
+    const { result } = renderHook(() => useAdminRouter('/admin', '/'))
+
+    act(() => {
+      window.history.pushState({}, '', '/admin/seo?tab=audit&issueId=i1')
+      window.dispatchEvent(new PopStateEvent('popstate'))
+    })
+
+    expect(result.current.currentPath).toBe('/seo?tab=audit&issueId=i1')
+    expect(result.current.search).toBe('?tab=audit&issueId=i1')
+    expect(result.current.matchRoute('/seo')).toEqual({})
+    expect(result.current.matchRoute('/seo/:id')).toBeNull()
+  })
+
+  it('handles a query on the admin root path', () => {
+    window.history.pushState({}, '', '/admin?foo=1')
+
+    const { result } = renderHook(() => useAdminRouter('/admin', '/'))
+
+    expect(result.current.currentPath).toBe('/?foo=1')
+    expect(result.current.matchRoute('/')).toEqual({})
+  })
+
+  it('parseRouteQuery accepts full paths, raw search strings, and hashes', () => {
+    expect(parseRouteQuery('/pages/new?parent=abc').get('parent')).toBe('abc')
+    expect(parseRouteQuery('?tab=users&selected=u1').get('selected')).toBe('u1')
+    expect(parseRouteQuery('/pages').get('parent')).toBeNull()
+    expect(parseRouteQuery('').get('parent')).toBeNull()
+    expect(parseRouteQuery('/seo?tab=audit#section').get('tab')).toBe('audit')
+  })
+})

package/src/__tests__/router/seo-tab-for-path.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest'
+
+import { SEO_DEEP_PATHS, seoTabForPath } from '../../views/SEO.js'
+
+describe('seoTabForPath', () => {
+  it('resolves the sidebar links that previously 404ed', () => {
+    // Regression: plugin-seo advertises these in the sidebar but the admin
+    // router had no route for them, so they fell through to the generic 404.
+    expect(seoTabForPath('/seo/link-health')).toBe('links')
+    expect(seoTabForPath('/seo/sitemap')).toBe('technical')
+  })
+
+  it('preserves the existing legacy tab mappings', () => {
+    expect(seoTabForPath('/seo')).toBe('overview')
+    expect(seoTabForPath('/seo/content')).toBe('content')
+    expect(seoTabForPath('/seo/canonicals')).toBe('content')
+    expect(seoTabForPath('/seo/technical')).toBe('technical')
+    expect(seoTabForPath('/seo/links')).toBe('technical')
+    expect(seoTabForPath('/seo/redirects')).toBe('redirects')
+    expect(seoTabForPath('/seo/audit')).toBe('audit')
+  })
+
+  it('returns null for non-SEO paths so they fall through', () => {
+    expect(seoTabForPath('/dashboard')).toBeNull()
+    expect(seoTabForPath('/media')).toBeNull()
+    expect(seoTabForPath('/seofoo')).toBeNull()
+    expect(seoTabForPath('/seo/nope')).toBeNull()
+  })
+
+  it('every SEO_DEEP_PATH resolves to a real tab (no dead router entries)', () => {
+    for (const path of SEO_DEEP_PATHS) {
+      expect(seoTabForPath(path)).not.toBeNull()
+    }
+  })
+
+  it('covers every path plugin-seo advertises in the sidebar', () => {
+    // Mirror of packages/plugin-seo/src/index.ts adminNavItems — if plugin-seo
+    // adds/changes a sidebar SEO path, it must resolve here or it will 404.
+    for (const path of ['/seo', '/seo/sitemap', '/seo/link-health']) {
+      expect(SEO_DEEP_PATHS).toContain(path)
+      expect(seoTabForPath(path)).not.toBeNull()
+    }
+  })
+})

package/src/__tests__/router/strip-base.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+
+// Copy of the internal stripBase function for testing
+function stripBase(pathname: string, basePath: string): string {
+  if (pathname.startsWith(basePath)) {
+    const rest = pathname.slice(basePath.length)
+    return rest === '' || rest === '/' ? '/' : rest.startsWith('/') ? rest : `/${rest}`
+  }
+  return '/'
+}
+
+describe('stripBase', () => {
+  it('strips the base path and returns the remainder with a leading slash', () => {
+    expect(stripBase('/admin/dashboard', '/admin')).toBe('/dashboard')
+    expect(stripBase('/admin/collections/posts', '/admin')).toBe('/collections/posts')
+  })
+
+  it('returns root when the pathname is exactly the base or base plus trailing slash', () => {
+    expect(stripBase('/admin', '/admin')).toBe('/')
+    expect(stripBase('/admin/', '/admin')).toBe('/')
+  })
+
+  it('returns root when the pathname does not start with the base path', () => {
+    expect(stripBase('/public/page', '/admin')).toBe('/')
+  })
+
+  it('normalizes remainder that lacks a leading slash', () => {
+    expect(stripBase('/adminfoo', '/admin')).toBe('/foo')
+  })
+})

package/src/__tests__/styles/theme-token-scope.test.ts

@@ -0,0 +1,67 @@
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+// Custom properties resolve by inheritance, not specificity — the doubled
+// `.prenta-admin.prenta-admin` defence cannot protect a token name a
+// consumer site stylesheet also sets on `:root` (#773). These tests pin the
+// two structural defences in theme.css:
+//   1. every shared token name the shell reads is declared on `.prenta-admin`
+//      (closest ancestor wins), and no admin token ever lands on `:root`;
+//   2. the canvas neutralizes scroll-gated visibility (#774) so bands that
+//      only become visible "on arrival" are never blank in the editor.
+
+/** Comments may legitimately mention `:root` or contain braces — assert against code only. */
+function stripComments(css: string): string {
+  return css.replace(/\/\*[\s\S]*?\*\//g, '')
+}
+
+const themeCss = stripComments(
+  readFileSync(fileURLToPath(new URL('../../styles/theme.css', import.meta.url)), 'utf8'),
+)
+const tokensCss = stripComments(
+  readFileSync(fileURLToPath(new URL('../../styles/prenta-tokens.css', import.meta.url)), 'utf8'),
+)
+
+/** First `.prenta-admin { … }` rule — the shell's semantic token block. */
+function shellTokenBlock(): string {
+  const match = themeCss.match(/\.prenta-admin \{([^}]*)\}/)
+  if (!match) throw new Error('theme.css lost its `.prenta-admin { … }` token block')
+  return match[1]!
+}
+
+describe('admin token scope (#773)', () => {
+  it('declares the shared radius tokens on .prenta-admin, mirroring @theme', () => {
+    const block = shellTokenBlock()
+    expect(block).toContain('--radius-sm: var(--r-sm)')
+    expect(block).toContain('--radius-md: var(--r-control)')
+    expect(block).toContain('--radius-lg: var(--r)')
+    expect(block).toContain('--radius-xl: calc(var(--r) + 2px)')
+  })
+
+  it('declares the shared accent token on .prenta-admin', () => {
+    expect(shellTokenBlock()).toContain('--accent: var(--acc-l)')
+  })
+
+  it('never declares admin tokens on :root (site sheets own :root)', () => {
+    expect(themeCss).not.toMatch(/(^|[^\w-]):root\b/)
+    expect(tokensCss).not.toMatch(/(^|[^\w-]):root\b/)
+  })
+})
+
+describe('canvas scroll-gate neutralization (#774)', () => {
+  it('forces content-visibility inside the canvas', () => {
+    expect(themeCss).toMatch(
+      /\.prenta-admin \.prenta-canvas \* \{\s*content-visibility: visible !important;/,
+    )
+  })
+
+  it('settles reveal-hook visibility inside the canvas', () => {
+    expect(themeCss).toMatch(
+      /\.prenta-admin \.prenta-canvas :is\(\[data-reveal\], \[data-scroll\]\) \{\s*opacity: 1 !important;/,
+    )
+    expect(themeCss).toMatch(
+      /\.prenta-admin \.prenta-canvas :is\(\[data-aos\], \[data-sal\]\) \{\s*opacity: 1 !important;\s*transform: none !important;/,
+    )
+  })
+})

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

@@ -0,0 +1,140 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+/**
+ * Exercises the per-user MFA enrollment loop in AccountSecurity against a
+ * mocked auth API:
+ *   GET  /auth/me           → current totpEnabled state
+ *   POST /auth/totp/setup   → provisioning URI + one-time backup codes
+ *   POST /auth/totp/verify  → flips MFA on
+ *   POST /auth/totp/disable → turns MFA off
+ */
+interface ApiCall {
+  endpoint: string
+  options?: { method?: string; headers?: Record<string, string>; body?: unknown }
+}
+
+let totpEnabled = false
+const calls: ApiCall[] = []
+
+const cmsApi = vi.fn(async (endpoint: string, options?: ApiCall['options']) => {
+  calls.push({ endpoint, options })
+  const method = options?.method ?? 'GET'
+  if (endpoint === '/auth/me') return { data: { totpEnabled }, status: 200 }
+  if (endpoint === '/auth/totp/setup' && method === 'POST') {
+    const pw = options?.headers?.['x-reauth-password']
+    if (!pw || pw === 'wrong') return { error: 'Re-authentication failed.', status: 401 }
+    return {
+      data: {
+        uri: 'otpauth://totp/Prenta%20CMS:admin@example.com?secret=ABCDEF',
+        secret: 'ABCDEF234567',
+        backupCodes: ['aaaa1111', 'bbbb2222', 'cccc3333', 'dddd4444'],
+      },
+      status: 200,
+    }
+  }
+  if (endpoint === '/auth/totp/verify' && method === 'POST') {
+    totpEnabled = true
+    return { data: { enabled: true }, status: 200 }
+  }
+  if (endpoint === '/auth/totp/disable' && method === 'POST') {
+    totpEnabled = false
+    return { data: { enabled: false }, status: 200 }
+  }
+  return { data: {}, status: 200 }
+})
+
+vi.mock('../../lib/api.js', () => ({ cmsApi: (e: string, o?: unknown) => cmsApi(e, o as any) }))
+vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }))
+vi.mock('qrcode.react', () => ({
+  QRCodeSVG: ({ value }: { value: string }) => <svg data-testid="qr" data-value={value} />,
+}))
+
+const { AccountSecurity } = await import('../../views/profile/AccountSecurity.js')
+
+beforeEach(() => {
+  cmsApi.mockClear()
+  calls.length = 0
+  totpEnabled = false
+})
+
+describe('AccountSecurity — enrollment', () => {
+  it('walks through reauth → QR + backup codes → verify and enables MFA', async () => {
+    render(<AccountSecurity />)
+    await screen.findByText('Not set up')
+
+    fireEvent.click(screen.getByRole('button', { name: /Set up two-factor/i }))
+
+    // Reauth step: enter current password.
+    const pw = await screen.findByLabelText('Current password')
+    fireEvent.change(pw, { target: { value: 'correct-horse' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Continue' }))
+
+    // Setup posts the password as a reauth header.
+    await waitFor(() =>
+      expect(
+        calls.some(
+          (c) =>
+            c.endpoint === '/auth/totp/setup' &&
+            c.options?.headers?.['x-reauth-password'] === 'correct-horse',
+        ),
+      ).toBe(true),
+    )
+
+    // Enrollment step shows the QR, the manual key and the backup codes.
+    await screen.findByTestId('qr')
+    expect(screen.getByText('ABCDEF234567')).toBeTruthy()
+    expect(screen.getByText('aaaa1111')).toBeTruthy()
+
+    // Verify is gated on acknowledging the backup codes + a 6-digit code.
+    const verify = screen.getByRole('button', { name: /Verify & enable/i }) as HTMLButtonElement
+    expect(verify.disabled).toBe(true)
+
+    fireEvent.click(screen.getByLabelText(/saved my backup codes/i))
+    fireEvent.change(screen.getByLabelText('Authentication code'), { target: { value: '123456' } })
+    expect(verify.disabled).toBe(false)
+    fireEvent.click(verify)
+
+    await waitFor(() =>
+      expect(
+        calls.some(
+          (c) =>
+            c.endpoint === '/auth/totp/verify' && String(c.options?.body ?? '').includes('123456'),
+        ),
+      ).toBe(true),
+    )
+    await screen.findByText('Enabled')
+  })
+
+  it('surfaces a reauth failure without advancing to the QR step', async () => {
+    render(<AccountSecurity />)
+    await screen.findByText('Not set up')
+
+    fireEvent.click(screen.getByRole('button', { name: /Set up two-factor/i }))
+    const pw = await screen.findByLabelText('Current password')
+    fireEvent.change(pw, { target: { value: 'wrong' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Continue' }))
+
+    await screen.findByText('Re-authentication failed.')
+    expect(screen.queryByTestId('qr')).toBeNull()
+  })
+})
+
+describe('AccountSecurity — disable', () => {
+  it('shows Enabled and disables with a password confirmation', async () => {
+    totpEnabled = true
+    render(<AccountSecurity />)
+    await screen.findByText('Enabled')
+
+    fireEvent.click(screen.getByRole('button', { name: /Disable two-factor/i }))
+    const pw = await screen.findByLabelText('Current password')
+    fireEvent.change(pw, { target: { value: 'correct-horse' } })
+    // The confirm button is the destructive one inside the panel.
+    const confirmButtons = screen.getAllByRole('button', { name: /Disable two-factor/i })
+    fireEvent.click(confirmButtons[confirmButtons.length - 1]!)
+
+    await waitFor(() => expect(calls.some((c) => c.endpoint === '/auth/totp/disable')).toBe(true))
+    await screen.findByText('Not set up')
+  })
+})

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

@@ -0,0 +1,101 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import {
+  SectionRenderer,
+  AdminSectionRenderersProvider,
+  type AdminSectionRendererMap,
+} from '../../views/page-editor/sections/index.js'
+import type { PageSection } from '../../lib/page-editor-service.js'
+
+function customSection(overrides: Partial<PageSection> = {}): PageSection {
+  return {
+    id: 's1',
+    sectionType: 'opal-flip-cards',
+    name: 'Flip Cards',
+    visible: true,
+    content: { heading: 'Why us' },
+    settings: {},
+    ...overrides,
+  }
+}
+
+describe('pluggable admin section renderers', () => {
+  it('renders the structural placeholder when no renderer is registered', () => {
+    render(<SectionRenderer section={customSection()} />)
+    expect(screen.getByText(/Custom section "opal-flip-cards"/)).toBeTruthy()
+  })
+
+  it('renders a registered custom renderer instead of the placeholder', () => {
+    const renderers: AdminSectionRendererMap = {
+      'opal-flip-cards': ({ section }) => (
+        <div data-testid="opal-renderer">{String(section.content?.heading)}</div>
+      ),
+    }
+    render(
+      <AdminSectionRenderersProvider value={renderers}>
+        <SectionRenderer section={customSection()} />
+      </AdminSectionRenderersProvider>,
+    )
+    expect(screen.getByTestId('opal-renderer').textContent).toBe('Why us')
+    expect(screen.queryByText(/Custom section "opal-flip-cards"/)).toBeNull()
+  })
+
+  it('passes the resolved render options to the custom renderer', () => {
+    const seen: unknown[] = []
+    const renderers: AdminSectionRendererMap = {
+      'opal-flip-cards': ({ options }) => {
+        seen.push(options)
+        return <div>{options.renderImage({ src: '/x.png', alt: 'x' })}</div>
+      },
+    }
+    render(
+      <AdminSectionRenderersProvider value={renderers}>
+        <SectionRenderer section={customSection()} />
+      </AdminSectionRenderersProvider>,
+    )
+    const options = seen[0] as { sanitizeHtml: (h: string) => string; baseUrl: string }
+    expect(options.sanitizeHtml('<b>x</b>')).toBe('<b>x</b>')
+    expect(options.baseUrl).toBe('')
+    expect(screen.getByAltText('x')).toBeTruthy()
+  })
+
+  describe('throwing renderers', () => {
+    beforeEach(() => {
+      // React logs boundary-caught errors; keep test output clean.
+      vi.spyOn(console, 'error').mockImplementation(() => {})
+    })
+    afterEach(() => {
+      vi.restoreAllMocks()
+    })
+
+    it('falls back to the structural placeholder instead of crashing the canvas', () => {
+      const renderers: AdminSectionRendererMap = {
+        'opal-flip-cards': () => {
+          throw new Error('consumer renderer exploded')
+        },
+      }
+      render(
+        <AdminSectionRenderersProvider value={renderers}>
+          <SectionRenderer section={customSection()} />
+        </AdminSectionRenderersProvider>,
+      )
+      expect(screen.getByText(/Custom section "opal-flip-cards"/)).toBeTruthy()
+    })
+  })
+
+  it('does not affect built-in section types', () => {
+    const renderers: AdminSectionRendererMap = {
+      hero: () => <div data-testid="hijacked-hero" />,
+    }
+    render(
+      <AdminSectionRenderersProvider value={renderers}>
+        <SectionRenderer
+          section={customSection({ sectionType: 'hero', name: 'Hero', content: {} })}
+        />
+      </AdminSectionRenderersProvider>,
+    )
+    // Built-in types always use the built-in canvas component.
+    expect(screen.queryByTestId('hijacked-hero')).toBeNull()
+  })
+})