Add tests for input macro

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)
 

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`] = `
+
+<span class="govuk-c-error-message">
+  Error message
+</span>
+
+`;
+
+exports[`Input with dependant components renders with label 1`] = `
+
+<label class="govuk-c-label"
+       for="my-input"
+>
+  National Insurance number
+</label>
+
+`;

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