@actuate-media/cms-admin 0.65.0 → 0.67.0

package/src/__tests__/views/onboarding-block.render.test.tsx

@@ -0,0 +1,193 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import {
+  OnboardingBlock,
+  deriveOnboardingSteps,
+  shouldShowOnboarding,
+  type OnboardingSignals,
+} from '../../views/dashboard/OnboardingBlock.js'
+
+function signals(over: Partial<OnboardingSignals> = {}): OnboardingSignals {
+  return {
+    postsAndPagesCount: 0,
+    mediaCount: 0,
+    seoScore: 0,
+    userCount: 1,
+    hasApiTraffic: false,
+    ...over,
+  }
+}
+
+describe('deriveOnboardingSteps', () => {
+  it('marks only the workspace step done on a brand-new site', () => {
+    const steps = deriveOnboardingSteps(signals())
+    expect(steps).toHaveLength(6)
+    expect(steps.filter((s) => s.done).map((s) => s.id)).toEqual(['workspace'])
+  })
+
+  it('derives each step from its dashboard signal', () => {
+    const steps = deriveOnboardingSteps(
+      signals({
+        postsAndPagesCount: 3,
+        mediaCount: 2,
+        seoScore: 71,
+        userCount: 4,
+        hasApiTraffic: true,
+      }),
+    )
+    expect(steps.every((s) => s.done)).toBe(true)
+  })
+
+  it('treats a lone user and zero SEO score as incomplete steps', () => {
+    const steps = deriveOnboardingSteps(signals({ userCount: 1, seoScore: 0 }))
+    const byId = Object.fromEntries(steps.map((s) => [s.id, s.done]))
+    expect(byId['invite']).toBe(false)
+    expect(byId['seo']).toBe(false)
+    expect(byId['api-key']).toBe(false)
+  })
+})
+
+describe('shouldShowOnboarding', () => {
+  it('shows only when both posts+pages and media are empty', () => {
+    expect(shouldShowOnboarding(signals())).toBe(true)
+    expect(shouldShowOnboarding(signals({ postsAndPagesCount: 1 }))).toBe(false)
+    expect(shouldShowOnboarding(signals({ mediaCount: 1 }))).toBe(false)
+  })
+})
+
+describe('OnboardingBlock', () => {
+  it('renders the welcome banner with the derived progress count', () => {
+    render(<OnboardingBlock signals={signals()} onNavigate={() => {}} />)
+
+    expect(screen.getByText(/Welcome to ActuateCMS/)).toBeTruthy()
+    // 1 of 6 done (workspace only) on a fresh site.
+    expect(screen.getByText(/1\/6 steps complete/)).toBeTruthy()
+
+    const bar = screen.getByRole('progressbar', { name: 'Onboarding progress' })
+    expect(bar.getAttribute('aria-valuenow')).toBe('1')
+    expect(bar.getAttribute('aria-valuemax')).toBe('6')
+  })
+
+  it('updates the progress count as steps derive complete', () => {
+    render(
+      <OnboardingBlock signals={signals({ userCount: 3, seoScore: 50 })} onNavigate={() => {}} />,
+    )
+
+    expect(screen.getByText(/3\/6 steps complete/)).toBeTruthy()
+    expect(
+      screen
+        .getByRole('progressbar', { name: 'Onboarding progress' })
+        .getAttribute('aria-valuenow'),
+    ).toBe('3')
+  })
+
+  it('renders all six checklist labels with accessible completion state', () => {
+    render(<OnboardingBlock signals={signals()} onNavigate={() => {}} />)
+
+    for (const label of [
+      'Create your workspace',
+      'Create your first Post or Page',
+      'Upload media assets',
+      'Configure SEO defaults',
+      'Get your API key',
+      'Invite team members',
+    ]) {
+      expect(screen.getByText(label)).toBeTruthy()
+    }
+
+    // Completion is announced via text, not color alone.
+    expect(screen.getAllByText('(completed)')).toHaveLength(1)
+    expect(screen.getAllByText('(not completed)')).toHaveLength(5)
+  })
+
+  it('navigates through quick links via onNavigate', () => {
+    const onNavigate = vi.fn()
+    render(<OnboardingBlock signals={signals()} onNavigate={onNavigate} />)
+
+    fireEvent.click(screen.getByRole('button', { name: /Invite team/ }))
+    expect(onNavigate).toHaveBeenCalledWith('/settings?tab=users')
+
+    fireEvent.click(screen.getByRole('button', { name: /API Reference/ }))
+    expect(onNavigate).toHaveBeenCalledWith('/settings?tab=api-keys')
+
+    fireEvent.click(screen.getByRole('button', { name: /SEO defaults/ }))
+    expect(onNavigate).toHaveBeenCalledWith('/settings?tab=seo')
+  })
+})
+
+// ── Dashboard integration: visibility rule ─────────────────────────────────
+
+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 baseStats = {
+  totalDocuments: 0,
+  totalMedia: 0,
+  totalUsers: 1,
+  formCount: 0,
+  avgSeoScore: 0,
+  webhookCount: 0,
+  webhookActiveCount: 0,
+  collectionCounts: {} as Record<string, number>,
+  statusCounts: {},
+  recentDocuments: [] as unknown[],
+}
+
+function statsResult(over: Partial<typeof baseStats> = {}) {
+  return {
+    data: { ...baseStats, ...over },
+    loading: false,
+    error: null,
+    exhausted: false,
+    refetch: () => {},
+  }
+}
+
+describe('Dashboard onboarding visibility', () => {
+  it('replaces the activity grid with onboarding when the site is empty', () => {
+    responses['/stats'] = statsResult()
+
+    render(<Dashboard config={{ collections: [] }} session={{}} onNavigate={() => {}} />)
+
+    expect(screen.getByText(/Welcome to ActuateCMS/)).toBeTruthy()
+    expect(screen.queryByText('Recent Activity')).toBeNull()
+    expect(screen.queryByText('Publishing Queue')).toBeNull()
+    expect(screen.queryByText('Content Health')).toBeNull()
+    // The Delivery API card below the block stays.
+    expect(screen.getByText('Delivery API')).toBeTruthy()
+    delete responses['/stats']
+  })
+
+  it('renders the normal dashboard when posts or pages exist', () => {
+    responses['/stats'] = statsResult({ collectionCounts: { posts: 2 } })
+
+    render(
+      <Dashboard
+        config={{ collections: [{ slug: 'posts', type: 'post' }] }}
+        session={{}}
+        onNavigate={() => {}}
+      />,
+    )
+
+    expect(screen.queryByText(/Welcome to ActuateCMS/)).toBeNull()
+    expect(screen.getByText('Recent Activity')).toBeTruthy()
+    delete responses['/stats']
+  })
+
+  it('renders the normal dashboard when only media exists', () => {
+    responses['/stats'] = statsResult({ totalMedia: 5 })
+
+    render(<Dashboard config={{ collections: [] }} session={{}} onNavigate={() => {}} />)
+
+    expect(screen.queryByText(/Welcome to ActuateCMS/)).toBeNull()
+    expect(screen.getByText('Recent Activity')).toBeTruthy()
+    delete responses['/stats']
+  })
+})

package/src/__tests__/views/pages-list-view.test.tsx

@@ -1,6 +1,6 @@
 // @vitest-environment happy-dom
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { cleanup, render, screen, fireEvent, waitFor } from '@testing-library/react'
 
 // Keep the pure shaping helpers (applyPagesQuery/groupPages) real — the
 // list view relies on them for in-memory filtering — and stub only the
@@ -14,11 +14,24 @@ vi.mock('../../lib/pages-service.js', async (importOriginal) => {
   }
 })
 
+// This happy-dom environment doesn't expose a functional localStorage, which
+// the view reads for the persisted List/Tree mode.
+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(),
+})
+
 const { PagesListView } = await import('../../views/Pages/PagesListView.js')
 import type { Page, PageTag, PagesDataset } from '../../lib/pages-service.js'
 
 afterEach(() => {
+  cleanup()
   fetchPagesDataset.mockReset()
+  // The view persists the List/Tree choice — clear it so tests stay isolated.
+  storage.clear()
 })
 
 function page(id: string, over: Partial<Page> = {}): Page {
@@ -117,3 +130,82 @@ describe('PagesListView', () => {
     expect(onNavigate).toHaveBeenCalledWith('/pages/about/edit')
   })
 })
+
+describe('PagesListView tree mode', () => {
+  function hierarchyDataset() {
+    return dataset({
+      pages: [
+        page('about', { title: 'About', path: '/about' }),
+        page('team', { title: 'Team', path: '/about/team' }),
+        page('blog', { title: 'Blog', path: '/blog' }),
+      ],
+    })
+  }
+
+  it('nests children and toggles expand/collapse', async () => {
+    fetchPagesDataset.mockResolvedValue(hierarchyDataset())
+    render(<PagesListView onNavigate={() => {}} />)
+    await screen.findByText('About')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Tree view' }))
+
+    // Root with children starts expanded → child visible; tree subtitle.
+    expect(screen.getByText(/3 pages total/)).toBeTruthy()
+    expect(screen.getByText('Team')).toBeTruthy()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Collapse About' }))
+    expect(screen.queryByText('Team')).toBeNull()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Expand About' }))
+    expect(screen.getByText('Team')).toBeTruthy()
+  })
+
+  it('flattens the tree while a status filter is active (expand state ignored)', async () => {
+    fetchPagesDataset.mockResolvedValue(
+      dataset({
+        pages: [
+          page('about', { title: 'About', path: '/about' }),
+          page('team', { title: 'Team', path: '/about/team', status: 'DRAFT' }),
+        ],
+      }),
+    )
+    render(<PagesListView onNavigate={() => {}} />)
+    await screen.findByText('About')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Tree view' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Collapse About' }))
+    expect(screen.queryByText('Team')).toBeNull()
+
+    // DRAFT filter → the collapsed child surfaces as a depth-0 match.
+    fireEvent.change(screen.getByDisplayValue('All statuses'), { target: { value: 'DRAFT' } })
+    expect(await screen.findByText('Team')).toBeTruthy()
+    expect(screen.queryByText('About')).toBeNull()
+    // Flattened rows carry no expand affordance.
+    expect(screen.queryByRole('button', { name: /Expand|Collapse/ })).toBeNull()
+  })
+
+  it('routes "Add sub-page" to /pages/new with the parent preselected', async () => {
+    const onNavigate = vi.fn()
+    fetchPagesDataset.mockResolvedValue(hierarchyDataset())
+    render(<PagesListView onNavigate={onNavigate} />)
+    await screen.findByText('About')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Tree view' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Add sub-page under "Blog"' }))
+    expect(onNavigate).toHaveBeenCalledWith('/pages/new?parent=blog')
+  })
+
+  it('remembers the tree preference via localStorage', async () => {
+    fetchPagesDataset.mockResolvedValue(hierarchyDataset())
+    const first = render(<PagesListView onNavigate={() => {}} />)
+    await screen.findByText('About')
+    fireEvent.click(screen.getByRole('button', { name: 'Tree view' }))
+    expect(storage.get('actuate.pages.viewMode')).toBe('tree')
+    first.unmount()
+
+    fetchPagesDataset.mockResolvedValue(hierarchyDataset())
+    render(<PagesListView onNavigate={() => {}} />)
+    // Mounts straight into tree mode → tree subtitle.
+    expect(await screen.findByText(/3 pages total/)).toBeTruthy()
+  })
+})