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() + }) + }) +})