Merge pull request #31 from embermap/nock-server

nock server

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,13 +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';
 
 export function setup(hooks) {
   hooks.beforeEach(function() {
     return setupContext(this);
   });
 
-  hooks.afterEach(function() {
+  hooks.afterEach(async function() {
+    await mockServer.cleanUp();
     return teardownContext(this);
   });
 }
@@ -34,6 +36,8 @@ export async function visit(url, options = {}) {
   return result;
 }
 
+export { mockServer };
+
 // private
 
 let fetchFromEmberCli = async function(url, headers) {

blueprints/fastboot-test/files/tests/fastboot/__name__-test.js

@@ -1,5 +1,5 @@
 import { module, test } from 'qunit';
-import { setup, visit } from 'ember-cli-fastboot-testing/test-support';
+import { setup, visit, /* mockServer */ } from 'ember-cli-fastboot-testing/test-support';
 
 module('FastBoot | <%= dasherizedModuleName %> test', function(hooks) {
   setup(hooks);

index.js

@@ -3,6 +3,8 @@
 let FastBoot = require('fastboot');
 let url = require('url');
 let resolve = require('resolve');
+let nock = require('nock');
+let bodyParser = require('body-parser')
 
 module.exports = {
   name: 'ember-cli-fastboot-testing',
@@ -39,6 +41,23 @@ module.exports = {
   },
 
   _fastbootRenderingMiddleware(app) {
+
+    app.use(bodyParser.json());
+    app.post('/__mock-request', (req, res) => {
+      let mock = nock(req.headers.origin)
+        .persist()
+        .intercept(req.body.path, req.body.method)
+        .reply(req.body.statusCode, req.body.response);
+
+      res.json({ mocks: mock.pendingMocks() });
+    });
+
+    app.use('/__cleanup-mocks', (req, res) => {
+      nock.cleanAll()
+
+      res.json({ ok: true });
+    });
+
     app.use('/__fastboot-testing', (req, res) => {
       let urlToVisit = decodeURIComponent(req.query.url);
       let parsed = url.parse(urlToVisit, true);

package.json

@@ -21,11 +21,13 @@
     "test:all": "ember try:each"
   },
   "dependencies": {
+    "body-parser": "^1.18.3",
     "ember-auto-import": "^1.2.15",
     "ember-cli-babel": "^6.6.0",
     "fastboot": "1.2.* || 2.*",
     "jquery-param": "^1.0.1",
     "resolve": "^1.10.0",
+    "nock": "^10.0.6",
     "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {
@@ -53,7 +55,7 @@
     "ember-cli-uglify": "^2.0.0",
     "ember-disable-prototype-extensions": "^1.1.2",
     "ember-export-application-global": "^2.0.0",
-    "ember-fetch": "^6.4.0",
+    "ember-fetch": "^6.5.0",
     "ember-load-initializers": "^1.1.0",
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-resolver": "^4.0.0",

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,54 @@
+# Network mocking
+
+Just about every Ember application ends up having pages that depend on 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 while running FastBoot tests. However, since FastBoot runs inside of Node.js, we'll need to use a network mocking library that is written for node.
+
+FastBoot Testing exposes an API for intercepting 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', {
+      data: {
+        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'}}