@actuate-media/cms-admin 0.12.0 → 0.13.0

package/src/__tests__/components/notification-bell.test.tsx

@@ -0,0 +1,379 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from 'vitest'
+import React from 'react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+import { NotificationBell, type NotificationsApi } from '../../components/NotificationBell.js'
+import type {
+  Notification,
+  NotificationOutcome,
+  NotificationStreamHandle,
+  NotificationStreamOptions,
+} from '../../lib/notifications-client.js'
+
+function ok<T>(value: T): NotificationOutcome<T> {
+  return { ok: true, result: value }
+}
+
+function err(error = 'boom', status = 500): NotificationOutcome<never> {
+  return { ok: false, error, status }
+}
+
+function row(overrides: Partial<Notification> = {}): Notification {
+  return {
+    id: 'n-1',
+    userId: 'user-1',
+    kind: 'comment_reply',
+    documentId: 'doc-1',
+    commentId: 'c-1',
+    payload: {
+      kind: 'comment_reply',
+      actorId: 'someone',
+      actorName: 'Someone',
+      excerpt: 'hi',
+    },
+    readAt: null,
+    createdAt: '2026-01-01T00:00:00.000Z',
+    ...overrides,
+  }
+}
+
+function createFakeApi() {
+  let rows: Notification[] = []
+  const calls: { name: string; args: unknown[] }[] = []
+  const api: NotificationsApi = {
+    list: vi.fn(async (opts) => {
+      calls.push({ name: 'list', args: [opts] })
+      return ok(opts.includeRead ? rows : rows.filter((r) => r.readAt === null))
+    }),
+    unread: vi.fn(async () => {
+      calls.push({ name: 'unread', args: [] })
+      return ok(rows.filter((r) => r.readAt === null).length)
+    }),
+    markRead: vi.fn(async (id) => {
+      calls.push({ name: 'markRead', args: [id] })
+      const target = rows.find((r) => r.id === id)
+      if (!target) return err('not found', 404)
+      target.readAt = '2026-01-02T00:00:00.000Z'
+      return ok(target)
+    }),
+    markAllRead: vi.fn(async () => {
+      calls.push({ name: 'markAllRead', args: [] })
+      let n = 0
+      for (const r of rows) {
+        if (r.readAt === null) {
+          r.readAt = '2026-01-02T00:00:00.000Z'
+          n++
+        }
+      }
+      return ok(n)
+    }),
+  }
+  return {
+    api,
+    calls,
+    setRows: (next: Notification[]) => {
+      rows = next
+    },
+    rows: () => rows,
+  }
+}
+
+describe('NotificationBell — badge', () => {
+  it('shows the unread badge from the unread() call', async () => {
+    const fake = createFakeApi()
+    fake.setRows([row(), row({ id: 'n-2' })])
+    render(<NotificationBell api={fake.api} pollIntervalMs={0} />)
+    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('2'))
+  })
+
+  it('hides the badge when count is 0', async () => {
+    const fake = createFakeApi()
+    render(<NotificationBell api={fake.api} pollIntervalMs={0} />)
+    // Let the initial unread() settle.
+    await waitFor(() => expect(fake.api.unread).toHaveBeenCalled())
+    expect(screen.queryByTestId('bell-badge')).toBeNull()
+  })
+
+  it('clamps the badge at "99+"', async () => {
+    const fake = createFakeApi()
+    fake.setRows(Array.from({ length: 150 }, (_, i) => row({ id: `n-${i}` })))
+    render(<NotificationBell api={fake.api} pollIntervalMs={0} />)
+    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('99+'))
+  })
+
+  it('polls unread() at pollIntervalMs', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true })
+    try {
+      const fake = createFakeApi()
+      render(<NotificationBell api={fake.api} pollIntervalMs={5000} />)
+      await waitFor(() => expect(fake.api.unread).toHaveBeenCalledTimes(1))
+      await act(async () => {
+        vi.advanceTimersByTime(5000)
+      })
+      expect(fake.api.unread).toHaveBeenCalledTimes(2)
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+})
+
+describe('NotificationBell — dropdown', () => {
+  it('shows the empty state when there are no rows', async () => {
+    const fake = createFakeApi()
+    render(<NotificationBell api={fake.api} pollIntervalMs={0} />)
+    await waitFor(() => expect(fake.api.unread).toHaveBeenCalled())
+    fireEvent.click(screen.getByTestId('bell-button'))
+    await waitFor(() => expect(screen.getByTestId('bell-dropdown')).toBeTruthy())
+    await waitFor(() => expect(screen.getByText('All caught up.')).toBeTruthy())
+  })
+
+  it('renders one button per row with the formatted summary', async () => {
+    const fake = createFakeApi()
+    fake.setRows([
+      row({
+        id: 'n-a',
+        payload: {
+          kind: 'comment_reply',
+          actorId: 'x',
+          actorName: 'Alice',
+          excerpt: 'good',
+        },
+      }),
+      row({
+        id: 'n-b',
+        kind: 'comment_resolved',
+        payload: {
+          kind: 'comment_resolved',
+          actorId: 'y',
+          actorName: 'Bob',
+          rootExcerpt: 'fix',
+        },
+      }),
+    ])
+    render(<NotificationBell api={fake.api} pollIntervalMs={0} />)
+    await waitFor(() => expect(fake.api.unread).toHaveBeenCalled())
+    fireEvent.click(screen.getByTestId('bell-button'))
+    await waitFor(() => expect(screen.getByTestId('bell-row-n-a')).toBeTruthy())
+    expect(screen.getByTestId('bell-row-n-a').textContent).toContain('Alice replied')
+    expect(screen.getByTestId('bell-row-n-b').textContent).toContain('Bob resolved')
+  })
+
+  it('marks a row read optimistically, then via the API', async () => {
+    const fake = createFakeApi()
+    const onSelect = vi.fn()
+    fake.setRows([row()])
+    render(<NotificationBell api={fake.api} pollIntervalMs={0} onSelect={onSelect} />)
+    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+    fireEvent.click(screen.getByTestId('bell-button'))
+    await waitFor(() => expect(screen.getByTestId('bell-row-n-1')).toBeTruthy())
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('bell-row-n-1'))
+    })
+    expect(fake.api.markRead).toHaveBeenCalledWith('n-1')
+    expect(onSelect).toHaveBeenCalledTimes(1)
+    expect(screen.queryByTestId('bell-badge')).toBeNull()
+  })
+
+  it('rolls back the optimistic update when markRead fails', async () => {
+    const fake = createFakeApi()
+    ;(fake.api.markRead as ReturnType<typeof vi.fn>).mockResolvedValueOnce(err('server', 500))
+    const onError = vi.fn()
+    fake.setRows([row()])
+    render(<NotificationBell api={fake.api} pollIntervalMs={0} onError={onError} />)
+    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+    fireEvent.click(screen.getByTestId('bell-button'))
+    await waitFor(() => expect(screen.getByTestId('bell-row-n-1')).toBeTruthy())
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('bell-row-n-1'))
+    })
+    expect(onError).toHaveBeenCalledWith('server')
+    // The badge should bounce back to 1.
+    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+  })
+
+  it('marks all read in one click and disables the button after', async () => {
+    const fake = createFakeApi()
+    fake.setRows([row(), row({ id: 'n-2' })])
+    render(<NotificationBell api={fake.api} pollIntervalMs={0} />)
+    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('2'))
+    fireEvent.click(screen.getByTestId('bell-button'))
+    await waitFor(() => expect(screen.getByTestId('bell-mark-all')).toBeTruthy())
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('bell-mark-all'))
+    })
+    expect(fake.api.markAllRead).toHaveBeenCalled()
+    expect((screen.getByTestId('bell-mark-all') as HTMLButtonElement).disabled).toBe(true)
+  })
+
+  it('surfaces list() errors via onError', async () => {
+    const fake = createFakeApi()
+    ;(fake.api.list as ReturnType<typeof vi.fn>).mockResolvedValueOnce(err('CSRF', 403))
+    const onError = vi.fn()
+    render(<NotificationBell api={fake.api} pollIntervalMs={0} onError={onError} />)
+    await waitFor(() => expect(fake.api.unread).toHaveBeenCalled())
+    fireEvent.click(screen.getByTestId('bell-button'))
+    await waitFor(() => expect(onError).toHaveBeenCalledWith('CSRF'))
+  })
+})
+
+// ---------------------------------------------------------------------------
+// SSE push channel (Phase 7) — verify the bell wires up subscribe(),
+// processes incoming notifications, and tears down on unmount.
+// ---------------------------------------------------------------------------
+describe('NotificationBell — SSE push', () => {
+  function withSubscribe(api: NotificationsApi) {
+    let captured: NotificationStreamOptions | undefined
+    let closed = false
+    const handle: NotificationStreamHandle = {
+      close: () => {
+        closed = true
+      },
+    }
+    const subscribe = vi.fn((opts: NotificationStreamOptions) => {
+      captured = opts
+      return handle
+    })
+    return {
+      api: { ...api, subscribe },
+      push: (n: Notification) => captured?.onNotification(n),
+      pushError: (e: Event) => captured?.onError?.(e),
+      isClosed: () => closed,
+    }
+  }
+
+  it('subscribes on mount and bumps the badge when a new notification arrives', async () => {
+    const fake = createFakeApi()
+    const wired = withSubscribe(fake.api)
+    render(<NotificationBell api={wired.api} pollIntervalMs={0} />)
+    await waitFor(() => expect(fake.api.unread).toHaveBeenCalled())
+    await act(async () => {
+      wired.push(row({ id: 'sse-1' }))
+    })
+    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+  })
+
+  it('does not double-count a notification that arrives via both SSE and REST', async () => {
+    const fake = createFakeApi()
+    const wired = withSubscribe(fake.api)
+    fake.setRows([row({ id: 'race' })])
+    render(<NotificationBell api={wired.api} pollIntervalMs={0} />)
+    // Open the dropdown so the row is in `items` from the REST list.
+    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+    fireEvent.click(screen.getByTestId('bell-button'))
+    await waitFor(() => expect(screen.getByTestId('bell-row-race')).toBeTruthy())
+    // Now push the same row via SSE — must NOT add a duplicate or
+    // bump the badge above 1.
+    await act(async () => {
+      wired.push(row({ id: 'race' }))
+    })
+    expect(screen.getAllByTestId('bell-row-race')).toHaveLength(1)
+    expect(screen.getByTestId('bell-badge').textContent).toBe('1')
+  })
+
+  it('prepends new pushed rows to the open dropdown', async () => {
+    const fake = createFakeApi()
+    const wired = withSubscribe(fake.api)
+    fake.setRows([row({ id: 'old' })])
+    render(<NotificationBell api={wired.api} pollIntervalMs={0} />)
+    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+    fireEvent.click(screen.getByTestId('bell-button'))
+    await waitFor(() => expect(screen.getByTestId('bell-row-old')).toBeTruthy())
+    await act(async () => {
+      wired.push(row({ id: 'fresh' }))
+    })
+    const rows = screen.getAllByTestId(/^bell-row-/)
+    expect(rows[0]!.getAttribute('data-testid')).toBe('bell-row-fresh')
+  })
+
+  it('does NOT bump the badge when the pushed notification is already read', async () => {
+    const fake = createFakeApi()
+    const wired = withSubscribe(fake.api)
+    render(<NotificationBell api={wired.api} pollIntervalMs={0} />)
+    await waitFor(() => expect(fake.api.unread).toHaveBeenCalled())
+    await act(async () => {
+      wired.push(row({ id: 'already-read', readAt: '2026-01-02T00:00:00.000Z' }))
+    })
+    // Already-read notifications still appear in the list when the
+    // user opens the dropdown with includeRead=true, but they must
+    // NOT register a fresh unread bump.
+    expect(screen.queryByTestId('bell-badge')).toBeNull()
+  })
+
+  it('closes the SSE subscription when the bell unmounts', async () => {
+    const fake = createFakeApi()
+    const wired = withSubscribe(fake.api)
+    const { unmount } = render(<NotificationBell api={wired.api} pollIntervalMs={0} />)
+    await waitFor(() => expect(fake.api.unread).toHaveBeenCalled())
+    unmount()
+    expect(wired.isClosed()).toBe(true)
+  })
+
+  it('does not surface transient SSE errors via onError (poll loop handles convergence)', async () => {
+    const fake = createFakeApi()
+    const wired = withSubscribe(fake.api)
+    const onError = vi.fn()
+    render(<NotificationBell api={wired.api} pollIntervalMs={0} onError={onError} />)
+    await waitFor(() => expect(fake.api.unread).toHaveBeenCalled())
+    await act(async () => {
+      wired.pushError(new Event('error'))
+    })
+    // Deliberately quiet — see NotificationBell SSE handler comment.
+    expect(onError).not.toHaveBeenCalled()
+  })
+
+  it('mark-all-read failure does not drop SSE rows that arrived mid-flight', async () => {
+    const fake = createFakeApi()
+    const wired = withSubscribe(fake.api)
+    fake.setRows([row({ id: 'before' })])
+    // Hold the markAllRead promise so we can interleave an SSE push.
+    let resolveMark: (v: NotificationOutcome<number>) => void = () => undefined
+    ;(wired.api.markAllRead as ReturnType<typeof vi.fn>).mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          resolveMark = resolve
+        }),
+    )
+    const onError = vi.fn()
+    render(<NotificationBell api={wired.api} pollIntervalMs={0} onError={onError} />)
+    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+    fireEvent.click(screen.getByTestId('bell-button'))
+    await waitFor(() => expect(screen.getByTestId('bell-row-before')).toBeTruthy())
+
+    // Click mark-all — handler optimistically marks 'before' read,
+    // but the API promise is still pending.
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('bell-mark-all'))
+    })
+    // While in flight, a fresh notification arrives via SSE.
+    await act(async () => {
+      wired.push(row({ id: 'mid-flight' }))
+    })
+
+    // Now resolve the API with a failure.
+    await act(async () => {
+      resolveMark({ ok: false, error: 'server', status: 500 })
+      // flush promise chain
+      await Promise.resolve()
+    })
+
+    expect(onError).toHaveBeenCalledWith('server')
+    // The original row was rolled back to unread...
+    expect(screen.getByTestId('bell-row-before').getAttribute('data-read')).toBe('false')
+    // ...and the SSE arrival is still present (not dropped by the
+    // legacy snapshot-replace rollback).
+    expect(screen.getByTestId('bell-row-mid-flight')).toBeTruthy()
+  })
+
+  it('still mounts cleanly when api.subscribe is undefined (no SSE support)', async () => {
+    const fake = createFakeApi()
+    // Strip the `subscribe` member entirely — defaultApi has it,
+    // but consumer-provided test APIs may not.
+    const apiWithoutSubscribe: NotificationsApi = { ...fake.api }
+    delete (apiWithoutSubscribe as { subscribe?: unknown }).subscribe
+    render(<NotificationBell api={apiWithoutSubscribe} pollIntervalMs={0} />)
+    await waitFor(() => expect(fake.api.unread).toHaveBeenCalled())
+    // No crash, badge from unread() shows nothing, no items.
+    expect(screen.queryByTestId('bell-badge')).toBeNull()
+  })
+})

package/src/__tests__/components/offline-status.test.tsx

@@ -0,0 +1,66 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest'
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+import { OfflineStatus, describeOfflineStatus } from '../../components/OfflineStatus.js'
+
+describe('describeOfflineStatus', () => {
+  it('error wins over everything', () => {
+    expect(describeOfflineStatus('connected', 'error').tone).toBe('bad')
+    expect(describeOfflineStatus('disconnected', 'error').tone).toBe('bad')
+  })
+
+  it('reports Synced when offline is unsupported but socket is connected', () => {
+    const out = describeOfflineStatus('connected', 'unsupported')
+    expect(out.tone).toBe('good')
+    expect(out.label).toBe('Synced')
+  })
+
+  it('warns when offline is unsupported and socket is disconnected', () => {
+    expect(describeOfflineStatus('disconnected', 'unsupported').tone).toBe('warn')
+  })
+
+  it('shows Connecting… when offline is unsupported and socket is connecting', () => {
+    expect(describeOfflineStatus('connecting', 'unsupported').label).toBe('Connecting…')
+  })
+
+  it('reports Restoring local copy… while IndexedDB is loading', () => {
+    expect(describeOfflineStatus('connecting', 'loading').label).toMatch(/Restoring/)
+    expect(describeOfflineStatus('connecting', 'pending').label).toMatch(/Restoring/)
+  })
+
+  it('reports Saved & synced when both ready', () => {
+    const out = describeOfflineStatus('connected', 'ready')
+    expect(out.tone).toBe('good')
+    expect(out.label).toBe('Saved & synced')
+  })
+
+  it('reports Saved locally when offline is ready but socket is disconnected', () => {
+    const out = describeOfflineStatus('disconnected', 'ready')
+    expect(out.tone).toBe('warn')
+    expect(out.label).toMatch(/Saved locally/)
+  })
+
+  it('reports Saved locally — reconnecting… while reconnecting', () => {
+    expect(describeOfflineStatus('connecting', 'ready').label).toMatch(/reconnecting/)
+  })
+})
+
+describe('<OfflineStatus />', () => {
+  it('renders the resolved label + tone', () => {
+    render(<OfflineStatus connection="connected" offline="ready" />)
+    const chip = screen.getByTestId('offline-status')
+    expect(chip.textContent).toContain('Saved & synced')
+    expect(chip.dataset.tone).toBe('good')
+  })
+
+  it('switches tone when conditions change', () => {
+    const { rerender } = render(<OfflineStatus connection="connected" offline="ready" />)
+    expect(screen.getByTestId('offline-status').dataset.tone).toBe('good')
+    rerender(<OfflineStatus connection="disconnected" offline="ready" />)
+    expect(screen.getByTestId('offline-status').dataset.tone).toBe('warn')
+    rerender(<OfflineStatus connection="connected" offline="error" />)
+    expect(screen.getByTestId('offline-status').dataset.tone).toBe('bad')
+  })
+})

package/src/__tests__/components/presence-chips-helpers.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest'
+
+import { nameToInitials } from '../../components/PresenceChips.js'
+
+describe('nameToInitials', () => {
+  it('returns the first letter of a single name', () => {
+    expect(nameToInitials('Alice')).toBe('A')
+  })
+
+  it('returns the first letter of two name parts', () => {
+    expect(nameToInitials('Alice Cooper')).toBe('AC')
+  })
+
+  it('caps at two letters for three+ part names', () => {
+    expect(nameToInitials('Mary Jane Watson')).toBe('MJ')
+  })
+
+  it('uppercases the result', () => {
+    expect(nameToInitials('alice cooper')).toBe('AC')
+  })
+
+  it('trims surrounding whitespace before processing', () => {
+    expect(nameToInitials('  Alice  ')).toBe('A')
+  })
+
+  it('collapses multiple whitespace separators', () => {
+    expect(nameToInitials('Alice    Cooper')).toBe('AC')
+  })
+
+  it('falls back to "?" for an empty string', () => {
+    expect(nameToInitials('')).toBe('?')
+  })
+
+  it('falls back to "?" for a whitespace-only string', () => {
+    expect(nameToInitials('   ')).toBe('?')
+  })
+
+  it('handles a single emoji name without crashing', () => {
+    const result = nameToInitials('🐱 Whiskers')
+    // JS upper-case is a no-op for the cat — test just confirms we don't crash
+    // and return *something* with two character-positions.
+    expect(result.length).toBeGreaterThan(0)
+  })
+})

package/src/__tests__/lib/active-editor.test.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import type { Editor } from '@tiptap/react'
+import {
+  setActiveEditor,
+  getActiveEditor,
+  clearActiveEditorIf,
+  subscribeActiveEditor,
+} from '../../lib/active-editor.js'
+
+function fakeEditor(): Editor {
+  return {} as Editor
+}
+
+beforeEach(() => {
+  setActiveEditor(null)
+})
+
+describe('active-editor registry', () => {
+  it('stores and returns the active editor', () => {
+    const a = fakeEditor()
+    expect(getActiveEditor()).toBeNull()
+    setActiveEditor(a)
+    expect(getActiveEditor()).toBe(a)
+  })
+
+  it('replaces the active editor', () => {
+    const a = fakeEditor()
+    const b = fakeEditor()
+    setActiveEditor(a)
+    setActiveEditor(b)
+    expect(getActiveEditor()).toBe(b)
+  })
+
+  it('accepts null to clear the active editor', () => {
+    setActiveEditor(fakeEditor())
+    setActiveEditor(null)
+    expect(getActiveEditor()).toBeNull()
+  })
+
+  it('notifies subscribers when the active editor changes', () => {
+    const listener = vi.fn()
+    const unsubscribe = subscribeActiveEditor(listener)
+    setActiveEditor(fakeEditor())
+    expect(listener).toHaveBeenCalledTimes(1)
+    setActiveEditor(fakeEditor())
+    expect(listener).toHaveBeenCalledTimes(2)
+    unsubscribe()
+    setActiveEditor(fakeEditor())
+    expect(listener).toHaveBeenCalledTimes(2)
+  })
+
+  it('skips notifications when the same editor is set twice', () => {
+    const listener = vi.fn()
+    const a = fakeEditor()
+    subscribeActiveEditor(listener)
+    setActiveEditor(a)
+    setActiveEditor(a)
+    expect(listener).toHaveBeenCalledTimes(1)
+  })
+
+  it('clearActiveEditorIf clears only when matched', () => {
+    const a = fakeEditor()
+    const b = fakeEditor()
+    setActiveEditor(a)
+    clearActiveEditorIf(b)
+    expect(getActiveEditor()).toBe(a)
+    clearActiveEditorIf(a)
+    expect(getActiveEditor()).toBeNull()
+  })
+})