Fixed logged errors and warnings in unit tests

Author: maludwig

src/components/control-component.js

@@ -28,6 +28,8 @@ import isNative from '../utils/is-native';
 import initialFieldState from '../constants/initial-field-state';
 import containsEvent from '../utils/contains-event';
 
+import ComponentWrapper from './control-strip-defaults-component';
+
 const findDOMNode = !isNative
   ? require('react-dom').findDOMNode
   : null;
@@ -609,23 +611,29 @@ function createControlClass(s = defaultStrategy) {
       const mappedProps = omit(this.getMappedProps(), disallowedProps);
 
       if (getRef) {
-        mappedProps.ref = getRef;
+        mappedProps.getRef = getRef;
       }
 
       // If there is an existing control, clone it
       if (control) {
         return cloneElement(
           control,
-          mappedProps,
-          controlProps.children);
+          {
+            ...mappedProps,
+            defaultValue: undefined,
+            defaultChecked: undefined,
+          },
+          controlProps.children
+        );
       }
-
       return createElement(
-        component,
+        ComponentWrapper,
         {
+          component,
           ...controlProps,
           ...mappedProps,
-        });
+        }
+      );
     }
   }
 

src/components/control-strip-defaults-component.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+// Prevents the defaultValue/defaultChecked fields from rendering with value/checked
+class ComponentWrapper extends Component {
+  render() {
+    /* eslint-disable no-unused-vars */
+    const {
+      defaultValue,
+      defaultChecked,
+      component,
+      getRef,
+      ...otherProps,
+    } = this.props;
+    /* eslint-enable */
+
+    if (getRef) {
+      otherProps.ref = getRef;
+    }
+    const WrappedComponent = component;
+    return <WrappedComponent {...otherProps} />;
+  }
+}
+ComponentWrapper.propTypes = {
+  component: PropTypes.any,
+  defaultValue: PropTypes.any,
+  defaultChecked: PropTypes.any,
+  getRef: PropTypes.func,
+};
+export default ComponentWrapper;

src/constants/control-props-map.js

@@ -17,6 +17,11 @@ function isChecked(props) {
     return props.modelValue.some((item) =>
       item === props.value);
   }
+  if (typeof props.modelValue === 'undefined') {
+    if (typeof props.defaultChecked !== 'undefined') {
+      return props.defaultChecked;
+    }
+  }
 
   return !!props.modelValue;
 }

test/control-strip-defaults-component-spec.js

@@ -0,0 +1,104 @@
+/* eslint react/no-multi-comp:0 react/jsx-no-bind:0 */
+import { assert } from 'chai';
+import React from 'react';
+import TestUtils from 'react-dom/test-utils';
+
+import { testCreateStore, testRender } from './utils';
+
+import {
+  modelReducer,
+  formReducer,
+} from '../src';
+
+import ComponentWrapper from '../src/components/control-strip-defaults-component';
+
+describe('<ComponentWrapper> component', () => {
+  describe('existence check', () => {
+    it('should exist', () => {
+      assert.ok(ComponentWrapper);
+    });
+  });
+  describe('should give proper references', () => {
+    const store = testCreateStore({
+      test: modelReducer('test', {}),
+      testForm: formReducer('test', {}),
+    });
+
+    let instance;
+
+    function getRef(node) {
+      instance = node;
+    }
+
+    it('should give a ref', () => {
+      const control = testRender(
+        <ComponentWrapper
+          component="input"
+          getRef={getRef}
+        />, store);
+      const input = TestUtils.findRenderedDOMComponentWithTag(control, 'input');
+
+      assert.equal(instance, input);
+    });
+  });
+  describe('should prevent the defaultValue and defaultChecked from propagating', () => {
+    const store = testCreateStore({
+      test: modelReducer('test', {}),
+      testForm: formReducer('test', {}),
+    });
+    describe('Text components', () => {
+      it('should still allow default values on basic input elements', () => {
+        const control = testRender(
+          <input
+            defaultValue="blah"
+          />, store);
+        const input = TestUtils.findRenderedDOMComponentWithTag(control, 'input');
+        assert.equal(input.defaultValue, 'blah');
+      });
+      it('should work on basic input component', () => {
+        const control = testRender(
+          <ComponentWrapper
+            component="input"
+            defaultValue="blah"
+          />, store);
+        const input = TestUtils.findRenderedDOMComponentWithTag(control, 'input');
+        assert.equal(input.defaultValue, '');
+      });
+      const TEXT_TYPES = ['email', 'password', 'tel', 'text', 'url'];
+      TEXT_TYPES.forEach((type) => {
+        it(`should work on all text input component types: ${type}`, () => {
+          const control = testRender(
+            <ComponentWrapper
+              component="input"
+              type={type}
+              defaultValue="blah"
+            />, store);
+          const input = TestUtils.findRenderedDOMComponentWithTag(control, 'input');
+          assert.equal(input.defaultValue, '');
+        });
+      });
+    });
+    describe('Checkbox component', () => {
+      it('should work on basic default checked checkbox component', () => {
+        const control = testRender(
+          <ComponentWrapper
+            component="input"
+            type="checkbox"
+            defaultChecked
+          />, store);
+        const input = TestUtils.findRenderedDOMComponentWithTag(control, 'input');
+        assert.equal(input.defaultChecked, false);
+      });
+      it('should work on basic default unchecked checkbox component', () => {
+        const control = testRender(
+          <ComponentWrapper
+            component="input"
+            type="checkbox"
+            defaultChecked={false}
+          />, store);
+        const input = TestUtils.findRenderedDOMComponentWithTag(control, 'input');
+        assert.equal(input.defaultChecked, false);
+      });
+    });
+  });
+});

test/custom-control-component-spec.js

@@ -40,7 +40,7 @@ describe('custom <Control /> components', () => {
     }
   }
 
-  FamiliarText.propTypes = { onChange: PropTypes.function };
+  FamiliarText.propTypes = { onChange: PropTypes.func };
 
   class CustomCheckbox extends Component {
     render() {
@@ -69,7 +69,7 @@ describe('custom <Control /> components', () => {
     }
   };
 
-  MinifiedText.propTypes = { onChange: PropTypes.function };
+  MinifiedText.propTypes = { onChange: PropTypes.func };
 
   it('should handle custom prop mappings', () => {
     const store = testCreateStore({
@@ -237,11 +237,14 @@ describe('custom <Control /> components', () => {
 
     class TextInput extends React.Component {
       render() {
+        /* eslint-disable no-unused-vars */
+        const { onChangeText, defaultValue, focus, touched, ...otherProps } = this.props;
+        /* eslint-enable */
         return (
           <div>
             <input
-              {...this.props}
-              onChange={this.props.onChangeText}
+              {...otherProps}
+              onChange={onChangeText}
             />
           </div>
         );
@@ -250,6 +253,9 @@ describe('custom <Control /> components', () => {
 
     TextInput.propTypes = {
       onChangeText: PropTypes.func,
+      defaultValue: PropTypes.string,
+      focus: PropTypes.bool,
+      touched: PropTypes.bool,
     };
 
     const mapProps = {
@@ -296,7 +302,7 @@ describe('custom <Control /> components', () => {
 
     class TextInput extends React.Component {
       render() {
-        const { focus, touched } = this.props;
+        const { focus, touched, ...otherProps } = this.props;
         const className = [
           focus ? 'focus' : '',
           touched ? 'touched' : '',
@@ -306,7 +312,7 @@ describe('custom <Control /> components', () => {
           <div>
             <input
               className={className}
-              {...this.props}
+              {...otherProps}
               onChange={this.props.onChangeText}
             />
           </div>

test/field-component-spec.js

@@ -1690,7 +1690,7 @@ Object.keys(testContexts).forEach((testKey) => {
 
     // TODO: control
     it('should remove the item at the specified index of the array'
-      + 'represented by the model', (done) => {
+      + ' represented by the model', (done) => {
       const initialState = {
         foo: [
           { val: 1 },

test/form-component-spec.js

@@ -1642,7 +1642,7 @@ Object.keys(testContexts).forEach((testKey) => {
             }}
           >
           {get(initialState, 'items').map((item, i) =>
-            <Control model={`test.items[${i}].name`} />
+            <Control model={`test.items[${i}].name`} key={`test.items[${i}].name`} />
           )}
           </Form>
         </Provider>