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