@duffcloudservices/site-forms 0.1.1 → 0.1.3

package/src/__tests__/fields.test.ts

@@ -1,82 +1,81 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DcsForm from '../DcsForm.vue'
-import type { PortalFormDefinition } from '../types'
-
-function makeDef(
-  overrides: Partial<PortalFormDefinition> = {},
-): PortalFormDefinition {
-  return {
-    formId: 'contact',
-    title: 'Contact',
-    submission: { kind: 'lead' },
-    fields: [
-      { id: 'name', type: 'text', label: 'Name', required: true },
-      { id: 'email', type: 'email', label: 'Email', required: true },
-      { id: 'message', type: 'textarea', label: 'Message' },
-    ],
-    ...overrides,
-  }
-}
-
-describe('field rendering', () => {
-  it('emits data-form-key on the form element', () => {
-    const wrapper = mount(DcsForm, {
-      props: { formId: 'contact', siteSlug: 's', definitionOverride: makeDef() },
-    })
-    const form = wrapper.find('form')
-    expect(form.attributes('data-form-key')).toBe('contact')
-  })
-
-  it('renders an input per text field with data-form-field-key', () => {
-    const wrapper = mount(DcsForm, {
-      props: { formId: 'contact', siteSlug: 's', definitionOverride: makeDef() },
-    })
-    expect(wrapper.find('[data-form-field-key="name"] input[type="text"]').exists()).toBe(true)
-    expect(wrapper.find('[data-form-field-key="email"] input[type="email"]').exists()).toBe(true)
-    expect(wrapper.find('[data-form-field-key="message"] textarea').exists()).toBe(true)
-  })
-
-  it('renders select / radio / checkbox-group / date / file / hidden / section / html-block', () => {
-    const def = makeDef({
-      fields: [
-        {
-          id: 'sel',
-          type: 'select',
-          label: 'Sel',
-          options: [{ value: 'a', label: 'A' }],
-        },
-        {
-          id: 'rad',
-          type: 'radio',
-          label: 'Rad',
-          options: [{ value: 'a', label: 'A' }],
-        },
-        {
-          id: 'chg',
-          type: 'checkbox-group',
-          label: 'Chg',
-          options: [{ value: 'a', label: 'A' }],
-        },
-        { id: 'cb', type: 'checkbox', label: 'CB' },
-        { id: 'dt', type: 'date', label: 'Dt' },
-        { id: 'f', type: 'file', label: 'F' },
-        { id: 'h', type: 'hidden', label: 'H', defaultValue: 'x' },
-        { id: 'sec', type: 'section-heading', label: 'Sec' },
-        { id: 'html', type: 'html-block', label: 'HTML', html: '<p>hi</p>' },
-      ],
-    })
-    const wrapper = mount(DcsForm, {
-      props: { formId: 'contact', siteSlug: 's', definitionOverride: def },
-    })
-    expect(wrapper.find('[data-form-field-key="sel"] select').exists()).toBe(true)
-    expect(wrapper.find('[data-form-field-key="rad"] input[type="radio"]').exists()).toBe(true)
-    expect(wrapper.find('[data-form-field-key="chg"] input[type="checkbox"]').exists()).toBe(true)
-    expect(wrapper.find('[data-form-field-key="cb"] input[type="checkbox"]').exists()).toBe(true)
-    expect(wrapper.find('[data-form-field-key="dt"] input[type="date"]').exists()).toBe(true)
-    expect(wrapper.find('[data-form-field-key="f"] input[type="file"]').exists()).toBe(true)
-    expect(wrapper.find('input[type="hidden"][name="h"]').exists()).toBe(true)
-    expect(wrapper.find('[data-form-field-key="sec"] h3').exists()).toBe(true)
-    expect(wrapper.find('[data-form-field-key="html"]').html()).toContain('<p>hi</p>')
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DcsForm from '../DcsForm.vue'
+import type { PortalFormDefinition } from '../types'
+
+function makeDef(
+  overrides: Partial<PortalFormDefinition> = {},
+): PortalFormDefinition {
+  return {
+    formId: 'contact',
+    submission: { kind: 'lead' },
+    fields: [
+      { id: 'name', type: 'text', label: 'Name', required: true },
+      { id: 'email', type: 'email', label: 'Email', required: true },
+      { id: 'message', type: 'textarea', label: 'Message' },
+    ],
+    ...overrides,
+  }
+}
+
+describe('field rendering', () => {
+  it('emits data-form-key on the form element', () => {
+    const wrapper = mount(DcsForm, {
+      props: { formId: 'contact', siteSlug: 's', definitionOverride: makeDef() },
+    })
+    const form = wrapper.find('form')
+    expect(form.attributes('data-form-key')).toBe('contact')
+  })
+
+  it('renders an input per text field with data-form-field-key', () => {
+    const wrapper = mount(DcsForm, {
+      props: { formId: 'contact', siteSlug: 's', definitionOverride: makeDef() },
+    })
+    expect(wrapper.find('[data-form-field-key="name"] input[type="text"]').exists()).toBe(true)
+    expect(wrapper.find('[data-form-field-key="email"] input[type="email"]').exists()).toBe(true)
+    expect(wrapper.find('[data-form-field-key="message"] textarea').exists()).toBe(true)
+  })
+
+  it('renders select / radio / checkbox-group / date / file / hidden / section / html-block', () => {
+    const def = makeDef({
+      fields: [
+        {
+          id: 'sel',
+          type: 'select',
+          label: 'Sel',
+          options: [{ value: 'a', label: 'A' }],
+        },
+        {
+          id: 'rad',
+          type: 'radio',
+          label: 'Rad',
+          options: [{ value: 'a', label: 'A' }],
+        },
+        {
+          id: 'chg',
+          type: 'checkbox-group',
+          label: 'Chg',
+          options: [{ value: 'a', label: 'A' }],
+        },
+        { id: 'cb', type: 'checkbox', label: 'CB' },
+        { id: 'dt', type: 'date', label: 'Dt' },
+        { id: 'f', type: 'file', label: 'F' },
+        { id: 'h', type: 'hidden', label: 'H', defaultValue: 'x' },
+        { id: 'sec', type: 'section-heading', label: 'Sec' },
+        { id: 'html', type: 'html-block', label: 'HTML', html: '<p>hi</p>' },
+      ],
+    })
+    const wrapper = mount(DcsForm, {
+      props: { formId: 'contact', siteSlug: 's', definitionOverride: def },
+    })
+    expect(wrapper.find('[data-form-field-key="sel"] select').exists()).toBe(true)
+    expect(wrapper.find('[data-form-field-key="rad"] input[type="radio"]').exists()).toBe(true)
+    expect(wrapper.find('[data-form-field-key="chg"] input[type="checkbox"]').exists()).toBe(true)
+    expect(wrapper.find('[data-form-field-key="cb"] input[type="checkbox"]').exists()).toBe(true)
+    expect(wrapper.find('[data-form-field-key="dt"] input[type="date"]').exists()).toBe(true)
+    expect(wrapper.find('[data-form-field-key="f"] input[type="file"]').exists()).toBe(true)
+    expect(wrapper.find('input[type="hidden"][name="h"]').exists()).toBe(true)
+    expect(wrapper.find('[data-form-field-key="sec"] h3').exists()).toBe(true)
+    expect(wrapper.find('[data-form-field-key="html"]').html()).toContain('<p>hi</p>')
+  })
+})

package/src/__tests__/multi-step.test.ts

@@ -1,46 +1,45 @@
-import { describe, it, expect } from 'vitest'
-import { mount, flushPromises } from '@vue/test-utils'
-import DcsForm from '../DcsForm.vue'
-import type { PortalFormDefinition } from '../types'
-
-const def: PortalFormDefinition = {
-  formId: 'wiz',
-  title: 'Wizard',
-  submission: { kind: 'lead' },
-  steps: [
-    { id: 's1', title: 'One', fieldIds: ['a'] },
-    { id: 's2', title: 'Two', fieldIds: ['b'] },
-  ],
-  fields: [
-    { id: 'a', type: 'text', label: 'A', required: true },
-    { id: 'b', type: 'text', label: 'B', required: true },
-  ],
-}
-
-describe('multi-step navigation', () => {
-  it('starts on step 1, blocks Next until current step is valid', async () => {
-    const wrapper = mount(DcsForm, {
-      props: { formId: 'wiz', siteSlug: 's', definitionOverride: def },
-    })
-    expect(wrapper.text()).toContain('Step 1 of 2')
-    // Step 1 field B is not visible yet
-    expect(wrapper.find('[data-form-field-key="a"]').exists()).toBe(true)
-    expect(wrapper.find('[data-form-field-key="b"]').exists()).toBe(false)
-
-    // Click Next without filling A — should not advance
-    await wrapper.find('.dcs-form__btn--next').trigger('click')
-    expect(wrapper.text()).toContain('Step 1 of 2')
-    expect(wrapper.text()).toContain('A is required')
-
-    // Fill A, then advance
-    await wrapper.find('[data-form-field-key="a"] input').setValue('hi')
-    await wrapper.find('.dcs-form__btn--next').trigger('click')
-    await flushPromises()
-    expect(wrapper.text()).toContain('Step 2 of 2')
-    expect(wrapper.find('[data-form-field-key="b"]').exists()).toBe(true)
-
-    // Prev returns
-    await wrapper.find('.dcs-form__btn--prev').trigger('click')
-    expect(wrapper.text()).toContain('Step 1 of 2')
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import DcsForm from '../DcsForm.vue'
+import type { PortalFormDefinition } from '../types'
+
+const def: PortalFormDefinition = {
+  formId: 'wiz',
+  submission: { kind: 'lead' },
+  steps: [
+    { id: 's1', title: 'One', fieldIds: ['a'] },
+    { id: 's2', title: 'Two', fieldIds: ['b'] },
+  ],
+  fields: [
+    { id: 'a', type: 'text', label: 'A', required: true },
+    { id: 'b', type: 'text', label: 'B', required: true },
+  ],
+}
+
+describe('multi-step navigation', () => {
+  it('starts on step 1, blocks Next until current step is valid', async () => {
+    const wrapper = mount(DcsForm, {
+      props: { formId: 'wiz', siteSlug: 's', definitionOverride: def },
+    })
+    expect(wrapper.text()).toContain('Step 1 of 2')
+    // Step 1 field B is not visible yet
+    expect(wrapper.find('[data-form-field-key="a"]').exists()).toBe(true)
+    expect(wrapper.find('[data-form-field-key="b"]').exists()).toBe(false)
+
+    // Click Next without filling A — should not advance
+    await wrapper.find('.dcs-form__btn--next').trigger('click')
+    expect(wrapper.text()).toContain('Step 1 of 2')
+    expect(wrapper.text()).toContain('A is required')
+
+    // Fill A, then advance
+    await wrapper.find('[data-form-field-key="a"] input').setValue('hi')
+    await wrapper.find('.dcs-form__btn--next').trigger('click')
+    await flushPromises()
+    expect(wrapper.text()).toContain('Step 2 of 2')
+    expect(wrapper.find('[data-form-field-key="b"]').exists()).toBe(true)
+
+    // Prev returns
+    await wrapper.find('.dcs-form__btn--prev').trigger('click')
+    expect(wrapper.text()).toContain('Step 1 of 2')
+  })
+})

package/src/__tests__/presets.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest'
+
+import { buildStandardFormDefinition } from '../presets'
+
+describe('buildStandardFormDefinition', () => {
+  it('builds the standard contact scaffold with contact-compatible field ids', () => {
+    const definition = buildStandardFormDefinition('contact')
+
+    expect(definition.formId).toBe('contact')
+    expect(definition.formKind).toBe('contact')
+    expect(definition.fields.map(field => field.id)).toEqual(['name', 'email', 'phone', 'company', 'message'])
+    expect(definition.fields.map(field => field.role)).toEqual([
+      'contact-name',
+      'contact-email',
+      'contact-phone',
+      'contact-company',
+      'message',
+    ])
+  })
+
+  it('builds the revenue contractor scaffold with project summary and image upload', () => {
+    const definition = buildStandardFormDefinition('revenue-contractor')
+
+    expect(definition.formKind).toBe('revenue-contractor')
+    expect(definition.attachmentPolicy).toEqual(expect.objectContaining({
+      expected: true,
+      accept: ['image/*'],
+    }))
+    expect(definition.fields.map(field => field.id)).toContain('project-image')
+    expect(definition.fields.find(field => field.id === 'message')?.label).toBe('Project summary')
+    expect(definition.fields.find(field => field.id === 'message')?.role).toBe('summary')
+    expect(definition.fields.find(field => field.id === 'project-image')?.role).toBe('image-attachments')
+  })
+
+  it('builds the resume submission scaffold with a required resume field', () => {
+    const definition = buildStandardFormDefinition('resume-submission')
+    const resumeField = definition.fields.find(field => field.id === 'resume')
+
+    expect(definition.formId).toBe('resume')
+    expect(definition.formKind).toBe('resume-submission')
+    expect(definition.attachmentPolicy).toEqual(expect.objectContaining({
+      expected: true,
+      required: true,
+      maxFiles: 1,
+    }))
+    expect(resumeField?.type).toBe('file')
+    expect(resumeField?.required).toBe(true)
+    expect(resumeField?.role).toBe('resume')
+  })
+
+  it('allows callers to override submission metadata', () => {
+    const definition = buildStandardFormDefinition('contact', {
+      formId: 'general-question',
+      submitLabel: 'Send question',
+      successMessage: 'Thanks!',
+      leadCategory: 'contractor',
+    })
+
+    expect(definition.formId).toBe('general-question')
+    expect(definition.submitLabel).toBe('Send question')
+    expect(definition.successMessage).toBe('Thanks!')
+    expect(definition.submission).toEqual({ kind: 'lead', category: 'contractor' })
+  })
+})

package/src/__tests__/schema.test.ts

@@ -1,42 +1,41 @@
-import { describe, it, expect, vi } from 'vitest'
-import { validateFormDefinition, warnIfInvalid } from '../schema/validate'
-import type { PortalFormDefinition } from '../types'
-
-const valid: PortalFormDefinition = {
-  formId: 'contact',
-  title: 'Contact',
-  submission: { kind: 'lead' },
-  fields: [
-    { id: 'name', type: 'text', label: 'Name', required: true },
-    { id: 'email', type: 'email', label: 'Email', required: true },
-  ],
-}
-
-describe('schema validate', () => {
-  it('passes for a well-formed definition', () => {
-    const r = validateFormDefinition(valid)
-    expect(r.valid).toBe(true)
-    expect(r.errors).toEqual([])
-  })
-
-  it('fails when required keys are missing', () => {
-    const bad = { formId: 'x' } as unknown as PortalFormDefinition
-    const r = validateFormDefinition(bad)
-    expect(r.valid).toBe(false)
-    expect(r.errors.length).toBeGreaterThan(0)
-  })
-
-  it('emits a dev-only console.warn for malformed definitions', () => {
-    const spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-    warnIfInvalid('contact', { formId: 'contact' }, true)
-    expect(spy).toHaveBeenCalled()
-    spy.mockRestore()
-  })
-
-  it('does NOT warn when not in dev mode', () => {
-    const spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-    warnIfInvalid('contact', { formId: 'contact' }, false)
-    expect(spy).not.toHaveBeenCalled()
-    spy.mockRestore()
-  })
-})
+import { describe, it, expect, vi } from 'vitest'
+import { validateFormDefinition, warnIfInvalid } from '../schema/validate'
+import type { PortalFormDefinition } from '../types'
+
+const valid: PortalFormDefinition = {
+  formId: 'contact',
+  submission: { kind: 'lead' },
+  fields: [
+    { id: 'name', type: 'text', label: 'Name', required: true },
+    { id: 'email', type: 'email', label: 'Email', required: true },
+  ],
+}
+
+describe('schema validate', () => {
+  it('passes for a well-formed definition', () => {
+    const r = validateFormDefinition(valid)
+    expect(r.valid).toBe(true)
+    expect(r.errors).toEqual([])
+  })
+
+  it('fails when required keys are missing', () => {
+    const bad = { formId: 'x' } as unknown as PortalFormDefinition
+    const r = validateFormDefinition(bad)
+    expect(r.valid).toBe(false)
+    expect(r.errors.length).toBeGreaterThan(0)
+  })
+
+  it('emits a dev-only console.warn for malformed definitions', () => {
+    const spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    warnIfInvalid('contact', { formId: 'contact' }, true)
+    expect(spy).toHaveBeenCalled()
+    spy.mockRestore()
+  })
+
+  it('does NOT warn when not in dev mode', () => {
+    const spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    warnIfInvalid('contact', { formId: 'contact' }, false)
+    expect(spy).not.toHaveBeenCalled()
+    spy.mockRestore()
+  })
+})

package/src/__tests__/style-import.test.ts

@@ -0,0 +1,9 @@
+import { describe, expect, it } from 'vitest'
+
+import * as exports from '../index'
+
+describe('site-forms entry', () => {
+  it('loads the shared stylesheet from the package entry', () => {
+    expect(exports.DcsForm).toBeTruthy()
+  })
+})

package/src/__tests__/submission.test.ts

@@ -1,77 +1,115 @@
-import { describe, it, expect, vi } from 'vitest'
-import { mount, flushPromises } from '@vue/test-utils'
-import DcsForm from '../DcsForm.vue'
-import type { PortalFormDefinition } from '../types'
-
-const def: PortalFormDefinition = {
-  formId: 'contact',
-  title: 'Contact',
-  submission: { kind: 'lead' },
-  fields: [
-    { id: 'name', type: 'text', label: 'Name', required: true },
-    { id: 'email', type: 'email', label: 'Email', required: true },
-    { id: 'message', type: 'textarea', label: 'Message' },
-  ],
-}
-
-describe('submission happy path', () => {
-  it('POSTs the right payload shape and emits submit-success', async () => {
-    const fetchMock = vi.fn().mockResolvedValue({
-      ok: true,
-      status: 200,
-      json: async () => ({ leadId: 'L-1' }),
-    })
-    const originalFetch = globalThis.fetch
-    ;(globalThis as unknown as { fetch: typeof fetch }).fetch =
-      fetchMock as unknown as typeof fetch
-
-    const wrapper = mount(DcsForm, {
-      props: {
-        formId: 'contact',
-        siteSlug: 'kept',
-        definitionOverride: def,
-        apiBase: 'https://api.example.com/',
-        captchaToken: 'tok-abc',
-      },
-    })
-
-    await wrapper.find('[data-form-field-key="name"] input').setValue('Jane')
-    await wrapper.find('[data-form-field-key="email"] input').setValue('jane@example.com')
-    await wrapper.find('[data-form-field-key="message"] textarea').setValue('hello')
-
-    await wrapper.find('form').trigger('submit')
-    await flushPromises()
-
-    expect(fetchMock).toHaveBeenCalledTimes(1)
-    const [url, init] = fetchMock.mock.calls[0]
-    expect(url).toBe('https://api.example.com/public/sites/kept/form-submissions')
-    expect((init as RequestInit).method).toBe('POST')
-    expect(((init as RequestInit).headers as Record<string, string>)['Content-Type']).toBe(
-      'application/json',
-    )
-    const body = JSON.parse((init as RequestInit).body as string)
-    expect(body).toEqual({
-      formId: 'contact',
-      values: { name: 'Jane', email: 'jane@example.com', message: 'hello' },
-      captchaToken: 'tok-abc',
-    })
-
-    expect(wrapper.emitted('submit-success')?.length).toBe(1)
-
-    ;(globalThis as unknown as { fetch: typeof fetch }).fetch = originalFetch
-  })
-
-  it('emits validation-error when required fields are missing', async () => {
-    const wrapper = mount(DcsForm, {
-      props: {
-        formId: 'contact',
-        siteSlug: 'kept',
-        definitionOverride: def,
-        apiBase: 'https://api.example.com',
-      },
-    })
-    await wrapper.find('form').trigger('submit')
-    await flushPromises()
-    expect(wrapper.emitted('validation-error')?.length).toBe(1)
-  })
-})
+import { describe, it, expect, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import DcsForm from '../DcsForm.vue'
+import { submitFormValues } from '../composables/useFormSubmission'
+import type { PortalFormDefinition } from '../types'
+
+const def: PortalFormDefinition = {
+  formId: 'contact',
+  submission: { kind: 'lead' },
+  fields: [
+    { id: 'name', type: 'text', label: 'Name', required: true },
+    { id: 'email', type: 'email', label: 'Email', required: true },
+    { id: 'message', type: 'textarea', label: 'Message' },
+  ],
+}
+
+describe('submission happy path', () => {
+  it('POSTs the right payload shape and emits submit-success', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: async () => ({ leadId: 'L-1' }),
+    })
+    const originalFetch = globalThis.fetch
+    ;(globalThis as unknown as { fetch: typeof fetch }).fetch =
+      fetchMock as unknown as typeof fetch
+
+    const wrapper = mount(DcsForm, {
+      props: {
+        formId: 'contact',
+        siteSlug: 'kept',
+        definitionOverride: def,
+        apiBase: 'https://api.example.com/',
+        captchaToken: 'tok-abc',
+      },
+    })
+
+    await wrapper.find('[data-form-field-key="name"] input').setValue('Jane')
+    await wrapper.find('[data-form-field-key="email"] input').setValue('jane@example.com')
+    await wrapper.find('[data-form-field-key="message"] textarea').setValue('hello')
+
+    await wrapper.find('form').trigger('submit')
+    await flushPromises()
+
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+    const [url, init] = fetchMock.mock.calls[0]
+    expect(url).toBe('https://api.example.com/sites/kept/forms/contact/submissions')
+    expect((init as RequestInit).method).toBe('POST')
+    expect(((init as RequestInit).headers as Record<string, string>)['Content-Type']).toBe(
+      'application/json',
+    )
+    const body = JSON.parse((init as RequestInit).body as string)
+    expect(body).toEqual({
+      formId: 'contact',
+      values: { name: 'Jane', email: 'jane@example.com', message: 'hello' },
+      captchaToken: 'tok-abc',
+    })
+
+    expect(wrapper.emitted('submit-success')?.length).toBe(1)
+
+    ;(globalThis as unknown as { fetch: typeof fetch }).fetch = originalFetch
+  })
+
+  it('emits validation-error when required fields are missing', async () => {
+    const wrapper = mount(DcsForm, {
+      props: {
+        formId: 'contact',
+        siteSlug: 'kept',
+        definitionOverride: def,
+        apiBase: 'https://api.example.com',
+      },
+    })
+    await wrapper.find('form').trigger('submit')
+    await flushPromises()
+    expect(wrapper.emitted('validation-error')?.length).toBe(1)
+  })
+
+  it('uses multipart form data for file submissions on the managed-form route', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 202,
+      json: async () => ({ status: 'ok' }),
+    })
+    const file = new File(['hello'], 'estimate.txt', { type: 'text/plain' })
+
+    await submitFormValues({
+      apiBase: 'https://api.example.com/api/v1/',
+      siteSlug: 'handyman-bryan',
+      fetchImpl: fetchMock as unknown as typeof fetch,
+      payload: {
+        formId: 'quote request',
+        values: {
+          name: 'Jane',
+          attachment: file,
+          services: ['drywall', 'paint'],
+        },
+        captchaToken: 'tok-file',
+      },
+    })
+
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+    const [url, init] = fetchMock.mock.calls[0]
+    expect(url).toBe(
+      'https://api.example.com/api/v1/sites/handyman-bryan/forms/quote%20request/submissions',
+    )
+    expect(((init as RequestInit).headers as Record<string, string> | undefined)?.['Content-Type']).toBeUndefined()
+    const body = (init as RequestInit).body as FormData
+    expect(body).toBeInstanceOf(FormData)
+    expect(body.get('formId')).toBe('quote request')
+    expect(body.get('captchaToken')).toBe('tok-file')
+    expect(body.get('values[name]')).toBe('Jane')
+    expect(body.get('values[attachment]')).toBe(file)
+    expect(body.getAll('values[services][]')).toEqual(['drywall', 'paint'])
+  })
+})

package/src/__tests__/validation.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+import { validateField } from '../composables/useFormValidation'
+import type { PortalFormField } from '../types'
+
+describe('managed form validation', () => {
+  it('treats whitespace-only strings as empty for required fields', () => {
+    const field: PortalFormField = {
+      id: 'name',
+      type: 'text',
+      label: 'Name',
+      required: true,
+    }
+
+    expect(validateField(field, '   ')).toBe('Name is required')
+  })
+
+  it('runs string length validation against trimmed input', () => {
+    const field: PortalFormField = {
+      id: 'message',
+      type: 'textarea',
+      label: 'Message',
+      required: true,
+      validation: { minLength: 10 },
+    }
+
+    expect(validateField(field, '          ')).toBe('Message is required')
+    expect(validateField(field, '   short   ')).toBe('Message must be at least 10 characters')
+  })
+})