Merge pull request #507 from alphagov/add-error-message-tests

Add error message tests

CHANGELOG.md

@@ -50,6 +50,7 @@ Internal:
 - Add tests for panel component (PR [#500](https://github.com/alphagov/govuk-frontend/pull/500))
 - Add tests for skip-link component (PR [#498](https://github.com/alphagov/govuk-frontend/pull/498))
 - Add tests for file-upload component (PR [#504](https://github.com/alphagov/govuk-frontend/pull/504))
+- Add tests for error-message component (PR [#507](https://github.com/alphagov/govuk-frontend/pull/507))
 
 ## 0.0.22-alpha (Breaking release)
 

src/components/date-input/README.md

@@ -24,7 +24,7 @@ More information about when to use date-input can be found on [GOV.UK Design Sys
         <span class="govuk-c-fieldset__hint">For example, 31 3 1980</span>
 
         <span class="govuk-c-error-message">
-           Error message goes here
+          Error message goes here
         </span>
 
       </legend>
@@ -97,7 +97,7 @@ More information about when to use date-input can be found on [GOV.UK Design Sys
         <span class="govuk-c-fieldset__hint">For example, 31 3 1980</span>
 
         <span class="govuk-c-error-message">
-           Error message goes here
+          Error message goes here
         </span>
 
       </legend>
@@ -172,7 +172,7 @@ More information about when to use date-input can be found on [GOV.UK Design Sys
         <span class="govuk-c-fieldset__hint">For example, 31 3 1980</span>
 
         <span class="govuk-c-error-message">
-           Error message goes here
+          Error message goes here
         </span>
 
       </legend>
@@ -246,7 +246,7 @@ More information about when to use date-input can be found on [GOV.UK Design Sys
         <span class="govuk-c-fieldset__hint">For example, 31 3 1980</span>
 
         <span class="govuk-c-error-message">
-           Error message goes here
+          Error message goes here
         </span>
 
       </legend>
@@ -320,7 +320,7 @@ More information about when to use date-input can be found on [GOV.UK Design Sys
         <span class="govuk-c-fieldset__hint">For example, 31 3 1980</span>
 
         <span class="govuk-c-error-message">
-           Error message goes here
+          Error message goes here
         </span>
 
       </legend>

src/components/error-message/README.md

@@ -17,7 +17,7 @@ More information about when to use error-message can be found on [GOV.UK Design
 #### Markup
 
     <span class="govuk-c-error-message">
-       Error message about full name goes here
+      Error message about full name goes here
     </span>
 
 #### Macro

src/components/error-message/template.njk

@@ -1,3 +1,3 @@
 <span class="govuk-c-error-message{%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-   {{ params.html | safe if params.html else params.text }}
+  {{ params.html | safe if params.html else params.text }}
 </span>

src/components/error-message/template.test.js

@@ -0,0 +1,45 @@
+/* globals describe, it, expect */
+
+const { render } = require('../../../lib/jest-helpers')
+
+describe('Error message', () => {
+  it('allows additional classes to specified', () => {
+    const $ = render('error-message', {
+      classes: 'custom-class'
+    })
+
+    const $component = $('.govuk-c-error-message')
+    expect($component.hasClass('custom-class')).toBeTruthy()
+  })
+
+  it('allows text to be passed whilst escaping HTML entities', () => {
+    const $ = render('error-message', {
+      text: 'Unexpected > in body'
+    })
+
+    const content = $('.govuk-c-error-message').html().trim()
+    expect(content).toEqual('Unexpected > in body')
+  })
+
+  it('allows summary HTML to be passed un-escaped', () => {
+    const $ = render('error-message', {
+      html: 'Unexpected <b>bold text</b> in body copy'
+    })
+
+    const content = $('.govuk-c-error-message').html().trim()
+    expect(content).toEqual('Unexpected <b>bold text</b> in body copy')
+  })
+
+  it('allows additional attributes to be specified', () => {
+    const $ = render('error-message', {
+      attributes: {
+        'data-test': 'attribute',
+        'id': 'my-error-message'
+      }
+    })
+
+    const $component = $('.govuk-c-error-message')
+    expect($component.attr('data-test')).toEqual('attribute')
+    expect($component.attr('id')).toEqual('my-error-message')
+  })
+})

src/components/fieldset/README.md

@@ -48,7 +48,7 @@ More information about when to use fieldset can be found on [GOV.UK Design Syste
         <span class="govuk-c-fieldset__hint">Legend hint text goes here</span>
 
         <span class="govuk-c-error-message">
-           Error message goes here
+          Error message goes here
         </span>
 
       </legend>
@@ -79,7 +79,7 @@ More information about when to use fieldset can be found on [GOV.UK Design Syste
         <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
+          Error message <i>goes</i>  here
         </span>
 
       </legend>

src/components/file-upload/README.md

@@ -73,7 +73,7 @@ More information about when to use file-upload can be found on [GOV.UK Design Sy
       </span>
 
       <span class="govuk-c-error-message">
-       Error message goes here
+      Error message goes here
     </span>
 
     </label>

src/components/input/README.md

@@ -73,7 +73,7 @@ More information about when to use input can be found on [GOV.UK Design System](
       </span>
 
       <span class="govuk-c-error-message">
-       Error message goes here
+      Error message goes here
     </span>
 
     </label>

src/components/label/README.md

@@ -69,7 +69,7 @@ More information about when to use label can be found on [GOV.UK Design System](
       </span>
 
       <span class="govuk-c-error-message">
-       Error message goes here
+      Error message goes here
     </span>
 
     </label>

src/components/radios/README.md

@@ -254,7 +254,7 @@ More information about when to use radios can be found on [GOV.UK Design System]
           <span class="govuk-c-fieldset__hint">This includes changing your last name or spelling your name differently.</span>
 
           <span class="govuk-c-error-message">
-             Please select an option
+            Please select an option
           </span>
 
         </legend>

src/components/select/README.md

@@ -63,14 +63,14 @@ More information about when to use select can be found on [GOV.UK Design System]
 #### Markup
 
     <label class="govuk-c-label" for="select-2">
-      Label text <i>goes</i> here
+      Label text goes here
 
       <span class="govuk-c-label__hint">
-        Hint message <i>goes</i> here
+        Hint text goes here
       </span>
 
       <span class="govuk-c-error-message">
-       <i>Error message goes here</i>
+      Error message goes here
     </span>
 
     </label>
@@ -90,11 +90,11 @@ More information about when to use select can be found on [GOV.UK Design System]
       "id": "select-2",
       "name": "select-2",
       "label": {
-        "hintHtml": "Hint message <i>goes</i> here",
-        "html": "Label text <i>goes</i> here"
+        "hintText": "Hint text goes here",
+        "text": "Label text goes here"
       },
       "errorMessage": {
-        "html": "<i>Error message goes here</i>"
+        "text": "Error message goes here"
       },
       "items": [
         {

src/components/select/select.yaml

@@ -22,10 +22,10 @@ examples:
     id: select-2
     name: select-2
     label:
-      hintHtml: Hint message <i>goes</i> here
-      html: Label text <i>goes</i> here
+      hintText: Hint text goes here
+      text: Label text goes here
     errorMessage:
-      html: <i>Error message goes here</i>
+      text: Error message goes here
     items:
       -
         value: 1

src/components/textarea/README.md

@@ -47,7 +47,7 @@ More information about when to use textarea can be found on [GOV.UK Design Syste
       Why can't you provide a National Insurance number?
 
       <span class="govuk-c-error-message">
-       You must provide an explanation
+      You must provide an explanation
     </span>
 
     </label>