Providing NativeForm (as View) for React Native + unit tests

Author: davidkpiano

src/components/form-component.js

@@ -142,10 +142,7 @@ class Form extends Component {
 }
 
 Form.propTypes = {
-  component: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.string,
-  ]),
+  component: PropTypes.any,
   validators: PropTypes.object,
   errors: PropTypes.object,
   validateOn: PropTypes.oneOf([

src/native/index.js

@@ -1,3 +1,6 @@
+import React from 'react';
+
+import Form from '../components/form-component';
 import { createFieldClass } from '../components/field-component';
 
 const View = process.env.NODE_ENV !== 'test'
@@ -44,4 +47,18 @@ const NativeField = createFieldClass({
   component: View,
 });
 
-export { NativeField as Field };
+class NativeForm extends React.Component {
+  render() {
+    return (
+      <Form
+        component={View}
+        {...this.props}
+      />
+    );
+  }
+}
+
+export {
+  NativeField as Field,
+  NativeForm as Form,
+};

test/custom-field-component-spec.js

@@ -6,7 +6,10 @@ import { applyMiddleware, combineReducers, createStore } from 'redux';
 import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
 
-import { Field as NativeField } from '../src/native';
+import {
+  Field as NativeField,
+  Form as NativeForm,
+} from '../src/native';
 import { controls, createFieldClass, formReducer, modelReducer, Field } from '../src';
 
 describe('controls props mapping', () => {
@@ -190,7 +193,7 @@ describe('React Native <Field /> components', () => {
     assert.ok(NativeField);
   });
 
-  it('should map native components', () => {
+  it('should map the native field component', () => {
     // Placeholder div, for now
     class TextField extends Component {
       render() {
@@ -200,4 +203,22 @@ describe('React Native <Field /> components', () => {
 
     assert.ok(<NativeField model="foo.bar"><TextField /></NativeField>);
   });
+
+  it('should render a Form component as a View', () => {
+    const store = applyMiddleware(thunk)(createStore)(combineReducers({
+      testForm: formReducer('test'),
+      test: modelReducer('test', { foo: 'bar' }),
+    }));
+
+    const form = TestUtils.renderIntoDocument(
+      <Provider store={store}>
+        <NativeForm model="test" />
+      </Provider>
+    );
+
+    // Placeholder div, for now
+    const formElement = TestUtils.findRenderedDOMComponentWithTag(form, 'div');
+
+    assert.ok(formElement);
+  });
 });

test/errors-component-spec.js

@@ -521,4 +521,36 @@ describe('<Errors />', () => {
       assert.equal(components[1].innerHTML, 'bar error');
     });
   });
+
+  xdescribe('deep model paths', () => {
+    it('should work with deep model paths', () => {
+      const store = applyMiddleware(thunk)(createStore)(combineReducers({
+        forms: combineReducers({
+          testForm: formReducer('test', {}),
+          test: modelReducer('test'),
+        }),
+      }));
+
+      // assert.doesNotThrow(() => {      
+        const form = TestUtils.renderIntoDocument(
+          <Provider store={store}>
+            <form>
+              <Errors model="forms.test.foo" 
+                messages={{
+                  required: 'This field is required',
+                }}
+              />
+              <Field model="forms.test.foo"
+                validators={{
+                  required: (v) => v && v.length,
+                }}
+              >
+                <input type="text" />
+              </Field>
+            </form>
+          </Provider>
+        );
+      // });
+    });
+  });
 });