@actuate-media/cms-admin 0.15.0 → 0.16.1

package/src/__tests__/lib/posts-service.test.ts

@@ -0,0 +1,279 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+// `cmsApi` is the only dependency the service uses; we mock it so the
+// tests run hermetically without an HTTP server. Each mocked response
+// follows the SDK's `{ data, error }` envelope.
+const cmsApiMock = vi.fn()
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (...args: unknown[]) => cmsApiMock(...args),
+}))
+
+const { fetchPosts, fetchPostTypes } = await import('../../lib/posts-service.js')
+
+interface DocFixture {
+  id: string
+  collection: string
+  title: string
+  slug: string
+  status: 'PUBLISHED' | 'DRAFT' | 'SCHEDULED'
+  createdById: string
+  updatedById: string
+  publishedAt: string | null
+  scheduledAt: string | null
+  createdAt: string
+  updatedAt: string
+  data: Record<string, unknown> | null
+}
+
+function doc(
+  o: Partial<DocFixture> & Pick<DocFixture, 'id' | 'collection' | 'title' | 'slug'>,
+): DocFixture {
+  return {
+    status: 'PUBLISHED',
+    createdById: 'u-david',
+    updatedById: 'u-david',
+    publishedAt: '2026-05-10T00:00:00.000Z',
+    scheduledAt: null,
+    createdAt: '2026-05-10T00:00:00.000Z',
+    updatedAt: '2026-05-10T00:00:00.000Z',
+    data: { seoScore: 80 },
+    ...o,
+  }
+}
+
+const COLLECTIONS_RESPONSE = [
+  {
+    slug: 'blog',
+    labels: { singular: 'Blog Post', plural: 'Blog' },
+    type: 'post',
+    urlPrefix: 'blog',
+    description: 'Blog posts',
+    icon: 'file-text',
+    color: 'purple',
+    group: 'Posts',
+    hidden: false,
+    fieldCount: 12,
+  },
+  {
+    slug: 'case-studies',
+    labels: { singular: 'Case Study', plural: 'Case Studies' },
+    type: 'post',
+    urlPrefix: 'case-studies',
+    description: 'Case studies',
+    icon: 'briefcase',
+    color: 'green',
+    group: 'Posts',
+    hidden: false,
+    fieldCount: 13,
+  },
+  {
+    slug: 'news',
+    labels: { singular: 'News Item', plural: 'News' },
+    type: 'post',
+    urlPrefix: 'news',
+    description: 'News',
+    icon: 'newspaper',
+    color: 'orange',
+    group: 'Posts',
+    hidden: false,
+    fieldCount: 11,
+  },
+  {
+    slug: 'pages',
+    labels: { singular: 'Page', plural: 'Pages' },
+    type: 'page',
+    urlPrefix: '',
+    description: null,
+    icon: null,
+    color: null,
+    group: null,
+    hidden: false,
+    fieldCount: 5,
+  },
+]
+
+const USERS_RESPONSE = {
+  users: [
+    { id: 'u-sarah', name: 'Sarah Morgan', email: 'sarah@example.com' },
+    { id: 'u-maria', name: 'Maria K', email: 'maria@example.com' },
+    { id: 'u-david', name: 'David Carlson', email: 'david@example.com' },
+  ],
+}
+
+const DOCS: Record<string, DocFixture[]> = {
+  blog: [
+    doc({
+      id: 'b1',
+      collection: 'blog',
+      title: 'The Future of AI Content Marketing',
+      slug: 'ai-content-marketing',
+      createdById: 'u-maria',
+      updatedById: 'u-maria',
+      updatedAt: '2026-05-18T00:00:00.000Z',
+      data: { seoScore: 88 },
+    }),
+    doc({
+      id: 'b2',
+      collection: 'blog',
+      title: 'ActuateCMS vs Contentful',
+      slug: 'actuatecms-vs-contentful',
+      updatedAt: '2026-05-15T00:00:00.000Z',
+      data: { seoScore: 92 },
+    }),
+    doc({
+      id: 'b3',
+      collection: 'blog',
+      title: 'Mid-Year Review',
+      slug: 'mid-year-cms-trends',
+      status: 'DRAFT',
+      createdById: 'u-sarah',
+      updatedById: 'u-sarah',
+      publishedAt: null,
+      updatedAt: '2026-05-22T00:00:00.000Z',
+      data: { seoScore: null },
+    }),
+  ],
+  'case-studies': [
+    doc({
+      id: 'c1',
+      collection: 'case-studies',
+      title: 'Healthcare Client SEO Results',
+      slug: 'healthcare-seo',
+      status: 'DRAFT',
+      publishedAt: null,
+      updatedAt: '2026-05-19T00:00:00.000Z',
+      data: { seoScore: 38 },
+    }),
+  ],
+  news: [
+    doc({
+      id: 'n1',
+      collection: 'news',
+      title: 'Q2 2026 Product Roadmap Update',
+      slug: 'q2-roadmap',
+      status: 'SCHEDULED',
+      createdById: 'u-sarah',
+      updatedById: 'u-sarah',
+      publishedAt: null,
+      scheduledAt: '2026-06-01T00:00:00.000Z',
+      updatedAt: '2026-05-24T00:00:00.000Z',
+      data: { seoScore: 62 },
+    }),
+  ],
+}
+
+function installDefaultMocks() {
+  cmsApiMock.mockImplementation((url: string) => {
+    if (url === '/collections') return { data: COLLECTIONS_RESPONSE }
+    if (url.startsWith('/users')) return { data: USERS_RESPONSE }
+    const m = url.match(/^\/collections\/([^/?]+)/)
+    if (m && m[1]) {
+      const slug = decodeURIComponent(m[1])
+      return { data: { docs: DOCS[slug] ?? [], total: DOCS[slug]?.length ?? 0 } }
+    }
+    return { error: `unexpected url: ${url}` }
+  })
+}
+
+describe('posts-service.fetchPostTypes', () => {
+  beforeEach(() => {
+    cmsApiMock.mockReset()
+    installDefaultMocks()
+  })
+
+  it('returns only post-typed collections (filters out type: page)', async () => {
+    const types = await fetchPostTypes()
+    expect(types.map((t) => t.slug).sort()).toEqual(['blog', 'case-studies', 'news'])
+  })
+
+  it('maps collection metadata onto the PostType shape', async () => {
+    const types = await fetchPostTypes()
+    const blog = types.find((t) => t.slug === 'blog')
+    expect(blog).toMatchObject({
+      id: 'blog',
+      slug: 'blog',
+      name: 'Blog',
+      singularName: 'Blog Post',
+      description: 'Blog posts',
+      urlBase: '/blog',
+      accentColor: 'purple',
+      icon: 'file-text',
+      fieldCount: 12,
+      active: true,
+    })
+    // postCount is 0 here because fetchPostTypes doesn't load docs.
+    expect(blog?.postCount).toBe(0)
+  })
+})
+
+describe('posts-service.fetchPosts', () => {
+  beforeEach(() => {
+    cmsApiMock.mockReset()
+    installDefaultMocks()
+  })
+
+  it('aggregates posts across all post-typed collections', async () => {
+    const res = await fetchPosts({ pageSize: 20 })
+    expect(res.total).toBe(5)
+    expect(res.posts.map((p) => p.id).sort()).toEqual(['b1', 'b2', 'b3', 'c1', 'n1'])
+  })
+
+  it('joins authors via /users', async () => {
+    const res = await fetchPosts({ pageSize: 20 })
+    const ai = res.posts.find((p) => p.id === 'b1')
+    expect(ai?.authorName).toBe('Maria K')
+    expect(ai?.authorInitials).toBe('MK')
+  })
+
+  it('sorts by updated date desc by default and surfaces scheduled date for SCHEDULED posts', async () => {
+    const res = await fetchPosts({ pageSize: 20 })
+    // The SCHEDULED news post should win the "date" sort because its
+    // scheduledAt is the most recent date in the fixture set.
+    expect(res.posts[0]?.id).toBe('n1')
+    expect(res.posts[0]?.publishDate).toBe('2026-06-01T00:00:00.000Z')
+  })
+
+  it('filters by postType', async () => {
+    const res = await fetchPosts({ postType: 'blog', pageSize: 20 })
+    expect(res.total).toBe(3)
+    expect(res.posts.every((p) => p.postTypeId === 'blog')).toBe(true)
+  })
+
+  it('filters by status', async () => {
+    const res = await fetchPosts({ status: 'DRAFT', pageSize: 20 })
+    expect(res.posts.map((p) => p.id).sort()).toEqual(['b3', 'c1'])
+  })
+
+  it('filters by author', async () => {
+    const res = await fetchPosts({ author: 'u-sarah', pageSize: 20 })
+    expect(res.posts.map((p) => p.id).sort()).toEqual(['b3', 'n1'])
+  })
+
+  it('searches across title, slug, author name, and post type', async () => {
+    const res = await fetchPosts({ search: 'roadmap' })
+    expect(res.posts).toHaveLength(1)
+    expect(res.posts[0]?.id).toBe('n1')
+  })
+
+  it('paginates and exposes the unfiltered tab counts', async () => {
+    const res = await fetchPosts({ pageSize: 2 })
+    expect(res.posts).toHaveLength(2)
+    expect(res.total).toBe(5)
+    const blogTab = res.types.find((t) => t.slug === 'blog')
+    expect(blogTab?.postCount).toBe(3)
+    const newsTab = res.types.find((t) => t.slug === 'news')
+    expect(newsTab?.postCount).toBe(1)
+  })
+
+  it('returns only authors actually present on posts', async () => {
+    const res = await fetchPosts({ pageSize: 20 })
+    expect(res.authors.map((a) => a.id).sort()).toEqual(['u-david', 'u-maria', 'u-sarah'])
+  })
+
+  it('uses the postType filter to scope the result set without touching the tab counts', async () => {
+    const res = await fetchPosts({ postType: 'news', pageSize: 20 })
+    expect(res.total).toBe(1)
+    // Tab counts still reflect the full corpus.
+    expect(res.types.find((t) => t.slug === 'blog')?.postCount).toBe(3)
+  })
+})

package/src/__tests__/lib/useApiData.test.ts

@@ -0,0 +1,105 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { act, renderHook, waitFor } from '@testing-library/react'
+
+// `cmsApi` is the hook's only I/O dependency — mock it so retry/backoff
+// behaviour can be exercised deterministically. Responses follow the SDK
+// `{ data, error, status }` envelope.
+const cmsApiMock = vi.fn()
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (...args: unknown[]) => cmsApiMock(...args),
+}))
+
+const { useApiData } = await import('../../lib/useApiData.js')
+
+beforeEach(() => {
+  cmsApiMock.mockReset()
+})
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+describe('useApiData', () => {
+  it('loads data on mount and clears the loading flag', async () => {
+    cmsApiMock.mockResolvedValue({ data: { ok: 1 }, status: 200 })
+
+    const { result } = renderHook(() => useApiData<{ ok: number }>('/x'))
+
+    expect(result.current.loading).toBe(true)
+    await waitFor(() => expect(result.current.loading).toBe(false))
+
+    expect(result.current.data).toEqual({ ok: 1 })
+    expect(result.current.error).toBeNull()
+    expect(result.current.exhausted).toBe(false)
+    expect(cmsApiMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not fetch when the endpoint is null', () => {
+    const { result } = renderHook(() => useApiData<unknown>(null))
+
+    expect(result.current.loading).toBe(false)
+    expect(cmsApiMock).not.toHaveBeenCalled()
+  })
+
+  it('retries with exponential backoff, then marks the request exhausted', async () => {
+    vi.useFakeTimers()
+    cmsApiMock.mockResolvedValue({ error: 'boom', status: 500 })
+
+    const { result } = renderHook(() => useApiData('/x', null, { retryBaseMs: 10 }))
+
+    // Flush the initial attempt.
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0)
+    })
+    expect(cmsApiMock).toHaveBeenCalledTimes(1)
+    expect(result.current.exhausted).toBe(false)
+
+    // Backoff schedule with base 10ms: 10, 20, 40.
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(10)
+    })
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(20)
+    })
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(40)
+    })
+
+    // 1 initial + 3 retries = 4 total, then it gives up.
+    expect(cmsApiMock).toHaveBeenCalledTimes(4)
+    expect(result.current.exhausted).toBe(true)
+    expect(result.current.error).toBe('boom')
+    expect(result.current.loading).toBe(false)
+  })
+
+  it('recovers via refetch after exhausting retries', async () => {
+    vi.useFakeTimers()
+    cmsApiMock.mockResolvedValue({ error: 'boom', status: 500 })
+
+    const { result } = renderHook(() =>
+      useApiData<{ ok: boolean }>('/x', null, { retryBaseMs: 10 }),
+    )
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0)
+    })
+    // Run out the full backoff schedule (10 + 20 + 40).
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(70)
+    })
+    expect(result.current.exhausted).toBe(true)
+
+    cmsApiMock.mockResolvedValue({ data: { ok: true }, status: 200 })
+    await act(async () => {
+      result.current.refetch()
+    })
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0)
+    })
+
+    expect(result.current.data).toEqual({ ok: true })
+    expect(result.current.exhausted).toBe(false)
+    expect(result.current.error).toBeNull()
+  })
+})

package/src/__tests__/views/dashboard.test.tsx

@@ -0,0 +1,180 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+
+// Drive the dashboard purely through `useApiData`. Each endpoint's result
+// is looked up in `responses`, so tests can set just the data they care
+// about and everything else falls back to a benign empty state.
+const responses: Record<string, unknown> = {}
+const emptyResult = { data: null, loading: false, error: null, exhausted: false, refetch: () => {} }
+
+vi.mock('../../lib/useApiData.js', () => ({
+  useApiData: (endpoint: string | null) => responses[endpoint ?? ''] ?? emptyResult,
+}))
+
+const { Dashboard } = await import('../../views/Dashboard.js')
+
+const emptyStats = {
+  totalDocuments: 0,
+  totalMedia: 0,
+  totalUsers: 0,
+  formCount: 0,
+  avgSeoScore: 0,
+  webhookCount: 0,
+  webhookActiveCount: 0,
+  collectionCounts: {},
+  statusCounts: {},
+  recentDocuments: [] as unknown[],
+}
+
+function statsResult(over: Partial<typeof emptyStats> = {}) {
+  return {
+    data: { ...emptyStats, ...over },
+    loading: false,
+    error: null,
+    exhausted: false,
+    refetch: () => {},
+  }
+}
+
+beforeEach(() => {
+  for (const k of Object.keys(responses)) delete responses[k]
+})
+
+describe('Dashboard', () => {
+  it('renders a spinner while the primary stats request is still loading', () => {
+    responses['/stats'] = {
+      data: null,
+      loading: true,
+      error: null,
+      exhausted: false,
+      refetch: () => {},
+    }
+
+    const { container } = render(
+      <Dashboard config={{ collections: [] }} session={{}} onNavigate={() => {}} />,
+    )
+
+    expect(container.querySelector('.animate-spin')).toBeTruthy()
+    expect(screen.queryByText('Recent Activity')).toBeNull()
+  })
+
+  it('shows empty states when there is no content', () => {
+    responses['/stats'] = statsResult()
+
+    render(<Dashboard config={{ collections: [] }} session={{}} onNavigate={() => {}} />)
+
+    expect(screen.getByText('No activity yet')).toBeTruthy()
+    expect(screen.getByText('No scheduled content')).toBeTruthy()
+  })
+
+  it('surfaces a retryable banner when the stats request is exhausted', () => {
+    const refetch = vi.fn()
+    responses['/stats'] = { data: null, loading: false, error: 'down', exhausted: true, refetch }
+
+    render(<Dashboard config={{ collections: [] }} session={{}} onNavigate={() => {}} />)
+
+    fireEvent.click(screen.getByText('Retry'))
+    expect(refetch).toHaveBeenCalledTimes(1)
+  })
+
+  // ── EI-1 regression: recent-activity rows must open the *correct* editor ──
+
+  it('routes a recent post to the section-based post editor (not the legacy editor)', () => {
+    const onNavigate = vi.fn()
+    responses['/stats'] = statsResult({
+      recentDocuments: [
+        {
+          id: 'p1',
+          title: 'My Post',
+          status: 'DRAFT',
+          collection: 'blog',
+          updatedAt: new Date().toISOString(),
+          author: 'Sam',
+        },
+      ],
+    })
+
+    render(
+      <Dashboard
+        config={{
+          collections: [
+            { slug: 'blog', type: 'post', labels: { singular: 'Blog', plural: 'Blogs' } },
+          ],
+        }}
+        session={{}}
+        onNavigate={onNavigate}
+      />,
+    )
+
+    // EI-2: the row is an accessible button, so it is reachable by role.
+    fireEvent.click(screen.getByRole('button', { name: /My Post/ }))
+    expect(onNavigate).toHaveBeenCalledWith('/posts/blog/p1/edit')
+  })
+
+  it('routes a recent page to the full page editor', () => {
+    const onNavigate = vi.fn()
+    responses['/stats'] = statsResult({
+      recentDocuments: [
+        {
+          id: 'pg1',
+          title: 'Home',
+          status: 'PUBLISHED',
+          collection: 'pages',
+          updatedAt: new Date().toISOString(),
+          author: 'Sam',
+        },
+      ],
+    })
+
+    render(
+      <Dashboard
+        config={{
+          collections: [
+            { slug: 'pages', type: 'page', labels: { singular: 'Page', plural: 'Pages' } },
+          ],
+        }}
+        session={{}}
+        onNavigate={onNavigate}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: /Home/ }))
+    expect(onNavigate).toHaveBeenCalledWith('/pages/pg1/edit')
+  })
+
+  it('routes a scheduled queue item through the same editor resolver', () => {
+    const onNavigate = vi.fn()
+    responses['/stats'] = statsResult({
+      recentDocuments: [
+        {
+          id: 'p9',
+          title: 'Scheduled Post',
+          status: 'SCHEDULED',
+          collection: 'blog',
+          updatedAt: new Date().toISOString(),
+          author: 'Sam',
+        },
+      ],
+    })
+
+    render(
+      <Dashboard
+        config={{
+          collections: [
+            { slug: 'blog', type: 'post', labels: { singular: 'Blog', plural: 'Blogs' } },
+          ],
+        }}
+        session={{}}
+        onNavigate={onNavigate}
+      />,
+    )
+
+    // The publishing-queue row (right column) — there are two buttons named
+    // for the post (activity + queue); the queue "Manage" header button also
+    // targets the first scheduled item. Click the queue row directly.
+    const queueButtons = screen.getAllByRole('button', { name: /Scheduled Post/ })
+    fireEvent.click(queueButtons[queueButtons.length - 1]!)
+    expect(onNavigate).toHaveBeenCalledWith('/posts/blog/p9/edit')
+  })
+})

package/src/__tests__/views/posts-list-view.test.ts

@@ -0,0 +1,110 @@
+import { describe, expect, it } from 'vitest'
+import { pageNumbers } from '../../views/Posts/PostsListView.js'
+import { renderSnippet } from '../../views/Posts/NewPostTypeInstructions.js'
+import { POST_TYPE_PRESETS } from '../../views/Posts/post-type-presets.js'
+import { POST_TYPE_ICONS } from '../../components/posts/icons.js'
+
+/**
+ * `pageNumbers` is the only pure helper exported from PostsListView.
+ * It drives the pagination footer's sliding window so the bug-prone
+ * cases (single page, exact-window boundary, ellipsis on either end)
+ * have explicit coverage.
+ */
+describe('pageNumbers', () => {
+  it('returns 1..N when total ≤ 7', () => {
+    expect(pageNumbers(1, 1)).toEqual([1])
+    expect(pageNumbers(3, 5)).toEqual([1, 2, 3, 4, 5])
+    expect(pageNumbers(4, 7)).toEqual([1, 2, 3, 4, 5, 6, 7])
+  })
+
+  it('shows leading and trailing ellipses for a mid-range page', () => {
+    expect(pageNumbers(50, 100)).toEqual([1, '…', 49, 50, 51, '…', 100])
+  })
+
+  it('hides leading ellipsis when current is near the start', () => {
+    expect(pageNumbers(2, 20)).toEqual([1, 2, 3, '…', 20])
+  })
+
+  it('hides trailing ellipsis when current is near the end', () => {
+    expect(pageNumbers(19, 20)).toEqual([1, '…', 18, 19, 20])
+  })
+})
+
+describe('renderSnippet', () => {
+  const base = {
+    slug: 'reviews',
+    singular: 'Review',
+    plural: 'Reviews',
+    color: 'purple' as const,
+    icon: 'file-text' as const,
+    description: 'Reviews',
+  }
+
+  it('emits a valid-looking collection entry with the slug, labels, and admin metadata', () => {
+    const out = renderSnippet({ ...base, extraFields: [] })
+    expect(out).toContain("'reviews': {")
+    expect(out).toContain("slug: 'reviews'")
+    expect(out).toContain("singular: 'Review'")
+    expect(out).toContain("type: 'post'")
+    expect(out).toContain("group: 'Posts'")
+    expect(out).toContain("color: 'purple'")
+    // No type-specific block when there are no extra fields.
+    expect(out).not.toContain('type-specific fields')
+  })
+
+  it('injects preset extra fields after the shared base fields', () => {
+    const out = renderSnippet({
+      ...base,
+      extraFields: ["client: { type: 'text', label: 'Client Name' },"],
+    })
+    expect(out).toContain('// type-specific fields')
+    expect(out).toContain("client: { type: 'text', label: 'Client Name' },")
+    // Base fields are still present alongside the injected ones.
+    expect(out).toContain("title: { type: 'text', label: 'Title', required: true },")
+    expect(out).toContain("metaDescription: { type: 'text', label: 'SEO Description' },")
+  })
+
+  it('escapes single quotes in free-text fields so the snippet stays valid', () => {
+    const out = renderSnippet({
+      ...base,
+      description: "Editors' picks",
+      extraFields: [],
+    })
+    expect(out).toContain("description: 'Editors\\' picks'")
+  })
+
+  it('falls back to a placeholder slug when slug is empty', () => {
+    const out = renderSnippet({ ...base, slug: '', extraFields: [] })
+    expect(out).toContain("'new-type': {")
+  })
+})
+
+describe('POST_TYPE_PRESETS', () => {
+  it('has unique keys and slugs', () => {
+    const keys = POST_TYPE_PRESETS.map((p) => p.key)
+    const slugs = POST_TYPE_PRESETS.map((p) => p.slug)
+    expect(new Set(keys).size).toBe(keys.length)
+    expect(new Set(slugs).size).toBe(slugs.length)
+  })
+
+  it('only references icons that exist in the shared icon registry', () => {
+    for (const preset of POST_TYPE_PRESETS) {
+      expect(POST_TYPE_ICONS[preset.icon]).toBeDefined()
+    }
+  })
+
+  it('uses only palette colors the badge component understands', () => {
+    const allowed = new Set(['purple', 'green', 'orange', 'blue', 'red', 'pink'])
+    for (const preset of POST_TYPE_PRESETS) {
+      expect(allowed.has(preset.color)).toBe(true)
+    }
+  })
+
+  it('every preset extra field line is a complete key: { … }, definition', () => {
+    for (const preset of POST_TYPE_PRESETS) {
+      for (const line of preset.extraFields) {
+        expect(line).toMatch(/^[a-zA-Z][\w]*: \{.*\},$/)
+      }
+    }
+  })
+})