Alert the user if ECFT thinks that an HTTP interceptor blocked rendering

* Check for an x-fastboot-testing header that is set by Ember CLI
* Make sure there are no mirage errors
* Make sure that fetch doesnt throw

Author: ryanto

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 ?
@@ -28,40 +27,49 @@ export async function fastboot(url, { headers = {} }) {
 }
 
 export async function visit(url, options = {}) {
-  let result;
+  let result = await fastboot(url, { headers: options.headers || {} });
+
+  document.querySelector('#ember-testing').innerHTML = result.body;
+
+  return result;
+}
+
+// private
+
+let fetchFromEmberCli = async function(url, headers) {
+  let endpoint = `/__fastboot-testing?${param({url, headers})}`;
+  let response;
+  let error;
 
   try {
-    result = await fastboot(url, { headers: options.headers || {} });
+    response = await fetch(endpoint);
   } catch (e) {
-    let message;
-
     if (e.message && e.message.match(/^Mirage:/)) {
-      message = `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.`;
-      console.error(message);
-      throw new Error(message);
-    } else if (e.message) {
-      message = `Ember CLI FastBoot Testing: generic error`
+      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}.`
     }
-
   }
 
-  document.querySelector('#ember-testing').innerHTML = result.body;
+  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?`;
+  }
 
-  return result;
-}
+  if (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    throw new Error(error);
+  }
 
-export function renderedHtml() {
-  return document.querySelector('#ember-testing').innerHTML;
-}
+  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

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

package.json

@@ -63,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/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/http-interceptors-test.js …sts/fastboot/mirage-interceptors-test.jstests/fastboot/http-interceptors-test.js renamed to tests/fastboot/mirage-interceptors-test.js tests/fastboot/http-interceptors-test.js renamed to tests/fastboot/mirage-interceptors-test.js

@@ -11,15 +11,15 @@ import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 
   We want to provide a better error message when that happens.
 */
-module('Fastboot | http interceptors', function(hooks) {
+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) {
-    await visit('/');
-
-    
-
+    assert.rejects(
+      visit('/'),
+      /It looks like Mirage is intercepting ember-cli-fastboot-testing's attempt to render \//
+    );
   });
 
 });

yarn.lock

@@ -9994,7 +9994,7 @@ preserve@^0.2.0:
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
   integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=
 
-pretender@2.1.1:
+pretender@2.1.1, pretender@~2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/pretender/-/pretender-2.1.1.tgz#5085f0a1272c31d5b57c488386f69e6ca207cb35"
   integrity sha512-IkidsJzaroAanw3I43tKCFm2xCpurkQr9aPXv5/jpN+LfCwDaeI8rngVWtQZTx4qqbhc5zJspnLHJ4N/25KvDQ==