Add cypress and playground / fixture app

.github/CONTRIBUTING.md

@@ -2,9 +2,30 @@
 
 1. Fork this repository to your own GitHub account and then clone it to your local device.
 2. Install the dependencies: `yarn install`
-3. Run `yarn link` to link the local repo to NPM
-4. Run `cd packages/formik && yarn start` to build and watch for code changes
-5. Run `yarn test` to start Jest
-7. Then npm link this repo inside any other project on your local dev with `yarn link formik`
-8. Then you can use your local version of Formik within your project
 
+## Working locally
+
+### Watching / Building packages
+
+```
+yarn dev
+```
+
+### Unit testing
+
+This will run `Jest` unit tests
+
+```
+yarn test
+```
+
+### Playground / Integration testing
+
+There is a Next.js playground that also serves as the app used for integration tests. What's cool is you can run Formik's build setup, next.js, and cypress all at the same time and everything will just magically "work" and live reload whenever you make a change.
+This is the suggested development workflow going forward.
+
+1. From the root, open a terminal and run `yarn dev` to start [TSDX](https://tsdx.io) watch on all packages
+2. Then start the playground app with `yarn start:app` in another terminal window (it will boot to http://localhost:3000)
+3. And finally, you can open a third tab to run cypress
+   - You can use Cypress UI using `yarn cypress:open`
+   - Or, if you'd rather not deal GUI, just run `yarn cypress`

.github/workflows/integration.yml

@@ -0,0 +1,15 @@
+name: E2E Test
+
+on: [pull_request]
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-16.04
+    steps:
+      - uses: actions/checkout@v2
+      - name: Cypress run
+        uses: cypress-io/github-action@v1
+        with:
+          start: npm run start:app
+          wait-on: 'http://localhost:3000'
+          wait-on-timeout: 120

app/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

app/README.md

@@ -0,0 +1,3 @@
+# Formik Integration Test App
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

app/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

app/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "formik": "^2.1.5",
+    "next": "9.5.3",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "yup": "^0.29.3"
+  }
+}

app/pages/_app.js

@@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

app/pages/basic.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Formik, Field, Form, ErrorMessage } from 'formik';
+import * as Yup from 'yup';
+
+let renderCount = 0;
+
+const Basic = () => (
+  <div>
+    <h1>Sign Up</h1>
+    <Formik
+      initialValues={{
+        firstName: '',
+        lastName: '',
+        email: '',
+        favorite: '',
+        checked: [],
+        picked: '',
+      }}
+      validationSchema={Yup.object().shape({
+        email: Yup.string()
+          .email('Invalid email address')
+          .required('Required'),
+        firstName: Yup.string().required('Required'),
+        lastName: Yup.string()
+          .min(2, 'Must be longer than 2 characters')
+          .max(20, 'Nice try, nobody has a last name that long')
+          .required('Required'),
+      })}
+      onSubmit={async values => {
+        await new Promise(r => setTimeout(r, 500));
+        alert(JSON.stringify(values, null, 2));
+      }}
+    >
+      <Form>
+        <Field name="firstName" placeholder="Jane" />
+        <ErrorMessage name="firstName" component="p" />
+
+        <Field name="lastName" placeholder="Doe" />
+        <ErrorMessage name="lastName" component="p" />
+
+        <Field
+          id="email"
+          name="email"
+          placeholder="[email protected]"
+          type="email"
+        />
+        <ErrorMessage name="email" component="p" />
+
+        <label>
+          <Field type="checkbox" name="toggle" />
+          <span style={{ marginLeft: 3 }}>Toggle</span>
+        </label>
+
+        <div id="checkbox-group">Checkbox Group </div>
+        <div role="group" aria-labelledby="checkbox-group">
+          <label>
+            <Field type="checkbox" name="checked" value="One" />
+            One
+          </label>
+          <label>
+            <Field type="checkbox" name="checked" value="Two" />
+            Two
+          </label>
+          <label>
+            <Field type="checkbox" name="checked" value="Three" />
+            Three
+          </label>
+        </div>
+        <div id="my-radio-group">Picked</div>
+        <div role="group" aria-labelledby="my-radio-group">
+          <label>
+            <Field type="radio" name="picked" value="One" />
+            One
+          </label>
+          <label>
+            <Field type="radio" name="picked" value="Two" />
+            Two
+          </label>
+        </div>
+        <button type="submit">Submit</button>
+        <div id="renderCounter">{renderCount++}</div>
+      </Form>
+    </Formik>
+  </div>
+);
+
+export default Basic;

app/pages/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import Link from 'next/link';
+
+function Home() {
+  return (
+    <main>
+      <h1>Formik Examples and Fixtures</h1>
+      <ul>
+        <li>
+          <Link href="/basic">
+            <a>Basic</a>
+          </Link>
+        </li>
+        <li>
+          <Link href="/async-submission">
+            <a>Async Submission</a>
+          </Link>
+        </li>
+      </ul>
+      <style jsx>{`
+        main {
+          max-width: 500px;
+          margin: 2rem auto;
+          padding-bottom: 20rem;
+        }
+        a {
+          display: block;
+          margin-top: 0.5rem;
+          margin-bottom: 0.5rem;
+          color: rgb(68, 122, 221);
+          text-decoration: underline;
+          font-size: 20px;
+        }
+        ul {
+          margin: 0;
+          padding: 0;
+        }
+        li {
+          margin-left: 1rem;
+        }
+      `}</style>
+    </main>
+  );
+}
+
+export default Home;

app/styles/globals.css

@@ -0,0 +1,16 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}

app/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "jsx": "preserve",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

cypress.json

@@ -0,0 +1 @@
+{ "$schema": "https://on.cypress.io/cypress.schema.json", "video": false }

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/basic.spec.ts

@@ -0,0 +1,17 @@
+/// <reference types="cypress" />
+
+describe('basic validation', () => {
+  it('should validate before submit', () => {
+    cy.visit('http://localhost:3000/basic');
+
+    // Submit the form
+    cy.get('button[type=submit]').click();
+
+    // Check that all fields are touched and error messages work
+    cy.get('input[name="firstName"] + p').contains('Required');
+    cy.get('input[name="lastName"] + p').contains('Required');
+    cy.get('input[name="email"] + p').contains('Required');
+
+    cy.get('#renderCounter').contains('0');
+  });
+});

cypress/plugins/index.ts

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.ts

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')