@duffcloudservices/site-forms 0.1.0 → 0.1.2

package/src/__tests__/fields.test.ts

@@ -1,82 +1,82 @@
-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',
+    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>')
+  })
+})

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

@@ -1,46 +1,46 @@
-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',
+  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')
+  })
+})

package/src/__tests__/schema.test.ts

@@ -1,42 +1,42 @@
-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',
+  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()
+  })
+})

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,77 @@
-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 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)
+  })
+})