53 lines
2.3 KiB
TypeScript
53 lines
2.3 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import { exportPage } from '@/lib/exporter/html'
|
|
import type { Page } from '@/lib/schema/page'
|
|
|
|
const makePage = (overrides: Partial<Page> = {}): Page => ({
|
|
title: 'Form Error Regression',
|
|
locale: 'en',
|
|
theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
|
|
sections: [],
|
|
form: {
|
|
actionUrl: '',
|
|
fields: [
|
|
{ type: 'text', name: 'name', label: 'Name', required: true, pattern: '^[A-Za-z ]+$', maxLength: 30, help: 'Enter your name' },
|
|
{ type: 'email', name: 'email', label: 'Email', required: true, help: 'We will contact you' },
|
|
{ type: 'textarea', name: 'msg', label: 'Message', required: false, maxLength: 200, help: 'Optional' },
|
|
],
|
|
spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
|
|
},
|
|
analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
|
|
seo: { title: 'T', description: 'D' },
|
|
...overrides,
|
|
})
|
|
|
|
describe('Exporter - form error/required/pattern regression', () => {
|
|
it('adds required/pattern/maxlength attributes and aria-describedby links', () => {
|
|
const page = makePage()
|
|
const { html } = exportPage(page)
|
|
|
|
// required/pattern on text
|
|
expect(html).toMatch(/<input[^>]*name="name"[^>]*required/)
|
|
expect(html).toMatch(/<input[^>]*name="name"[^>]*pattern="\^\[A-Za-z \]\+\$"/)
|
|
expect(html).toMatch(/<input[^>]*name="name"[^>]*maxlength="30"/)
|
|
// describedby via help
|
|
expect(html).toMatch(/<label for="field-name">Name<\/label>/)
|
|
expect(html).toMatch(/<input[^>]*id="field-name"[^>]*aria-describedby="field-name-help"/)
|
|
expect(html).toMatch(/<div id="field-name-help" class="form-help">Enter your name<\/div>/)
|
|
|
|
// email required + describedby
|
|
expect(html).toMatch(/<input[^>]*type="email"[^>]*name="email"[^>]*required/)
|
|
expect(html).toMatch(/<input[^>]*id="field-email"[^>]*aria-describedby="field-email-help"/)
|
|
|
|
// textarea maxlength + describedby
|
|
expect(html).toMatch(/<textarea[^>]*name="msg"[^>]*maxlength="200"/)
|
|
expect(html).toMatch(/<textarea[^>]*id="field-msg"[^>]*aria-describedby="field-msg-help"/)
|
|
})
|
|
|
|
it('CSS includes :invalid rule for error state', () => {
|
|
const page = makePage()
|
|
const { css } = exportPage(page)
|
|
expect(css).toMatch(/input:invalid,select:invalid,textarea:invalid\{[^}]*border-color/)
|
|
})
|
|
})
|