First pass at automated multi-browser/device testing. closes videojs#419

I've got a way to run tests across every browser and device out there except for IE8, and IE8 should work except I'm running into a Browserstack bug that I've let them know about.

It uses a project called bunyip, which internallt uses Yeti (YUI), Pagekite, and Browserstack.

Next steps include:
  - Making it all automatic. Right now you have to wait for browsers to connect and then manually hit enter when they have.
  - Make it a grunt task
  - Document it all so others can use it

I think this is close enough for me to close the milestone 4.0 issue.

Author: heff

.bunyipconfig.js.example

@@ -0,0 +1,21 @@
+/*
+Bunyip is a tool for multi-browser/device testing
+  https://github.com/ryanseddon/bunyip
+It uses a few service under the hood including:
+  Browsertack - http://browserstack.com
+  Pagekite https://pagekite.net
+You'll need accounts at both to use bunyip
+You'll also need to download and install pagekite.py
+*/
+var config = {
+    "browserstack": {
+        "username": "[email protected]",
+        "password": "your browserstack password",
+        "timeout": 300
+    },
+    "port": 9000,
+    "tunnellink": "your-subdomain.pagekite.me",
+    "tunnel": "pagekite.py <port> your-subdomain.pagekite.me"
+};
+
+module.exports = config;

.gitignore

@@ -5,6 +5,7 @@ dev.html
 projects
 .zenflow-log
 test/*.map
+.bunyipconfig.js
 
 node_modules
 npm-debug.log

browsers.json

@@ -0,0 +1,37 @@
+[
+  {
+    "os": "win",
+    "browser": "chrome",
+    "version": "27.0"
+  },
+  {
+    "os": "win",
+    "browser": "firefox",
+    "version": "20.0"
+  },
+  {
+    "os": "win",
+    "browser": "ie",
+    "version": "9.0"
+  },
+  {
+    "os": "win",
+    "browser": "ie",
+    "version": "10.0"
+  },
+  {
+    "os": "ios",
+    "device": "iPhone 5",
+    "version": "6.0"
+  },
+  {
+    "os": "ios",
+    "device": "iPad 3rd (6.0)",
+    "version": "6.0"
+  },
+  {
+    "os": "android",
+    "device": "Samsung Galaxy Tab 2 10.1",
+    "version": "4.0"
+  }
+]

src/js/lib.js

@@ -275,7 +275,13 @@ vjs.addClass = function(element, classToAdd){
 vjs.removeClass = function(element, classToRemove){
   if (element.className.indexOf(classToRemove) == -1) { return; }
   var classNames = element.className.split(' ');
-  classNames.splice(classNames.indexOf(classToRemove),1);
+  // IE8 Does not support array.indexOf so using a for loop
+  for (var i = classNames.length - 1; i >= 0; i--) {
+    if (classNames[i] === classToRemove) {
+      classNames.splice(i,1);
+    }
+  }
+  // classNames.splice(classNames.indexOf(classToRemove),1);
   element.className = classNames.join(' ');
 };
 
@@ -368,16 +374,14 @@ vjs.getAttributeValues = function(tag){
  * @param  {String} strCssRule Style name
  * @return {String}            Style value
  */
-vjs.getComputedStyleValue = function(el, strCssRule){
+vjs.getComputedDimension = function(el, strCssRule){
   var strValue = '';
   if(document.defaultView && document.defaultView.getComputedStyle){
     strValue = document.defaultView.getComputedStyle(el, '').getPropertyValue(strCssRule);
 
   } else if(el.currentStyle){
-    strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
-      return p1.toUpperCase();
-    });
-    strValue = el.currentStyle[strCssRule];
+    // IE8 Width/Height support
+    strValue = el['client'+strCssRule.substr(0,1).toUpperCase() + strCssRule.substr(1)] + 'px';
   }
   return strValue;
 };

src/js/player.js

@@ -165,7 +165,6 @@ vjs.Player.prototype.createEl = function(){
 
   // Make player findable on elements
   tag['player'] = el['player'] = this;
-
   // Default state of video is paused
   this.addClass('vjs-paused');
 
@@ -197,6 +196,7 @@ vjs.Player.prototype.loadTech = function(techName, source){
   // So we need to remove it if we're not loading HTML5
   } else if (techName !== 'Html5' && this.tag) {
     this.el_.removeChild(this.tag);
+    this.tag.player = null;
     this.tag = null;
   }
 

test/index.html

@@ -18,7 +18,7 @@
     (function(){
 
       // ADD NEW TEST FILES HERE
-      var tests = [
+      window.tests = [
         'test/unit/core-object.js',
         'test/unit/lib.js',
         'test/unit/events.js',
@@ -30,22 +30,30 @@
         'test/unit/controls.js',
         'test/unit/plugins.js'
       ];
-      var compiledTests = "build/files/test.minified.video.js";
 
       var projectRoot = '../';
       var scripts = [];
 
+      window.loadScripts = function(scripts) {
+        for (var i = 0; i < scripts.length; i++) {
+          document.write("<script src='" + projectRoot + scripts[i] + "'><\/script>" );
+        }
+      }
+
       // Choose either the raw source and tests
       // Or the compiled source + tests.
       // Use ?comiled to use the compiled tests
       if (QUnit.urlParams.min || QUnit.urlParams.compiled) {
-        scripts.push(compiledTests);
+        window.compiled = true;
       } else {
-        scripts = scripts.concat(['build/source-loader.js'], tests);
-      }
+        // Bunyip/Yeti starts tests after it's done loading which can
+        // lead to a double Qunit.start error which reads as
+        // "Uncaught Error: pushFailure() assertion outside test"
+        if (window.$yetify) {
+          QUnit.config.autostart = false;
+        }
 
-      for (var i = 0; i < scripts.length; i++) {
-        document.write( "<script src='" + projectRoot + scripts[i] + "'><\/script>" );
+        loadScripts(['build/source-loader.js']);
       }
 
     })()
@@ -60,5 +68,15 @@ <h2 id="qunit-userAgent"></h2>
     <ol id="qunit-tests"></ol>
     <div id="qunit-fixture"></div>
   </div>
+
+  <script>
+    // Loading tests before the end to give IE time to load vjs before tests
+    if (!window.compiled) {
+      loadScripts(window.tests);
+    } else {
+      var compiledTests = "build/files/test.minified.video.js";
+      loadScripts([compiledTests]);
+    }
+  </script>
 </body>
 </html>