docs(website): use async methods and improve testing docs

Author: christianalfoni

packages/overmind-website/examples/api/effects.ts

@@ -8,11 +8,15 @@ import axios from 'axios'
 import { User, Item } from './state'
 
 export const api = {
-  getUser(): Promise<User> {
-    return fetch('/user').then(response => response.json())
+  async getUser(): Promise<User> {
+    const response = await fetch('/user')
+
+    return response.json()
   },
-  getItem(id: number): Promise<Item> {
-    return fetch(\`/items/\${id}\`).then(response => response.json())
+  async getItem(id: number): Promise<Item> {
+    const response = await fetch(\`/items/\${id}\`)
+
+    return response.json()
   }
 }
   `,
@@ -25,11 +29,15 @@ export const api = {
 import axios from 'axios'
 
 export const api = {
-  getUser() {
-    return fetch('/user').then(response => response.json())
+  async getUser() {
+    const response = await fetch('/user')
+
+    return response.json()
   },
-  getItem(id) {
-    return fetch(\`/items/\${id}\`).then(response => response.json())
+  async getItem(id) {
+    const response = fetch(\`/items/\${id}\`)
+
+    return response.json()
   }
 }
   `,

packages/overmind-website/examples/frontpage/effects.ts

@@ -2,7 +2,7 @@ export default () => [
   {
     code: `
 export const api = {
-  fetchItems: async () => {
+  async fetchItems() => {
     const response = await fetch('/api/items')
 
     return response.json()

packages/overmind-website/examples/guide/getstarted/actions.ts

@@ -47,14 +47,15 @@ export const overmind = new Overmind({
   },
   effects: {
     jsonPlaceholder: {
-      getPosts() {
-        return fetch('https://jsonplaceholder.typicode.com/posts')
-          .then(response => response.json())
+      async getPosts() {
+        const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+        
+        return response.json()
       }
     }
   },
   actions: {
-    getPosts: async ({ state, effects }) => {
+    async getPosts({ state, effects }) => {
       state.isLoadingPosts = true
       state.posts = await effects.jsonPlaceholder.getPosts()
       state.isLoadingPosts = false

packages/overmind-website/examples/guide/getstarted/effects.ts

@@ -10,8 +10,9 @@ import { Post } from './state'
     
 export const jsonPlaceholder = {
   async getPosts(): Promise<Post[]> {
-    return fetch('https://jsonplaceholder.typicode.com/posts')
-      .then(response => response.json())
+    const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+    
+    return response.json()
   }
 }
       `,
@@ -45,9 +46,10 @@ export const overmind = new Overmind({
     posts: []
   },
   effects: {
-    getPosts() {
-      return fetch('https://jsonplaceholder.typicode.com/posts')
-        .then(response => response.json())
+    async getPosts() {
+      const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+      
+      return response.json()
     }
   }
 })

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

@@ -16,24 +16,31 @@ interface IOptions {
   baseUrl: string
 }
 
+// This is the class we can create new instances of when testing
 export class Api {
   request: IRequest
   options: IOptions
   constructor(request: IRequest, options: IOptions) {
     this.request = request
     this.options = options
   }
-  getPost(id: string): Promise<Post> {
-    return this.request.get(this.options.baseUrl + '/posts/' + id, {
-      headers: {
-        'Auth-Token': this.options.authToken
-      }
-    })
-      .then(response => response.data)
-      .catch(() => throw new Error('Could not grab post with id ' + id))
+  async getPost(id: string): Promise<Post> {
+    try {
+      const response = await this.request.get(this.options.baseUrl + '/posts/' + id, {
+        headers: {
+          'Auth-Token': this.options.authToken
+        }
+      })
+
+      return response.data
+    } catch (error) {
+      throw new Error('Could not grab post with id ' + id)
+    }
   }
 }
 
+// We export the default instance that we actually use with our
+// application
 export const api = new Api(axios, {
   authToken: '134981091031hfh31',
   baseUrl: '/api'
@@ -47,21 +54,29 @@ export const api = new Api(axios, {
           code: `
 import axios from 'axios'
 
+// This is the class we can create new instances of when testing
 export class Api {
   constructor(request, options) {
     this.request = request
     this.options = options
   }
-  getPost(id) {
-    return this.request.get(this.options.baseUrl + '/posts/' + id, {
-      headers: {
-        'Auth-Token': this.options.authToken
-      }
-    })
-      .then(response => response.data)
+  async getPost(id) {
+    try {
+      const response = await this.request.get(this.options.baseUrl + '/posts/' + id, {
+        headers: {
+          'Auth-Token': this.options.authToken
+        }
+      })
+      
+      return response.data
+    } catch (error) {
+      throw new Error('Could not grab post with id ' + id)
+    }
   }
 }
 
+// We export the default instance that we actually use with our
+// application
 export const api = new Api(axios, {
   authToken: '134981091031hfh31',
   baseUrl: '/api'

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

@@ -28,7 +28,11 @@ In this scenario we would also ensure that the **isLoadingPost** state indeed fl
 
 ## Testing effects
 
-Where you want to put in your effort is with the effects. This is where you have your chance to build a domain specific API for your actual application logic. The bridge between some generic tool and what your application actually wants to use it for. A simple example of this is doing requests. Maybe you want to use axios to reach your API, but you do not really care about testing that library. What you want to test is that it is used correctly when you use your application specific API. Lets look at an example:
+Where you want to put in your effort is with the effects. This is where you have your chance to build a domain specific API for your actual application logic. The bridge between some generic tool and what your application actually wants to use it for.
+
+A simple example of this is doing requests. Maybe you want to use axios to reach your API, but you do not really care about testing that library. What you want to test is that it is used correctly when you use your application specific API.
+
+This is just an example showing you how you can structure your code for optimal testability. You might prefer a different approach or maybe rely on integration tests for this. No worries, you do what makes most sense for your application:
 
 ```marksy
 h(Example, { name: "guide/writingtests/effect.ts" })