Mocking post requests

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

@@ -1,42 +1,63 @@
 import { fetch } from 'whatwg-fetch';
 
-let createMock = async function(path, method, statusCode, response) {
+let createMock = async function({ path, method, body, statusCode, response }) {
   return await fetch('/__mock-request', {
     method: 'post',
     headers: {
       "Content-Type": "application/json",
     },
     body: JSON.stringify({
       path,
+      body,
       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);
+let mockServer = {
+  get(path, response, statusCode = 200) {
+    // when needed we'll change this to use something like MockGet
+    // see MockPost for the idea
+    return createMock({
+      path,
+      method: "GET",
+      statusCode,
+      response
+    });
   },
 
-  async delete(path, response, status = 200) {
-    return createMock(path, "DELETE", status, response);
+  post(path, body) {
+    return new MockPost({ path, body });
   },
 
   async cleanUp() {
     return fetch('/__cleanup-mocks');
   }
 };
+
+class MockPost {
+  constructor({ path, body }) {
+    this.path = path;
+    this.body = body;
+    this.status = 200;
+  }
+
+  statusCode(status) {
+    this.status = status;
+    return this;
+  }
+
+  reply(response) {
+    return createMock({
+      path: this.path,
+      body: this.body,
+      method: "POST",
+      statusCode: this.status,
+      response
+    });
+  }
+}
+
+export { mockServer };

index.js

@@ -45,7 +45,7 @@ module.exports = {
     app.post('/__mock-request', bodyParser.json(), (req, res) => {
       let mock = nock(req.headers.origin)
         .persist()
-        .intercept(req.body.path, req.body.method)
+        .intercept(req.body.path, req.body.method, req.body.body)
         .reply(req.body.statusCode, req.body.response);
 
       res.json({ mocks: mock.pendingMocks() });

package.json

@@ -26,8 +26,8 @@
     "ember-cli-babel": "^6.6.0",
     "fastboot": "^1.2.1",
     "jquery-param": "^1.0.1",
-    "resolve": "^1.10.0",
     "nock": "^10.0.6",
+    "resolve": "^1.10.0",
     "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {

tests/dummy/app/pods/examples/network/graphql/simple/route.js

@@ -0,0 +1,12 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default Route.extend({
+  graphql: service(),
+
+  model() {
+    let query = `{ hello }`;
+    return this.get('graphql').request({ query });
+  }
+
+});

tests/dummy/app/pods/examples/network/graphql/simple/template.hbs

@@ -0,0 +1,5 @@
+The hello response from the server:
+
+<div data-test-id="hello">
+  {{model.hello}}
+</div>

tests/dummy/app/pods/examples/network/graphql/variables/route.js

@@ -0,0 +1,23 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default Route.extend({
+  graphql: service(),
+
+  model(params) {
+    let query = `query FindHero($id: String!) {
+      hero(id: $id) {
+        id,
+        name
+      }
+    }`;
+
+    return this.get('graphql').request({
+      query,
+      variables: {
+        id: params.id
+      }
+    });
+  }
+
+});

tests/dummy/app/pods/examples/network/graphql/variables/template.hbs

@@ -0,0 +1,9 @@
+The hero response from the server:
+
+<div data-test-id="id">
+  {{model.id}}
+</div>
+
+<div data-test-id="name">
+  {{model.name}}
+</div>

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', { method: 'post' });
+    let response = await fetch('/api/posts');
     return await response.json();
   }
 

tests/dummy/app/router.js

@@ -33,6 +33,11 @@ Router.map(function() {
         this.route('post', { path: ':post_id' });
       });
 
+      this.route('graphql', function() {
+        this.route('simple');
+        this.route('variables', { path: 'variables/:id' });
+      });
+
       this.route('other', function() {
         this.route('get-request');
         this.route('post-request');

tests/dummy/app/services/graphql.js

@@ -0,0 +1,29 @@
+import Service from '@ember/service';
+import fetch from 'fetch';
+
+export default Service.extend({
+  async request({ query, variables }) {
+    let body = { query };
+
+    if (variables) {
+      body.variables = variables;
+    }
+
+    let response = await fetch('/graphql', {
+      method: 'post',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+      },
+      body: JSON.stringify(body)
+    });
+
+    let { data, errors } = await response.json();
+
+    if (errors) {
+      throw errors;
+    } else {
+      return data;
+    }
+  }
+});

tests/fastboot/graphql-mocking-test.js

@@ -0,0 +1,57 @@
+import { module, test } from 'qunit';
+import { setup, visit, mockServer } from 'ember-cli-fastboot-testing/test-support';
+
+module('Fastboot | graphql mocking', function(hooks) {
+  setup(hooks);
+
+  test('it can mock a graphql request', async function(assert) {
+    await mockServer
+      .post('/graphql', {
+        query: "{ hello }"
+      })
+      .reply({
+        data: {
+          hello: "Hello world!"
+        }
+      });
+
+    await visit('/examples/network/graphql/simple');
+
+    assert.dom('[data-test-id="hello"]').hasText("Hello world!");
+  });
+
+  test('it can mock multiple graphql requests with variables', async function(assert) {
+    let query = `query FindHero($id: String!) {
+      hero(id: $id) {
+        id,
+        name
+      }
+    }`;
+
+    let heros = [{
+      id: "123",
+      name: "Luke Skywalker"
+    },{
+      id: "456",
+      name: "Han Solo"
+    }];
+
+    for (let hero of heros) {
+      await mockServer.post('/graphql', {
+        query,
+        variables: { id: hero.id }
+      })
+      .reply({ data: hero });
+    }
+
+    await visit('/examples/network/graphql/variables/123');
+
+    assert.dom('[data-test-id="id"]').hasText("123");
+    assert.dom('[data-test-id="name"]').hasText("Luke Skywalker");
+
+    await visit('/examples/network/graphql/variables/456');
+
+    assert.dom('[data-test-id="id"]').hasText("456");
+    assert.dom('[data-test-id="name"]').hasText("Han Solo");
+  });
+});

tests/fastboot/network-mocking-test.js

@@ -68,7 +68,7 @@ module('Fastboot | network mocking', function(hooks) {
   });
 
   test('it can mock a get request', async function(assert) {
-    await mockServer.post('/api/posts', [
+    await mockServer.get('/api/posts', [
       { id: 1, title: 'get post'},
     ]);
 
@@ -78,9 +78,14 @@ module('Fastboot | network mocking', function(hooks) {
   });
 
   test('it can mock a post request', async function(assert) {
-    await mockServer.post('/api/posts', [
-      { id: 1, title: 'post post'},
-    ]);
+    await mockServer
+      .post('/api/posts')
+      .reply([
+        {
+          id: 1,
+          title: 'post post'
+        }
+      ]);
 
     await visit('/examples/network/other/post-request');
 

tests/index.html

@@ -17,7 +17,7 @@
     {{content-for "head-footer"}}
     {{content-for "test-head-footer"}}
   </head>
-  <body>
+  <body style="background-color: white !important;">
     {{content-for "body"}}
     {{content-for "test-body"}}