[
{ "fn": "fieldIds", "name": "no hint and no error: nothing describes the control", "args": ["email", false, false], "expect": { "control": "email", "hint": null, "error": null, "describedBy": null } },
{ "fn": "fieldIds", "name": "a hint describes the control", "args": ["email", true, false], "expect": { "control": "email", "hint": "email-hint", "error": null, "describedBy": "email-hint" } },
{ "fn": "fieldIds", "name": "an error describes the control", "args": ["email", false, true], "expect": { "control": "email", "hint": null, "error": "email-error", "describedBy": "email-error" } },
{ "fn": "fieldIds", "name": "hint first, then error, as a screen reader should read them", "args": ["email", true, true], "expect": { "control": "email", "hint": "email-hint", "error": "email-error", "describedBy": "email-hint email-error" } },
{ "fn": "fieldIds", "name": "an id with dashes and digits is kept as it is", "args": ["address-line-2", true, false], "expect": { "control": "address-line-2", "hint": "address-line-2-hint", "error": null, "describedBy": "address-line-2-hint" } },
{ "fn": "fieldIds", "name": "a React useId id (colons and underscores) works", "args": ["_R_1_", false, true], "expect": { "control": "_R_1_", "hint": null, "error": "_R_1_-error", "describedBy": "_R_1_-error" } },
{ "fn": "fieldIds", "name": "a one-letter id", "args": ["x", true, true], "expect": { "control": "x", "hint": "x-hint", "error": "x-error", "describedBy": "x-hint x-error" } },
{ "fn": "fieldIds", "name": "an empty id is refused", "args": ["", true, false], "expectError": "a field needs an id" },
{ "fn": "fieldIds", "name": "an id with a space is refused, since aria-describedby splits on spaces", "args": ["first name", false, false], "expectError": "a field id cannot contain spaces (\"first name\")" },
{ "fn": "FormField", "name": "a label and the control, nothing else", "args": [{ "id": "name", "label": "Full name", "children": "[control]" }], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"name\">Full name</label>[control]</div>" },
{ "fn": "FormField", "name": "a hint goes under the label, with its id", "args": [{ "id": "dob", "label": "Date of birth", "hint": "For example, 27 3 2007", "children": "[control]" }], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"dob\">Date of birth</label><div class=\"fune-hint\" id=\"dob-hint\">For example, 27 3 2007</div>[control]</div>" },
{ "fn": "FormField", "name": "an error marks the field and says Error: to a screen reader", "args": [{ "id": "email", "label": "Email address", "error": "Enter an email address", "children": "[control]" }], "expect": "<div class=\"fune-field fune-field--error\"><label class=\"fune-label\" for=\"email\">Email address</label><p class=\"fune-error-message\" id=\"email-error\"><span class=\"fune-visually-hidden\">Error:</span> Enter an email address</p>[control]</div>" },
{ "fn": "FormField", "name": "hint and error together, hint first", "args": [{ "id": "phone", "label": "Phone", "hint": "For international numbers include the country code", "error": "Enter a phone number, like 01632 960 001", "children": "[control]" }], "expect": "<div class=\"fune-field fune-field--error\"><label class=\"fune-label\" for=\"phone\">Phone</label><div class=\"fune-hint\" id=\"phone-hint\">For international numbers include the country code</div><p class=\"fune-error-message\" id=\"phone-error\"><span class=\"fune-visually-hidden\">Error:</span> Enter a phone number, like 01632 960 001</p>[control]</div>" },
{ "fn": "FormField", "name": "an empty hint and a null error are not shown", "args": [{ "id": "town", "label": "Town", "hint": "", "error": null, "children": "[control]" }], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"town\">Town</label>[control]</div>" },
{ "fn": "FormField", "name": "a class name is added to the wrapper's", "args": [{ "id": "town", "label": "Town", "className": "wide", "children": "[control]" }], "expect": "<div class=\"fune-field wide\"><label class=\"fune-label\" for=\"town\">Town</label>[control]</div>" },
{ "fn": "FormField", "name": "with an error and a class name, the error class comes first", "args": [{ "id": "town", "label": "Town", "className": "wide", "error": "Enter a town", "children": "[control]" }], "expect": "<div class=\"fune-field fune-field--error wide\"><label class=\"fune-label\" for=\"town\">Town</label><p class=\"fune-error-message\" id=\"town-error\"><span class=\"fune-visually-hidden\">Error:</span> Enter a town</p>[control]</div>" },
{ "fn": "FormField", "name": "text is escaped, never markup", "args": [{ "id": "q", "label": "<b>Search</b> & find", "children": "" }], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"q\"><b>Search</b> & find</label></div>" },
{ "fn": "FormField", "name": "a number is a node too", "args": [{ "id": "n", "label": 42, "hint": 0, "children": "[control]" }], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"n\">42</label><div class=\"fune-hint\" id=\"n-hint\">0</div>[control]</div>" },
{ "fn": "FormField", "name": "an id with a space is refused", "args": [{ "id": "first name", "label": "First name" }], "expectError": "a field id cannot contain spaces" }
]