[
{"name": "three boxes under a legend, named after the id", "args": [{"id": "passport-issued", "legend": "When was your passport issued?"}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">When was your passport issued?</legend><div class=\"fune-date-input\" id=\"passport-issued\"><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"passport-issued-day\">Day</label><input class=\"fune-input fune-input--width-2\" id=\"passport-issued-day\" type=\"text\" inputMode=\"numeric\" name=\"passport-issued-day\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"passport-issued-month\">Month</label><input class=\"fune-input fune-input--width-2\" id=\"passport-issued-month\" type=\"text\" inputMode=\"numeric\" name=\"passport-issued-month\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"passport-issued-year\">Year</label><input class=\"fune-input fune-input--width-4\" id=\"passport-issued-year\" type=\"text\" inputMode=\"numeric\" name=\"passport-issued-year\"/></div></div></div></fieldset></div>"},
{"name": "a hint describes the group, GOV.UK's example", "args": [{"id": "passport-issued", "legend": "When was your passport issued?", "hint": "For example, 27 3 2007", "isPageHeading": true}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\" aria-describedby=\"passport-issued-hint\"><legend class=\"fune-legend fune-legend--heading\"><h1 class=\"fune-legend-heading\">When was your passport issued?</h1></legend><div class=\"fune-hint\" id=\"passport-issued-hint\">For example, 27 3 2007</div><div class=\"fune-date-input\" id=\"passport-issued\"><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"passport-issued-day\">Day</label><input class=\"fune-input fune-input--width-2\" id=\"passport-issued-day\" type=\"text\" inputMode=\"numeric\" name=\"passport-issued-day\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"passport-issued-month\">Month</label><input class=\"fune-input fune-input--width-2\" id=\"passport-issued-month\" type=\"text\" inputMode=\"numeric\" name=\"passport-issued-month\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"passport-issued-year\">Year</label><input class=\"fune-input fune-input--width-4\" id=\"passport-issued-year\" type=\"text\" inputMode=\"numeric\" name=\"passport-issued-year\"/></div></div></div></fieldset></div>"},
{"name": "a date of birth autocompletes each box", "args": [{"id": "dob", "legend": "What is your date of birth?", "birthday": true}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">What is your date of birth?</legend><div class=\"fune-date-input\" id=\"dob\"><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-day\">Day</label><input class=\"fune-input fune-input--width-2\" id=\"dob-day\" type=\"text\" inputMode=\"numeric\" autoComplete=\"bday-day\" name=\"dob-day\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-month\">Month</label><input class=\"fune-input fune-input--width-2\" id=\"dob-month\" type=\"text\" inputMode=\"numeric\" autoComplete=\"bday-month\" name=\"dob-month\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-year\">Year</label><input class=\"fune-input fune-input--width-4\" id=\"dob-year\" type=\"text\" inputMode=\"numeric\" autoComplete=\"bday-year\" name=\"dob-year\"/></div></div></div></fieldset></div>"},
{"name": "birthday false adds no autocomplete", "args": [{"id": "dob", "legend": "What is your date of birth?", "birthday": false}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">What is your date of birth?</legend><div class=\"fune-date-input\" id=\"dob\"><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-day\">Day</label><input class=\"fune-input fune-input--width-2\" id=\"dob-day\" type=\"text\" inputMode=\"numeric\" name=\"dob-day\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-month\">Month</label><input class=\"fune-input fune-input--width-2\" id=\"dob-month\" type=\"text\" inputMode=\"numeric\" name=\"dob-month\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-year\">Year</label><input class=\"fune-input fune-input--width-4\" id=\"dob-year\" type=\"text\" inputMode=\"numeric\" name=\"dob-year\"/></div></div></div></fieldset></div>"},
{"name": "an error with no fields named marks the whole date", "args": [{"id": "dob", "legend": "Date of birth", "error": "Enter date of birth"}], "expect": "<div class=\"fune-field fune-field--error\"><fieldset class=\"fune-fieldset\" aria-describedby=\"dob-error\"><legend class=\"fune-legend\">Date of birth</legend><p class=\"fune-error-message\" id=\"dob-error\"><span class=\"fune-visually-hidden\">Error:</span> Enter date of birth</p><div class=\"fune-date-input\" id=\"dob\"><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-day\">Day</label><input class=\"fune-input fune-input--error fune-input--width-2\" id=\"dob-day\" type=\"text\" inputMode=\"numeric\" aria-invalid=\"true\" name=\"dob-day\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-month\">Month</label><input class=\"fune-input fune-input--error fune-input--width-2\" id=\"dob-month\" type=\"text\" inputMode=\"numeric\" aria-invalid=\"true\" name=\"dob-month\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-year\">Year</label><input class=\"fune-input fune-input--error fune-input--width-4\" id=\"dob-year\" type=\"text\" inputMode=\"numeric\" aria-invalid=\"true\" name=\"dob-year\"/></div></div></div></fieldset></div>"},
{"name": "an error with an empty list of fields marks the whole date too", "args": [{"id": "dob", "legend": "Date of birth", "error": "Enter date of birth", "errorFields": []}], "expect": "<div class=\"fune-field fune-field--error\"><fieldset class=\"fune-fieldset\" aria-describedby=\"dob-error\"><legend class=\"fune-legend\">Date of birth</legend><p class=\"fune-error-message\" id=\"dob-error\"><span class=\"fune-visually-hidden\">Error:</span> Enter date of birth</p><div class=\"fune-date-input\" id=\"dob\"><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-day\">Day</label><input class=\"fune-input fune-input--error fune-input--width-2\" id=\"dob-day\" type=\"text\" inputMode=\"numeric\" aria-invalid=\"true\" name=\"dob-day\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-month\">Month</label><input class=\"fune-input fune-input--error fune-input--width-2\" id=\"dob-month\" type=\"text\" inputMode=\"numeric\" aria-invalid=\"true\" name=\"dob-month\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-year\">Year</label><input class=\"fune-input fune-input--error fune-input--width-4\" id=\"dob-year\" type=\"text\" inputMode=\"numeric\" aria-invalid=\"true\" name=\"dob-year\"/></div></div></div></fieldset></div>"},
{"name": "errorFields from validateDateParts marks only the year", "args": [{"id": "passport-issued", "legend": "When was your passport issued?", "hint": "For example, 27 3 2007", "error": "The date your passport was issued must include a year", "errorFields": ["year"], "value": {"day": "6", "month": "3", "year": ""}}], "expect": "<div class=\"fune-field fune-field--error\"><fieldset class=\"fune-fieldset\" aria-describedby=\"passport-issued-hint passport-issued-error\"><legend class=\"fune-legend\">When was your passport issued?</legend><div class=\"fune-hint\" id=\"passport-issued-hint\">For example, 27 3 2007</div><p class=\"fune-error-message\" id=\"passport-issued-error\"><span class=\"fune-visually-hidden\">Error:</span> The date your passport was issued must include a year</p><div class=\"fune-date-input\" id=\"passport-issued\"><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"passport-issued-day\">Day</label><input class=\"fune-input fune-input--width-2\" id=\"passport-issued-day\" type=\"text\" inputMode=\"numeric\" name=\"passport-issued-day\" value=\"6\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"passport-issued-month\">Month</label><input class=\"fune-input fune-input--width-2\" id=\"passport-issued-month\" type=\"text\" inputMode=\"numeric\" name=\"passport-issued-month\" value=\"3\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"passport-issued-year\">Year</label><input class=\"fune-input fune-input--error fune-input--width-4\" id=\"passport-issued-year\" type=\"text\" inputMode=\"numeric\" aria-invalid=\"true\" name=\"passport-issued-year\" value=\"\"/></div></div></div></fieldset></div>"},
{"name": "two fields in error", "args": [{"id": "dob", "legend": "Date of birth", "error": "Date of birth must include a day and year", "errorFields": ["day", "year"]}], "expect": "<div class=\"fune-field fune-field--error\"><fieldset class=\"fune-fieldset\" aria-describedby=\"dob-error\"><legend class=\"fune-legend\">Date of birth</legend><p class=\"fune-error-message\" id=\"dob-error\"><span class=\"fune-visually-hidden\">Error:</span> Date of birth must include a day and year</p><div class=\"fune-date-input\" id=\"dob\"><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-day\">Day</label><input class=\"fune-input fune-input--error fune-input--width-2\" id=\"dob-day\" type=\"text\" inputMode=\"numeric\" aria-invalid=\"true\" name=\"dob-day\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-month\">Month</label><input class=\"fune-input fune-input--width-2\" id=\"dob-month\" type=\"text\" inputMode=\"numeric\" name=\"dob-month\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-year\">Year</label><input class=\"fune-input fune-input--error fune-input--width-4\" id=\"dob-year\" type=\"text\" inputMode=\"numeric\" aria-invalid=\"true\" name=\"dob-year\"/></div></div></div></fieldset></div>"},
{"name": "errorFields without an error marks nothing", "args": [{"id": "dob", "legend": "Date of birth", "errorFields": ["day"]}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">Date of birth</legend><div class=\"fune-date-input\" id=\"dob\"><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-day\">Day</label><input class=\"fune-input fune-input--width-2\" id=\"dob-day\" type=\"text\" inputMode=\"numeric\" name=\"dob-day\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-month\">Month</label><input class=\"fune-input fune-input--width-2\" id=\"dob-month\" type=\"text\" inputMode=\"numeric\" name=\"dob-month\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-year\">Year</label><input class=\"fune-input fune-input--width-4\" id=\"dob-year\" type=\"text\" inputMode=\"numeric\" name=\"dob-year\"/></div></div></div></fieldset></div>"},
{"name": "a name of its own prefixes the boxes' names, ids stay", "args": [{"id": "f7", "name": "dob", "legend": "Date of birth"}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">Date of birth</legend><div class=\"fune-date-input\" id=\"f7\"><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"f7-day\">Day</label><input class=\"fune-input fune-input--width-2\" id=\"f7-day\" type=\"text\" inputMode=\"numeric\" name=\"dob-day\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"f7-month\">Month</label><input class=\"fune-input fune-input--width-2\" id=\"f7-month\" type=\"text\" inputMode=\"numeric\" name=\"dob-month\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"f7-year\">Year</label><input class=\"fune-input fune-input--width-4\" id=\"f7-year\" type=\"text\" inputMode=\"numeric\" name=\"dob-year\"/></div></div></div></fieldset></div>"},
{"name": "a default value fills the boxes", "args": [{"id": "dob", "legend": "Date of birth", "defaultValue": {"day": "27", "month": "jan", "year": "2007"}}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">Date of birth</legend><div class=\"fune-date-input\" id=\"dob\"><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-day\">Day</label><input class=\"fune-input fune-input--width-2\" id=\"dob-day\" type=\"text\" inputMode=\"numeric\" name=\"dob-day\" value=\"27\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-month\">Month</label><input class=\"fune-input fune-input--width-2\" id=\"dob-month\" type=\"text\" inputMode=\"numeric\" name=\"dob-month\" value=\"jan\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-year\">Year</label><input class=\"fune-input fune-input--width-4\" id=\"dob-year\" type=\"text\" inputMode=\"numeric\" name=\"dob-year\" value=\"2007\"/></div></div></div></fieldset></div>"},
{"name": "disabled, with a class name and autocomplete", "args": [{"id": "dob", "legend": "Date of birth", "disabled": true, "birthday": true, "className": "fune-field--compact"}], "expect": "<div class=\"fune-field fune-field--compact\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">Date of birth</legend><div class=\"fune-date-input\" id=\"dob\"><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-day\">Day</label><input class=\"fune-input fune-input--width-2\" id=\"dob-day\" type=\"text\" inputMode=\"numeric\" autoComplete=\"bday-day\" disabled=\"\" name=\"dob-day\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-month\">Month</label><input class=\"fune-input fune-input--width-2\" id=\"dob-month\" type=\"text\" inputMode=\"numeric\" autoComplete=\"bday-month\" disabled=\"\" name=\"dob-month\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"dob-year\">Year</label><input class=\"fune-input fune-input--width-4\" id=\"dob-year\" type=\"text\" inputMode=\"numeric\" autoComplete=\"bday-year\" disabled=\"\" name=\"dob-year\"/></div></div></div></fieldset></div>"},
{"name": "values are escaped", "args": [{"id": "d", "legend": "Start & end", "value": {"day": "<1>", "month": "\"2\"", "year": "a&b"}}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">Start & end</legend><div class=\"fune-date-input\" id=\"d\"><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"d-day\">Day</label><input class=\"fune-input fune-input--width-2\" id=\"d-day\" type=\"text\" inputMode=\"numeric\" name=\"d-day\" value=\"<1>\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"d-month\">Month</label><input class=\"fune-input fune-input--width-2\" id=\"d-month\" type=\"text\" inputMode=\"numeric\" name=\"d-month\" value=\""2"\"/></div></div><div class=\"fune-date-input-item\"><div class=\"fune-field\"><label class=\"fune-label\" for=\"d-year\">Year</label><input class=\"fune-input fune-input--width-4\" id=\"d-year\" type=\"text\" inputMode=\"numeric\" name=\"d-year\" value=\"a&b\"/></div></div></div></fieldset></div>"},
{"name": "an id with a space is refused", "args": [{"id": "date of birth", "legend": "Date of birth"}], "expectError": "a field id cannot contain spaces"}
]