refactor(context): Future-proofed context.html and debug.html for mod…

…ularity

BREAKING CHANGE:

Our `context.html` and `debug.html` structures have changed to lean on `context.js` and `debug.js`.
This is in preparation for deeper `context.js` changes in #1984.

As a result, all `customContextFile` and `customDebugFile` options much update their format
to match this new format.

gruntfile.js

@@ -76,6 +76,8 @@ module.exports = function (grunt) {
         '<%= files.grunt %>',
         '<%= files.scripts %>',
         '<%= files.client %>',
+        'static/context.js',
+        'static/debug.js',
         'test/**/*.js',
         'gruntfile.js'
       ]

lib/middleware/karma.js

@@ -114,8 +114,10 @@ var createKarmaMiddleware = function (
       })
     }
 
-    // serve karma.js
-    if (requestUrl === '/karma.js') {
+    // serve karma.js, context.js, and debug.js
+    var jsFiles = ['/karma.js', '/context.js', '/debug.js']
+    var isRequestingJsFile = jsFiles.indexOf(requestUrl) !== -1
+    if (isRequestingJsFile) {
       return serveStaticFile(requestUrl, response, function (data) {
         return data.replace('%KARMA_URL_ROOT%', urlRoot)
           .replace('%KARMA_VERSION%', VERSION)
@@ -195,11 +197,7 @@ var createKarmaMiddleware = function (
             return util.format("  '%s': '%s'", filePath, file.sha)
           })
 
-          var clientConfig = ''
-
-          if (requestUrl === '/debug.html') {
-            clientConfig = 'window.__karma__.config = ' + JSON.stringify(client) + ';\n'
-          }
+          var clientConfig = 'window.__karma__.config = ' + JSON.stringify(client) + ';\n'
 
           mappings = 'window.__karma__.files = {\n' + mappings.join(',\n') + '\n};\n'
 

static/context.html

@@ -15,14 +15,11 @@
        to have already been created so they can insert their magic into it. For example, if loaded
        before body, Angular Scenario test framework fails to find the body and crashes and burns in
        an epic manner. -->
+  <script src="context.js"></script>
   <script type="text/javascript">
-    // sets window.__karma__ and overrides console and error handling
-    // Use window.opener if this was opened by someone else - in a new window
-    if (window.opener) {
-      window.opener.karma.setupContext(window);
-    } else {
-      window.parent.karma.setupContext(window);
-    }
+    // Configure our Karma and set up bindings
+    %CLIENT_CONFIG%
+    window.__karma__.setupContext(window);
 
     // All served files with the latest timestamps
     %MAPPINGS%

static/context.js

@@ -0,0 +1,13 @@
+// Define a placeholder for Karma to be defined via the parent window
+// DEV: This is a placeholder change for upcoming edits in https://github.com/karma-runner/karma/pull/1984
+window.__karma__ = {
+  setupContext: function (contextWindow) {
+    // sets window.__karma__ and overrides console and error handling
+    // Use window.opener if this was opened by someone else - in a new window
+    if (contextWindow.opener) {
+      contextWindow.opener.karma.setupContext(contextWindow)
+    } else {
+      contextWindow.parent.karma.setupContext(contextWindow)
+    }
+  }
+}

static/debug.html

@@ -17,38 +17,10 @@
    (Angular Scenario, for example) need the body to be loaded so that it can insert its magic
    into it. If it is before body, then it fails to find the body and crashes and burns in an epic
    manner. -->
+  <script src="context.js"></script>
+  <script src="debug.js"></script>
   <script type="text/javascript">
-    window.__karma__ = {
-      info: function(info) {
-        if (info.dump && window.console) window.console.log(info.dump);
-      },
-      complete: function() {
-        if (window.console) window.console.log('Skipped ' + this.skipped + ' tests');
-      },
-      store: function() {},
-      skipped: 0,
-      result: window.console ? function(result) {
-        if (result.skipped) {
-          this.skipped++;
-          return;
-        }
-        var msg = result.success ? 'SUCCESS ' : 'FAILED ';
-        window.console.log(msg + result.suite.join(' ') + ' ' + result.description);
-
-        for (var i = 0; i < result.log.length; i++) {
-          //throwing error without loosing stack trace
-          (function (err) {
-            setTimeout(function() {
-              throw err;
-            });
-          })(result.log[i])
-        }
-      } : function() {},
-      loaded: function() {
-        this.start();
-      }
-    };
-
+    // Configure our Karma
     %CLIENT_CONFIG%
 
     // All served files with the latest timestamps

static/debug.js

@@ -0,0 +1,29 @@
+// Override the Karma setup for local debugging
+window.__karma__.info = function (info) {
+  if (info.dump && window.console) window.console.log(info.dump)
+}
+window.__karma__.complete = function () {
+  if (window.console) window.console.log('Skipped ' + this.skipped + ' tests')
+}
+window.__karma__.store = function () {}
+window.__karma__.skipped = 0
+window.__karma__.result = window.console ? function (result) {
+  if (result.skipped) {
+    this.skipped++
+    return
+  }
+  var msg = result.success ? 'SUCCESS ' : 'FAILED '
+  window.console.log(msg + result.suite.join(' ') + ' ' + result.description)
+
+  for (var i = 0; i < result.log.length; i++) {
+    // Throwing error without losing stack trace
+    (function (err) {
+      setTimeout(function () {
+        throw err
+      })
+    })(result.log[i])
+  }
+} : function () {}
+window.__karma__.loaded = function () {
+  this.start()
+}

test/e2e/support/context/context2.html

@@ -16,14 +16,11 @@
        before body, Angular Scenario test framework fails to find the body and crashes and burns in
        an epic manner. -->
   <div id="custom-context"></div>
+  <script src="context.js"></script>
   <script type="text/javascript">
-    // sets window.__karma__ and overrides console and error handling
-    // Use window.opener if this was opened by someone else - in a new window
-    if (window.opener) {
-      window.opener.karma.setupContext(window);
-    } else {
-      window.parent.karma.setupContext(window);
-    }
+    // Configure our Karma and set up bindings
+    %CLIENT_CONFIG%
+    window.__karma__.setupContext(window);
 
     // All served files with the latest timestamps
     %MAPPINGS%