Created Checkbox test

src/utils/Checkbox.js

@@ -12,16 +12,11 @@ const propTypes = {
 
 const Checkbox = ({ checked, onChange, className, children }) => {
   const id = uuid();
+  const onChecked = (e) => onChange(e.target.checked, e);
 
   return (
     <span className={classNames('custom-control custom-checkbox', className)} style={{ display: 'inline' }}>
-      <input
+      <input type="checkbox" className="custom-control-input" id={id} checked={checked} onChange={onChecked} />
-        type="checkbox"
-        className="custom-control-input"
-        id={id}
-        checked={checked}
-        onChange={(e) => onChange(e.target.checked, e)}
-      />
       <label className="custom-control-label" htmlFor={id}>{children}</label>
     </span>
   );

test/utils/Checkbox.test.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import Checkbox from '../../src/utils/Checkbox';
+import DateInput from './DateInput.test';
+
+describe('<Checkbox />', () => {
+  let wrapped;
+
+  const createComponent = (props = {}) => {
+    wrapped = mount(<Checkbox {...props} />);
+
+    return wrapped;
+  };
+
+  afterEach(() => wrapped && wrapped.unmount());
+
+  it('includes extra class names when provided', () => {
+    const classNames = [ 'foo', 'bar', 'baz' ];
+    const checked = false;
+    const onChange = () => {};
+
+    expect.assertions(classNames.length);
+    classNames.forEach((className) => {
+      const wrapped = createComponent({ className, checked, onChange });
+
+      expect(wrapped.prop('className')).toContain(className);
+    });
+  });
+
+  it('marks input as checked if defined', () => {
+    const checkeds = [ true, false ];
+    const onChange = () => {};
+
+    expect.assertions(checkeds.length);
+    checkeds.forEach((checked) => {
+      const wrapped = createComponent({ checked, onChange });
+      const input = wrapped.find('input');
+
+      expect(input.prop('checked')).toEqual(checked);
+    });
+  });
+
+  it('renders provided children inside the label', () => {
+    const labels = [ 'foo', 'bar', 'baz' ];
+    const checked = false;
+    const onChange = () => {};
+
+    expect.assertions(labels.length);
+    labels.forEach((children) => {
+      const wrapped = createComponent({ children, checked, onChange });
+      const label = wrapped.find('label');
+
+      expect(label.text()).toEqual(children);
+    });
+  });
+
+  it('changes checked status on input change', () => {
+    const onChange = jest.fn();
+    const e = { target: { checked: false } };
+    const wrapped = createComponent({ checked: true, onChange });
+    const input = wrapped.find('input');
+
+    input.prop('onChange')(e);
+
+    expect(onChange).toHaveBeenCalledWith(false, e);
+  });
+});