test: expand exporter/css/a11y/i18n regressions and add e2e skip-link focus check

2025-11-14 20:10:50 +09:00
parent eb28c9fcc6
commit 02637a8b52
27 changed files with 1045 additions and 19 deletions
@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest'
+import { pageSchema, type Page } from '@/lib/schema/page'
+import { exportPage } from '@/lib/exporter/html'
+
+const makePage = (): Page =>
+  pageSchema.parse({
+    title: 'Form Help Snapshot',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [],
+    form: {
+      actionUrl: '',
+      fields: [
+        { type: 'text', name: 'name', label: 'Name', required: true, help: 'Your full name' },
+        { type: 'email', name: 'email', label: 'Email', required: true },
+        { type: 'radio', name: 'size', label: 'Size', options: ['S','M'], help: 'Pick one size' },
+        { type: 'select', name: 'plan', label: 'Plan', options: ['Free','Pro'], help: 'Choose plan' },
+        { type: 'checkbox', name: 'agree', label: 'Agree', required: true, help: 'Must agree' },
+      ],
+      spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
+    },
+    seo: { title: 'SEO', description: 'Desc' },
+  })
+
+function extractForm(html: string): string {
+  const m = html.match(/<form[\s\S]*?<\/form>/)
+  return m ? m[0]
+    // normalize whitespace for snapshot stability
+    .replace(/\s+\n/g, '\n')
+    .replace(/\n\s+/g, '\n')
+    .trim()
+    : ''
+}
+
+describe('Exporter - form helptext snapshot', () => {
+  it('contains stable wiring for ids/labels/help/aria', () => {
+    const out = exportPage(makePage())
+    const form = extractForm(out.html)
+
+    // name with help
+    expect(form).toContain('id="field-name"')
+    expect(form).toContain('<label for="field-name">Name')
+    expect(form).toContain('id="field-name-help"')
+    expect(form).toContain('aria-describedby="field-name-help"')
+
+    // email present (no help)
+    expect(form).toContain('id="field-email"')
+    expect(form).toContain('<label for="field-email">Email')
+    expect(form).not.toContain('field-email-help')
+
+    // radio group help on fieldset
+    expect(form).toContain('<fieldset')
+    expect(form).toContain('aria-describedby="field-size-help"')
+    expect(form).toContain('id="field-size-help"')
+    expect(form).toContain('type="radio"')
+
+    // select with help
+    expect(form).toContain('id="field-plan"')
+    expect(form).toContain('aria-describedby="field-plan-help"')
+    expect(form).toContain('id="field-plan-help"')
+
+    // checkbox with help
+    expect(form).toContain('id="field-agree"')
+    expect(form).toContain('aria-describedby="field-agree-help"')
+    expect(form).toContain('id="field-agree-help"')
+  })
+})