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)
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`] = `
+
+
+ Error message goes here
+
+
+`;
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, NINO'
+ })
+
+ const labelText = $('.govuk-c-label').html().trim()
+ expect(labelText).toEqual('National Insurance number, <em>NINO</em>')
+ })
+
+ it('allows label HTML to be passed un-escaped', () => {
+ const $ = render('label', {
+ html: 'National Insurance number NINO'
+ })
+
+ const labelText = $('.govuk-c-label').html().trim()
+ expect(labelText).toEqual('National Insurance number NINO')
+ })
+
+ 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, QQ 12 34 56 C.'
+ })
+
+ const labelHintText = $('.govuk-c-label__hint').html().trim()
+ expect(labelHintText).toEqual('It’s on your National Insurance card, benefit letter, payslip or P60. For example, <strong>QQ 12 34 56 C</strong>.')
+ })
+
+ 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, QQ 12 34 56 C.'
+ })
+
+ 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, QQ 12 34 56 C.')
+ })
+
+ 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()
+ })
+ })
+})