diff --git a/CHANGELOG.md b/CHANGELOG.md index 19ec94dae3..85ede72c85 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -40,6 +40,7 @@ Internal: - Add tests for warning text component (PR [#479](https://github.com/alphagov/govuk-frontend/pull/479)) - Add tests for error-summary component (PR [#489](https://github.com/alphagov/govuk-frontend/pull/489)) - Add tests for radios component (PR [#476](https://github.com/alphagov/govuk-frontend/pull/476)) +- Add tests for input component (PR [#478](https://github.com/alphagov/govuk-frontend/pull/478)) ## 0.0.22-alpha (Breaking release) diff --git a/src/components/input/__snapshots__/template.test.js.snap b/src/components/input/__snapshots__/template.test.js.snap new file mode 100644 index 0000000000..d2d9165a12 --- /dev/null +++ b/src/components/input/__snapshots__/template.test.js.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Input with dependant components renders with error message 1`] = ` + + + Error message + + +`; + +exports[`Input with dependant components renders with label 1`] = ` + + + +`; diff --git a/src/components/input/template.test.js b/src/components/input/template.test.js new file mode 100644 index 0000000000..ccf41b4db3 --- /dev/null +++ b/src/components/input/template.test.js @@ -0,0 +1,107 @@ +/* globals describe, it, expect */ + +const { render, htmlWithClassName } = require('../../../lib/jest-helpers') + +describe('Input', () => { + describe('by default', () => { + it('renders with classes', () => { + const $ = render('input', { + classes: 'app-c-input--custom-modifier' + }) + + const $component = $('.govuk-c-input') + expect($component.hasClass('app-c-input--custom-modifier')).toBeTruthy() + }) + + it('renders with id', () => { + const $ = render('input', { + id: 'my-input' + }) + + const $component = $('.govuk-c-input') + expect($component.attr('id')).toEqual('my-input') + }) + + it('renders with name', () => { + const $ = render('input', { + name: 'my-input-name' + }) + + const $component = $('.govuk-c-input') + expect($component.attr('name')).toEqual('my-input-name') + }) + + it('renders with type="text"', () => { + const $ = render('input') + + const $component = $('.govuk-c-input') + expect($component.attr('type')).toEqual('text') + }) + + it('renders with value', () => { + const $ = render('input', { + value: 'QQ 12 34 56 C' + }) + + const $component = $('.govuk-c-input') + expect($component.val()).toEqual('QQ 12 34 56 C') + }) + + it('renders with attributes', () => { + const $ = render('input', { + attributes: { + 'data-attribute': 'my data value' + } + }) + + const $component = $('.govuk-c-input') + expect($component.attr('data-attribute')).toEqual('my data value') + }) + }) + + describe('with dependant components', () => { + it('renders with label', () => { + const $ = render('input', { + id: 'my-input', + label: { + 'text': 'National Insurance number' + } + }) + + expect(htmlWithClassName($, '.govuk-c-label')).toMatchSnapshot() + }) + + it('renders label with "for" attribute reffering the input "id"', () => { + const $ = render('input', { + id: 'my-input', + label: { + 'text': 'National Insurance number' + } + }) + + const $label = $('.govuk-c-label') + expect($label.attr('for')).toEqual('my-input') + }) + + it('renders with error message', () => { + const $ = render('input', { + errorMessage: { + 'text': 'Error message' + } + }) + + expect(htmlWithClassName($, '.govuk-c-error-message')).toMatchSnapshot() + }) + + it('has error class when rendered with error message', () => { + const $ = render('input', { + errorMessage: { + 'text': 'Error message' + } + }) + + const $component = $('.govuk-c-input') + expect($component.hasClass('govuk-c-input--error')).toBeTruthy() + }) + }) +})