Adding tests for LocalForm, and onUpdate and onChange props to <Form>

Author: davidkpiano

src/components/form-component.js

@@ -36,6 +36,8 @@ const propTypes = {
     dispatch: PropTypes.func,
     getState: PropTypes.func,
   }),
+  onUpdate: PropTypes.func,
+  onChange: PropTypes.func,
 };
 
 const defaultStrategy = {
@@ -64,23 +66,43 @@ function createFormClass(s = defaultStrategy) {
     }
 
     componentDidMount() {
-      if (!containsEvent(this.props.validateOn, 'change')) return;
+      this.handleUpdate();
+      this.handleChange();
 
-      this.validate(this.props, true);
+      if (containsEvent(this.props.validateOn, 'change')) {
+        this.validate(this.props, true);
+      }
     }
 
     componentWillReceiveProps(nextProps) {
-      if (!containsEvent(nextProps.validateOn, 'change')) return;
-
-      this.validate(nextProps);
+      if (containsEvent(nextProps.validateOn, 'change')) {
+        this.validate(nextProps);
+      }
     }
 
     shouldComponentUpdate(nextProps) {
       return deepCompareChildren(this, nextProps);
     }
 
-    componentDidUpdate() {
+    componentDidUpdate(prevProps) {
+      this.handleUpdate();
       this.handleIntents();
+
+      if (!shallowEqual(prevProps.modelValue, this.props.modelValue)) {
+        this.handleChange();
+      }
+    }
+
+    handleUpdate() {
+      if (this.props.onUpdate) {
+        this.props.onUpdate(this.props.formValue);
+      }
+    }
+
+    handleChange() {
+      if (this.props.onChange) {
+        this.props.onChange(this.props.modelValue);
+      }
     }
 
     attachNode(node) {

src/local.js

@@ -8,13 +8,13 @@ class LocalForm extends React.Component {
     super(props);
 
     this.store = props.store || createStore(combineForms({
-      local: {},
+      [props.model]: props.initialState,
     }));
   }
 
   render() {
     return (
-      <Form model="local" store={this.store} {...this.props} />
+      <Form store={this.store} {...this.props} component="div" />
     );
   }
 }
@@ -25,6 +25,15 @@ LocalForm.propTypes = {
     dispatch: PropTypes.func,
     getState: PropTypes.func,
   }),
+
+  // provided props
+  initialState: PropTypes.any,
+  model: PropTypes.string.isRequired,
+};
+
+LocalForm.defaultProps = {
+  initialState: {},
+  model: 'local',
 };
 
 export default LocalForm;

test/local-forms-spec.js

@@ -0,0 +1,100 @@
+/* eslint no-return-assign:0 */
+import React from 'react';
+import { Control } from '../src';
+import LocalForm from '../src/local';
+import TestUtils from 'react-addons-test-utils';
+import { assert } from 'chai';
+
+describe('local forms', () => {
+  it('should exist', () => {
+    assert.isFunction(LocalForm);
+  });
+
+  describe('standard usage with onUpdate', () => {
+    let innerFormState;
+
+    const form = TestUtils.renderIntoDocument(
+      <LocalForm onUpdate={(formValue) => innerFormState = formValue}>
+        <Control.text model=".foo" />
+      </LocalForm>
+    );
+
+    const input = TestUtils.findRenderedDOMComponentWithTag(form, 'input');
+
+    it('should initially update with the loaded form value', () => {
+      assert.containSubset(innerFormState, {
+        $form: {
+          pristine: true,
+        },
+      });
+    });
+
+    it('should behave like a normal form, with an internal Redux state', () => {
+      input.value = 'changed';
+      TestUtils.Simulate.change(input);
+
+      assert.containSubset(innerFormState, {
+        $form: {
+          pristine: false,
+        },
+        foo: {
+          pristine: false,
+          value: 'changed',
+        },
+      });
+    });
+  });
+
+  describe('standard usage with onChange', () => {
+    let innerModelState;
+
+    const form = TestUtils.renderIntoDocument(
+      <LocalForm onChange={(modelValue) => innerModelState = modelValue}>
+        <Control.text model=".foo" />
+      </LocalForm>
+    );
+
+    const input = TestUtils.findRenderedDOMComponentWithTag(form, 'input');
+
+    it('should initially have an empty object (by default) as the model value', () => {
+      assert.deepEqual(innerModelState, {});
+    });
+
+    it('should behave like a normal form, with an internal Redux state', () => {
+      input.value = 'changed';
+      TestUtils.Simulate.change(input);
+
+      assert.deepEqual(innerModelState, {
+        foo: 'changed',
+      });
+    });
+  });
+
+  describe('onChange with initialState', () => {
+    let innerModelState;
+
+    const form = TestUtils.renderIntoDocument(
+      <LocalForm
+        onChange={(modelValue) => innerModelState = modelValue}
+        initialState={{ foo: 'bar' }}
+      >
+        <Control.text model=".foo" />
+      </LocalForm>
+    );
+
+    const input = TestUtils.findRenderedDOMComponentWithTag(form, 'input');
+
+    it('should initially have an empty object (by default) as the model value', () => {
+      assert.deepEqual(innerModelState, { foo: 'bar' });
+    });
+
+    it('should behave like a normal form, with an internal Redux state', () => {
+      input.value = 'changed';
+      TestUtils.Simulate.change(input);
+
+      assert.deepEqual(innerModelState, {
+        foo: 'changed',
+      });
+    });
+  });
+});