Merge pull request #72 from willowtreeapps/tests/custom-inputs

Adding tests for custom inputs on form submision and change

src/__tests__/customInput.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+/* eslint react/prop-types:0 */
+export default React.createClass({
+    getInitialState() {
+        return {
+            value: false
+        };
+    },
+
+    getValue() {
+        return this.state.value;
+    },
+
+    onChange() {
+        this.setState({ value: !this.state.value }, () => {
+            this.props.onChange(this.getValue());
+        });
+    },
+
+    render() {
+        return <div onClick={this.onChange} className={this.props.className}>
+            {this.state.value ? 'True' : 'False'}
+        </div>;
+    }
+});

src/__tests__/form-test.js

@@ -1,7 +1,9 @@
 jest.dontMock('../form');
 jest.dontMock('../errors');
 jest.dontMock('../fieldset');
+jest.dontMock('../fieldlist');
 jest.dontMock('../inputs/input');
+jest.dontMock('./customInput');
 
 import React from 'react';
 import TestUtils from 'react-addons-test-utils';
@@ -10,6 +12,8 @@ const Form = require('../form').default;
 const Errors = require('../errors').default;
 const Input = require('../inputs/input').default;
 const Fieldset = require('../fieldset').default;
+const Fieldlist = require('../fieldlist').default;
+const CustomInput = require('./customInput').default;
 
 describe('Form', () => {
     it('submits if the user hits enter', () => {
@@ -228,4 +232,44 @@ describe('Form', () => {
             firstname: ''
         });
     });
+
+    it('it passes down callbacks in fieldset and fieldlists', () => {
+        const onChange = jest.genMockFn();
+        const onSubmit = jest.genMockFn();
+        const form = TestUtils.renderIntoDocument(
+            <Form onChange={onChange}
+                  onSubmit={onSubmit}
+                  className="form">
+                <Fieldset name="one">
+                    <CustomInput name="two" className="two" />
+                </Fieldset>
+                <Fieldlist name="three">
+                    <CustomInput name="four" className="four" />
+                </Fieldlist>
+            </Form>
+        );
+
+        // Make sure the form serializes properly first
+        expect(form.serialize().fieldValues).toEqual({
+            one: { two: false },
+            three: [
+                { four: false }
+            ]
+        });
+
+        // Click on both inputs to toggle them to true
+        const two = TestUtils.findRenderedDOMComponentWithClass(form, 'two');
+        const four = TestUtils.findRenderedDOMComponentWithClass(form, 'four');
+
+        TestUtils.Simulate.click(two);
+        TestUtils.Simulate.click(four);
+
+        expect(onChange).toBeCalled();
+        expect(onChange.mock.calls[1][0].fieldValues).toEqual({
+            one: { two: true },
+            three: [
+                { four: true }
+            ]
+        });
+    });
 });

src/fieldset.js

@@ -11,7 +11,9 @@ export default React.createClass({
         errors: PropTypes.arrayOf(PropTypes.string),
         fieldErrors: PropTypes.object,
         name: PropTypes.string.isRequired,
-        children: PropTypes.node
+        children: PropTypes.node,
+        onChange: PropTypes.func,
+        onSubmit: PropTypes.func
     },
 
     getInputs() {
@@ -31,7 +33,12 @@ export default React.createClass({
     render() {
         warning( this.props.name, `Fieldset found without a name prop. The children of this component will behave eratically` );
         const errorsRule = createErrorsRule(this.props.errors, this.props.fieldErrors);
-        const formableRule = createFormableRule(this.props.errors, this.props.fieldErrors);
+        const formableRule = createFormableRule(
+            this.props.errors,
+            this.props.fieldErrors,
+            this.props.onSubmit,
+            this.props.onChange
+        );
 
         return <div {...this.props}>
             {cloneChildren([errorsRule, formableRule], this.props.children)}