Add tests for value and defaultValue props interactions.

test/test.FormsyText.js

@@ -1,14 +1,30 @@
 /* eslint-env mocha, jasmine */
 /* global expect */
 
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import FormsyText from '../src/FormsyText';
 import TextField from 'material-ui/TextField';
 import { Simulate } from 'react-addons-test-utils';
 import { mountTestForm } from './support';
 import { Form } from 'formsy-react';
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import { mount } from 'enzyme';
 
-const setup = () => {
+function makeChildrenFn(props) {
+  const fn = () => (
+    <FormsyText ref="text"
+      name="text"
+      validations="maxLength:10"
+      validationErrors={{ maxLength: 'Text is too long' }}
+      { ...props }
+    />
+  );
+  fn.DisplayName = 'FormsyText';
+  return fn;
+}
+
+const setup = (props) => {
+  const childrenFn = makeChildrenFn(props);
   const formWrapper = mountTestForm(childrenFn);
   const formsyTextWrapper = formWrapper.find(FormsyText);
   return {
@@ -17,13 +33,45 @@ const setup = () => {
   };
 };
 
-const childrenFn = () => (
-  <FormsyText
-    name="text"
-    validations="maxLength:10"
-    validationErrors={{ maxLength: 'Text is too long' }}
-  />
-);
+class TestForm extends Component {
+
+  static childContextTypes = {
+    muiTheme: PropTypes.object.isRequired,
+  };
+
+  static propTypes = {
+    defaultValue: PropTypes.string,
+    value: PropTypes.string,
+  }
+
+  getChildContext() {
+    return { muiTheme: getMuiTheme() };
+  }
+
+  componentWillMount() {
+    const { value, defaultValue } = this.props;
+    this.state = { value, defaultValue };
+  }
+
+  render() {
+    const { value, defaultValue, ...extraProps } = { ...this.props, ...this.state };
+    return (
+      <Form { ...extraProps }>
+        <FormsyText ref="text" name="text"
+          value={value}
+          defaultValue={defaultValue}
+        />
+      </Form>
+    );
+  }
+}
+
+function makeTestParent(props) {
+  const parent = mount(<TestForm {...props} />);
+  const formWrapper = parent.find(Form);
+  const formsyTextWrapper = parent.find(FormsyText);
+  return { parent, formWrapper, formsyTextWrapper };
+}
 
 const fillInText = (wrapper, text) => {
   const inputDOM = wrapper.find('input').node;
@@ -60,4 +108,132 @@ describe('FormsyText', () => {
     formsyForm.validateForm();
     expect(formsyTextWrapper).to.not.contain.text('Text is too long');
   });
+
+  describe('value properties handle', () => {
+    describe('initial', () => {
+      it('value', () => {
+        const { formsyTextWrapper, formWrapper } = setup({
+          value: 'VALUE',
+        });
+        const formsyForm = formWrapper.find(Form).node;
+        let formValues = formsyForm.getCurrentValues();
+        expect(formValues.text).to.eq('VALUE');
+        fillInText(formsyTextWrapper, 'some text');
+        formValues = formsyForm.getCurrentValues();
+        expect(formValues.text).to.eq('some text');
+      });
+
+      it('defaultValue', () => {
+        const { formsyTextWrapper, formWrapper } = setup({
+          defaultValue: 'DEFAULT-VALUE',
+        });
+        const formsyForm = formWrapper.find(Form).node;
+        let formValues = formsyForm.getCurrentValues();
+        expect(formValues.text).to.eq('DEFAULT-VALUE');
+        fillInText(formsyTextWrapper, 'some text');
+        formValues = formsyForm.getCurrentValues();
+        expect(formValues.text).to.eq('some text');
+      });
+
+      it('value + defaultValue', () => {
+        const { formsyTextWrapper, formWrapper } = setup({
+          value: 'VALUE',
+          defaultValue: 'DEFAULT-VALUE',
+        });
+        const formsyForm = formWrapper.find(Form).node;
+        let formValues = formsyForm.getCurrentValues();
+        expect(formValues.text).to.eq('VALUE');
+        fillInText(formsyTextWrapper, 'some text');
+        formValues = formsyForm.getCurrentValues();
+        expect(formValues.text).to.eq('some text');
+      });
+    });
+
+    describe('updating', () => {
+      it('value', () => {
+        const props = {
+          value: 'VALUE',
+        };
+        const { parent, formWrapper, formsyTextWrapper } = makeTestParent(props);
+        const formsyForm = formWrapper.node;
+        parent.setState({ value: 'NEW VALUE' });
+        let formValues = formsyForm.getCurrentValues();
+        expect(formValues.text).to.eq('NEW VALUE');
+        fillInText(formsyTextWrapper, 'some text');
+        formValues = formsyForm.getCurrentValues();
+        expect(formValues.text).to.eq('some text');
+        parent.setState({ value: 'NEWER VALUE' });
+        formValues = formsyForm.getCurrentValues();
+        expect(formValues.text).to.eq('NEWER VALUE');
+      });
+
+      it('defaultValue', () => {
+        const props = {
+          defaultValue: 'VALUE',
+        };
+        const { parent, formWrapper, formsyTextWrapper } = makeTestParent(props);
+        const formsyForm = formWrapper.node;
+        parent.setState({ defaultValue: 'NEW VALUE' });
+        let formValues = formsyForm.getCurrentValues();
+        expect(formValues.text).to.eq('NEW VALUE');
+        fillInText(formsyTextWrapper, 'some text');
+        formValues = formsyForm.getCurrentValues();
+        expect(formValues.text).to.eq('some text');
+        parent.setState({ defaultValue: 'NEWER VALUE' });
+        // defaultValues does not override the typed in value.
+        formValues = formsyForm.getCurrentValues();
+        expect(formValues.text).to.eq('some text');
+      });
+    });
+
+    describe('resetting to', () => {
+      it('value', () => {
+        const { formsyTextWrapper, formWrapper } = setup({
+          value: 'VALUE',
+        });
+        const formsyForm = formWrapper.find(Form).node;
+        fillInText(formsyTextWrapper, 'some text');
+        formsyForm.reset();
+        const formValues = formsyForm.getCurrentValues();
+        expect(formValues.text).to.eq('VALUE');
+      });
+
+      it('defaultValue', () => {
+        const { formsyTextWrapper, formWrapper } = setup({
+          defaultValue: 'VALUE',
+        });
+        const formsyForm = formWrapper.find(Form).node;
+        fillInText(formsyTextWrapper, 'some text');
+        formsyForm.reset();
+        const formValues = formsyForm.getCurrentValues();
+        expect(formValues.text).to.eq('VALUE');
+      });
+
+      it('value + defaultValue', () => {
+        const { formsyTextWrapper, formWrapper } = setup({
+          value: 'VALUE',
+          defaultValue: 'DEFAULT-VALUE',
+        });
+        const formsyForm = formWrapper.find(Form).node;
+        fillInText(formsyTextWrapper, 'some text');
+        formsyForm.reset();
+        const formValues = formsyForm.getCurrentValues();
+        expect(formValues.text).to.eq('VALUE');
+      });
+
+      it('updated value', () => {
+        const props = {
+          value: 'VALUE',
+        };
+        const { parent, formWrapper, formsyTextWrapper } = makeTestParent(props);
+        const formsyForm = formWrapper.node;
+        parent.setState({ value: 'NEW VALUE' });
+        fillInText(formsyTextWrapper, 'some text');
+        formsyForm.reset();
+        // Reset reverts to the last value that has been set.
+        const formValues = formsyForm.getCurrentValues();
+        expect(formValues.text).to.eq('NEW VALUE');
+      });
+    });
+  });
 });