docs(website): add testing docs to separate out config

Author: christianalfoni

packages/overmind-website/examples/guide/writingtests/structuringtheapp.ts

@@ -0,0 +1,132 @@
+import { tsAppIndex } from '../../templates'
+
+const javascript = {
+  react: [
+    {
+      fileName: 'overmind/index.js',
+      code: `
+import { createHook } from 'overmind-react'
+
+export const config = {
+  state: {
+    isLoadingPosts: false
+  }
+}
+
+export const useOvermind = createHook()
+`,
+    },
+    {
+      fileName: 'index.js',
+      code: `
+import React from 'react'
+import { render } from 'react-dom'
+import { Overmind } from 'overmind'
+import { Provider } from 'overmind-react'
+import { config } from './overmind'
+import App from './components/App'
+
+const overmind = new Overmind(config)
+
+render(
+  <Provider value={overmind}>
+    <App />
+  </Provider>,
+  document.querySelector('#app')
+)
+`,
+    },
+  ],
+  vue: [
+    {
+      fileName: 'overmind/index.js',
+      code: `
+export const config = {
+  state: {
+    isLoadingPosts: false
+  }
+}
+`,
+    },
+    {
+      fileName: 'overmind/index.js',
+      code: `
+import Vue from 'vue'
+import { Overmind } from 'overmind'
+import { createPlugin } from 'overmind-vue'
+import { config } from './overmind'
+import App from './components/App'
+
+const overmind = new Overmind(config)
+
+Vue.use(createPlugin(overmind))
+
+new Vue({
+  el: document.querySelector('#app'),
+  render: h => h(App)
+})
+`,
+    },
+  ],
+}
+
+const typescript = {
+  react: [
+    {
+      fileName: 'overmind/index.ts',
+      code: `
+import { IConfig } from 'overmind'
+import { createHook } from 'overmind-react'
+import { state } from './state'
+
+export const config = {
+  state
+}
+
+declare module 'overmind' {
+  interface Config extends IConfig<typeof config> {}
+}
+
+export const useOvermind = createHook<typeof config>()
+`,
+    },
+    {
+      fileName: 'index.ts',
+      code: `
+import * as React from 'react'
+import { render } from 'react-dom'
+import { Overmind } from 'overmind'
+import { Provider } from 'overmind-react'
+import { config } from './overmind'
+import { App } from './components/App'
+
+const overmind = new Overmind(config)
+
+render(
+  <Provider value={overmind}>
+    <App />
+  </Provider>,
+  document.querySelector('#app')
+)
+`,
+    },
+  ],
+  vue: javascript.vue,
+  angular: [
+    {
+      fileName: 'overmind/index.ts',
+      code: tsAppIndex(
+        'angular',
+        `
+import { state } from './state'
+
+const config = {
+  state,
+}
+`
+      ),
+    },
+  ],
+}
+
+export default (ts, view) => (ts ? typescript[view] : javascript[view])

packages/overmind-website/guides/intermediate/05_writingtests.md

@@ -2,6 +2,16 @@
 
 Testing is a broad subject and everybody has an opinion on it. We can only show you how we think about testing in general and how to effectively write those tests for your Overmind app. It is encouraged to think **unit testing** of actions and effects. This will cover expected changes in state and that your side effects behaves in a predictable manner. If you want to test how your application works when it is all put together we recommend doing integration tests as close to the user experience as possible. Testing solutions like [Cypress.io](https://www.cypress.io/) is a great way to do exactly that.
 
+## Structuring the app
+
+When you write tests you will create many instances of a mocked version of Overmind with the configuration you have created. To ensure that this configuration can be used many times we have to separate our configuration from the instantiation of the actual app.
+
+```marksy
+h(Example, { name: "guide/writingtests/structuringtheapp.ts" })
+```
+
+Now we are free to import our configuration without touching the application instance. Lets go!
+
 ## Testing actions
 
 When testing an action you want to verify that changes to state are performed as expected. To give you the best possible testing experience Overmind has mocking tool called **createOvermindMock**. It takes your application configuration and allows you to run actions as if they were run from components.

packages/overmind-website/src/components/ViewSelector/index.tsx

@@ -15,6 +15,10 @@ const ViewSelector: SFC = () => {
   const selectorRef = useRef(null)
 
   function onSelectorClick() {
+    if (isOpen) {
+      return setOpen(false)
+    }
+
     setOpen(true)
 
     const onDocumentClick = function() {