Mock server

* Organize tests and examples
* Add first pass at docs
* Test with Ember Data model

Author: ryanto

addon-test-support/-private/mock-server.js

@@ -0,0 +1,42 @@
+import { fetch } from 'whatwg-fetch';
+
+let createMock = async function(path, method, statusCode, response) {
+  return await fetch('/__mock-request', {
+    method: 'post',
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      path,
+      method,
+      statusCode,
+      response
+    }),
+  });
+}
+
+export let mockServer = {
+  async get(path, response, status = 200) {
+    return createMock(path, "GET", status, response);
+  },
+
+  async post(path, response, status = 200) {
+    return createMock(path, "POST", status, response);
+  },
+
+  async patch(path, response, status = 200) {
+    return createMock(path, "PATCH", status, response);
+  },
+
+  async put(path, response, status = 200) {
+    return createMock(path, "PUT", status, response);
+  },
+
+  async delete(path, response, status = 200) {
+    return createMock(path, "DELETE", status, response);
+  },
+
+  async cleanUp() {
+    return fetch('/__cleanup-mocks');
+  }
+};

addon-test-support/index.js

@@ -1,55 +1,15 @@
 import { fetch } from 'whatwg-fetch';
 import { setupContext, teardownContext } from '@ember/test-helpers';
+import { mockServer } from './-private/mock-server';
 import param from 'jquery-param';
 
-let cleanupMocks = function() {
-  return fetch('/__cleanup-mocks');
-};
-
-let createMock = async function(path, method, statusCode, response) {
-  return await fetch('/__mock-request', {
-    method: 'post',
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      path,
-      method,
-      statusCode,
-      response
-    }),
-  });
-}
-
-export let mockServer = {
-  async get(path, response, status = 200) {
-    return createMock(path, "GET", status, response);
-  },
-
-  async post(path, response, status = 200) {
-    return createMock(path, "POST", status, response);
-  },
-
-  async patch(path, response, status = 200) {
-    return createMock(path, "PATCH", status, response);
-  },
-
-  async put(path, response, status = 200) {
-    return createMock(path, "PUT", status, response);
-  },
-
-  async delete(path, response, status = 200) {
-    return createMock(path, "DELETE", status, response);
-  }
-};
-
 export function setup(hooks) {
   hooks.beforeEach(function() {
     return setupContext(this);
   });
 
   hooks.afterEach(async function() {
-    await cleanupMocks();
+    await mockServer.cleanUp();
     return teardownContext(this);
   });
 }
@@ -76,6 +36,8 @@ export async function visit(url, options = {}) {
   return result;
 }
 
+export { mockServer };
+
 // private
 
 let fetchFromEmberCli = async function(url, headers) {

tests/dummy/app/adapters/application.js

@@ -0,0 +1,5 @@
+import DS from 'ember-data';
+
+export default DS.JSONAPIAdapter.extend({
+  namespace: 'api'
+});

tests/dummy/app/models/post.js

@@ -0,0 +1,5 @@
+import DS from 'ember-data';
+
+export default DS.Model.extend({
+  title: DS.attr('string'),
+});

tests/dummy/app/pods/application/route.js

@@ -7,5 +7,4 @@ export default Route.extend({
   afterModel() {
     this.set('headData.title', 'Fastboot testing');
   }
-
 });

tests/dummy/app/pods/docs/network-mocking/template.md

@@ -0,0 +1,52 @@
+# Network mocking
+
+Just about every Ember application ends up having pages that require data from an external API. It's common to use tools like [Mirage](https://www.ember-cli-mirage.com/) to mock the network when testing these applications.
+
+It makes sense that we would also want to mock the network in FastBoot tests. However, since FastBoot runs inside of Node.js, we'll need to use a network mocking library that is written for node applications.
+
+FastBoot Testing exposes an API for networking mocking in node that can be used to intercept requests made from your FastBoot app.
+
+The following example shows how to mock a test that fetches blog post data.
+
+```js
+import { module, test } from 'qunit';
+import { setup, visit, mockServer } from 'ember-cli-fastboot-testing/test-support';
+
+module('Fastboot | Blog post page', function(hooks) {
+  setup(hooks);
+
+  test('it can render a blog post', async function(assert) {
+    await mockServer.get('/api/posts/1', {
+      type: 'post',
+      id: '1',
+      attributes: {
+        title: 'Hello world!'
+      }
+    });
+
+    await visit('/posts/1');
+
+    assert.dom('[data-test-id="title"]').hasText("Hello world!");
+  });
+});
+```
+
+The `mockServer#get` method maps a URL to a response for the lifecycle of the test. At the end of each test the `mockServer` is reset.
+
+By default, the `mockServer` will use a status code of 200. However, an optional status code can be passed in as the third parameter.
+
+```js
+test('it renders the 404 page when it cannot fetch a blog post', async function(assert) {
+  await mockServer.get(
+    '/api/posts/1',
+    { error: 'Post not found' },
+    404
+  );
+
+  await visit('/posts/1');
+
+  assert.dom('[data-test-id="page-not-found"]').exists();
+});
+```
+
+The `mockServer` also exposes `post`, `patch`, `put`, and `delete` mocking methods.

tests/dummy/app/pods/docs/template.hbs

@@ -9,6 +9,7 @@
 
     {{nav.section 'Usage & options'}}
     {{nav.item 'Visit helper' 'docs.visit'}}
+    {{nav.item 'Network mocking' 'docs.network-mocking'}}
 
     {{nav.section 'Tips & tricks'}}
     {{nav.item 'Debugging' 'docs.debugging'}}

…/app/pods/examples/network/post/route.js …mples/network/other/get-request/route.jstests/dummy/app/pods/examples/network/post/route.js renamed to tests/dummy/app/pods/examples/network/other/get-request/route.js tests/dummy/app/pods/examples/network/post/route.js renamed to tests/dummy/app/pods/examples/network/other/get-request/route.js

@@ -4,7 +4,7 @@ import fetch from 'fetch';
 export default Route.extend({
 
   async model() {
-    let response = await fetch('/api/posts');
+    let response = await fetch('/api/posts', { method: 'post' });
     return await response.json();
   }