Merge pull request #43 from embermap/notify-if-fake-server-intercepts

Notify if fake server intercepts

Author: ryanto

.eslintrc.js

@@ -1,4 +1,7 @@
 module.exports = {
+  globals: {
+    server: true,
+  },
   root: true,
   parserOptions: {
     ecmaVersion: 2017,

addon-test-support/index.js

@@ -13,8 +13,7 @@ export function setup(hooks) {
 }
 
 export async function fastboot(url, { headers = {} }) {
-  let endpoint = `/__fastboot-testing?${param({url, headers})}`;
-  let response = await fetch(endpoint);
+  let response = await fetchFromEmberCli(url, headers);
   let result = await response.json();
 
   let body = result.err ?
@@ -35,16 +34,42 @@ export async function visit(url, options = {}) {
   return result;
 }
 
-export function renderedHtml() {
-  return document.querySelector('#ember-testing').innerHTML;
-}
+// private
+
+let fetchFromEmberCli = async function(url, headers) {
+  let endpoint = `/__fastboot-testing?${param({url, headers})}`;
+  let response;
+  let error;
+
+  try {
+    response = await fetch(endpoint);
+  } catch (e) {
+    if (e.message && e.message.match(/^Mirage:/)) {
+      error = `Ember CLI FastBoot Testing: It looks like Mirage is intercepting ember-cli-fastboot-testing's attempt to render ${url}. Please disable Mirage when running FastBoot tests.`;
+    } else {
+      error = `Ember CLI FastBoot Testing: We were unable to render ${url}. Is your test suite blocking or intercepting HTTP requests? Error: ${e.message ? e.message : e}.`
+    }
+  }
+
+  if (response && response.headers && response.headers.get && response.headers.get('x-fastboot-testing') !== 'true') {
+    error = `Ember CLI FastBoot Testing: We were unable to render ${url}. Is your test suite blocking or intercepting HTTP requests?`;
+  }
+
+  if (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    throw new Error(error);
+  }
+
+  return response;
+};
 
-export function parseHtml(str) {
+let parseHtml = function(str) {
   let parser = new DOMParser();
   return parser.parseFromString(str, "text/html");
 }
 
-export function extractBody(html) {
+let extractBody = function(html) {
   let start = '<script type="x/boundary" id="fastboot-body-start"></script>';
   let end = '<script type="x/boundary" id="fastboot-body-end"></script>';
 

index.js

@@ -58,6 +58,8 @@ module.exports = {
         response: {}
       };
 
+      res.set('x-fastboot-testing', true);
+
       this.fastboot
         .visit(urlToVisit, options)
         .then(page => {

package.json

@@ -46,6 +46,7 @@
     "ember-cli-htmlbars": "^2.0.1",
     "ember-cli-htmlbars-inline-precompile": "^1.0.0",
     "ember-cli-inject-live-reload": "^1.4.1",
+    "ember-cli-mirage": "^0.4.15",
     "ember-cli-qunit": "^4.3.2",
     "ember-cli-shims": "^1.2.0",
     "ember-cli-sri": "^2.1.0",
@@ -62,6 +63,7 @@
     "eslint-plugin-ember": "^5.0.0",
     "eslint-plugin-node": "^6.0.1",
     "loader.js": "^4.2.3",
+    "pretender": "~2.1.0",
     "qunit-dom": "^0.6.2"
   },
   "engines": {

tests/dummy/mirage/config.js

@@ -0,0 +1,26 @@
+export default function() {
+
+  // These comments are here to help you get started. Feel free to delete them.
+
+  /*
+    Config (with defaults).
+
+    Note: these only affect routes defined *after* them!
+  */
+
+  // this.urlPrefix = '';    // make this `http://localhost:8080`, for example, if your API is on a different server
+  // this.namespace = '';    // make this `/api`, for example, if your API is namespaced
+  // this.timing = 400;      // delay for each request, automatically set to 0 during testing
+
+  /*
+    Shorthand cheatsheet:
+
+    this.get('/posts');
+    this.post('/posts');
+    this.get('/posts/:id');
+    this.put('/posts/:id'); // or this.patch
+    this.del('/posts/:id');
+
+    http://www.ember-cli-mirage.com/docs/v0.4.x/shorthands/
+  */
+}

tests/dummy/mirage/scenarios/default.js

@@ -0,0 +1,9 @@
+export default function(/* server */) {
+
+  /*
+    Seed your development database using your factories.
+    This data will not be loaded in your tests.
+  */
+
+  // server.createList('post', 10);
+}

tests/dummy/mirage/serializers/application.js

@@ -0,0 +1,4 @@
+import { JSONAPISerializer } from 'ember-cli-mirage';
+
+export default JSONAPISerializer.extend({
+});

tests/fastboot/basic-test.js

@@ -1,15 +1,9 @@
-import { module, test, skip } from 'qunit';
-import { setup, visit, renderedHtml } from 'ember-cli-fastboot-testing/test-support';
+import { module, test } from 'qunit';
+import { setup, visit } from 'ember-cli-fastboot-testing/test-support';
 
 module('Fastboot | basic', function(hooks) {
   setup(hooks);
 
-  skip('it renders html that matches the browser', async function(assert) {
-    let { body } = await visit('/');
-
-    assert.equal(body, renderedHtml());
-  });
-
   test('it renders the correct h1 title', async function(assert) {
     await visit('/');
 

tests/fastboot/generic-interceptors-test.js

@@ -0,0 +1,51 @@
+import { module, test } from 'qunit';
+import { setup, visit } from 'ember-cli-fastboot-testing/test-support';
+import Pretender from 'pretender';
+
+/*
+  This test is setup to emulate the following scenario: Someone is using
+  FastBoot testing as well as an http interceptor for mocking.
+  When FastBoot testing asks ember-cli to render a page, the interceptor
+  will block the http request and attempt to return a mock.
+
+  We'll simulate this by overriding fetch.
+
+  We want to provide a better error message when that happens.
+*/
+module('Fastboot | generic interceptor', function(hooks) {
+  setup(hooks);
+
+  test('it doesnt work if an interceptor blocks our request to ember-cli', async function(assert) {
+    let server = new Pretender(function() {
+      this.get('/__fastboot-testing', () => {
+        throw new Error("Blocked!");
+      });
+    });
+
+    assert.rejects(
+      visit('/'),
+      /We were unable to render \/. Is your test suite blocking or intercepting HTTP requests\? Error: Pretender intercepted GET \/__fastboot-testing\?url=%2F but encountered an error: Blocked/
+    );
+
+    server.shutdown();
+  });
+
+  test('mocked response', function(assert) {
+    let server = new Pretender(function() {
+      this.get('/__fastboot-testing', () => {
+        return [
+          200,
+          {"Content-Type": "application/json"},
+          JSON.stringify({ mocked: true })
+        ];
+      });
+    });
+
+    assert.rejects(
+      visit('/'),
+      /We were unable to render \/. Is your test suite blocking or intercepting HTTP requests\?/
+    );
+
+    server.shutdown();
+  });
+});

tests/fastboot/mirage-interceptors-test.js

@@ -0,0 +1,25 @@
+import { module, test } from 'qunit';
+import { setup, visit } from 'ember-cli-fastboot-testing/test-support';
+import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+
+
+/*
+  This test is setup to emulate the following scenario: Someone is using
+  FastBoot testing as well as a local mirage server. When FastBoot testing
+  asks ember-cli to render a page, mirage will intercept the http request and
+  then say it didnt know how to handle the request.
+
+  We want to provide a better error message when that happens.
+*/
+module('Fastboot | mirage interceptor', function(hooks) {
+  setup(hooks);
+  setupMirage(hooks);
+
+  test('it doesnt work if mirage blocks our http request to ember-cli', async function(assert) {
+    assert.rejects(
+      visit('/'),
+      /It looks like Mirage is intercepting ember-cli-fastboot-testing's attempt to render \//
+    );
+  });
+
+});