@prenta/admin 0.92.0

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

@@ -0,0 +1,225 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+/**
+ * Settings > Email: provider picker + per-provider credential fields backed by
+ * GET/PUT /email/settings and POST /email/settings/test. Secrets are
+ * write-only — the API returns only `hasApiKey` / `apiKeyLast4`, never the key.
+ */
+
+interface EmailSettingsData {
+  settings: Record<string, unknown>
+  envProvider: string | null
+  factoryAvailable: boolean
+  envSenderActive: boolean
+  platformAdapter: boolean
+}
+
+const EMPTY_RESPONSE: EmailSettingsData = {
+  settings: { provider: null, hasApiKey: false, hasSmtpPass: false },
+  envProvider: null,
+  factoryAvailable: true,
+  envSenderActive: false,
+  platformAdapter: false,
+}
+
+let getResponse: EmailSettingsData = EMPTY_RESPONSE
+let putResponse: { settings: Record<string, unknown> } | null = null
+let testResponse: { data?: unknown; error?: string; status: number } = {
+  data: { success: true, sentTo: 'admin@example.com' },
+  status: 200,
+}
+
+const cmsApi = vi.fn(async (endpoint: string, options?: { method?: string; body?: string }) => {
+  const method = options?.method ?? 'GET'
+  if (endpoint === '/email/settings' && method === 'GET') {
+    return { data: getResponse, status: 200 }
+  }
+  if (endpoint === '/email/settings' && method === 'PUT') {
+    return putResponse
+      ? { data: putResponse, status: 200 }
+      : { error: 'unexpected PUT', status: 500 }
+  }
+  if (endpoint === '/email/settings/test' && method === 'POST') {
+    return testResponse
+  }
+  return { data: {}, status: 200 }
+})
+
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (e: string, o?: unknown) => cmsApi(e, o as any),
+  ensureCsrfToken: vi.fn(async () => {}),
+}))
+
+const { EmailSettingsTab } = await import('../../views/settings/EmailSettingsTab.js')
+
+function deepClone<T>(v: T): T {
+  return JSON.parse(JSON.stringify(v))
+}
+
+beforeEach(() => {
+  cmsApi.mockClear()
+  getResponse = deepClone(EMPTY_RESPONSE)
+  putResponse = null
+  testResponse = { data: { success: true, sentTo: 'admin@example.com' }, status: 200 }
+})
+
+describe('EmailSettingsTab', () => {
+  it('renders the provider picker with the unconfigured state', async () => {
+    render(<EmailSettingsTab role="ADMIN" />)
+    expect(await screen.findByRole('radio', { name: 'None' })).toBeTruthy()
+    expect(screen.getByRole('radio', { name: 'Resend' })).toBeTruthy()
+    expect(screen.getByRole('radio', { name: 'SMTP.com' })).toBeTruthy()
+    expect(screen.getByRole('radio', { name: 'Amazon SES' })).toBeTruthy()
+    expect(screen.getByRole('radio', { name: 'SMTP server' })).toBeTruthy()
+    expect(screen.getByText(/No email provider configured/)).toBeTruthy()
+  })
+
+  it('saves an SMTP.com configuration with the entered key (PUT payload contract)', async () => {
+    putResponse = {
+      settings: {
+        provider: 'smtpcom',
+        from: 'noreply@example.com',
+        channel: 'transactional',
+        hasApiKey: true,
+        apiKeyLast4: '-key',
+        hasSmtpPass: false,
+      },
+    }
+    render(<EmailSettingsTab role="ADMIN" />)
+    fireEvent.click(await screen.findByRole('radio', { name: 'SMTP.com' }))
+
+    fireEvent.change(screen.getByLabelText('Sender address'), {
+      target: { value: 'noreply@example.com' },
+    })
+    fireEvent.change(screen.getByLabelText('API key'), {
+      target: { value: 'smtpcom-secret-key' },
+    })
+    fireEvent.change(screen.getByLabelText('Sender channel'), {
+      target: { value: 'transactional' },
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
+
+    await waitFor(() => {
+      const put = cmsApi.mock.calls.find(
+        ([e, o]) => e === '/email/settings' && (o as any)?.method === 'PUT',
+      )
+      expect(put).toBeTruthy()
+      expect(JSON.parse((put![1] as any).body)).toEqual({
+        provider: 'smtpcom',
+        from: 'noreply@example.com',
+        apiKey: 'smtpcom-secret-key',
+        channel: 'transactional',
+      })
+    })
+
+    // After save the key input is cleared and the masked hint appears.
+    expect((screen.getByLabelText('API key') as HTMLInputElement).value).toBe('')
+    expect(await screen.findByText(/ends in -key/)).toBeTruthy()
+  })
+
+  it('omits the apiKey from the payload when a stored key is kept', async () => {
+    getResponse = {
+      ...deepClone(EMPTY_RESPONSE),
+      settings: {
+        provider: 'resend',
+        from: 'old@example.com',
+        hasApiKey: true,
+        apiKeyLast4: 'k3y9',
+        hasSmtpPass: false,
+      },
+    }
+    putResponse = {
+      settings: {
+        provider: 'resend',
+        from: 'new@example.com',
+        hasApiKey: true,
+        apiKeyLast4: 'k3y9',
+        hasSmtpPass: false,
+      },
+    }
+    render(<EmailSettingsTab role="ADMIN" />)
+    const from = await screen.findByLabelText('Sender address')
+    expect(await screen.findByText(/ends in k3y9/)).toBeTruthy()
+
+    fireEvent.change(from, { target: { value: 'new@example.com' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
+
+    await waitFor(() => {
+      const put = cmsApi.mock.calls.find(
+        ([e, o]) => e === '/email/settings' && (o as any)?.method === 'PUT',
+      )
+      expect(put).toBeTruthy()
+      const body = JSON.parse((put![1] as any).body)
+      expect(body).toEqual({ provider: 'resend', from: 'new@example.com' })
+      expect(body).not.toHaveProperty('apiKey')
+    })
+  })
+
+  it('sends a test email and shows the result', async () => {
+    getResponse = {
+      ...deepClone(EMPTY_RESPONSE),
+      settings: {
+        provider: 'resend',
+        from: 'a@b.co',
+        hasApiKey: true,
+        apiKeyLast4: 'k3y9',
+        hasSmtpPass: false,
+      },
+    }
+    render(<EmailSettingsTab role="ADMIN" />)
+    fireEvent.click(await screen.findByRole('button', { name: /Send test email/ }))
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/email/settings/test',
+        expect.objectContaining({ method: 'POST' }),
+      ),
+    )
+    expect(await screen.findByText(/Test email sent to admin@example.com/)).toBeTruthy()
+  })
+
+  it('surfaces a failed test send', async () => {
+    getResponse = {
+      ...deepClone(EMPTY_RESPONSE),
+      settings: {
+        provider: 'resend',
+        from: 'a@b.co',
+        hasApiKey: true,
+        hasSmtpPass: false,
+      },
+    }
+    testResponse = { error: 'SMTP.com API error (401): bad key', status: 502 }
+    render(<EmailSettingsTab role="ADMIN" />)
+    fireEvent.click(await screen.findByRole('button', { name: /Send test email/ }))
+    expect(await screen.findByText(/SMTP\.com API error \(401\)/)).toBeTruthy()
+  })
+
+  it('shows the env-managed notice and disables editing for non-admins', async () => {
+    getResponse = {
+      ...deepClone(EMPTY_RESPONSE),
+      envProvider: 'resend',
+      envSenderActive: true,
+    }
+    render(<EmailSettingsTab role="EDITOR" />)
+    expect(await screen.findByText(/read-only access/)).toBeTruthy()
+    expect(screen.getByText(/Environment variables currently configure/)).toBeTruthy()
+    expect((screen.getByRole('radio', { name: 'Resend' }) as HTMLButtonElement).disabled).toBe(true)
+  })
+
+  it('warns when the email plugin is missing for a configured provider', async () => {
+    getResponse = {
+      ...deepClone(EMPTY_RESPONSE),
+      factoryAvailable: false,
+      settings: {
+        provider: 'resend',
+        from: 'a@b.co',
+        hasApiKey: true,
+        hasSmtpPass: false,
+      },
+    }
+    render(<EmailSettingsTab role="ADMIN" />)
+    expect(await screen.findByText(/requires the email plugin/)).toBeTruthy()
+  })
+})

package/src/__tests__/views/form-editor.render.test.tsx

@@ -0,0 +1,187 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+// Drive the editor through a mocked forms-service so the test owns the data
+// and can assert that every tab persists through the typed Forms API (the
+// same backend as the Forms list's Schema pane — no more legacy
+// /collections/forms writes).
+const FORM = {
+  id: 'f1',
+  name: 'Contact Us',
+  slug: 'contact-us',
+  description: 'General contact',
+  status: 'active' as const,
+  fields: [
+    { id: 'c1', label: 'Full Name', key: 'name', type: 'text', required: true, sortOrder: 0 },
+    { id: 'c2', label: 'Email', key: 'email', type: 'email', required: true, sortOrder: 1 },
+  ],
+  successMessage: 'Thanks for reaching out!',
+  redirectUrl: '',
+  analytics: { enabled: false },
+  totalEntries: 3,
+  notifyEnabled: true,
+}
+
+const fetchFormById = vi.fn(async (_id: string) => ({ ...FORM }))
+const fetchFormSchema = vi.fn(async (_id: string) => ({
+  fields: FORM.fields,
+  activeVersionId: 'v1',
+  versions: [],
+}))
+const updateForm = vi.fn(async (_id: string, patch: Record<string, unknown>) => ({
+  data: { ...FORM, ...patch },
+}))
+const saveFormSchema = vi.fn(async (_id: string, _fields: unknown[]) => ({ data: {} }))
+const createForm = vi.fn(async (payload: Record<string, unknown>) => ({
+  data: { ...FORM, id: 'new-form-id', ...payload },
+}))
+const fetchNotificationSettings = vi.fn(async (_id: string) => ({
+  enabled: true,
+  recipients: ['team@example.com'],
+}))
+const updateNotificationSettings = vi.fn(async () => ({ data: {} }))
+const fetchEmbedSettings = vi.fn(async () => ({}))
+const fetchFormWebhooks = vi.fn(async () => [])
+
+vi.mock('../../lib/forms-service.js', () => ({
+  fetchFormById: (id: string) => fetchFormById(id),
+  fetchFormSchema: (id: string) => fetchFormSchema(id),
+  updateForm: (id: string, patch: Record<string, unknown>) => updateForm(id, patch),
+  saveFormSchema: (id: string, fields: unknown[]) => saveFormSchema(id, fields),
+  createForm: (payload: Record<string, unknown>) => createForm(payload),
+  fetchNotificationSettings: (id: string) => fetchNotificationSettings(id),
+  updateNotificationSettings: () => updateNotificationSettings(),
+  testNotificationSettings: vi.fn(async () => ({ data: { notified: 1, autoresponded: false } })),
+  fetchEmbedSettings: () => fetchEmbedSettings(),
+  updateEmbedSettings: vi.fn(async () => ({ data: {} })),
+  fetchFormWebhooks: () => fetchFormWebhooks(),
+  createFormWebhook: vi.fn(async () => ({ data: {} })),
+  updateFormWebhook: vi.fn(async () => ({ data: {} })),
+  deleteFormWebhook: vi.fn(async () => ({})),
+  testFormWebhook: vi.fn(async () => ({ data: { ok: true } })),
+}))
+
+vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn() } }))
+
+const { FormEditor } = await import('../../views/FormEditor.js')
+
+// Radix Tabs activates on mousedown (button 0), not a bare click.
+function selectTab(name: string) {
+  const tab = screen.getByRole('tab', { name })
+  fireEvent.mouseDown(tab, { button: 0 })
+  fireEvent.click(tab)
+}
+
+beforeEach(() => {
+  fetchFormById.mockClear()
+  fetchFormSchema.mockClear()
+  updateForm.mockClear()
+  saveFormSchema.mockClear()
+  createForm.mockClear()
+  fetchNotificationSettings.mockClear()
+})
+
+describe('FormEditor (existing form)', () => {
+  it('loads through the typed Forms API and renders every settings tab', async () => {
+    render(<FormEditor formId="f1" onNavigate={() => {}} />)
+
+    expect(await screen.findByRole('heading', { name: 'Contact Us' })).toBeTruthy()
+    expect(fetchFormById).toHaveBeenCalledWith('f1')
+    expect(fetchFormSchema).toHaveBeenCalledWith('f1')
+
+    const tabs = screen.getAllByRole('tab').map((t) => t.textContent)
+    expect(tabs).toEqual([
+      'Details',
+      'Fields',
+      'Notifications',
+      'Analytics',
+      'Embed',
+      'Integrations',
+    ])
+  })
+
+  it('saves details (message confirmation clears the redirect URL)', async () => {
+    render(<FormEditor formId="f1" onNavigate={() => {}} />)
+    await screen.findByRole('heading', { name: 'Contact Us' })
+
+    fireEvent.change(screen.getByLabelText(/Form Name/), { target: { value: 'Contact' } })
+    fireEvent.click(screen.getByRole('button', { name: /Save Details/ }))
+
+    await waitFor(() =>
+      expect(updateForm).toHaveBeenCalledWith(
+        'f1',
+        expect.objectContaining({
+          name: 'Contact',
+          status: 'active',
+          successMessage: 'Thanks for reaching out!',
+          redirectUrl: '',
+        }),
+      ),
+    )
+  })
+
+  it('exposes notification settings from the editor (the old editor had none)', async () => {
+    render(<FormEditor formId="f1" onNavigate={() => {}} />)
+    await screen.findByRole('heading', { name: 'Contact Us' })
+
+    selectTab('Notifications')
+
+    await waitFor(() => expect(fetchNotificationSettings).toHaveBeenCalledWith('f1'))
+    expect(await screen.findByText('Enable notifications')).toBeTruthy()
+  })
+
+  it('persists GA4 analytics through the typed update endpoint', async () => {
+    render(<FormEditor formId="f1" onNavigate={() => {}} />)
+    await screen.findByRole('heading', { name: 'Contact Us' })
+
+    selectTab('Analytics')
+    fireEvent.click(await screen.findByRole('switch', { name: /Google Analytics 4/ }))
+    fireEvent.click(screen.getByRole('button', { name: /Save Analytics/ }))
+
+    await waitFor(() =>
+      expect(updateForm).toHaveBeenCalledWith('f1', {
+        analytics: expect.objectContaining({ enabled: true }),
+      }),
+    )
+  })
+
+  it('saves the field schema through the versioned schema endpoint', async () => {
+    render(<FormEditor formId="f1" onNavigate={() => {}} />)
+    await screen.findByRole('heading', { name: 'Contact Us' })
+
+    selectTab('Fields')
+    fireEvent.click(await screen.findByRole('button', { name: 'Add Field' }))
+    fireEvent.click(screen.getByRole('button', { name: /Save Schema/ }))
+
+    await waitFor(() =>
+      expect(saveFormSchema).toHaveBeenCalledWith(
+        'f1',
+        expect.arrayContaining([expect.objectContaining({ key: 'name' })]),
+      ),
+    )
+  })
+})
+
+describe('FormEditor (new form)', () => {
+  it('creates through the typed API and routes into the full editor', async () => {
+    const onNavigate = vi.fn()
+    render(<FormEditor onNavigate={onNavigate} />)
+
+    fireEvent.change(screen.getByLabelText(/Form Name/), { target: { value: 'Newsletter' } })
+    fireEvent.click(screen.getByRole('button', { name: /Create Form/ }))
+
+    await waitFor(() =>
+      expect(createForm).toHaveBeenCalledWith(
+        expect.objectContaining({ name: 'Newsletter', status: 'active' }),
+      ),
+    )
+    await waitFor(() => expect(onNavigate).toHaveBeenCalledWith('/forms/new-form-id/edit'))
+  })
+
+  it('disables Create until a name is entered', () => {
+    render(<FormEditor onNavigate={() => {}} />)
+    const create = screen.getByRole('button', { name: /Create Form/ }) as HTMLButtonElement
+    expect(create.disabled).toBe(true)
+  })
+})

package/src/__tests__/views/form-entries.render.test.tsx

@@ -0,0 +1,174 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+// Drive the global All Entries inbox through a mocked forms-service so the test
+// owns the data and can assert the cross-form table (Form column + form
+// filter), status-pill refetches, and opening the inline detail pane.
+function makeEntry(over: Record<string, unknown> = {}) {
+  return {
+    id: 'e1',
+    entryNumber: 1,
+    formId: 'f1',
+    formName: 'Contact Us',
+    formSlug: 'contact-us',
+    data: { name: 'Jordan Avery', email: 'jordan@example.com', message: 'Hello there' },
+    senderName: 'Jordan Avery',
+    senderEmail: 'jordan@example.com',
+    preview: 'Hello there',
+    unread: true,
+    starred: false,
+    archived: false,
+    spamStatus: 'clean',
+    submittedAt: new Date().toISOString(),
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    ...over,
+  }
+}
+
+const ENTRIES = [
+  makeEntry(),
+  makeEntry({
+    id: 'e2',
+    entryNumber: 2,
+    formId: 'f2',
+    formName: 'Project Inquiry',
+    formSlug: 'project-inquiry',
+    senderName: 'Priya Nair',
+    senderEmail: 'priya@example.com',
+    preview: 'A question about pricing',
+    unread: false,
+  }),
+]
+
+const fetchForms = vi.fn(async () => [
+  { id: 'f1', name: 'Contact Us', slug: 'contact-us', status: 'active', fields: [] },
+  { id: 'f2', name: 'Project Inquiry', slug: 'project-inquiry', status: 'active', fields: [] },
+])
+const fetchEntries = vi.fn(async (_p?: unknown) => ({
+  entries: ENTRIES,
+  total: ENTRIES.length,
+  page: 1,
+  pageSize: 25,
+}))
+const fetchEntryCounts = vi.fn(async (_p?: unknown) => ({
+  total: 2,
+  unread: 1,
+  starred: 0,
+  thisWeek: 2,
+  byForm: { f1: 1 },
+}))
+const fetchEntry = vi.fn(async (_id?: string) => ({ entry: ENTRIES[0], fields: [] }))
+const updateEntry = vi.fn(async (_id?: string, _patch?: unknown) => ({ data: ENTRIES[0] }))
+const downloadEntriesExport = vi.fn(async (_opts?: unknown) => ({}))
+
+vi.mock('../../lib/forms-service.js', () => ({
+  fetchForms: () => fetchForms(),
+  fetchEntries: (p?: unknown) => fetchEntries(p),
+  fetchEntryCounts: (p?: unknown) => fetchEntryCounts(p),
+  fetchEntry: (id?: string) => fetchEntry(id),
+  updateEntry: (id?: string, patch?: unknown) => updateEntry(id, patch),
+  deleteEntry: vi.fn(async () => ({})),
+  bulkUpdateEntries: vi.fn(async () => ({ data: { updated: 1 } })),
+  downloadEntriesExport: (opts?: unknown) => downloadEntriesExport(opts),
+}))
+
+vi.mock('../../lib/forms-events.js', () => ({
+  onFormsChanged: () => () => {},
+  emitFormsChanged: vi.fn(),
+}))
+
+vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn() } }))
+
+const { FormEntries } = await import('../../views/FormEntries.js')
+
+beforeEach(() => {
+  fetchForms.mockClear()
+  fetchEntries.mockClear()
+  fetchEntryCounts.mockClear()
+  fetchEntry.mockClear()
+})
+
+describe('FormEntries (All Entries)', () => {
+  it('renders cross-form entries with a Form column and filter', async () => {
+    render(<FormEntries onNavigate={() => {}} />)
+
+    expect(await screen.findByText('Jordan Avery')).toBeTruthy()
+    expect(screen.getByText('Priya Nair')).toBeTruthy()
+    expect(screen.getByRole('table', { name: 'All entries' })).toBeTruthy()
+    // Form names appear (column values) and the filter is populated from fetchForms.
+    expect(screen.getByLabelText('Filter by form')).toBeTruthy()
+    await waitFor(() => expect(fetchForms).toHaveBeenCalled())
+  })
+
+  it('refetches scoped to a form when the form filter changes', async () => {
+    render(<FormEntries onNavigate={() => {}} />)
+    await screen.findByText('Jordan Avery')
+
+    fireEvent.change(screen.getByLabelText('Filter by form'), { target: { value: 'f2' } })
+
+    await waitFor(() =>
+      expect(fetchEntries).toHaveBeenCalledWith(expect.objectContaining({ formId: 'f2' })),
+    )
+  })
+
+  it('refetches with the unread filter when the pill is clicked', async () => {
+    render(<FormEntries onNavigate={() => {}} />)
+    await screen.findByText('Jordan Avery')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Unread', pressed: false }))
+
+    await waitFor(() =>
+      expect(fetchEntries).toHaveBeenCalledWith(expect.objectContaining({ unread: true })),
+    )
+  })
+
+  it('opens the detail pane inline when a row is clicked', async () => {
+    render(<FormEntries onNavigate={() => {}} />)
+    const rowButton = await screen.findByRole('button', { name: 'Jordan Avery' })
+    expect(rowButton.getAttribute('aria-expanded')).toBe('false')
+
+    fireEvent.click(rowButton)
+
+    expect(screen.getByRole('region', { name: 'Entry details' })).toBeTruthy()
+    expect(rowButton.getAttribute('aria-expanded')).toBe('true')
+    await waitFor(() => expect(fetchEntry).toHaveBeenCalledWith('e1'))
+  })
+
+  it('collapses the pane via its close button', async () => {
+    render(<FormEntries onNavigate={() => {}} />)
+    fireEvent.click(await screen.findByRole('button', { name: 'Jordan Avery' }))
+    expect(screen.getByRole('region', { name: 'Entry details' })).toBeTruthy()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Close entry details' }))
+    expect(screen.queryByRole('region', { name: 'Entry details' })).toBeNull()
+  })
+
+  it('downloads the unscoped export, honoring the active form filter', async () => {
+    downloadEntriesExport.mockClear()
+    render(<FormEntries onNavigate={() => {}} />)
+    await screen.findByText('Jordan Avery')
+
+    // Radix DropdownMenu opens on pointerdown (not click), which happy-dom
+    // doesn't synthesize from fireEvent.click — open via keyboard instead.
+    const openExportMenu = () =>
+      fireEvent.keyDown(screen.getByRole('button', { name: /Export/ }), { key: 'Enter' })
+
+    // Unscoped: exports across all forms.
+    openExportMenu()
+    fireEvent.click(await screen.findByRole('menuitem', { name: /CSV/ }))
+    await waitFor(() =>
+      expect(downloadEntriesExport).toHaveBeenCalledWith({ formId: undefined, format: 'csv' }),
+    )
+
+    // Scoped: the form filter carries into the export.
+    fireEvent.change(screen.getByLabelText('Filter by form'), { target: { value: 'f2' } })
+    await screen.findByText('Jordan Avery')
+    openExportMenu()
+    fireEvent.click(await screen.findByRole('menuitem', { name: /Excel/ }))
+    await waitFor(() =>
+      expect(downloadEntriesExport).toHaveBeenCalledWith({ formId: 'f2', format: 'xlsx' }),
+    )
+  })
+})