Add tests and snapshot!

Author: Tomdango

src/components/date-input/__tests__/DateInput.test.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import DateInput from '../DateInput';
+
+describe('DateInput', () => {
+  it('matches snapshot', () => {
+    const component = mount(<DateInput />);
+    expect(component).toMatchSnapshot();
+    component.unmount();
+  });
+
+  it('wraps onChange handlers', () => {
+    const onChange = jest.fn();
+    const component = mount(<DateInput name="testInput" onChange={onChange} />);
+    // Day
+    component
+      .find('div.nhsuk-date-input')
+      .simulate('change', { target: { name: 'testInput-day', value: '27' } });
+    expect(component.state('value')).toEqual({
+      day: '27',
+      month: '',
+      year: '',
+    });
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.calls[0][0].target.value).toEqual({
+      day: '27',
+      month: '',
+      year: '',
+    });
+
+    // Month
+    component
+      .find('div.nhsuk-date-input')
+      .simulate('change', { target: { name: 'testInput-month', value: '06' } });
+    expect(component.state('value')).toEqual({
+      day: '27',
+      month: '06',
+      year: '',
+    });
+    expect(onChange).toHaveBeenCalledTimes(2);
+    expect(onChange.mock.calls[0][0].target.value).toEqual({
+      day: '27',
+      month: '06',
+      year: '',
+    });
+
+    // Year
+    component
+      .find('div.nhsuk-date-input')
+      .simulate('change', { target: { name: 'testInput-year', value: '2000' } });
+    expect(component.state('value')).toEqual({
+      day: '27',
+      month: '06',
+      year: '2000',
+    });
+    expect(onChange).toHaveBeenCalledTimes(3);
+    expect(onChange.mock.calls[0][0].target.value).toEqual({
+      day: '27',
+      month: '06',
+      year: '2000',
+    });
+
+    component.unmount();
+  });
+});

src/components/date-input/__tests__/__snapshots__/DateInput.test.tsx.snap

@@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DateInput matches snapshot 1`] = `
+<DateInput>
+  <LabelBlock />
+  <div
+    className="nhsuk-date-input"
+    onChange={[Function]}
+  >
+    <DateInputDay>
+      <DateInputInput
+        dateInputType="Day"
+        pattern="[0-9]*"
+        type="number"
+      >
+        <div
+          className="nhsuk-date-input__item"
+        >
+          <div
+            className="nhsuk-form-group"
+          >
+            <label
+              className="nhsuk-label nhsuk-date-input__label"
+              htmlFor="dateinput_01p06-day"
+            >
+              Day
+            </label>
+            <input
+              aria-label="dateinput_01p06-day input"
+              className="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2"
+              id="dateinput_01p06-day"
+              name="dateinput_01p06-day"
+              pattern="[0-9]*"
+              type="number"
+            />
+          </div>
+        </div>
+      </DateInputInput>
+    </DateInputDay>
+    <DateInputMonth>
+      <DateInputInput
+        dateInputType="Month"
+        pattern="[0-9]*"
+        type="number"
+      >
+        <div
+          className="nhsuk-date-input__item"
+        >
+          <div
+            className="nhsuk-form-group"
+          >
+            <label
+              className="nhsuk-label nhsuk-date-input__label"
+              htmlFor="dateinput_01p06-month"
+            >
+              Month
+            </label>
+            <input
+              aria-label="dateinput_01p06-month input"
+              className="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2"
+              id="dateinput_01p06-month"
+              name="dateinput_01p06-month"
+              pattern="[0-9]*"
+              type="number"
+            />
+          </div>
+        </div>
+      </DateInputInput>
+    </DateInputMonth>
+    <DateInputYear>
+      <DateInputInput
+        dateInputType="Year"
+        pattern="[0-9]*"
+        type="number"
+      >
+        <div
+          className="nhsuk-date-input__item"
+        >
+          <div
+            className="nhsuk-form-group"
+          >
+            <label
+              className="nhsuk-label nhsuk-date-input__label"
+              htmlFor="dateinput_01p06-year"
+            >
+              Year
+            </label>
+            <input
+              aria-label="dateinput_01p06-year input"
+              className="nhsuk-input nhsuk-date-input__input nhsuk-input--width-4"
+              id="dateinput_01p06-year"
+              name="dateinput_01p06-year"
+              pattern="[0-9]*"
+              type="number"
+            />
+          </div>
+        </div>
+      </DateInputInput>
+    </DateInputYear>
+  </div>
+</DateInput>
+`;