Add tests for radios and checkbox groups

tests/checkbox-radio.js

@@ -10,7 +10,7 @@ const Input = ({ error, ...props }) => (
   </div>
 );
 
-test('Input works with checkbox', () => {
+test('Input works with checkbox that has no value', () => {
   const wrapper = mount(
     <Form>
       <Input name="Awesome" type="checkbox" />
@@ -29,3 +29,27 @@ test('Input works with checkbox', () => {
 
   expect(wrapper.find(Input).props().value).toEqual(false);
 });
+
+test('Input works with checkbox that has value', () => {
+  const wrapper = mount(
+    <Form>
+      <Input name="Awesome" type="checkbox" value="impressive" />
+      <Input name="Awesome" type="checkbox" value="incredible" />
+    </Form>
+  );
+
+  wrapper.find('input').first().simulate('change', {
+    target: { name: 'Awesome', checked: true, type: 'checkbox', value: 'impressive' },
+  });
+
+  expect(wrapper.find(Input).first().props().value).toEqual('impressive');
+  // because we arent intelligently managing this group of inputs the values get overwritten
+  expect(wrapper.find(Input).last().props().value).toEqual('impressive');
+
+  wrapper.find('input').first().simulate('change', {
+    target: { name: 'Awesome', checked: false, type: 'checkbox', value: 'impressive' },
+  });
+
+  expect(wrapper.find(Input).first().props().value).toEqual('impressive');
+  expect(wrapper.find(Input).last().props().value).toEqual('impressive');
+})

tests/radio-button.js

@@ -0,0 +1,31 @@
+//Test that components work with fields that pass target.checked and target.value
+import React from 'react';
+import Form from '../src/form';
+import { mount } from 'enzyme';
+
+const Input = ({ error, ...props }) => (
+  <div>
+    {error ? <p className="error">{error}</p> : null}
+    <input {...props} />
+  </div>
+);
+
+test('Input works with radio buttons', () => {
+  const wrapper = mount(
+    <Form>
+      <Input name="lightbulb" type="radio" value="on" checked />
+      <Input name="lightbulb" type="radio" value="off" />
+    </Form>
+  );
+  wrapper.find('[type="radio"]').last().simulate('change', {
+    target: { name: 'lightbulb', value: 'off', type: 'radio' },
+  });
+
+  const radios = wrapper.find('[type="radio"]');
+
+  // because we aren't intelligently managing this radio group the value gets overwritten
+  expect(radios.first().props().value).toEqual('off');
+  expect(radios.first().props().checked).toEqual(true);
+  expect(radios.last().props().value).toEqual('off');
+  expect(radios.last().props().checked).toEqual(undefined);
+});