From 52ac84bc0bad5d5b68b8c4db161d1c20e26e8294 Mon Sep 17 00:00:00 2001
From: Jani Kraner <jani.kraner@gmail.com>
Date: Tue, 6 Feb 2018 16:37:48 +0000
Subject: [PATCH 1/2] Add tests for the label component

---
 .../label/__snapshots__/template.test.js.snap |   9 ++
 src/components/label/template.test.js         | 107 ++++++++++++++++++
 2 files changed, 116 insertions(+)
 create mode 100644 src/components/label/__snapshots__/template.test.js.snap
 create mode 100644 src/components/label/template.test.js

diff --git a/src/components/label/__snapshots__/template.test.js.snap b/src/components/label/__snapshots__/template.test.js.snap
new file mode 100644
index 0000000000..bc469087b6
--- /dev/null
+++ b/src/components/label/__snapshots__/template.test.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Label with dependant components renders the error message text 1`] = `
+
+<span class="govuk-c-error-message">
+  Error message goes here
+</span>
+
+`;
diff --git a/src/components/label/template.test.js b/src/components/label/template.test.js
new file mode 100644
index 0000000000..4b820ce1ec
--- /dev/null
+++ b/src/components/label/template.test.js
@@ -0,0 +1,107 @@
+/* globals describe, it, expect */
+
+const { render, getExamples, htmlWithClassName } = require('../../../lib/jest-helpers')
+
+const examples = getExamples('label')
+
+describe('Label', () => {
+  describe('by default', () => {
+    it('renders a label element', () => {
+      const $ = render('label', examples.default)
+
+      const $component = $('.govuk-c-label')
+      expect($component.get(0).tagName).toEqual('label')
+    })
+
+    it('allows additional classes to be added to the component', () => {
+      const $ = render('label', {
+        classes: 'extra-class one-more-class'
+      })
+
+      const $component = $('.govuk-c-label')
+      expect($component.hasClass('extra-class one-more-class')).toBeTruthy()
+    })
+
+    it('renders label text', () => {
+      const $ = render('label', {
+        text: 'National Insurance number'
+      })
+      const labelText = $('.govuk-c-label').text().trim()
+
+      expect(labelText).toEqual('National Insurance number')
+    })
+
+    it('allows label text to be passed whilst escaping HTML entities', () => {
+      const $ = render('label', {
+        text: 'National Insurance number, <em>NINO</em>'
+      })
+
+      const labelText = $('.govuk-c-label').html().trim()
+      expect(labelText).toEqual('National Insurance number, &lt;em&gt;NINO&lt;/em&gt;')
+    })
+
+    it('allows label HTML to be passed un-escaped', () => {
+      const $ = render('label', {
+        html: 'National Insurance number <em>NINO</em>'
+      })
+
+      const labelText = $('.govuk-c-label').html().trim()
+      expect(labelText).toEqual('National Insurance number <em>NINO</em>')
+    })
+
+    it('renders label hint text', () => {
+      const $ = render('label', examples.default)
+      const labelHintText = $('.govuk-c-label__hint').text().trim()
+
+      expect(labelHintText).toEqual('It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.')
+    })
+
+    it('renders for attribute if specified', () => {
+      const $ = render('label', {
+        for: '#dummy-input'
+      })
+
+      const labelForAttr = $('.govuk-c-label').attr('for')
+      expect(labelForAttr).toEqual('#dummy-input')
+    })
+
+    it('allows label hint text to be passed whilst escaping HTML entities', () => {
+      const $ = render('label', {
+        hintText: 'It’s on your National Insurance card, benefit letter, payslip or P60. For example, <strong>QQ 12 34 56 C</strong>.'
+      })
+
+      const labelHintText = $('.govuk-c-label__hint').html().trim()
+      expect(labelHintText).toEqual('It&#x2019;s on your National Insurance card, benefit letter, payslip or P60. For example, &lt;strong&gt;QQ 12 34 56 C&lt;/strong&gt;.')
+    })
+
+    it('allows label hint HTML to be passed un-escaped', () => {
+      const $ = render('label', {
+        hintHtml: 'It is on your National Insurance card, benefit letter, payslip or P60. For example, <strong>QQ 12 34 56 C</strong>.'
+      })
+
+      const labelHintText = $('.govuk-c-label__hint').html().trim()
+      expect(labelHintText).toEqual('It is on your National Insurance card, benefit letter, payslip or P60. For example, <strong>QQ 12 34 56 C</strong>.')
+    })
+
+    it('allows additional attributes to be added to the component', () => {
+      const $ = render('label', {
+        attributes: {
+          'first-attribute': 'true',
+          'second-attribute': 'false'
+        }
+      })
+
+      const $component = $('.govuk-c-label')
+      expect($component.attr('first-attribute')).toEqual('true')
+      expect($component.attr('second-attribute')).toEqual('false')
+    })
+  })
+  describe('with dependant components', () => {
+    it('renders the error message text', () => {
+      const $ = render('error-message', {
+        text: 'Error message goes here'
+      })
+      expect(htmlWithClassName($, '.govuk-c-error-message')).toMatchSnapshot()
+    })
+  })
+})

From 51abd1246844229abb4e80d3ddc02fe517518100 Mon Sep 17 00:00:00 2001
From: Jani Kraner <jani.kraner@gmail.com>
Date: Tue, 6 Feb 2018 16:51:57 +0000
Subject: [PATCH 2/2] Document tests in CHANGELOG

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 931ffc3a4a..5f74a78096 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -52,6 +52,7 @@ Internal:
 - 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))
 - 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))
 
 ## 0.0.22-alpha (Breaking release)