teabag 0.4.0 → 0.4.1

data/README.md

@@ -1,6 +1,7 @@
 Teabag
 ======
 [![Build Status](https://travis-ci.org/modeset/teabag.png)](https://travis-ci.org/modeset/teabag)
+[![Code Climate](https://codeclimate.com/badge.png)](https://codeclimate.com/github/modeset/teabag)
 
 Teabag is a Javascript test runner built on top of Rails. It can run tests in the browser, or headlessly using PhantomJS (default) or Selenium WebDriver.
 
@@ -10,11 +11,17 @@ The intention is to be the simplest but most complete Javascript testing solutio
 
 We've just released Teabag, and we expect to be working on it for a while to get a glossy shine to everything, so check it out and let us know what you think. Feedback, ideas and pull requests would be awesome.
 
+[Follow @modeset_ on twitter](https://twitter.com/modeset_)
+
+
 ## Screenshots
+
 ### Running in the console
 ![Console Reporter](https://raw.github.com/modeset/teabag/master/screenshots/console-reporter.png)
+
 ### Running in the console using [Tapout](https://github.com/rubyworks/tapout)
 ![Console Reporter Tapout](https://raw.github.com/modeset/teabag/master/screenshots/console-reporter-tapout.png)
+
 ### Running in the browser
 ![Browser Reporter](https://raw.github.com/modeset/teabag/master/screenshots/html-reporter.jpg)
 
@@ -335,7 +342,7 @@ Timeout for starting the server in seconds. If your server is slow to start you
 
 #### `driver`
 
-Allows you to specify which driver you want to run your specs with -- Supports [PhantomJS](http://phantomjs.org/) and [Selenium Webdriver](http://seleniumhq.org/docs/03_webdriver.jsp). For more information about using Selenium WebDriver check this [wiki article](https://github.com/modeset/teabag/wiki/Using-Selenium-WebDriver).
+Allows you to specify which driver you want to run your specs with -- Supports [PhantomJS](http://phantomjs.org/) and [Selenium Webdriver](http://seleniumhq.org/docs/03_webdriver.jsp). For more information about using Selenium WebDriver check this [wiki article](https://github.com/modeset/teabag/wiki/Using-Selenium-WebDriver), or in case you're having trouble with [PhantomJS on Linux](https://github.com/modeset/teabag/wiki/PhantomJS-on-Linux).
 
 Supported drivers: phantomjs, selenium
 

data/app/assets/javascripts/teabag-jasmine.js

@@ -2610,7 +2610,7 @@ jasmine.version_= {
 
     Teabag.slow = 75;
 
-    Teabag.fixturePath = null;
+    Teabag.root = null;
 
     Teabag.finished = false;
 
@@ -2661,7 +2661,7 @@ jasmine.version_= {
         return;
       }
       this.constructor.run = true;
-      this.fixturePath = Teabag.fixturePath;
+      this.fixturePath = "" + Teabag.root + "/fixtures";
       this.params = this.getParams();
       this.setup();
     }
@@ -2812,6 +2812,7 @@ jasmine.version_= {
       this.setText("env-info", this.envInfo());
       this.setText("version", Teabag.version);
       this.findEl("toggles").onclick = this.toggleConfig;
+      this.findEl("suite-select").onchange = this.changeSuite;
       this.showConfiguration();
       return this.buildProgress();
     };
@@ -2820,7 +2821,21 @@ jasmine.version_= {
       var el;
       el = this.createEl("div");
       document.body.appendChild(el);
-      return el.innerHTML = "<div class=\"teabag-clearfix\">\n  <div id=\"teabag-title\">\n    <h1>Teabag</h1>\n    <ul>\n      <li>version: <b id=\"teabag-version\"></b></li>\n      <li id=\"teabag-env-info\"></li>\n    </ul>\n  </div>\n  <div id=\"teabag-progress\"></div>\n  <ul id=\"teabag-stats\">\n    <li>passes: <b id=\"teabag-stats-passes\">0</b></li>\n    <li>failures: <b id=\"teabag-stats-failures\">0</b></li>\n    <li>skipped: <b id=\"teabag-stats-skipped\">0</b></li>\n    <li>duration: <b id=\"teabag-stats-duration\">&infin;</b></li>\n  </ul>\n</div>\n\n<div id=\"teabag-controls\" class=\"teabag-clearfix\">\n  <div id=\"teabag-toggles\">\n    <button id=\"teabag-use-catch\">Use Try/Catch</button>\n    <button id=\"teabag-build-full-report\">Build Full Report</button>\n    <button id=\"teabag-display-progress\">Display Progress</button>\n  </div>\n  <div id=\"teabag-filtered\">\n    <button onclick=\"window.location.href = window.location.pathname\">Run All Specs</button>\n  </div>\n</div>\n\n<hr/>\n\n<div id=\"teabag-report\">\n  <ol id=\"teabag-report-failures\"></ol>\n  <ol id=\"teabag-report-all\"></ol>\n</div>";
+      return el.innerHTML = "<div class=\"teabag-clearfix\">\n  <div id=\"teabag-title\">\n    <h1>Teabag</h1>\n    <ul>\n      <li>version: <b id=\"teabag-version\"></b></li>\n      <li id=\"teabag-env-info\"></li>\n    </ul>\n  </div>\n  <div id=\"teabag-progress\"></div>\n  <ul id=\"teabag-stats\">\n    <li>passes: <b id=\"teabag-stats-passes\">0</b></li>\n    <li>failures: <b id=\"teabag-stats-failures\">0</b></li>\n    <li>skipped: <b id=\"teabag-stats-skipped\">0</b></li>\n    <li>duration: <b id=\"teabag-stats-duration\">&infin;</b></li>\n  </ul>\n</div>\n\n<div id=\"teabag-controls\" class=\"teabag-clearfix\">\n  <div id=\"teabag-toggles\">\n    <button id=\"teabag-use-catch\" title=\"Toggle using try/catch wrappers when possible\">Try/Catch</button>\n    <button id=\"teabag-build-full-report\" title=\"Toggle building the full report\">Full Report</button>\n    <button id=\"teabag-display-progress\" title=\"Toggle displaying progress as tests run\">Progress</button>\n  </div>\n  <div id=\"teabag-filter\">\n    " + (this.buildSuiteSelect()) + "\n    <button onclick=\"window.location.href = window.location.pathname\">Run All</button>\n    <span id=\"teabag-filter-info\">\n  </div>\n</div>\n\n<hr/>\n\n<div id=\"teabag-report\">\n  <ol id=\"teabag-report-failures\"></ol>\n  <ol id=\"teabag-report-all\"></ol>\n</div>";
+    };
+
+    HTML.prototype.buildSuiteSelect = function() {
+      var options, suite, _i, _len, _ref;
+      if (Teabag.suites.all.length === 1) {
+        return "";
+      }
+      options = [];
+      _ref = Teabag.suites.all;
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        suite = _ref[_i];
+        options.push("<option" + (Teabag.suites.active === suite ? " selected='selected'" : "") + " value=\"" + suite + "\">" + suite + " suite</option>");
+      }
+      return "<select id=\"teabag-suite-select\">" + (options.join("")) + "</select>";
     };
 
     HTML.prototype.buildProgress = function() {
@@ -2925,8 +2940,8 @@ jasmine.version_= {
       if (!filter) {
         return;
       }
-      this.setClass("filtered", "teabag-filtered");
-      return this.setHtml("filtered", "" + filter, true);
+      this.setClass("filter", "teabag-filtered");
+      return this.setHtml("filter-info", "" + filter, true);
     };
 
     HTML.prototype.readConfig = function() {
@@ -2948,6 +2963,10 @@ jasmine.version_= {
       return this.refresh();
     };
 
+    HTML.prototype.changeSuite = function() {
+      return window.location.href = "/teabag/" + this.options[this.options.selectedIndex].value;
+    };
+
     HTML.prototype.refresh = function() {
       return window.location.href = window.location.href;
     };

data/app/assets/javascripts/teabag-mocha.js

@@ -5021,7 +5021,7 @@
 
     Teabag.slow = 75;
 
-    Teabag.fixturePath = null;
+    Teabag.root = null;
 
     Teabag.finished = false;
 
@@ -5072,7 +5072,7 @@
         return;
       }
       this.constructor.run = true;
-      this.fixturePath = Teabag.fixturePath;
+      this.fixturePath = "" + Teabag.root + "/fixtures";
       this.params = this.getParams();
       this.setup();
     }
@@ -5223,6 +5223,7 @@
       this.setText("env-info", this.envInfo());
       this.setText("version", Teabag.version);
       this.findEl("toggles").onclick = this.toggleConfig;
+      this.findEl("suite-select").onchange = this.changeSuite;
       this.showConfiguration();
       return this.buildProgress();
     };
@@ -5231,7 +5232,21 @@
       var el;
       el = this.createEl("div");
       document.body.appendChild(el);
-      return el.innerHTML = "<div class=\"teabag-clearfix\">\n  <div id=\"teabag-title\">\n    <h1>Teabag</h1>\n    <ul>\n      <li>version: <b id=\"teabag-version\"></b></li>\n      <li id=\"teabag-env-info\"></li>\n    </ul>\n  </div>\n  <div id=\"teabag-progress\"></div>\n  <ul id=\"teabag-stats\">\n    <li>passes: <b id=\"teabag-stats-passes\">0</b></li>\n    <li>failures: <b id=\"teabag-stats-failures\">0</b></li>\n    <li>skipped: <b id=\"teabag-stats-skipped\">0</b></li>\n    <li>duration: <b id=\"teabag-stats-duration\">&infin;</b></li>\n  </ul>\n</div>\n\n<div id=\"teabag-controls\" class=\"teabag-clearfix\">\n  <div id=\"teabag-toggles\">\n    <button id=\"teabag-use-catch\">Use Try/Catch</button>\n    <button id=\"teabag-build-full-report\">Build Full Report</button>\n    <button id=\"teabag-display-progress\">Display Progress</button>\n  </div>\n  <div id=\"teabag-filtered\">\n    <button onclick=\"window.location.href = window.location.pathname\">Run All Specs</button>\n  </div>\n</div>\n\n<hr/>\n\n<div id=\"teabag-report\">\n  <ol id=\"teabag-report-failures\"></ol>\n  <ol id=\"teabag-report-all\"></ol>\n</div>";
+      return el.innerHTML = "<div class=\"teabag-clearfix\">\n  <div id=\"teabag-title\">\n    <h1>Teabag</h1>\n    <ul>\n      <li>version: <b id=\"teabag-version\"></b></li>\n      <li id=\"teabag-env-info\"></li>\n    </ul>\n  </div>\n  <div id=\"teabag-progress\"></div>\n  <ul id=\"teabag-stats\">\n    <li>passes: <b id=\"teabag-stats-passes\">0</b></li>\n    <li>failures: <b id=\"teabag-stats-failures\">0</b></li>\n    <li>skipped: <b id=\"teabag-stats-skipped\">0</b></li>\n    <li>duration: <b id=\"teabag-stats-duration\">&infin;</b></li>\n  </ul>\n</div>\n\n<div id=\"teabag-controls\" class=\"teabag-clearfix\">\n  <div id=\"teabag-toggles\">\n    <button id=\"teabag-use-catch\" title=\"Toggle using try/catch wrappers when possible\">Try/Catch</button>\n    <button id=\"teabag-build-full-report\" title=\"Toggle building the full report\">Full Report</button>\n    <button id=\"teabag-display-progress\" title=\"Toggle displaying progress as tests run\">Progress</button>\n  </div>\n  <div id=\"teabag-filter\">\n    " + (this.buildSuiteSelect()) + "\n    <button onclick=\"window.location.href = window.location.pathname\">Run All</button>\n    <span id=\"teabag-filter-info\">\n  </div>\n</div>\n\n<hr/>\n\n<div id=\"teabag-report\">\n  <ol id=\"teabag-report-failures\"></ol>\n  <ol id=\"teabag-report-all\"></ol>\n</div>";
+    };
+
+    HTML.prototype.buildSuiteSelect = function() {
+      var options, suite, _i, _len, _ref;
+      if (Teabag.suites.all.length === 1) {
+        return "";
+      }
+      options = [];
+      _ref = Teabag.suites.all;
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        suite = _ref[_i];
+        options.push("<option" + (Teabag.suites.active === suite ? " selected='selected'" : "") + " value=\"" + suite + "\">" + suite + " suite</option>");
+      }
+      return "<select id=\"teabag-suite-select\">" + (options.join("")) + "</select>";
     };
 
     HTML.prototype.buildProgress = function() {
@@ -5336,8 +5351,8 @@
       if (!filter) {
         return;
       }
-      this.setClass("filtered", "teabag-filtered");
-      return this.setHtml("filtered", "" + filter, true);
+      this.setClass("filter", "teabag-filtered");
+      return this.setHtml("filter-info", "" + filter, true);
     };
 
     HTML.prototype.readConfig = function() {
@@ -5359,6 +5374,10 @@
       return this.refresh();
     };
 
+    HTML.prototype.changeSuite = function() {
+      return window.location.href = "/teabag/" + this.options[this.options.selectedIndex].value;
+    };
+
     HTML.prototype.refresh = function() {
       return window.location.href = window.location.href;
     };

data/app/assets/javascripts/teabag-qunit.js

@@ -1986,7 +1986,7 @@
 
     Teabag.slow = 75;
 
-    Teabag.fixturePath = null;
+    Teabag.root = null;
 
     Teabag.finished = false;
 
@@ -2037,7 +2037,7 @@
         return;
       }
       this.constructor.run = true;
-      this.fixturePath = Teabag.fixturePath;
+      this.fixturePath = "" + Teabag.root + "/fixtures";
       this.params = this.getParams();
       this.setup();
     }
@@ -2188,6 +2188,7 @@
       this.setText("env-info", this.envInfo());
       this.setText("version", Teabag.version);
       this.findEl("toggles").onclick = this.toggleConfig;
+      this.findEl("suite-select").onchange = this.changeSuite;
       this.showConfiguration();
       return this.buildProgress();
     };
@@ -2196,7 +2197,21 @@
       var el;
       el = this.createEl("div");
       document.body.appendChild(el);
-      return el.innerHTML = "<div class=\"teabag-clearfix\">\n  <div id=\"teabag-title\">\n    <h1>Teabag</h1>\n    <ul>\n      <li>version: <b id=\"teabag-version\"></b></li>\n      <li id=\"teabag-env-info\"></li>\n    </ul>\n  </div>\n  <div id=\"teabag-progress\"></div>\n  <ul id=\"teabag-stats\">\n    <li>passes: <b id=\"teabag-stats-passes\">0</b></li>\n    <li>failures: <b id=\"teabag-stats-failures\">0</b></li>\n    <li>skipped: <b id=\"teabag-stats-skipped\">0</b></li>\n    <li>duration: <b id=\"teabag-stats-duration\">&infin;</b></li>\n  </ul>\n</div>\n\n<div id=\"teabag-controls\" class=\"teabag-clearfix\">\n  <div id=\"teabag-toggles\">\n    <button id=\"teabag-use-catch\">Use Try/Catch</button>\n    <button id=\"teabag-build-full-report\">Build Full Report</button>\n    <button id=\"teabag-display-progress\">Display Progress</button>\n  </div>\n  <div id=\"teabag-filtered\">\n    <button onclick=\"window.location.href = window.location.pathname\">Run All Specs</button>\n  </div>\n</div>\n\n<hr/>\n\n<div id=\"teabag-report\">\n  <ol id=\"teabag-report-failures\"></ol>\n  <ol id=\"teabag-report-all\"></ol>\n</div>";
+      return el.innerHTML = "<div class=\"teabag-clearfix\">\n  <div id=\"teabag-title\">\n    <h1>Teabag</h1>\n    <ul>\n      <li>version: <b id=\"teabag-version\"></b></li>\n      <li id=\"teabag-env-info\"></li>\n    </ul>\n  </div>\n  <div id=\"teabag-progress\"></div>\n  <ul id=\"teabag-stats\">\n    <li>passes: <b id=\"teabag-stats-passes\">0</b></li>\n    <li>failures: <b id=\"teabag-stats-failures\">0</b></li>\n    <li>skipped: <b id=\"teabag-stats-skipped\">0</b></li>\n    <li>duration: <b id=\"teabag-stats-duration\">&infin;</b></li>\n  </ul>\n</div>\n\n<div id=\"teabag-controls\" class=\"teabag-clearfix\">\n  <div id=\"teabag-toggles\">\n    <button id=\"teabag-use-catch\" title=\"Toggle using try/catch wrappers when possible\">Try/Catch</button>\n    <button id=\"teabag-build-full-report\" title=\"Toggle building the full report\">Full Report</button>\n    <button id=\"teabag-display-progress\" title=\"Toggle displaying progress as tests run\">Progress</button>\n  </div>\n  <div id=\"teabag-filter\">\n    " + (this.buildSuiteSelect()) + "\n    <button onclick=\"window.location.href = window.location.pathname\">Run All</button>\n    <span id=\"teabag-filter-info\">\n  </div>\n</div>\n\n<hr/>\n\n<div id=\"teabag-report\">\n  <ol id=\"teabag-report-failures\"></ol>\n  <ol id=\"teabag-report-all\"></ol>\n</div>";
+    };
+
+    HTML.prototype.buildSuiteSelect = function() {
+      var options, suite, _i, _len, _ref;
+      if (Teabag.suites.all.length === 1) {
+        return "";
+      }
+      options = [];
+      _ref = Teabag.suites.all;
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        suite = _ref[_i];
+        options.push("<option" + (Teabag.suites.active === suite ? " selected='selected'" : "") + " value=\"" + suite + "\">" + suite + " suite</option>");
+      }
+      return "<select id=\"teabag-suite-select\">" + (options.join("")) + "</select>";
     };
 
     HTML.prototype.buildProgress = function() {
@@ -2301,8 +2316,8 @@
       if (!filter) {
         return;
       }
-      this.setClass("filtered", "teabag-filtered");
-      return this.setHtml("filtered", "" + filter, true);
+      this.setClass("filter", "teabag-filtered");
+      return this.setHtml("filter-info", "" + filter, true);
     };
 
     HTML.prototype.readConfig = function() {
@@ -2324,6 +2339,10 @@
       return this.refresh();
     };
 
+    HTML.prototype.changeSuite = function() {
+      return window.location.href = "/teabag/" + this.options[this.options.selectedIndex].value;
+    };
+
     HTML.prototype.refresh = function() {
       return window.location.href = window.location.href;
     };

data/app/assets/javascripts/teabag/base/reporters/html.coffee

@@ -23,6 +23,7 @@ class Teabag.Reporters.HTML extends Teabag.Reporters.BaseView
     @setText("env-info", @envInfo())
     @setText("version", Teabag.version)
     @findEl("toggles").onclick = @toggleConfig
+    @findEl("suite-select").onchange = @changeSuite
     @showConfiguration()
     @buildProgress()
 
@@ -50,12 +51,14 @@ class Teabag.Reporters.HTML extends Teabag.Reporters.BaseView
 
       <div id="teabag-controls" class="teabag-clearfix">
         <div id="teabag-toggles">
-          <button id="teabag-use-catch">Use Try/Catch</button>
-          <button id="teabag-build-full-report">Build Full Report</button>
-          <button id="teabag-display-progress">Display Progress</button>
+          <button id="teabag-use-catch" title="Toggle using try/catch wrappers when possible">Try/Catch</button>
+          <button id="teabag-build-full-report" title="Toggle building the full report">Full Report</button>
+          <button id="teabag-display-progress" title="Toggle displaying progress as tests run">Progress</button>
         </div>
-        <div id="teabag-filtered">
-          <button onclick="window.location.href = window.location.pathname">Run All Specs</button>
+        <div id="teabag-filter">
+          #{@buildSuiteSelect()}
+          <button onclick="window.location.href = window.location.pathname">Run All</button>
+          <span id="teabag-filter-info">
         </div>
       </div>
 
@@ -68,6 +71,14 @@ class Teabag.Reporters.HTML extends Teabag.Reporters.BaseView
     """
 
 
+  buildSuiteSelect: ->
+    return "" if Teabag.suites.all.length == 1
+    options = []
+    for suite in Teabag.suites.all
+      options.push("""<option#{if Teabag.suites.active == suite then " selected='selected'" else ""} value="#{suite}">#{suite} suite</option>""")
+    """<select id="teabag-suite-select">#{options.join("")}</select>"""
+
+
   buildProgress: ->
     @progress = Teabag.Reporters.HTML.ProgressView.create(@config["display-progress"])
     @progress.appendTo(@findEl("progress"))
@@ -146,8 +157,8 @@ class Teabag.Reporters.HTML extends Teabag.Reporters.BaseView
 
   setFilter: (filter) ->
     return unless filter
-    @setClass("filtered", "teabag-filtered")
-    @setHtml("filtered", "#{filter}", true)
+    @setClass("filter", "teabag-filtered")
+    @setHtml("filter-info", "#{filter}", true)
 
 
   readConfig: ->
@@ -163,6 +174,10 @@ class Teabag.Reporters.HTML extends Teabag.Reporters.BaseView
     @refresh()
 
 
+  changeSuite: ->
+    window.location.href = "/teabag/#{@options[@options.selectedIndex].value}"
+
+
   refresh: ->
     window.location.href = window.location.href
 

data/app/assets/javascripts/teabag/base/runner.coffee

@@ -5,7 +5,7 @@ class Teabag.Runner
   constructor: ->
     return if @constructor.run
     @constructor.run = true
-    @fixturePath = Teabag.fixturePath
+    @fixturePath = "#{Teabag.root}/fixtures"
     @params = @getParams()
     @setup()
 

data/app/assets/javascripts/teabag/base/teabag.coffee

@@ -4,15 +4,15 @@
 #= require teabag/base/reporters/console
 
 class @Teabag
-  @defer       : false
-  @slow        : 75
-  @fixturePath : null
-  @finished    : false
-  @Reporters   : {}
-  @Date        : Date
-  @location    : window.location
-  @console     : window.console
-  @messages    : []
+  @defer:     false
+  @slow:      75
+  @root:      null
+  @finished:  false
+  @Reporters: {}
+  @Date:      Date
+  @location:  window.location
+  @console:   window.console
+  @messages:  []
 
   @execute: ->
     if @defer

data/app/assets/stylesheets/teabag.css

@@ -1,6 +1,7 @@
 body {
   margin: 0;
-  padding: 60px 50px;
+  padding: 45px 50px 0;
+  min-width: 440px;
   background-color: #f4f3ee;
   border-top: 3px solid #18c2e8;
   font: 15px/1.5em "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -118,7 +119,6 @@ hr {
   width: 84px;
   height: 84px;
 }
-
 #teabag-progress .simple-progress em {
   display: block;
   text-align: center;
@@ -133,11 +133,8 @@ hr {
   display: block;
   height: 20px;
   border: 1px solid #5a423c;
-
 }
 
-
-
 /* Statistics
  *---------------------------------------------------------------------------*/
 #teabag-stats {
@@ -163,6 +160,7 @@ hr {
   padding: 3px 8px;
   zoom: 1;
   border: 1px solid #B3B3B3;
+  outline: none;
   border-radius: 0.4em;
   background-color: #fff;
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.05));
@@ -187,8 +185,17 @@ hr {
 #teabag-controls button:hover {
   background-color: #E6E6E6;
 }
-#teabag-controls #teabag-filtered {
-  display: none;
+#teabag-controls select {
+  position: relative;
+  top: -1px;
+  height: 21px;
+  max-width: 100px;
+  margin: 0;
+  border: 1px solid #B3B3B3;
+  outline: none;
+}
+
+#teabag-controls #teabag-filter {
   margin-right: 220px;
   white-space: nowrap;
   overflow: hidden;
@@ -196,8 +203,11 @@ hr {
   font-weight: 200;
   color: #7b4f49;
 }
-#teabag-controls #teabag-filtered.teabag-filtered {
-  display: block;
+#teabag-controls #teabag-filter button {
+  visibility: hidden;
+}
+#teabag-controls #teabag-filter.teabag-filtered button {
+  visibility: visible;
 }
 #teabag-controls #teabag-toggles {
   float: right;
@@ -330,3 +340,14 @@ body.teabag-passed #teabag-progress .teabag-indicator {
   left: 0;
   width: 10000px;
 }
+
+/* Responsive
+ *---------------------------------------------------------------------------*/
+@media (max-width: 540px) {
+  body {
+    padding: 25px 5px;
+  }
+  #teabag-progress {
+    margin-right: 15px;
+  }
+}

data/app/views/teabag/spec/index.html.erb

@@ -5,15 +5,19 @@
     <%= stylesheet_link_tag *@suite.stylesheets %>
     <%= javascript_include_tag_for_teabag *@suite.javascripts %>
     <%= csrf_meta_tags %>
+    <meta name="viewport" content="width=device-width, user-scalable=no">
     <script type="text/javascript">
-      window.originalOnload = window.onload
+      window.originalOnload = window.onload;
       window.onload = function() {
         if (window.originalOnload) window.originalOnload();
 
+        // pass relevant info to javascript
+        Teabag.version = <%=raw Teabag::VERSION.inspect %>;
+        Teabag.root = <%=raw Teabag.configuration.mount_at.inspect %>;
+        Teabag.suites = <%=raw @suite.suites.to_json %>;
+
         // start the execution of the specs
-        Teabag.version = "<%= Teabag::VERSION %>";
-        Teabag.fixturePath = "<%= Teabag.configuration.mount_at %>/fixtures";
-        Teabag.execute()
+        Teabag.execute();
       }
     </script>
   </head>