@prenta/admin 0.92.0

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

@@ -0,0 +1,372 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+
+/**
+ * Settings > AI reads three backends: /ai/settings (defaults + masked
+ * providers), /ai/models (catalog), /ai/usage/summary. Provider connection
+ * actions hit /ai/providers/*. Keys are never returned — only a masked last4.
+ */
+const SETTINGS_RESPONSE = {
+  settings: {
+    defaultProviderId: 'p1',
+    defaultModelId: 'anthropic:claude-sonnet-4-6',
+    features: [
+      {
+        key: 'ai.features.contentWriting',
+        label: 'Content writing suggestions',
+        description: 'Draft, rewrite, summarize content.',
+        enabled: true,
+        category: 'content',
+        requiredCapabilities: ['text'],
+      },
+      {
+        key: 'ai.features.redirectChainFlattening',
+        label: 'Redirect chain flattening',
+        description: 'Suggest single-hop redirects.',
+        enabled: false,
+        category: 'seo',
+        requiredCapabilities: ['text'],
+      },
+    ],
+    budget: { monthlyTokenLimit: 1000000 },
+  },
+  providers: [
+    {
+      id: 'p1',
+      provider: 'anthropic',
+      displayName: 'Anthropic (Claude)',
+      enabled: true,
+      status: 'connected',
+      apiKeyLast4: 'f12a',
+      apiKeySource: 'database',
+      keyManagedExternally: false,
+      hasKey: true,
+      createdAt: '2026-01-01T00:00:00.000Z',
+      updatedAt: '2026-01-01T00:00:00.000Z',
+      updatedBy: 'u1',
+    },
+  ],
+  defaultModel: null,
+}
+
+const MODELS = [
+  {
+    id: 'anthropic:claude-sonnet-4-6',
+    provider: 'anthropic',
+    providerModelId: 'claude-sonnet-4-6',
+    displayName: 'Claude Sonnet (balanced)',
+    status: 'available',
+    capabilities: { text: true, vision: true, toolCalling: true },
+    contextWindow: 200000,
+    inputModalities: ['text', 'image'],
+    outputModalities: ['text'],
+    pricing: { inputPerMillion: 3, outputPerMillion: 15 },
+    lastSyncedAt: '2026-01-01T00:00:00.000Z',
+    source: 'config',
+  },
+  {
+    id: 'anthropic:claude-haiku',
+    provider: 'anthropic',
+    providerModelId: 'claude-haiku',
+    displayName: 'Claude Haiku (fast)',
+    status: 'available',
+    capabilities: { text: true },
+    contextWindow: 200000,
+    inputModalities: ['text'],
+    outputModalities: ['text'],
+    pricing: { inputPerMillion: 0.8, outputPerMillion: 4 },
+    lastSyncedAt: '2026-01-01T00:00:00.000Z',
+    source: 'config',
+  },
+]
+
+const USAGE = {
+  totalTokens: 412000,
+  promptTokens: 0,
+  completionTokens: 0,
+  monthlyTokenLimit: 1000000,
+  periodStart: '2026-06-01T00:00:00.000Z',
+  periodEnd: '2026-07-01T00:00:00.000Z',
+  runCount: 5,
+}
+
+// Mutable overrides so individual tests can tweak the loaded shape.
+let settingsResponse: typeof SETTINGS_RESPONSE = SETTINGS_RESPONSE
+
+const cmsApi = vi.fn(async (endpoint: string, options?: { method?: string }) => {
+  const method = options?.method ?? 'GET'
+  if (endpoint === '/ai/settings' && method === 'GET')
+    return { data: settingsResponse, status: 200 }
+  if (endpoint === '/ai/settings' && method === 'PUT')
+    return { data: settingsResponse, status: 200 }
+  if (endpoint === '/ai/models' && method === 'GET')
+    return { data: { models: MODELS }, status: 200 }
+  if (endpoint === '/ai/usage/summary') return { data: USAGE, status: 200 }
+  if (endpoint === '/ai/brand-voice/analyze' && method === 'POST') {
+    return {
+      data: {
+        draft: {
+          name: 'Acme Voice',
+          tone: 'confident, warm',
+          audience: 'B2B marketers',
+          guidelines: '- Do: lead with benefits',
+          sampleText: 'We help teams ship with clarity.',
+        },
+        sampleCount: 3,
+      },
+      status: 200,
+    }
+  }
+  if (endpoint === '/ai/providers/p1/test' && method === 'POST') {
+    return {
+      data: {
+        provider: settingsResponse.providers[0],
+        result: { ok: true, status: 'connected', message: 'Connection successful.' },
+      },
+      status: 200,
+    }
+  }
+  if (endpoint === '/ai/providers/p1/sync-models' && method === 'POST') {
+    return { data: { models: MODELS, fromFallback: false, warning: null }, status: 200 }
+  }
+  return { data: {}, status: 200 }
+})
+
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (e: string, o?: unknown) => cmsApi(e, o as any),
+  ensureCsrfToken: vi.fn(async () => {}),
+}))
+
+vi.mock('sonner', () => ({
+  toast: { success: vi.fn(), error: vi.fn(), warning: vi.fn(), loading: vi.fn() },
+}))
+
+const { AISettingsTab } = await import('../../views/settings/AISettingsTab.js')
+
+function deepClone<T>(v: T): T {
+  return JSON.parse(JSON.stringify(v))
+}
+
+beforeEach(() => {
+  cmsApi.mockClear()
+  settingsResponse = deepClone(SETTINGS_RESPONSE)
+})
+
+describe('AISettingsTab', () => {
+  it('loads the default provider, model, and capability badges', async () => {
+    render(<AISettingsTab role="ADMIN" />)
+    expect(await screen.findByText('AI Assistant')).toBeTruthy()
+
+    const assistant = screen.getByRole('region', { name: 'AI Assistant' })
+    expect((within(assistant).getByLabelText('Default model') as HTMLSelectElement).value).toBe(
+      'anthropic:claude-sonnet-4-6',
+    )
+    // Capability badges render as text (not color-only).
+    expect(within(assistant).getByText('Vision')).toBeTruthy()
+    expect(within(assistant).getByText('200,000 token context')).toBeTruthy()
+  })
+
+  it('shows real monthly usage (never a fabricated number)', async () => {
+    render(<AISettingsTab role="ADMIN" />)
+    expect(await screen.findByText('412K tokens used')).toBeTruthy()
+    expect(screen.getByRole('progressbar').getAttribute('aria-valuenow')).toBe('41')
+  })
+
+  it('refreshes the model catalog via the provider sync endpoint', async () => {
+    render(<AISettingsTab role="ADMIN" />)
+    const assistant = await screen.findByRole('region', { name: 'AI Assistant' })
+    fireEvent.click(within(assistant).getByRole('button', { name: 'Refresh models' }))
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/ai/providers/p1/sync-models',
+        expect.objectContaining({ method: 'POST' }),
+      ),
+    )
+  })
+
+  it('tests a provider connection', async () => {
+    render(<AISettingsTab role="ADMIN" />)
+    await screen.findByText('AI Assistant')
+    fireEvent.click(screen.getByRole('button', { name: 'Test connection' }))
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/ai/providers/p1/test',
+        expect.objectContaining({ method: 'POST' }),
+      ),
+    )
+  })
+
+  it('toggles a feature and saves it to /ai/settings', async () => {
+    render(<AISettingsTab role="ADMIN" />)
+    await screen.findByText('AI Features')
+    fireEvent.click(screen.getByRole('switch', { name: 'Content writing suggestions' }))
+
+    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    expect(save.disabled).toBe(false)
+    fireEvent.click(save)
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/ai/settings',
+        expect.objectContaining({ method: 'PUT' }),
+      ),
+    )
+    const putCall = cmsApi.mock.calls.find(
+      ([e, o]) => e === '/ai/settings' && (o as { method?: string })?.method === 'PUT',
+    )
+    const body = JSON.parse((putCall![1] as { body: string }).body)
+    const cw = body.features.find((f: { key: string }) => f.key === 'ai.features.contentWriting')
+    expect(cw.enabled).toBe(false)
+  })
+
+  it('routes a feature to a specific model and persists the override', async () => {
+    render(<AISettingsTab role="ADMIN" />)
+    await screen.findByText('AI Features')
+
+    // Only the enabled content-writing feature exposes a per-feature Model select.
+    const featuresRegion = screen.getByRole('region', { name: 'AI Features' })
+    const select = within(featuresRegion).getByLabelText('Model') as HTMLSelectElement
+    expect(select.value).toBe('') // inherits the default
+
+    fireEvent.change(select, { target: { value: 'anthropic:claude-haiku' } })
+
+    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    expect(save.disabled).toBe(false)
+    fireEvent.click(save)
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/ai/settings',
+        expect.objectContaining({ method: 'PUT' }),
+      ),
+    )
+    const putCall = cmsApi.mock.calls.find(
+      ([e, o]) => e === '/ai/settings' && (o as { method?: string })?.method === 'PUT',
+    )
+    const body = JSON.parse((putCall![1] as { body: string }).body)
+    const cw = body.features.find((f: { key: string }) => f.key === 'ai.features.contentWriting')
+    expect(cw.modelId).toBe('anthropic:claude-haiku')
+  })
+
+  it('warns when a feature would run on a model missing a required capability', async () => {
+    settingsResponse = deepClone(SETTINGS_RESPONSE)
+    // Alt-text needs vision; route it through the text-only Haiku model.
+    settingsResponse.settings.features.push({
+      key: 'ai.features.mediaAltText',
+      label: 'Auto alt-text for media',
+      description: 'Generate alt text for images.',
+      enabled: true,
+      category: 'media',
+      requiredCapabilities: ['vision'],
+      modelId: 'anthropic:claude-haiku',
+    } as (typeof SETTINGS_RESPONSE)['settings']['features'][number])
+
+    render(<AISettingsTab role="ADMIN" />)
+    await screen.findByText('AI Features')
+    expect(await screen.findByText(/can't do vision/i)).toBeTruthy()
+  })
+
+  it('edits the brand voice and persists it to /ai/settings', async () => {
+    render(<AISettingsTab role="ADMIN" />)
+    const region = await screen.findByRole('region', { name: 'Brand voice' })
+
+    fireEvent.click(within(region).getByRole('switch', { name: 'Apply brand voice' }))
+    fireEvent.change(within(region).getByLabelText('Tone'), {
+      target: { value: 'confident, warm' },
+    })
+
+    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    expect(save.disabled).toBe(false)
+    fireEvent.click(save)
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/ai/settings',
+        expect.objectContaining({ method: 'PUT' }),
+      ),
+    )
+    const putCall = cmsApi.mock.calls.find(
+      ([e, o]) => e === '/ai/settings' && (o as { method?: string })?.method === 'PUT',
+    )
+    const body = JSON.parse((putCall![1] as { body: string }).body)
+    expect(body.brandVoice).toMatchObject({ enabled: true, tone: 'confident, warm' })
+  })
+
+  it('analyzes published content and drafts brand voice fields', async () => {
+    render(
+      <AISettingsTab
+        role="ADMIN"
+        config={{
+          collections: {
+            pages: { slug: 'pages', type: 'page', labels: { plural: 'Pages' } },
+            posts: { slug: 'posts', type: 'post', labels: { plural: 'Posts' } },
+          },
+        }}
+      />,
+    )
+    const region = await screen.findByRole('region', { name: 'Brand voice' })
+    fireEvent.click(within(region).getByRole('button', { name: 'Analyze & draft profile' }))
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/ai/brand-voice/analyze',
+        expect.objectContaining({ method: 'POST' }),
+      ),
+    )
+
+    expect((within(region).getByLabelText('Tone') as HTMLInputElement).value).toBe(
+      'confident, warm',
+    )
+    expect((within(region).getByLabelText('Name') as HTMLInputElement).value).toBe('Acme Voice')
+  })
+
+  it('shows export/import controls for the profile document', async () => {
+    render(<AISettingsTab role="ADMIN" />)
+    const region = await screen.findByRole('region', { name: 'Brand voice' })
+    expect(within(region).getByRole('button', { name: 'Export .md' })).toBeTruthy()
+    expect(within(region).getByRole('button', { name: 'Import .md' })).toBeTruthy()
+  })
+
+  it('disables brand voice fields for non-admins', async () => {
+    render(<AISettingsTab role="EDITOR" />)
+    const region = await screen.findByRole('region', { name: 'Brand voice' })
+    expect(
+      (within(region).getByRole('switch', { name: 'Apply brand voice' }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(true)
+    expect((within(region).getByLabelText('Tone') as HTMLInputElement).disabled).toBe(true)
+  })
+
+  it('is read-only for non-admins', async () => {
+    render(<AISettingsTab role="EDITOR" />)
+    expect(await screen.findByText(/read-only access to AI settings/i)).toBeTruthy()
+    const assistant = screen.getByRole('region', { name: 'AI Assistant' })
+    expect((within(assistant).getByLabelText('Default model') as HTMLSelectElement).disabled).toBe(
+      true,
+    )
+    expect(
+      (screen.getByRole('switch', { name: 'Content writing suggestions' }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(true)
+  })
+
+  it('renders an env-managed key as read-only', async () => {
+    settingsResponse = deepClone(SETTINGS_RESPONSE)
+    settingsResponse.providers[0]!.keyManagedExternally = true
+    settingsResponse.providers[0]!.apiKeySource = 'environment'
+    render(<AISettingsTab role="ADMIN" />)
+    expect(await screen.findByText('Managed by environment')).toBeTruthy()
+    expect(screen.getByText(/set via an environment variable/i)).toBeTruthy()
+  })
+
+  it('warns when the configured default model is no longer available', async () => {
+    settingsResponse = deepClone(SETTINGS_RESPONSE)
+    settingsResponse.settings.defaultModelId = 'anthropic:ghost-model'
+    render(<AISettingsTab role="ADMIN" />)
+    await screen.findByText('AI Assistant')
+    expect(
+      await screen.findByText(/selected model is no longer offered by the provider/i),
+    ).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,244 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+// The Appearance tab reads `/appearance` (settings + resolved brand), then on
+// save read-modify-writes `/globals/settings`. Uploads POST `/media/upload`.
+let appearanceData: any
+
+const cmsApi = vi.fn(async (endpoint: string, options?: { method?: string; body?: unknown }) => {
+  const method = options?.method ?? 'GET'
+  if (endpoint === '/appearance' && method === 'GET') return { data: appearanceData, status: 200 }
+  if (endpoint === '/globals/settings' && method === 'GET')
+    return { data: { siteTitle: 'Actuate Media' }, status: 200 }
+  if (endpoint === '/globals/settings' && method === 'PUT') return { data: {}, status: 200 }
+  if (endpoint === '/media/upload' && method === 'POST')
+    return {
+      data: { id: 'new-logo', url: 'https://cdn.example.com/x.svg', mimeType: 'image/svg+xml' },
+      status: 200,
+    }
+  if (endpoint.startsWith('/media?') && method === 'GET')
+    return {
+      data: {
+        items: [
+          {
+            id: 'existing-logo',
+            filename: 'existing.png',
+            storageKey: 'https://cdn.example.com/existing.png',
+            url: 'https://cdn.example.com/existing.png',
+            mimeType: 'image/png',
+            fileSize: 1234,
+            width: 400,
+            height: 100,
+          },
+        ],
+      },
+      status: 200,
+    }
+  return { data: {}, status: 200 }
+})
+
+vi.mock('../../lib/api.js', () => ({ cmsApi: (e: string, o?: unknown) => cmsApi(e, o as any) }))
+
+const { AppearanceTab } = await import('../../views/settings/AppearanceTab.js')
+const { LOGO_MIME, FAVICON_MIME } = await import('../../views/settings/useAppearanceSettings.js')
+
+function baseData(overrides: Record<string, unknown> = {}) {
+  return {
+    appearance: {
+      adminColorModeDefault: 'system',
+      adminAccentColor: 'purple',
+      sidebarDensity: 'default',
+      contentFont: 'DM Sans',
+      reduceMotion: false,
+    },
+    brand: { mode: 'inheritPublicBrand' },
+    resolved: { admin: { initials: 'AM' } },
+    assets: [],
+    siteTitle: 'Actuate Media',
+    ...overrides,
+  }
+}
+
+beforeEach(() => {
+  cmsApi.mockClear()
+  appearanceData = baseData()
+})
+
+describe('AppearanceTab', () => {
+  it('renders the branding/theme/typography cards with a clean (disabled) save bar', async () => {
+    render(<AppearanceTab role="ADMIN" />)
+
+    await screen.findByText('Branding')
+    expect(screen.getByText('Admin theme')).toBeTruthy()
+    expect(screen.getByText('Typography & motion')).toBeTruthy()
+    expect(screen.getByText('Brand preview')).toBeTruthy()
+    expect(
+      (screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement).disabled,
+    ).toBe(true)
+  })
+
+  it('enables Save when the accent changes and persists appearance to the settings global', async () => {
+    render(<AppearanceTab role="ADMIN" />)
+    await screen.findByText('Branding')
+
+    fireEvent.click(screen.getByRole('radio', { name: 'Blue' }))
+    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    expect(save.disabled).toBe(false)
+
+    fireEvent.click(save)
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/globals/settings',
+        expect.objectContaining({
+          method: 'PUT',
+          body: expect.stringContaining('"adminAccentColor":"blue"'),
+        }),
+      ),
+    )
+  })
+
+  it('warns when dark mode is the default but no dark-mode logo is set', async () => {
+    appearanceData = baseData({
+      appearance: {
+        adminColorModeDefault: 'dark',
+        adminAccentColor: 'purple',
+        sidebarDensity: 'default',
+        contentFont: 'DM Sans',
+        reduceMotion: false,
+      },
+    })
+    render(<AppearanceTab role="ADMIN" />)
+
+    expect(await screen.findByText(/no dark-mode logo is set/i)).toBeTruthy()
+  })
+
+  it('uploads a logo through the Media Center and enables Save', async () => {
+    render(<AppearanceTab role="ADMIN" />)
+    await screen.findByText('Branding')
+
+    const input = screen.getByLabelText('Primary logo') as HTMLInputElement
+    const file = new File(
+      ['<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"></svg>'],
+      'logo.svg',
+      { type: 'image/svg+xml' },
+    )
+    fireEvent.change(input, { target: { files: [file] } })
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/media/upload',
+        expect.objectContaining({ method: 'POST' }),
+      ),
+    )
+    await waitFor(() =>
+      expect(
+        (screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement).disabled,
+      ).toBe(false),
+    )
+  })
+
+  it('references an existing media-library asset without re-uploading', async () => {
+    render(<AppearanceTab role="ADMIN" />)
+    await screen.findByText('Branding')
+
+    fireEvent.click(screen.getByRole('button', { name: /choose primary logo from media library/i }))
+
+    const thumb = await screen.findByRole('button', { name: /existing\.png/i })
+    fireEvent.click(thumb)
+
+    // No upload should be issued — we reference the existing asset by id.
+    expect(cmsApi.mock.calls.some(([endpoint]) => endpoint === '/media/upload')).toBe(false)
+
+    const save = await screen.findByRole('button', { name: 'Save Changes' })
+    await waitFor(() => expect((save as HTMLButtonElement).disabled).toBe(false))
+    fireEvent.click(save)
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/globals/settings',
+        expect.objectContaining({
+          method: 'PUT',
+          body: expect.stringContaining('"publicPrimaryLogoAssetId":"existing-logo"'),
+        }),
+      ),
+    )
+  })
+
+  it('accepts modern image formats for logos (and a crisp subset for favicons)', () => {
+    // WebP is a first-class brand format — general media uploads are converted
+    // to WebP anyway, so re-selecting them from the library must work.
+    expect(LOGO_MIME).toEqual(
+      expect.arrayContaining([
+        'image/svg+xml',
+        'image/png',
+        'image/webp',
+        'image/jpeg',
+        'image/gif',
+        'image/avif',
+      ]),
+    )
+    expect(FAVICON_MIME).toEqual(
+      expect.arrayContaining(['image/svg+xml', 'image/png', 'image/webp']),
+    )
+    // Favicons need crisp small-size rendering — lossy photographic formats stay out.
+    expect(FAVICON_MIME).not.toContain('image/jpeg')
+  })
+
+  it('uploads a WebP logo through the Media Center', async () => {
+    // happy-dom's Image never decodes blobs — fire onload so shape detection
+    // (raster path, used for all non-SVG formats) completes.
+    vi.stubGlobal(
+      'Image',
+      class {
+        naturalWidth = 400
+        naturalHeight = 100
+        onload: (() => void) | null = null
+        onerror: (() => void) | null = null
+        set src(_v: string) {
+          queueMicrotask(() => this.onload?.())
+        }
+      },
+    )
+
+    render(<AppearanceTab role="ADMIN" />)
+    await screen.findByText('Branding')
+
+    const input = screen.getByLabelText('Primary logo') as HTMLInputElement
+    const file = new File([new Uint8Array([0x52, 0x49, 0x46, 0x46])], 'logo.webp', {
+      type: 'image/webp',
+    })
+    fireEvent.change(input, { target: { files: [file] } })
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/media/upload',
+        expect.objectContaining({ method: 'POST' }),
+      ),
+    )
+    vi.unstubAllGlobals()
+  })
+
+  it('rejects an unsupported upload type client-side with a readable error', async () => {
+    render(<AppearanceTab role="ADMIN" />)
+    await screen.findByText('Branding')
+
+    const input = screen.getByLabelText('Primary logo') as HTMLInputElement
+    const file = new File(['%PDF-1.4'], 'brochure.pdf', { type: 'application/pdf' })
+    fireEvent.change(input, { target: { files: [file] } })
+
+    expect(await screen.findByText(/unsupported file type/i)).toBeTruthy()
+    expect(cmsApi.mock.calls.some(([endpoint]) => endpoint === '/media/upload')).toBe(false)
+  })
+
+  it('is read-only for non-admins', async () => {
+    render(<AppearanceTab role="EDITOR" />)
+
+    expect(await screen.findByText(/read-only access to appearance/i)).toBeTruthy()
+    // Upload control disabled.
+    expect(
+      (screen.getByRole('button', { name: /upload primary logo/i }) as HTMLButtonElement).disabled,
+    ).toBe(true)
+  })
+})

package/src/__tests__/views/article-body-section.render.test.tsx

@@ -0,0 +1,32 @@
+// @vitest-environment happy-dom
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { ArticleBodySection } from '../../views/page-editor/sections/ArticleBodySection.js'
+import type { PageSection } from '../../lib/page-editor-service.js'
+
+function section(content: Record<string, unknown> = {}): PageSection {
+  return {
+    id: 's1',
+    sectionType: 'article-body',
+    name: 'Article Body',
+    visible: true,
+    content,
+    settings: {},
+  }
+}
+
+describe('ArticleBodySection', () => {
+  it('renders post body HTML with rich-text preview class', () => {
+    const { container } = render(
+      <ArticleBodySection
+        section={section({ source: 'field' })}
+        context={{ body: '<h2>What is Lorem Ipsum?</h2><p>Body copy.</p>' }}
+      />,
+    )
+
+    expect(screen.getByRole('heading', { level: 2, name: 'What is Lorem Ipsum?' })).toBeTruthy()
+    expect(container.querySelector('.prenta-rich-text')).toBeTruthy()
+    expect(container.querySelector('.prose')).toBeNull()
+  })
+})