From 5953c3796d1b37e68d04f1dbc9c965f0797c80d9 Mon Sep 17 00:00:00 2001
From: Nick Martin <nim@meteor.com>
Date: Mon, 17 Jun 2013 22:07:34 -0700
Subject: [PATCH 1/5] Use much finer grain dependencies to avoid re-rendering
 the whole results table all the time.

This makes tests _much_ faster on old browsers where DOM access is slow.
---
 packages/test-in-browser/driver.html |   6 ++
 packages/test-in-browser/driver.js   | 113 ++++++++++++++-------------
 2 files changed, 64 insertions(+), 55 deletions(-)

diff --git a/packages/test-in-browser/driver.html b/packages/test-in-browser/driver.html
index 7d1c8e20f6..0e3df87ae3 100644
--- a/packages/test-in-browser/driver.html
+++ b/packages/test-in-browser/driver.html
@@ -9,6 +9,7 @@
 </body>
 
 <template name="test_table">
+{{#isolate}}
   <div class="navbar navbar-fixed-top navbar-inverse">
     <div class="navbar-inner">
       <div class="row-fluid">
@@ -43,12 +44,15 @@
       <li>{{this}}</li>
     {{/each}}
   </ul>
+{{/isolate}}
 
+{{#isolate}}
   <div class="test_table">
     {{#each data}}
       {{> test_group this}}
     {{/each}}
   </div>
+{{/isolate}}
   </div></div>
 </template>
 
@@ -86,6 +90,7 @@
 </template>
 
 <template name="test_group">
+  {{groupDep}}
   <div class="group">
     <div class="groupname"><a>{{name}}</a></div>
     {{#each tests}}
@@ -98,6 +103,7 @@
 </template>
 
 <template name="test">
+  {{testDep}}
   <div class="test {{test_class}}">
     <div class="testrow">
       <div class="teststatus">
diff --git a/packages/test-in-browser/driver.js b/packages/test-in-browser/driver.js
index 41471e0d7e..b0a279cd1e 100644
--- a/packages/test-in-browser/driver.js
+++ b/packages/test-in-browser/driver.js
@@ -1,13 +1,13 @@
+var countDep = new Deps.Dependency;
 var running = true;
-
-var resultTree = [];
-var failedTests = [];
-var resultsDeps = new Deps.Dependency;
-var countDeps = new Deps.Dependency;
 var totalCount = 0;
 var passedCount = 0;
 var failedCount = 0;
 
+var topLevelGroupsDep = new Deps.Dependency;
+var resultTree = [];
+var failedTests = [];
+
 
 Session.setDefault("groupPath", ["tinytest"]);
 Session.set("rerunScheduled", false);
@@ -17,7 +17,7 @@ Meteor.startup(function () {
   Meteor._runTestsEverywhere(reportResults, function () {
     running = false;
     Meteor.onTestsComplete && Meteor.onTestsComplete();
-    resultsDeps.changed();
+    countDep.changed();
     Deps.flush();
 
     Meteor.default_connection._unsubscribeAll();
@@ -26,37 +26,40 @@ Meteor.startup(function () {
 });
 
 Template.progressBar.running = function () {
-  countDeps.depend();
-  return passedCount + failedCount < totalCount;
+  countDep.depend();
+  return running;
 };
 
 Template.progressBar.percentPass = function () {
-  countDeps.depend();
+  countDep.depend();
   if (totalCount === 0)
     return 0;
   return 100*passedCount/totalCount;
 };
 
 Template.progressBar.totalCount = function () {
+  countDep.depend();
   return totalCount;
 };
 
 Template.progressBar.passedCount = function () {
+  countDep.depend();
   return passedCount;
 };
 
 Template.progressBar.percentFail = function () {
-  countDeps.depend();
+  countDep.depend();
   if (totalCount === 0)
     return 0;
   return 100*failedCount/totalCount;
 };
 
 Template.progressBar.anyFail = function () {
-  countDeps.depend();
+  countDep.depend();
   return failedCount > 0;
 };
 
+
 Template.groupNav.groupPaths = function () {
   var groupPath = Session.get("groupPath");
   var ret = [];
@@ -88,6 +91,13 @@ Template.groupNav.events({
   }
 });
 
+
+Template.test_group.groupDep = function () {
+  this.dep.depend();
+  return "";
+};
+
+
 Template.test_group.events({
   "click .groupname": function () {
     changeToPath(this.path);
@@ -95,41 +105,18 @@ Template.test_group.events({
 });
 
 Template.test_table.running = function() {
-  resultsDeps.depend();
+  countDep.depend();
   return running;
 };
 
 Template.test_table.passed = function() {
-  resultsDeps.depend();
-
-  // walk whole tree to look for failed tests
-  var walk = function (groups) {
-    var ret = true;
-
-    _.each(groups || [], function (group) {
-      if (!ret)
-        return;
-
-      _.each(group.tests || [], function (t) {
-        if (!ret)
-          return;
-        if (_testStatus(t) === "failed")
-          ret = false;
-      });
-
-      if (!walk(group.groups))
-        ret = false;
-    });
-
-    return ret;
-  };
-
-  return walk(resultTree);
+  countDep.depend();
+  return failedCount === 0;
 };
 
 
 Template.test_table.total_test_time = function() {
-  resultsDeps.depend();
+  countDep.depend();
 
   // walk whole tree to get all tests
   var walk = function (groups) {
@@ -152,14 +139,20 @@ Template.test_table.total_test_time = function() {
 
 
 Template.test_table.data = function() {
-  resultsDeps.depend();
+  topLevelGroupsDep.depend();
   return resultTree;
 };
 Template.test_table.failedTests = function() {
-  resultsDeps.depend();
+  countDep.depend();
   return failedTests;
 };
 
+
+Template.test.testDep = function () {
+  this.dep.depend();
+  return "";
+};
+
 Template.test.test_status_display = function() {
   var status = _testStatus(this);
   if (status == "failed") {
@@ -192,7 +185,7 @@ Template.test.test_class = function() {
 Template.test.events({
   'click .testname': function() {
     this.expanded = ! this.expanded;
-    resultsDeps.changed();
+    this.dep.changed();
   }
 });
 
@@ -335,9 +328,15 @@ var _findTestForResults = function (results) {
       newGroup = {
         name: gname,
         parent: (group || null),
-        path: groupPath.slice(0, i+1)
+        path: groupPath.slice(0, i+1),
+        dep: new Deps.Dependency
       }; // create group
       array.push(newGroup);
+
+      if (group)
+        group.dep.changed();
+      else
+        topLevelGroupsDep.changed();
     }
     group = newGroup;
     i++;
@@ -353,10 +352,17 @@ var _findTestForResults = function (results) {
     var nameParts = _.clone(groupPath);
     nameParts.push(testName);
     var fullName = nameParts.join(' - ');
-    test = {name: testName, parent: group, server: server, fullName: fullName};
+    test = {
+      name: testName,
+      parent: group,
+      server: server,
+      fullName: fullName,
+      dep: new Deps.Dependency
+    };
     group.tests.push(test);
+    group.dep.changed();
     totalCount++;
-    countDeps.changed();
+    countDep.changed();
   }
 
   return test;
@@ -385,19 +391,20 @@ var reportResults = function(results) {
   var status = _testStatus(test);
   if (status === "failed") {
     failedCount++;
-    countDeps.changed();
     // Expand a failed test (but only set this if the user hasn't clicked on the
     // test name yet).
     if (test.expanded === undefined)
       test.expanded = true;
     if (!_.contains(failedTests, test.fullName))
       failedTests.push(test.fullName);
+
+    countDep.changed();
+    test.dep.changed();
   } else if (status === "succeeded") {
     passedCount++;
-    countDeps.changed();
+    countDep.changed();
+    test.dep.changed();
   }
-
-  _throttled_update();
 };
 
 // forget all of the events for a particular test
@@ -406,15 +413,11 @@ var forgetEvents = function (results) {
   var status = _testStatus(test);
   if (status === "failed") {
     failedCount--;
-    countDeps.changed();
+    countDep.changed();
   } else if (status === "succeeded") {
     passedCount--;
-    countDeps.changed();
+    countDep.changed();
   }
   delete test.events;
-  resultsDeps.changed();
+  test.dep.changed();
 };
-
-var _throttled_update = _.throttle(function() {
-  resultsDeps.changed();
-}, 1000);

From 64ab1aadbce5172779d9b06771201ab1cdc7624e Mon Sep 17 00:00:00 2001
From: Nick Martin <nim@meteor.com>
Date: Mon, 17 Jun 2013 22:29:23 -0700
Subject: [PATCH 2/5] Don't let divs cross isolate boundaries. This fixes IE8.

---
 packages/test-in-browser/driver.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/test-in-browser/driver.html b/packages/test-in-browser/driver.html
index 0e3df87ae3..def3f20060 100644
--- a/packages/test-in-browser/driver.html
+++ b/packages/test-in-browser/driver.html
@@ -44,16 +44,18 @@
       <li>{{this}}</li>
     {{/each}}
   </ul>
+  </div></div>
 {{/isolate}}
 
 {{#isolate}}
+  <div class="row-fluid"><div class="span12">
   <div class="test_table">
     {{#each data}}
       {{> test_group this}}
     {{/each}}
   </div>
-{{/isolate}}
   </div></div>
+{{/isolate}}
 </template>
 
 <template name="progressBar">

From 11a7d8d07abbaf6388342d2756d751def6ba049e Mon Sep 17 00:00:00 2001
From: Nick Martin <nim@meteor.com>
Date: Mon, 17 Jun 2013 22:57:58 -0700
Subject: [PATCH 3/5] Comment and reorganize. No functional changes.

---
 packages/test-in-browser/driver.js | 439 ++++++++++++++++-------------
 1 file changed, 250 insertions(+), 189 deletions(-)

diff --git a/packages/test-in-browser/driver.js b/packages/test-in-browser/driver.js
index b0a279cd1e..df63775c6c 100644
--- a/packages/test-in-browser/driver.js
+++ b/packages/test-in-browser/driver.js
@@ -1,13 +1,40 @@
+////
+//// Setup
+////
+
+
+// dependency for the count of tests running/passed/failed, etc. drives
+// the navbar and the like.
 var countDep = new Deps.Dependency;
+// things that change on countDep
 var running = true;
 var totalCount = 0;
 var passedCount = 0;
 var failedCount = 0;
-
-var topLevelGroupsDep = new Deps.Dependency;
-var resultTree = [];
 var failedTests = [];
 
+// Dependency for when a new top level group is added. Each group and
+// each test have their own dependency objects.
+var topLevelGroupsDep = new Deps.Dependency;
+
+// An array of top-level groups.
+//
+// Each group is an object with:
+// - name: string
+// - path: array of strings (names of parent groups)
+// - parent: parent group object (back reference)
+// - dep: Deps.Dependency object for this group. fires when new tests added.
+// - groups: list of sub-groups
+// - tests: list of tests in this group
+//
+// Each test is an object with:
+// - name: string
+// - parent: parent group object (back reference)
+// - server: boolean
+// - fullName: string
+// - dep: Deps.Dependency object for this test. fires when the test completes.
+var resultTree = [];
+
 
 Session.setDefault("groupPath", ["tinytest"]);
 Session.set("rerunScheduled", false);
@@ -25,6 +52,214 @@ Meteor.startup(function () {
 
 });
 
+
+////
+//// Take incoming results and drive resultsTree
+////
+
+// report a series of events in a single test, or just the existence of
+// that test if no events. this is the entry point for test results to
+// this module.
+var reportResults = function(results) {
+  var test = _findTestForResults(results);
+
+  if (_.isArray(results.events)) {
+    // append events, if present
+    Array.prototype.push.apply((test.events || (test.events = [])),
+                               results.events);
+    // sort and de-duplicate, based on sequence number
+    test.events.sort(function (a, b) {
+      return a.sequence - b.sequence;
+    });
+    var out = [];
+    _.each(test.events, function (e) {
+      if (out.length === 0 || out[out.length - 1].sequence !== e.sequence)
+        out.push(e);
+    });
+    test.events = out;
+  }
+  var status = _testStatus(test);
+  if (status === "failed") {
+    failedCount++;
+    // Expand a failed test (but only set this if the user hasn't clicked on the
+    // test name yet).
+    if (test.expanded === undefined)
+      test.expanded = true;
+    if (!_.contains(failedTests, test.fullName))
+      failedTests.push(test.fullName);
+
+    countDep.changed();
+    test.dep.changed();
+  } else if (status === "succeeded") {
+    passedCount++;
+    countDep.changed();
+    test.dep.changed();
+  }
+};
+
+// forget all of the events for a particular test
+var forgetEvents = function (results) {
+  var test = _findTestForResults(results);
+  var status = _testStatus(test);
+  if (status === "failed") {
+    failedCount--;
+    countDep.changed();
+  } else if (status === "succeeded") {
+    passedCount--;
+    countDep.changed();
+  }
+  delete test.events;
+  test.dep.changed();
+};
+
+// given a 'results' as delivered via reportResults, find the
+// corresponding leaf object in resultTree, creating one if it doesn't
+// exist. it will be an object with attributes 'name', 'parent', and
+// possibly 'events'.
+var _findTestForResults = function (results) {
+  var groupPath = results.groupPath; // array
+  if ((! _.isArray(groupPath)) || (groupPath.length < 1)) {
+    throw new Error("Test must be part of a group");
+  }
+
+  var group;
+  var i = 0;
+  _.each(groupPath, function(gname) {
+    var array = (group ? (group.groups || (group.groups = []))
+                 : resultTree);
+    var newGroup = _.find(array, function(g) { return g.name === gname; });
+    if (! newGroup) {
+      newGroup = {
+        name: gname,
+        parent: (group || null),
+        path: groupPath.slice(0, i+1),
+        dep: new Deps.Dependency
+      }; // create group
+      array.push(newGroup);
+
+      if (group)
+        group.dep.changed();
+      else
+        topLevelGroupsDep.changed();
+    }
+    group = newGroup;
+    i++;
+  });
+
+  var testName = results.test;
+  var server = !!results.server;
+  var test = _.find(group.tests || (group.tests = []),
+                    function(t) { return t.name === testName &&
+                                  t.server === server; });
+  if (! test) {
+    // create test
+    var nameParts = _.clone(groupPath);
+    nameParts.push(testName);
+    var fullName = nameParts.join(' - ');
+    test = {
+      name: testName,
+      parent: group,
+      server: server,
+      fullName: fullName,
+      dep: new Deps.Dependency
+    };
+    group.tests.push(test);
+    group.dep.changed();
+    totalCount++;
+    countDep.changed();
+  }
+
+  return test;
+};
+
+
+
+////
+//// Helpers on test objects
+////
+
+var _testTime = function(t) {
+  if (t.events && t.events.length > 0) {
+    var lastEvent = _.last(t.events);
+    if (lastEvent.type === "finish") {
+      if ((typeof lastEvent.timeMs) === "number") {
+        return lastEvent.timeMs;
+      }
+    }
+  }
+  return null;
+};
+
+var _testStatus = function(t) {
+  var events = t.events || [];
+  if (_.find(events, function(x) { return x.type === "exception"; })) {
+    // "exception" should be last event, except race conditions on the
+    // server can make this not the case.  Technically we can't tell
+    // if the test is still running at this point, but it can only
+    // result in FAIL.
+    return "failed";
+  } else if (events.length == 0 || (_.last(events).type != "finish")) {
+    return "running";
+  } else if (_.any(events, function(e) {
+    return e.type == "fail" || e.type == "exception"; })) {
+    return "failed";
+  } else {
+    return "succeeded";
+  }
+};
+
+
+
+////
+//// Templates
+////
+
+//// Template - test_table
+
+Template.test_table.running = function() {
+  countDep.depend();
+  return running;
+};
+
+Template.test_table.passed = function() {
+  countDep.depend();
+  return failedCount === 0;
+};
+
+Template.test_table.total_test_time = function() {
+  countDep.depend();
+
+  // walk whole tree to get all tests
+  var walk = function (groups) {
+    var total = 0;
+
+    _.each(groups || [], function (group) {
+      _.each(group.tests || [], function (t) {
+        total += _testTime(t);
+      });
+
+      total += walk(group.groups);
+    });
+
+    return total;
+  };
+
+  return walk(resultTree);
+};
+
+Template.test_table.data = function() {
+  topLevelGroupsDep.depend();
+  return resultTree;
+};
+
+Template.test_table.failedTests = function() {
+  countDep.depend();
+  return failedTests;
+};
+
+
+//// Template - progressBar
+
 Template.progressBar.running = function () {
   countDep.depend();
   return running;
@@ -60,6 +295,8 @@ Template.progressBar.anyFail = function () {
 };
 
 
+//// Template - groupNav
+
 Template.groupNav.groupPaths = function () {
   var groupPath = Session.get("groupPath");
   var ret = [];
@@ -92,63 +329,27 @@ Template.groupNav.events({
 });
 
 
+//// Template - test_group
+
 Template.test_group.groupDep = function () {
+  // this template just establishes a dependency. It doesn't actually
+  // render anything.
   this.dep.depend();
   return "";
 };
 
-
 Template.test_group.events({
   "click .groupname": function () {
     changeToPath(this.path);
   }
 });
 
-Template.test_table.running = function() {
-  countDep.depend();
-  return running;
-};
-
-Template.test_table.passed = function() {
-  countDep.depend();
-  return failedCount === 0;
-};
-
-
-Template.test_table.total_test_time = function() {
-  countDep.depend();
-
-  // walk whole tree to get all tests
-  var walk = function (groups) {
-    var total = 0;
-
-    _.each(groups || [], function (group) {
-      _.each(group.tests || [], function (t) {
-        total += _testTime(t);
-      });
-
-      total += walk(group.groups);
-    });
-
-    return total;
-  };
-
-  return walk(resultTree);
-};
-
-
-
-Template.test_table.data = function() {
-  topLevelGroupsDep.depend();
-  return resultTree;
-};
-Template.test_table.failedTests = function() {
-  countDep.depend();
-  return failedTests;
-};
 
+//// Template - test
 
 Template.test.testDep = function () {
+  // this template just establishes a dependency. It doesn't actually
+  // render anything.
   this.dep.depend();
   return "";
 };
@@ -224,6 +425,9 @@ Template.test.eventsArray = function() {
   });
 };
 
+
+//// Template - event
+
 Template.event.events({
   'click .debug': function () {
     // the way we manage groupPath, shortName, cookies, etc, is really
@@ -278,146 +482,3 @@ Template.event.is_debuggable = function() {
   return !!this.cookie;
 };
 
-var _testTime = function(t) {
-  if (t.events && t.events.length > 0) {
-    var lastEvent = _.last(t.events);
-    if (lastEvent.type === "finish") {
-      if ((typeof lastEvent.timeMs) === "number") {
-        return lastEvent.timeMs;
-      }
-    }
-  }
-  return null;
-};
-
-var _testStatus = function(t) {
-  var events = t.events || [];
-  if (_.find(events, function(x) { return x.type === "exception"; })) {
-    // "exception" should be last event, except race conditions on the
-    // server can make this not the case.  Technically we can't tell
-    // if the test is still running at this point, but it can only
-    // result in FAIL.
-    return "failed";
-  } else if (events.length == 0 || (_.last(events).type != "finish")) {
-    return "running";
-  } else if (_.any(events, function(e) {
-    return e.type == "fail" || e.type == "exception"; })) {
-    return "failed";
-  } else {
-    return "succeeded";
-  }
-};
-
-// given a 'results' as delivered via setReporter, find the
-// corresponding leaf object in resultTree, creating one if it doesn't
-// exist. it will be an object with attributes 'name', 'parent', and
-// possibly 'events'.
-var _findTestForResults = function (results) {
-  var groupPath = results.groupPath; // array
-  if ((! _.isArray(groupPath)) || (groupPath.length < 1)) {
-    throw new Error("Test must be part of a group");
-  }
-
-  var group;
-  var i = 0;
-  _.each(groupPath, function(gname) {
-    var array = (group ? (group.groups || (group.groups = []))
-                 : resultTree);
-    var newGroup = _.find(array, function(g) { return g.name === gname; });
-    if (! newGroup) {
-      newGroup = {
-        name: gname,
-        parent: (group || null),
-        path: groupPath.slice(0, i+1),
-        dep: new Deps.Dependency
-      }; // create group
-      array.push(newGroup);
-
-      if (group)
-        group.dep.changed();
-      else
-        topLevelGroupsDep.changed();
-    }
-    group = newGroup;
-    i++;
-  });
-
-  var testName = results.test;
-  var server = !!results.server;
-  var test = _.find(group.tests || (group.tests = []),
-                    function(t) { return t.name === testName &&
-                                  t.server === server; });
-  if (! test) {
-    // create test
-    var nameParts = _.clone(groupPath);
-    nameParts.push(testName);
-    var fullName = nameParts.join(' - ');
-    test = {
-      name: testName,
-      parent: group,
-      server: server,
-      fullName: fullName,
-      dep: new Deps.Dependency
-    };
-    group.tests.push(test);
-    group.dep.changed();
-    totalCount++;
-    countDep.changed();
-  }
-
-  return test;
-};
-
-// report a series of events in a single test, or just
-// the existence of that test if no events
-var reportResults = function(results) {
-  var test = _findTestForResults(results);
-
-  if (_.isArray(results.events)) {
-    // append events, if present
-    Array.prototype.push.apply((test.events || (test.events = [])),
-                               results.events);
-    // sort and de-duplicate, based on sequence number
-    test.events.sort(function (a, b) {
-      return a.sequence - b.sequence;
-    });
-    var out = [];
-    _.each(test.events, function (e) {
-      if (out.length === 0 || out[out.length - 1].sequence !== e.sequence)
-        out.push(e);
-    });
-    test.events = out;
-  }
-  var status = _testStatus(test);
-  if (status === "failed") {
-    failedCount++;
-    // Expand a failed test (but only set this if the user hasn't clicked on the
-    // test name yet).
-    if (test.expanded === undefined)
-      test.expanded = true;
-    if (!_.contains(failedTests, test.fullName))
-      failedTests.push(test.fullName);
-
-    countDep.changed();
-    test.dep.changed();
-  } else if (status === "succeeded") {
-    passedCount++;
-    countDep.changed();
-    test.dep.changed();
-  }
-};
-
-// forget all of the events for a particular test
-var forgetEvents = function (results) {
-  var test = _findTestForResults(results);
-  var status = _testStatus(test);
-  if (status === "failed") {
-    failedCount--;
-    countDep.changed();
-  } else if (status === "succeeded") {
-    passedCount--;
-    countDep.changed();
-  }
-  delete test.events;
-  test.dep.changed();
-};

From 5b1cf081585f267eb859236c415074e661a4867e Mon Sep 17 00:00:00 2001
From: Nick Martin <nim@meteor.com>
Date: Tue, 18 Jun 2013 20:09:00 -0700
Subject: [PATCH 4/5] rerender the test if new results come in while the test
 is expanded.

---
 packages/test-in-browser/driver.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/test-in-browser/driver.js b/packages/test-in-browser/driver.js
index df63775c6c..ab9286d23c 100644
--- a/packages/test-in-browser/driver.js
+++ b/packages/test-in-browser/driver.js
@@ -94,6 +94,10 @@ var reportResults = function(results) {
     passedCount++;
     countDep.changed();
     test.dep.changed();
+  } else if (test.expanded) {
+    // re-render the test if new results come in and the test is
+    // currently expanded.
+    test.dep.changed();
   }
 };
 

From 3e1820d288b38535003017de551bcf086b0c89ac Mon Sep 17 00:00:00 2001
From: Nick Martin <nim@meteor.com>
Date: Tue, 18 Jun 2013 20:33:55 -0700
Subject: [PATCH 5/5] use separate templates instead of isolate.

---
 packages/test-in-browser/driver.html | 45 +++++++++++++++-------------
 packages/test-in-browser/driver.js   | 35 +++++++++++++---------
 2 files changed, 45 insertions(+), 35 deletions(-)

diff --git a/packages/test-in-browser/driver.html b/packages/test-in-browser/driver.html
index def3f20060..2cd8023db2 100644
--- a/packages/test-in-browser/driver.html
+++ b/packages/test-in-browser/driver.html
@@ -4,12 +4,13 @@
 
 <body>
   <div class="container-fluid">
-  {{> test_table}}
+  {{> navBars}}
+  {{> failedTests}}
+  {{> testTable}}
   </div>
 </body>
 
-<template name="test_table">
-{{#isolate}}
+<template name="navBars">
   <div class="navbar navbar-fixed-top navbar-inverse">
     <div class="navbar-inner">
       <div class="row-fluid">
@@ -38,24 +39,6 @@
     </div>
   </div>
   {{> groupNav}}
-  <div class="row-fluid"><div class="span12">
-  <ul class="failedTests">
-    {{#each failedTests}}
-      <li>{{this}}</li>
-    {{/each}}
-  </ul>
-  </div></div>
-{{/isolate}}
-
-{{#isolate}}
-  <div class="row-fluid"><div class="span12">
-  <div class="test_table">
-    {{#each data}}
-      {{> test_group this}}
-    {{/each}}
-  </div>
-  </div></div>
-{{/isolate}}
 </template>
 
 <template name="progressBar">
@@ -91,6 +74,26 @@
   </div>
 </template>
 
+<template name="failedTests">
+  <div class="row-fluid"><div class="span12">
+  <ul class="failedTests">
+    {{#each failedTests}}
+      <li>{{this}}</li>
+    {{/each}}
+  </ul>
+  </div></div>
+</template>
+
+<template name="testTable">
+  <div class="row-fluid"><div class="span12">
+  <div class="test_table">
+    {{#each data}}
+      {{> test_group this}}
+    {{/each}}
+  </div>
+  </div></div>
+</template>
+
 <template name="test_group">
   {{groupDep}}
   <div class="group">
diff --git a/packages/test-in-browser/driver.js b/packages/test-in-browser/driver.js
index ab9286d23c..e8a83180f5 100644
--- a/packages/test-in-browser/driver.js
+++ b/packages/test-in-browser/driver.js
@@ -218,19 +218,19 @@ var _testStatus = function(t) {
 //// Templates
 ////
 
-//// Template - test_table
+//// Template - navBars
 
-Template.test_table.running = function() {
+Template.navBars.running = function() {
   countDep.depend();
   return running;
 };
 
-Template.test_table.passed = function() {
+Template.navBars.passed = function() {
   countDep.depend();
   return failedCount === 0;
 };
 
-Template.test_table.total_test_time = function() {
+Template.navBars.total_test_time = function() {
   countDep.depend();
 
   // walk whole tree to get all tests
@@ -251,16 +251,6 @@ Template.test_table.total_test_time = function() {
   return walk(resultTree);
 };
 
-Template.test_table.data = function() {
-  topLevelGroupsDep.depend();
-  return resultTree;
-};
-
-Template.test_table.failedTests = function() {
-  countDep.depend();
-  return failedTests;
-};
-
 
 //// Template - progressBar
 
@@ -333,6 +323,23 @@ Template.groupNav.events({
 });
 
 
+//// Template - failedTests
+
+Template.failedTests.failedTests = function() {
+  countDep.depend();
+  return failedTests;
+};
+
+
+
+//// Template - testTable
+
+Template.testTable.data = function() {
+  topLevelGroupsDep.depend();
+  return resultTree;
+};
+
+
 //// Template - test_group
 
 Template.test_group.groupDep = function () {