Add graphql example tests for post mocking API

Author: ryanto

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

@@ -28,7 +28,7 @@ let mockServer = {
     });
   },
 
-  post(path, body = {}) {
+  post(path, body) {
     return new MockPost({ path, body });
   },
 

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/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,92 @@
+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");
+  });
+
+  test('it can mock a graphql request with a regex variable', 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");
+  });
+});