Use shared form controls and enforce UI patterns (Refs #110)

2026-10-10 00:19:48 -04:00
parent 8d1bb69591
commit cc9c10226e
54 changed files with 1431 additions and 1449 deletions
@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest';
+import { checkFormControls } from '../../scripts/check-ui-styles.mjs';
+
+const filename = 'src/routes/example/+page.svelte';
+
+describe('shared form control guard', () => {
+    it.each([
+        '',
+        ' type="text"',
+        ' type="search"',
+        ' type="password"',
+        ' type="email"',
+        ' type="url"',
+        ' type="tel"',
+        ' type="number"',
+        ' type="time"',
+        ' type={visible ? "text" : "password"}'
+    ])('rejects raw input%s with a useful location', (attributes) => {
+        expect(checkFormControls(`<div>\n<input${attributes} />\n</div>`, filename)).toEqual([
+            `${filename}:2: use Field with Input instead of raw <input>`
+        ]);
+    });
+
+    it('finds selects nested in blocks without confusing event expressions for markup', () => {
+        const source =
+            '{#if ready}<select onchange={(event) => choose(event.currentTarget.value)}><option>One</option></select>{/if}';
+        expect(checkFormControls(source, filename)).toEqual([
+            `${filename}:1: use Field with Select instead of raw <select>`
+        ]);
+    });
+
+    it('allows native controls that do not use the text field presentation', () => {
+        const source = [
+            'checkbox',
+            'radio',
+            'file',
+            'hidden',
+            'range',
+            'color',
+            'button',
+            'submit',
+            'reset',
+            'image'
+        ]
+            .map((type) => `<input type="${type}" />`)
+            .join('\n');
+        expect(checkFormControls(source, filename)).toEqual([]);
+        expect(checkFormControls('<input type={"checkbox"} />', filename)).toEqual([]);
+    });
+
+    it('ignores comments, script strings and shared components', () => {
+        const source =
+            '<script>const example = "<input>";</script><!-- <select></select> --><Field label="Search"><Input type="search" /></Field><Select options={[]} />';
+        expect(checkFormControls(source, filename)).toEqual([]);
+    });
+
+    it('allows raw controls only in their implementing primitives', () => {
+        expect(
+            checkFormControls('<input />', 'src/lib/ui/components/primitives/Input.svelte')
+        ).toEqual([]);
+        expect(
+            checkFormControls('<select></select>', 'src/lib/ui/components/primitives/Select.svelte')
+        ).toEqual([]);
+        expect(
+            checkFormControls('<input />', 'src/lib/ui/components/primitives/Field.svelte')
+        ).toHaveLength(1);
+        expect(checkFormControls('<input />', 'src/lib/ui/components/Input.svelte')).toHaveLength(
+            1
+        );
+    });
+});