30 lines
1.2 KiB
TypeScript
30 lines
1.2 KiB
TypeScript
 
|
import { describe, test, expect } from 'vitest';
|
||
|
|
import { InputField } from './InputField';
|
||
|
|
|
||
|
|
const toHtml = (InputField as any).toHtml;
|
||
|
|
|
||
|
|
describe('InputField.toHtml accessibility (F2.1)', () => {
|
||
|
|
test('label for= matches input id=', () => {
|
||
|
|
const { html } = toHtml({ label: 'Your Name', name: 'name' }, '');
|
||
|
|
const forMatch = html.match(/<label for="([^"]+)"/);
|
||
|
|
const idMatch = html.match(/<input id="([^"]+)"/);
|
||
|
|
expect(forMatch).toBeTruthy();
|
||
|
|
expect(idMatch).toBeTruthy();
|
||
|
|
expect(forMatch![1]).toBe(idMatch![1]);
|
||
|
|
});
|
||
|
|
|
||
|
|
test('id is deterministic (derived from name, not random) -- stable across calls', () => {
|
||
|
|
const { html: html1 } = toHtml({ label: 'Email', name: 'email' }, '');
|
||
|
|
const { html: html2 } = toHtml({ label: 'Email', name: 'email' }, '');
|
||
|
|
const id1 = html1.match(/<input id="([^"]+)"/)![1];
|
||
|
|
const id2 = html2.match(/<input id="([^"]+)"/)![1];
|
||
|
|
expect(id1).toBe(id2);
|
||
|
|
});
|
||
|
|
|
||
|
|
test('no visible label: input gets aria-label from placeholder', () => {
|
||
|
|
const { html } = toHtml({ label: '', name: 'phone', placeholder: 'Phone number' }, '');
|
||
|
|
expect(html).not.toContain('<label');
|
||
|
|
expect(html).toContain('aria-label="Phone number"');
|
||
|
|
});
|
||
|
|
});
|