Merge pull request #513 from alphagov/add-tests-for-checkboxes-macro

Add tests for checkboxes macro
alphagov · Feb 8, 2018 · dea8c9b · dea8c9b
2 parents baf0bd9 + b7f8bf8
commit dea8c9b
Show file tree

Hide file tree

Showing 5 changed files with 458 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -56,6 +56,7 @@ Internal:
 - Add tests for label component component (PR [#508](https://github.com/alphagov/govuk-frontend/pull/508))
 - Add tests for fieldset component (PR [#509](https://github.com/alphagov/govuk-frontend/pull/509))
 - Add tests for select component (PR [#506](https://github.com/alphagov/govuk-frontend/pull/506))
+- Add tests for checkboxes component (PR [#513](https://github.com/alphagov/govuk-frontend/pull/513))
 
 ## 0.0.22-alpha (Breaking release)
 

diff --git a/src/components/checkboxes/README.md b/src/components/checkboxes/README.md
@@ -79,6 +79,61 @@ More information about when to use checkboxes can be found on [GOV.UK Design Sys
       ]
     }) }}
 
+### Checkboxes--with-disabled
+
+[Preview the checkboxes--with-disabled example](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-disabled/preview)
+
+#### Markup
+
+    <div class="govuk-c-checkboxes">
+
+      <div class="govuk-c-checkboxes__item">
+        <input class="govuk-c-checkboxes__input" id="colours-1" name="colours" type="checkbox" value="red">
+        <label class="govuk-c-label govuk-c-checkboxes__label" for="colours-1">
+          Red
+
+        </label>
+      </div>
+
+      <div class="govuk-c-checkboxes__item">
+        <input class="govuk-c-checkboxes__input" id="colours-2" name="colours" type="checkbox" value="green">
+        <label class="govuk-c-label govuk-c-checkboxes__label" for="colours-2">
+          Green
+
+        </label>
+      </div>
+
+      <div class="govuk-c-checkboxes__item">
+        <input class="govuk-c-checkboxes__input" id="colours-3" name="colours" type="checkbox" value="blue" disabled>
+        <label class="govuk-c-label govuk-c-checkboxes__label" for="colours-3">
+          Blue
+
+        </label>
+      </div>
+
+    </div>
+
+#### Macro
+
+    {{ govukCheckboxes({
+      "name": "colours",
+      "items": [
+        {
+          "value": "red",
+          "text": "Red"
+        },
+        {
+          "value": "green",
+          "text": "Green"
+        },
+        {
+          "value": "blue",
+          "text": "Blue",
+          "disabled": true
+        }
+      ]
+    }) }}
+
 ### Checkboxes--with-html
 
 [Preview the checkboxes--with-html example](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-html/preview)
@@ -200,33 +255,83 @@ More information about when to use checkboxes can be found on [GOV.UK Design Sys
       ]
     }) }}
 
-### Checkboxes--disabled
+### Checkboxes--with-extreme-fieldset
 
-[Preview the checkboxes--disabled example](http://govuk-frontend-review.herokuapp.com/components/checkboxes/disabled/preview)
+[Preview the checkboxes--with-extreme-fieldset example](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-extreme-fieldset/preview)
 
 #### Markup
 
     <div class="govuk-c-checkboxes">
 
-      <div class="govuk-c-checkboxes__item">
-        <input class="govuk-c-checkboxes__input" id="disabled-example-1" name="disabled-example" type="checkbox" value="disabled" disabled>
-        <label class="govuk-c-label govuk-c-checkboxes__label" for="disabled-example-1">
-          Disabled option
+      <fieldset class="govuk-c-fieldset app-c-fieldset--custom-modifier" data-attribute="value" data-second-attribute="second-value">
 
-        </label>
-      </div>
+        <legend class="govuk-c-fieldset__legend">
+          What is your nationality?
+
+          <span class="govuk-c-fieldset__hint">If you have dual nationality, select all options that are relevant to you.</span>
+
+          <span class="govuk-c-error-message">
+            Please select an option
+          </span>
+
+        </legend>
+
+        <div class="govuk-c-checkboxes__item">
+          <input class="govuk-c-checkboxes__input" id="example-1" name="example" type="checkbox" value="british">
+          <label class="govuk-c-label govuk-c-checkboxes__label" for="example-1">
+            British
+
+          </label>
+        </div>
+
+        <div class="govuk-c-checkboxes__item">
+          <input class="govuk-c-checkboxes__input" id="example-2" name="example" type="checkbox" value="irish">
+          <label class="govuk-c-label govuk-c-checkboxes__label" for="example-2">
+            Irish
+
+          </label>
+        </div>
+
+        <div class="govuk-c-checkboxes__item">
+          <input class="govuk-c-checkboxes__input" id="example-3" name="example" type="checkbox" value="other">
+          <label class="govuk-c-label govuk-c-checkboxes__label" for="example-3">
+            Citizen of another country
+
+          </label>
+        </div>
+        </fieldset>
 
     </div>
 
 #### Macro
 
     {{ govukCheckboxes({
-      "name": "disabled-example",
+      "idPrefix": "example",
+      "name": "example",
+      "errorMessage": {
+        "text": "Please select an option"
+      },
+      "fieldset": {
+        "classes": "app-c-fieldset--custom-modifier",
+        "attributes": {
+          "data-attribute": "value",
+          "data-second-attribute": "second-value"
+        },
+        "legendText": "What is your nationality?",
+        "legendHintText": "If you have dual nationality, select all options that are relevant to you."
+      },
       "items": [
         {
-          "value": "disabled",
-          "text": "Disabled option",
-          "disabled": true
+          "value": "british",
+          "text": "British"
+        },
+        {
+          "value": "irish",
+          "text": "Irish"
+        },
+        {
+          "value": "other",
+          "text": "Citizen of another country"
         }
       ]
     }) }}

diff --git a/src/components/checkboxes/__snapshots__/template.test.js.snap b/src/components/checkboxes/__snapshots__/template.test.js.snap
@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkboxes nested dependant components passes through fieldset params without breaking 1`] = `
+
+<span class="govuk-c-error-message">
+  Please select an option
+</span>
+
+`;
+
+exports[`Checkboxes nested dependant components passes through fieldset params without breaking 2`] = `
+
+<fieldset class="govuk-c-fieldset app-c-fieldset--custom-modifier"
+          data-attribute="value"
+          data-second-attribute="second-value"
+>
+  <legend class="govuk-c-fieldset__legend">
+    What is your nationality?
+    <span class="govuk-c-fieldset__hint">
+      If you have dual nationality, select all options that are relevant to you.
+    </span>
+  </legend>
+</fieldset>
+
+`;
+
+exports[`Checkboxes nested dependant components passes through html fieldset params without breaking 1`] = `
+
+<fieldset class="govuk-c-fieldset">
+  <legend class="govuk-c-fieldset__legend">
+    What is your &lt;b&gt;nationality&lt;/b&gt;?
+    <span class="govuk-c-fieldset__hint">
+      If you have dual nationality,
+      <b>
+        select all options
+      </b>
+      that are relevant to you.
+    </span>
+  </legend>
+</fieldset>
+
+`;
+
+exports[`Checkboxes nested dependant components passes through label params without breaking 1`] = `
+
+<label class="govuk-c-label govuk-c-checkboxes__label"
+       data-attribute="value"
+       data-second-attribute="second-value"
+       for="example-name-1"
+>
+  <b>
+    Option 1
+  </b>
+</label>
+<label class="govuk-c-label govuk-c-checkboxes__label"
+       for="example-name-2"
+>
+  &lt;b&gt;Option 2&lt;/b&gt;
+</label>
+
+`;
diff --git a/src/components/checkboxes/checkboxes.yaml b/src/components/checkboxes/checkboxes.yaml
@@ -14,6 +14,18 @@ examples:
       - value: 'other'
         text: 'Citizen of another country'
 
+- name: with-disabled
+  data:
+    name: colours
+    items:
+      - value: "red"
+        text: 'Red'
+      - value: "green"
+        text: 'Green'
+      - value: "blue"
+        text: "Blue"
+        disabled: true
+
 - name: with-html
   data:
     fieldset:
@@ -39,10 +51,24 @@ examples:
       - value: "blue"
         text: "Blue"
 
-- name: disabled
+- name: with-extreme-fieldset
   data:
-    name: disabled-example
+    idPrefix: 'example'
+    name: 'example'
+    errorMessage:
+      text: 'Please select an option'
+    fieldset:
+      classes: 'app-c-fieldset--custom-modifier'
+      attributes:
+        'data-attribute': 'value'
+        'data-second-attribute': 'second-value'
+      legendText: What is your nationality?
+      legendHintText:
+        If you have dual nationality, select all options that are relevant to you.
     items:
-      - value: disabled
-        text: Disabled option
-        disabled: true
+      - value: 'british'
+        text: 'British'
+      - value: 'irish'
+        text: 'Irish'
+      - value: 'other'
+        text: 'Citizen of another country'