Update contact form and API unit and E2E tests

Author: webstackdev

src/actions/contact/__tests__/domain.spec.ts

@@ -3,6 +3,24 @@ import { describe, expect, it } from 'vitest'
 import { contactFormInputSchema } from '../domain'
 
 describe('contact domain validation', () => {
+  it('accepts null optional fields from Astro Actions form parsing', () => {
+    const result = contactFormInputSchema.safeParse({
+      name: 'Jane Doe',
+      email: 'jane@example.com',
+      message: 'This is a valid message with enough detail.',
+      budget: '5k-10k',
+      consent: false,
+      company: null,
+      phone: null,
+      timeline: null,
+      website: null,
+      service: null,
+      DataSubjectId: null,
+    })
+
+    expect(result.success).toBe(true)
+  })
+
   it('accepts valid timeline values', () => {
     const result = contactFormInputSchema.safeParse({
       name: 'Jane Doe',

src/actions/contact/domain.ts

@@ -6,6 +6,7 @@ import { isAllowedTimeline } from './responder'
 const trimString = (value: unknown): unknown => (typeof value === 'string' ? value.trim() : value)
 
 const emptyStringToUndefined = (value: unknown): unknown => {
+  if (value === null) return undefined
   if (typeof value !== 'string') return value
   const trimmed = value.trim()
   return trimmed.length === 0 ? undefined : trimmed

test/e2e/specs/03-forms/contact-form.spec.ts

@@ -18,7 +18,7 @@ import { TEST_CONTACT_DATA, TEST_EMAILS } from '@test/e2e/fixtures/test-data'
 
 const CONTACT_PATH = '/contact'
 
-const contactSubmitActionEndpoint = '/_actions/contact/submit'
+const contactSubmitActionEndpoint = '/_actions/contact.submit'
 
 const waitForContactFormHydration = async (page: BasePage) => {
   await page.waitForFunction(() => {

test/e2e/specs/06-actions/contact-api.spec.ts

@@ -1,31 +1,39 @@
 import { expect, test } from '@test/e2e/helpers'
 
-const CONTACT_ENDPOINT = '/api/contact'
+const CONTACT_ACTION_ENDPOINT = '/_actions/contact.submit'
 
 test.describe('Contact API integrations', () => {
   test('@mocks accepts valid submissions', async ({ request }) => {
     const uniqueEmail = `contact-${Date.now()}@example.com`
-    const response = await request.post(CONTACT_ENDPOINT, {
-      data: {
+    const response = await request.post(CONTACT_ACTION_ENDPOINT, {
+      multipart: {
         name: 'Integration Bot',
         email: uniqueEmail,
-        message: 'Automated contact form verification message',
-        consent: true,
+        message: 'Automated contact form verification message.',
+        'project_type': 'website',
+        budget: '10k-25k',
+        consent: 'true',
       },
     })
 
     expect(response.status()).toBe(200)
-    const body = await response.json()
-    expect(body.success).toBe(true)
+    const contentType = response.headers()['content-type']
+    expect(contentType).toContain('application/json')
+
+    // Astro Actions serialize results using Devalue, which isn't always JSON.parse-friendly.
+    // Validate using a lightweight string check instead of parsing a structured object.
+    const bodyText = await response.text()
+    expect(bodyText).toContain('Thank you for your message')
   })
 
   test('@mocks rejects invalid submissions', async ({ request }) => {
     const invalidEmail = `invalid-contact-${Date.now()}@example.com`
-    const response = await request.post(CONTACT_ENDPOINT, {
-      data: {
+    const response = await request.post(CONTACT_ACTION_ENDPOINT, {
+      multipart: {
         name: 'x',
         email: invalidEmail,
         message: 'short',
+        budget: '10k-25k',
       },
     })