Added example for renderer testing to docs.

Author: Hyperkid123

packages/mui-component-mapper/demo/index.js

@@ -27,6 +27,22 @@ const compositeMapper = {
 }
 
 
+const schema = {
+    fields: [{
+        component: 'switch',
+        name: 'foo',
+        label: 'Foo'
+    }, {
+        component: 'text-field',
+        name: 'bar',
+        label: 'bar',
+        condition: {
+            when: 'foo',
+            is: true
+        }
+    }]
+}
+
 const App = () => (
     <ThemeProvider theme={ theme }>
         <Grid 
@@ -43,7 +59,7 @@ const App = () => (
                     onSubmit={console.log}
                     componentMapper={compositeMapper}
                     FormTemplate={props => <FormTemplate {...props} />}
-                    schema={demoSchema}
+                    schema={schema}
                     onCancel={() => console.log('canceling')}
                 />
             </Grid>

packages/react-renderer-demo/src/app/pages/testing.md

@@ -0,0 +1,26 @@
+import Grid from '@material-ui/core/Grid'
+import ListOfContents from '../src/helpers/list-of-contents';
+import CodeExample from '../src/components/code-example';
+
+<Grid container item>
+<Grid item xs={12} md={10}>
+
+# Testing
+
+Always make sure that your **custom components** and their features are tested to avoid bugs and runtime crashes.
+
+In these examples we will use [Jest](https://jestjs.io/) and [Enzyme](https://enzymejs.github.io/enzyme/docs/api/) but the same rules apply to any other testing libraries.
+
+## Testing the renderer
+
+If you want to test your whole form, the easiest way is just to render it as you would normaly. Be carefoul that you will have to mock all your async validations and submitions. Data driven forms have a great test coverage so its not necessary to test core features.
+
+Bellow is an example of a form with a async validation and a conditional field. All features in the data driven forms packages are tested by the library. It should not be required to tests them most of the time.
+
+<CodeExample source="tests/form-renderer.test" />
+
+</Grid>
+<Grid item xs={false} md={2}>
+  <ListOfContents file="testing" />
+</Grid>
+</Grid>

packages/react-renderer-demo/src/app/src/components/code-example.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import Grid from '@material-ui/core/Grid';
+
+import dynamic from 'next/dynamic';
+import PropTypes from 'prop-types';
+
+const CodeEditor = dynamic(import('./code-editor'), {
+  ssr: false
+});
+
+const reqSource = require.context('!raw-loader!@data-driven-forms/examples', true, /\.js/);
+
+const CodeExample = ({ source }) => {
+  const codeSource = reqSource(`./src/${source}.js`).default;
+  return (
+    <Grid container spacing={0} className="DocRawComponent">
+      <Grid item xs={12}>
+        <CodeEditor value={codeSource} />
+      </Grid>
+    </Grid>
+  );
+};
+
+CodeExample.propTypes = {
+  source: PropTypes.string.isRequired
+};
+
+export default CodeExample;

packages/react-renderer-demo/src/app/src/components/navigation/schema.js

@@ -19,6 +19,10 @@ const schema = [
     noRoute: true,
     fields: [...baseExamples.sort((a, b) => a.linkText.localeCompare(b.linkText))]
   },
+  {
+    linkText: 'Testing',
+    link: 'testing'
+  },
   {
     linkText: 'Releases',
     link: 'releases'

yarn.lock

@@ -3213,6 +3213,11 @@
     "@types/d3-voronoi" "*"
     "@types/d3-zoom" "*"
 
+"@types/debounce-promise@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@types/debounce-promise/-/debounce-promise-3.1.1.tgz#38fcb523f7d11d521fca2e8ccb43f0982fbf5ce7"
+  integrity sha512-eOSiMKpPYI5Cx5tmx4xQ1e0bLz9n56NVv4ao0YQcYtIJYZjdoCDFvZwIQgXDiFHU5SFtKtN2vcqx5ZIXvj1Ccg==
+
 "@types/duplexify@^3.6.0":
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/@types/duplexify/-/duplexify-3.6.0.tgz#dfc82b64bd3a2168f5bd26444af165bf0237dcd8"
@@ -4248,6 +4253,28 @@ autoprefixer@^9.6.1:
     postcss "^7.0.21"
     postcss-value-parser "^4.0.2"
 
+awesome-debounce-promise@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/awesome-debounce-promise/-/awesome-debounce-promise-2.1.0.tgz#7c21cadf2eaa1fa0a29449dd4dfdbd5004811e53"
+  integrity sha512-0Dv4j2wKk5BrNZh4jgV2HUdznaeVgEK/WTvcHhZWUElhmQ1RR+iURRoLEwICFyR0S/5VtxfcvY6gR+qSe95jNg==
+  dependencies:
+    "@types/debounce-promise" "^3.1.1"
+    awesome-imperative-promise "^1.0.1"
+    awesome-only-resolves-last-promise "^1.0.3"
+    debounce-promise "^3.1.0"
+
+awesome-imperative-promise@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/awesome-imperative-promise/-/awesome-imperative-promise-1.0.1.tgz#be143d89615b9110ac310345457f37e9791ddac9"
+  integrity sha512-EmPr3FqbQGqlNh+WxMNcF9pO9uDQJnOC4/3rLBQNH9m4E9qI+8lbfHCmHpVAsmGqPJPKhCjJLHUQzQW/RBHRdQ==
+
+awesome-only-resolves-last-promise@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/awesome-only-resolves-last-promise/-/awesome-only-resolves-last-promise-1.0.3.tgz#f2dac3ff7df238e48b818b423483031750f13ef0"
+  integrity sha512-7q4WPsYiD8Omvi/yHL314DkvsD/lM//Z2/KcU1vWk0xJotiV0GMJTgHTpWl3n90HJqpXKg7qX+VVNs5YbQyPRQ==
+  dependencies:
+    awesome-imperative-promise "^1.0.1"
+
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -6902,6 +6929,11 @@ dateformat@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
 
+debounce-promise@^3.1.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/debounce-promise/-/debounce-promise-3.1.2.tgz#320fb8c7d15a344455cd33cee5ab63530b6dc7c5"
+  integrity sha512-rZHcgBkbYavBeD9ej6sP56XfG53d51CD4dnaw989YX/nZ/ZJfgRx/9ePKmTNiUiyQvh4mtrMoS3OAWW+yoYtpg==
+
 [email protected], debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"