72 lines
2.6 KiB
JavaScript
72 lines
2.6 KiB
JavaScript
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
|
|
);
|
|
});
|
|
});
|