Add tests for fieldset component

CHANGELOG.md

@@ -53,6 +53,7 @@ Internal:
 - Add tests for error-message component (PR [#507](https://github.com/alphagov/govuk-frontend/pull/507))
 - Add tests for phase-banner component (PR [#505](https://github.com/alphagov/govuk-frontend/pull/505))
 - 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))
 
 ## 0.0.22-alpha (Breaking release)
 

src/components/fieldset/README.md

@@ -19,9 +19,9 @@ More information about when to use fieldset can be found on [GOV.UK Design Syste
     <fieldset class="govuk-c-fieldset">
 
       <legend class="govuk-c-fieldset__legend">
-        Legend text goes here
+        What is your address?
 
-        <span class="govuk-c-fieldset__hint">Legend hint text goes here</span>
+        <span class="govuk-c-fieldset__hint">For example, 10 Downing Street</span>
 
       </legend>
 
@@ -30,8 +30,8 @@ More information about when to use fieldset can be found on [GOV.UK Design Syste
 #### Macro
 
     {{ govukFieldset({
-      "legendText": "Legend text goes here",
-      "legendHintText": "Legend hint text goes here"
+      "legendText": "What is your address?",
+      "legendHintText": "For example, 10 Downing Street"
     }) }}
 
 ### Fieldset--with-error-message
@@ -43,12 +43,12 @@ More information about when to use fieldset can be found on [GOV.UK Design Syste
     <fieldset class="govuk-c-fieldset">
 
       <legend class="govuk-c-fieldset__legend">
-        Legend text goes here
+        What is your address?
 
-        <span class="govuk-c-fieldset__hint">Legend hint text goes here</span>
+        <span class="govuk-c-fieldset__hint">For example, 10 Downing Street</span>
 
         <span class="govuk-c-error-message">
-          Error message goes here
+          Please fill in the street input
         </span>
 
       </legend>
@@ -58,41 +58,10 @@ More information about when to use fieldset can be found on [GOV.UK Design Syste
 #### Macro
 
     {{ govukFieldset({
-      "legendText": "Legend text goes here",
-      "legendHintText": "Legend hint text goes here",
+      "legendText": "What is your address?",
+      "legendHintText": "For example, 10 Downing Street",
       "errorMessage": {
-        "text": "Error message goes here"
-      }
-    }) }}
-
-### Fieldset--with-html-instead-of-text
-
-[Preview the fieldset--with-html-instead-of-text example](http://govuk-frontend-review.herokuapp.com/components/fieldset/with-html-instead-of-text/preview)
-
-#### Markup
-
-    <fieldset class="govuk-c-fieldset">
-
-      <legend class="govuk-c-fieldset__legend">
-        Legend text <i>goes</i> here
-
-        <span class="govuk-c-fieldset__hint">Legend hint text <i>goes</i> here</span>
-
-        <span class="govuk-c-error-message">
-          Error message <i>goes</i>  here
-        </span>
-
-      </legend>
-
-    </fieldset>
-
-#### Macro
-
-    {{ govukFieldset({
-      "legendHtml": "Legend text <i>goes</i> here",
-      "legendHintHtml": "Legend hint text <i>goes</i> here",
-      "errorMessage": {
-        "html": "Error message <i>goes</i>  here"
+        "text": "Please fill in the street input"
       }
     }) }}
 

src/components/fieldset/__snapshots__/template.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`fieldset dependant components passes through errorMessage params without breaking 1`] = `
+
+<span class="govuk-c-error-message">
+  Please fill in the street input
+</span>
+
+`;

src/components/fieldset/fieldset.yaml

@@ -1,17 +1,11 @@
 examples:
 - name: default
   data:
-    legendText: Legend text goes here
-    legendHintText: Legend hint text goes here
+    legendText: What is your address?
+    legendHintText: For example, 10 Downing Street
 - name: with-error-message
   data:
-    legendText: Legend text goes here
-    legendHintText: Legend hint text goes here
+    legendText: What is your address?
+    legendHintText: For example, 10 Downing Street
     errorMessage:
-      text: 'Error message goes here'
-- name: with-html-instead-of-text
-  data:
-    legendHtml: Legend text <i>goes</i> here
-    legendHintHtml: Legend hint text <i>goes</i> here
-    errorMessage:
-      html: Error message <i>goes</i>  here
+      text: 'Please fill in the street input'

src/components/fieldset/template.test.js

@@ -0,0 +1,111 @@
+/* globals describe, it, expect */
+
+const { render, getExamples, htmlWithClassName } = require('../../../lib/jest-helpers')
+
+const examples = getExamples('fieldset')
+
+describe('fieldset', () => {
+  it('renders a legend element inside a fieldset element for accessibility reasons', () => {
+    const $ = render('fieldset', {
+      legendText: 'What is your address?'
+    })
+
+    const $component = $('fieldset.govuk-c-fieldset')
+    const $legend = $component.find('.govuk-c-fieldset__legend')
+    expect($component.get(0).tagName).toContain('fieldset')
+    expect($legend.get(0).tagName).toContain('legend')
+  })
+
+  it('renders classes', () => {
+    const $ = render('fieldset', {
+      classes: 'app-c-fieldset--custom-modifier'
+    })
+
+    const $component = $('.govuk-c-fieldset')
+    expect($component.hasClass('app-c-fieldset--custom-modifier')).toBeTruthy()
+  })
+
+  it('renders legendText using markup that is semantic', () => {
+    const $ = render('fieldset', {
+      legendText: 'What is your address?'
+    })
+
+    const $component = $('fieldset.govuk-c-fieldset')
+    const $legend = $component.find('legend.govuk-c-fieldset__legend')
+    expect($legend.html()).toContain('What is your address?')
+  })
+
+  it('renders escaped legendText when passing html', () => {
+    const $ = render('fieldset', {
+      legendText: 'What is <b>your</b> address?'
+    })
+
+    const $component = $('.govuk-c-fieldset')
+    const $legend = $component.find('.govuk-c-fieldset__legend')
+    expect($legend.html()).toContain('What is &lt;b&gt;your&lt;/b&gt; address?')
+  })
+
+  it('renders legendHtml', () => {
+    const $ = render('fieldset', {
+      legendHtml: 'What is <b>your</b> address?'
+    })
+
+    const $component = $('.govuk-c-fieldset')
+    const $legend = $component.find('.govuk-c-fieldset__legend')
+    expect($legend.html()).toContain('What is <b>your</b> address?')
+  })
+
+  it('renders legendHintText using markup that is semantic', () => {
+    const $ = render('fieldset', {
+      legendText: 'What is your address?',
+      legendHintText: 'For example, 10 Downing Street'
+    })
+
+    const $component = $('.govuk-c-fieldset')
+    const $hint = $component.find('.govuk-c-fieldset__hint')
+    expect($hint.html()).toEqual('For example, 10 Downing Street')
+  })
+
+  it('renders escaped legendHintText when passing html', () => {
+    const $ = render('fieldset', {
+      legendText: 'What is your address?',
+      legendHintText: 'For example, <b>10 Downing Street</b>'
+    })
+
+    const $component = $('.govuk-c-fieldset')
+    const $hint = $component.find('.govuk-c-fieldset__hint')
+    expect($hint.html()).toEqual('For example, &lt;b&gt;10 Downing Street&lt;/b&gt;')
+  })
+
+  it('renders legendHintHtml', () => {
+    const $ = render('fieldset', {
+      legendText: 'What is your address?',
+      legendHintHtml: 'For example, <b>10 Downing Street</b>'
+    })
+
+    const $component = $('.govuk-c-fieldset')
+    const $hint = $component.find('.govuk-c-fieldset__hint')
+    expect($hint.html()).toEqual('For example, <b>10 Downing Street</b>')
+  })
+
+  it('renders attributes', () => {
+    const $ = render('fieldset', {
+      attributes: {
+        'data-attribute': 'value',
+        'data-another-attribute': 'another-value'
+      }
+    })
+
+    const $component = $('.govuk-c-fieldset')
+    expect($component.attr('data-attribute')).toEqual('value')
+    expect($component.attr('data-another-attribute')).toEqual('another-value')
+  })
+
+  describe('dependant components', () => {
+    it('passes through errorMessage params without breaking', () => {
+      const $ = render('fieldset', examples['with-error-message'])
+
+      expect(htmlWithClassName($, '.govuk-c-error-message')).toMatchSnapshot()
+    })
+  })
+})