Functional Weave
Code in Rust

react.form.checkbox-group@1.0.1

vectors.json

12,160 bytes · view raw

[
  {"fn": "toggleValue", "name": "ticking the first box", "args": [[{"value": "a", "label": "A"}, {"value": "b", "label": "B"}, {"value": "c", "label": "C"}], [], "a", true], "expect": ["a"]},
  {"fn": "toggleValue", "name": "ticking keeps the options' order, not the click order", "args": [[{"value": "a", "label": "A"}, {"value": "b", "label": "B"}, {"value": "c", "label": "C"}], ["c"], "a", true], "expect": ["a", "c"]},
  {"fn": "toggleValue", "name": "clearing a box removes only it", "args": [[{"value": "a", "label": "A"}, {"value": "b", "label": "B"}, {"value": "c", "label": "C"}], ["a", "b", "c"], "b", false], "expect": ["a", "c"]},
  {"fn": "toggleValue", "name": "clearing the last box leaves an empty list", "args": [[{"value": "a", "label": "A"}, {"value": "b", "label": "B"}], ["b"], "b", false], "expect": []},
  {"fn": "toggleValue", "name": "ticking a box already ticked lists it once", "args": [[{"value": "a", "label": "A"}, {"value": "b", "label": "B"}], ["b", "a"], "a", true], "expect": ["a", "b"]},
  {"fn": "toggleValue", "name": "clearing a box that was not ticked only puts the list in order", "args": [[{"value": "a", "label": "A"}, {"value": "b", "label": "B"}, {"value": "c", "label": "C"}], ["c", "a"], "b", false], "expect": ["a", "c"]},
  {"fn": "toggleValue", "name": "duplicates and values no longer offered drop out", "args": [[{"value": "a", "label": "A"}, {"value": "b", "label": "B"}], ["b", "old", "b"], "a", false], "expect": ["b"]},
  {"fn": "toggleValue", "name": "ticking the exclusive None clears every other box", "args": [[{"value": "france", "label": "France"}, {"value": "spain", "label": "Spain"}, {"value": "none", "label": "None of these", "exclusive": true, "divider": "or"}], ["france", "spain"], "none", true], "expect": ["none"]},
  {"fn": "toggleValue", "name": "ticking another box clears the exclusive None", "args": [[{"value": "france", "label": "France"}, {"value": "spain", "label": "Spain"}, {"value": "none", "label": "None of these", "exclusive": true}], ["none"], "spain", true], "expect": ["spain"]},
  {"fn": "toggleValue", "name": "clearing the exclusive None leaves nothing ticked", "args": [[{"value": "france", "label": "France"}, {"value": "none", "label": "None", "exclusive": true}], ["none"], "none", false], "expect": []},
  {"fn": "toggleValue", "name": "exclusive false is an ordinary option", "args": [[{"value": "a", "label": "A", "exclusive": false}, {"value": "b", "label": "B", "exclusive": false}], ["a"], "b", true], "expect": ["a", "b"]},
  {"fn": "toggleValue", "name": "a value that is not an option is refused", "args": [[{"value": "a", "label": "A"}], ["a"], "z", true], "expectError": "\"z\" is not one of the checkbox options"},

  {"fn": "CheckboxGroup", "name": "a legend and three checkboxes: the first takes the id, the rest -2 and -3", "args": [{"id": "waste", "legend": "Which types of waste do you transport?", "options": [{"value": "carcasses", "label": "Waste from animal carcasses"}, {"value": "mines", "label": "Waste from mines or quarries"}, {"value": "farm", "label": "Farm or agricultural waste"}]}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">Which types of waste do you transport?</legend><div class=\"fune-checkboxes\"><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"waste\" type=\"checkbox\" name=\"waste\" value=\"carcasses\"/><label class=\"fune-label fune-checkbox-label\" for=\"waste\">Waste from animal carcasses</label></div><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"waste-2\" type=\"checkbox\" name=\"waste\" value=\"mines\"/><label class=\"fune-label fune-checkbox-label\" for=\"waste-2\">Waste from mines or quarries</label></div><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"waste-3\" type=\"checkbox\" name=\"waste\" value=\"farm\"/><label class=\"fune-label fune-checkbox-label\" for=\"waste-3\">Farm or agricultural waste</label></div></div></fieldset></div>"},
  {"fn": "CheckboxGroup", "name": "controlled values tick their boxes", "args": [{"id": "c", "name": "colours", "legend": "Colours", "values": ["blue"], "options": [{"value": "red", "label": "Red"}, {"value": "blue", "label": "Blue"}]}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">Colours</legend><div class=\"fune-checkboxes\"><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"c\" type=\"checkbox\" name=\"colours\" value=\"red\"/><label class=\"fune-label fune-checkbox-label\" for=\"c\">Red</label></div><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"c-2\" type=\"checkbox\" name=\"colours\" checked=\"\" value=\"blue\"/><label class=\"fune-label fune-checkbox-label\" for=\"c-2\">Blue</label></div></div></fieldset></div>"},
  {"fn": "CheckboxGroup", "name": "default values tick their boxes too", "args": [{"id": "c", "legend": "Colours", "defaultValues": ["red", "blue"], "options": [{"value": "red", "label": "Red"}, {"value": "blue", "label": "Blue"}]}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">Colours</legend><div class=\"fune-checkboxes\"><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"c\" type=\"checkbox\" name=\"c\" checked=\"\" value=\"red\"/><label class=\"fune-label fune-checkbox-label\" for=\"c\">Red</label></div><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"c-2\" type=\"checkbox\" name=\"c\" checked=\"\" value=\"blue\"/><label class=\"fune-label fune-checkbox-label\" for=\"c-2\">Blue</label></div></div></fieldset></div>"},
  {"fn": "CheckboxGroup", "name": "a hint describes the group; an item hint describes its own box", "args": [{"id": "nationality", "legend": "What is your nationality?", "hint": "Select all that apply", "options": [{"value": "british", "label": "British", "hint": "including English, Scottish, Welsh and Northern Irish"}, {"value": "irish", "label": "Irish"}]}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\" aria-describedby=\"nationality-hint\"><legend class=\"fune-legend\">What is your nationality?</legend><div class=\"fune-hint\" id=\"nationality-hint\">Select all that apply</div><div class=\"fune-checkboxes\"><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"nationality\" type=\"checkbox\" aria-describedby=\"nationality-item-hint\" name=\"nationality\" value=\"british\"/><label class=\"fune-label fune-checkbox-label\" for=\"nationality\">British</label><div class=\"fune-hint fune-checkbox-hint\" id=\"nationality-item-hint\">including English, Scottish, Welsh and Northern Irish</div></div><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"nationality-2\" type=\"checkbox\" name=\"nationality\" value=\"irish\"/><label class=\"fune-label fune-checkbox-label\" for=\"nationality-2\">Irish</label></div></div></fieldset></div>"},
  {"fn": "CheckboxGroup", "name": "an error describes the fieldset, not each box", "args": [{"id": "n", "legend": "Nationality", "error": "Select your nationality", "options": [{"value": "british", "label": "British"}, {"value": "irish", "label": "Irish"}]}], "expect": "<div class=\"fune-field fune-field--error\"><fieldset class=\"fune-fieldset\" aria-describedby=\"n-error\"><legend class=\"fune-legend\">Nationality</legend><p class=\"fune-error-message\" id=\"n-error\"><span class=\"fune-visually-hidden\">Error:</span> Select your nationality</p><div class=\"fune-checkboxes\"><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"n\" type=\"checkbox\" name=\"n\" value=\"british\"/><label class=\"fune-label fune-checkbox-label\" for=\"n\">British</label></div><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"n-2\" type=\"checkbox\" name=\"n\" value=\"irish\"/><label class=\"fune-label fune-checkbox-label\" for=\"n-2\">Irish</label></div></div></fieldset></div>"},
  {"fn": "CheckboxGroup", "name": "an exclusive None after an or divider", "args": [{"id": "countries", "legend": "Will you travel to any of these countries?", "values": ["none"], "options": [{"value": "france", "label": "France"}, {"value": "none", "label": "No, none of these", "divider": "or", "exclusive": true}]}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">Will you travel to any of these countries?</legend><div class=\"fune-checkboxes\"><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"countries\" type=\"checkbox\" name=\"countries\" value=\"france\"/><label class=\"fune-label fune-checkbox-label\" for=\"countries\">France</label></div><div class=\"fune-checkboxes-divider\">or</div><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"countries-2\" type=\"checkbox\" data-behaviour=\"exclusive\" name=\"countries\" checked=\"\" value=\"none\"/><label class=\"fune-label fune-checkbox-label\" for=\"countries-2\">No, none of these</label></div></div></fieldset></div>"},
  {"fn": "CheckboxGroup", "name": "small, disabled options and the legend as page heading", "args": [{"id": "f", "legend": "Filter", "isPageHeading": true, "small": true, "options": [{"value": "open", "label": "Open"}, {"value": "closed", "label": "Closed", "disabled": true}]}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend fune-legend--heading\"><h1 class=\"fune-legend-heading\">Filter</h1></legend><div class=\"fune-checkboxes fune-checkboxes--small\"><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"f\" type=\"checkbox\" name=\"f\" value=\"open\"/><label class=\"fune-label fune-checkbox-label\" for=\"f\">Open</label></div><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"f-2\" type=\"checkbox\" disabled=\"\" name=\"f\" value=\"closed\"/><label class=\"fune-label fune-checkbox-label\" for=\"f-2\">Closed</label></div></div></fieldset></div>"},
  {"fn": "CheckboxGroup", "name": "disabled disables every box; a class name joins the wrapper's", "args": [{"id": "d", "legend": "Days", "disabled": true, "className": "wide", "options": [{"value": "mon", "label": "Monday"}, {"value": "tue", "label": "Tuesday", "disabled": false}]}], "expect": "<div class=\"fune-field wide\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">Days</legend><div class=\"fune-checkboxes\"><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"d\" type=\"checkbox\" disabled=\"\" name=\"d\" value=\"mon\"/><label class=\"fune-label fune-checkbox-label\" for=\"d\">Monday</label></div><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"d-2\" type=\"checkbox\" disabled=\"\" name=\"d\" value=\"tue\"/><label class=\"fune-label fune-checkbox-label\" for=\"d-2\">Tuesday</label></div></div></fieldset></div>"},
  {"fn": "CheckboxGroup", "name": "labels and values are escaped", "args": [{"id": "e", "legend": "Q & A", "options": [{"value": "a&b", "label": "<A> & \"B\""}]}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">Q &amp; A</legend><div class=\"fune-checkboxes\"><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"e\" type=\"checkbox\" name=\"e\" value=\"a&amp;b\"/><label class=\"fune-label fune-checkbox-label\" for=\"e\">&lt;A&gt; &amp; &quot;B&quot;</label></div></div></fieldset></div>"},
  {"fn": "CheckboxGroup", "name": "no options is refused", "args": [{"id": "x", "legend": "Pick", "options": []}], "expectError": "a checkbox group needs at least one option"},
  {"fn": "CheckboxGroup", "name": "two options with one value are refused", "args": [{"id": "x", "legend": "Pick", "options": [{"value": "a", "label": "A"}, {"value": "a", "label": "Also A"}]}], "expectError": "checkbox option values must be unique: \"a\" is there twice"},
  {"fn": "CheckboxGroup", "name": "an id with a space is refused", "args": [{"id": "my waste", "legend": "Waste", "options": [{"value": "a", "label": "A"}]}], "expectError": "a field id cannot contain spaces"}
]