[
{"name": "a label and a select, submitted under its id", "args": [{"id": "sort", "label": "Sort by", "options": [{"value": "published", "label": "Recently published"}, {"value": "updated", "label": "Recently updated"}]}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"sort\">Sort by</label><select class=\"fune-select\" id=\"sort\" name=\"sort\"><option value=\"published\">Recently published</option><option value=\"updated\">Recently updated</option></select></div>"},
{"name": "a controlled value selects its option", "args": [{"id": "sort", "label": "Sort by", "value": "updated", "options": [{"value": "published", "label": "Recently published"}, {"value": "updated", "label": "Recently updated"}, {"value": "views", "label": "Most views"}]}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"sort\">Sort by</label><select class=\"fune-select\" id=\"sort\" name=\"sort\"><option value=\"published\">Recently published</option><option value=\"updated\" selected=\"\">Recently updated</option><option value=\"views\">Most views</option></select></div>"},
{"name": "a default value selects its option too, under a name of its own", "args": [{"id": "s1", "name": "sortBy", "label": "Sort by", "defaultValue": "views", "options": [{"value": "updated", "label": "Recently updated"}, {"value": "views", "label": "Most views"}]}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"s1\">Sort by</label><select class=\"fune-select\" id=\"s1\" name=\"sortBy\"><option value=\"updated\">Recently updated</option><option value=\"views\" selected=\"\">Most views</option></select></div>"},
{"name": "a placeholder is the first option, with the value \"\"", "args": [{"id": "country", "label": "Country", "placeholder": "Choose a country", "autoComplete": "country", "options": [{"value": "GB", "label": "United Kingdom"}, {"value": "IE", "label": "Ireland"}]}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"country\">Country</label><select class=\"fune-select\" id=\"country\" name=\"country\" autoComplete=\"country\"><option value=\"\">Choose a country</option><option value=\"GB\">United Kingdom</option><option value=\"IE\">Ireland</option></select></div>"},
{"name": "a value of \"\" selects the placeholder", "args": [{"id": "country", "label": "Country", "placeholder": "Choose a country", "value": "", "required": true, "options": [{"value": "GB", "label": "United Kingdom"}]}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"country\">Country</label><select class=\"fune-select\" id=\"country\" name=\"country\" required=\"\"><option value=\"\" selected=\"\">Choose a country</option><option value=\"GB\">United Kingdom</option></select></div>"},
{"name": "hint and error: the select is described by both, hint first, and invalid", "args": [{"id": "location", "label": "Choose location", "hint": "This can be different to where you went before", "error": "Select a location", "placeholder": "", "options": [{"value": "eastmidlands", "label": "East Midlands"}, {"value": "london", "label": "London"}]}], "expect": "<div class=\"fune-field fune-field--error\"><label class=\"fune-label\" for=\"location\">Choose location</label><div class=\"fune-hint\" id=\"location-hint\">This can be different to where you went before</div><p class=\"fune-error-message\" id=\"location-error\"><span class=\"fune-visually-hidden\">Error:</span> Select a location</p><select class=\"fune-select fune-select--error\" id=\"location\" name=\"location\" aria-describedby=\"location-hint location-error\" aria-invalid=\"true\"><option value=\"\"></option><option value=\"eastmidlands\">East Midlands</option><option value=\"london\">London</option></select></div>"},
{"name": "a hint alone describes the select", "args": [{"id": "t", "label": "Title", "hint": "Optional", "options": [{"value": "mr", "label": "Mr"}, {"value": "ms", "label": "Ms"}]}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"t\">Title</label><div class=\"fune-hint\" id=\"t-hint\">Optional</div><select class=\"fune-select\" id=\"t\" name=\"t\" aria-describedby=\"t-hint\"><option value=\"mr\">Mr</option><option value=\"ms\">Ms</option></select></div>"},
{"name": "a disabled option and a disabled select", "args": [{"id": "plan", "label": "Plan", "disabled": true, "options": [{"value": "free", "label": "Free"}, {"value": "pro", "label": "Pro (sold out)", "disabled": true}]}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"plan\">Plan</label><select class=\"fune-select\" id=\"plan\" name=\"plan\" disabled=\"\"><option value=\"free\">Free</option><option value=\"pro\" disabled=\"\">Pro (sold out)</option></select></div>"},
{"name": "false booleans, empty hint and null error render nothing; a class joins the wrapper's", "args": [{"id": "p", "label": "Plan", "required": false, "disabled": false, "hint": "", "error": null, "className": "narrow", "options": [{"value": "free", "label": "Free", "disabled": false}]}], "expect": "<div class=\"fune-field narrow\"><label class=\"fune-label\" for=\"p\">Plan</label><select class=\"fune-select\" id=\"p\" name=\"p\"><option value=\"free\">Free</option></select></div>"},
{"name": "a value that is no option selects nothing", "args": [{"id": "p", "label": "Plan", "value": "gold", "options": [{"value": "free", "label": "Free"}, {"value": "pro", "label": "Pro"}]}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"p\">Plan</label><select class=\"fune-select\" id=\"p\" name=\"p\"><option value=\"free\">Free</option><option value=\"pro\">Pro</option></select></div>"},
{"name": "labels and values are escaped", "args": [{"id": "e", "label": "Q & A", "options": [{"value": "a\"b", "label": "<A> & B"}]}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"e\">Q & A</label><select class=\"fune-select\" id=\"e\" name=\"e\"><option value=\"a"b\"><A> & B</option></select></div>"},
{"name": "no options and no placeholder is still a select, empty", "args": [{"id": "none", "label": "Nothing yet", "options": []}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"none\">Nothing yet</label><select class=\"fune-select\" id=\"none\" name=\"none\"></select></div>"},
{"name": "two options with one value are refused", "args": [{"id": "x", "label": "Pick", "options": [{"value": "a", "label": "A"}, {"value": "a", "label": "Also A"}]}], "expectError": "select option values must be unique: \"a\" is there twice"},
{"name": "an option with the value \"\" beside a placeholder is refused", "args": [{"id": "x", "label": "Pick", "placeholder": "Choose", "options": [{"value": "", "label": "Nothing"}]}], "expectError": "select option values must be unique: \"\" is there twice"},
{"name": "an id with a space is refused", "args": [{"id": "sort by", "label": "Sort by", "options": [{"value": "a", "label": "A"}]}], "expectError": "a field id cannot contain spaces"}
]