@actuate-media/cms-admin 0.76.7 → 0.77.0

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

@@ -0,0 +1,186 @@
+// @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(),
+  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/lib/forms-service.ts

@@ -15,6 +15,7 @@ import type {
   FormDefinition,
   FormSchemaVersion,
   FormField,
+  FormAnalyticsConfig,
   FormNotificationSettings,
   FormEmbedSettings,
   FormWebhookConfig,
@@ -35,6 +36,7 @@ export type {
   FormFieldType,
   FormFieldOption,
   FieldValidationRules,
+  FormAnalyticsConfig,
   FormNotificationSettings,
   FormEmbedSettings,
   FormWebhookConfig,
@@ -132,6 +134,9 @@ export interface CreateFormPayload {
   status?: FormStatus
   template?: string
   fields?: FormField[]
+  successMessage?: string
+  redirectUrl?: string
+  analytics?: FormAnalyticsConfig
 }
 
 export async function createForm(
@@ -144,9 +149,19 @@ export async function createForm(
   return { data: res.data, error: res.error }
 }
 
+/** Patch shape accepted by `PATCH /forms/:id` (cms-core `UpdateFormInput`). */
+export interface UpdateFormPayload {
+  name?: string
+  description?: string
+  status?: FormStatus
+  successMessage?: string
+  redirectUrl?: string
+  analytics?: FormAnalyticsConfig
+}
+
 export async function updateForm(
   id: string,
-  payload: Partial<Pick<FormDefinition, 'name' | 'slug' | 'description' | 'status'>>,
+  payload: UpdateFormPayload,
 ): Promise<{ data?: FormDefinition; error?: string }> {
   const res = await cmsApi<FormDefinition>(`/forms/${encodeURIComponent(id)}`, {
     method: 'PATCH',