Added cross-browser testing with SauceLabs, and added Karma as the default test runner. closes #1187

.bunyipconfig.js.example

@@ -1,21 +0,0 @@
-/*
-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": "your-browserstack-email@example.com",
-        "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

@@ -15,9 +15,6 @@ npm-debug.log
 sandbox/*
 !sandbox/*.example
 
-# ignore any Karma conf.js files in the test/ directory
-test/*.conf.js
-
 *.swp
 *.swo
 

.jshintrc

@@ -22,6 +22,7 @@
         "define",
         "module",
         "exports",
+        "process",
 
         "PlayerTest",
         "asyncTest",

.travis.yml

@@ -1,3 +1,14 @@
 language: node_js
 node_js:
-  - 0.8
+- 0.10
+before_script:
+- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then curl https://gist.githubusercontent.com/santiycr/5139565/raw/sauce_connect_setup.sh | bash; fi
+notifications:
+  irc:
+    channels:
+      - "chat.freenode.net#videojs"
+    use_notice: true
+env:
+  global:
+  - secure: K6JpKwMkfNaJix3Bb0tLjVMzHMJgtBXdd/dvfw1BMb9DCBpd81PqXbDs7yXCddUxnUPTBPxZCrQgWsw71Wn+qEoIG5MU3uOT5A2rBbx/yZonVAGv5ed/9w0xk0OzO383CmPMFqwqtp9YmdmqGjQBkYXVXJjTvNTOAExFSdhO+3U=
+  - secure: GIbhjUJapvC70nIZVlhVyK+3KAD2TVKpiY/q412OO7V2izbvcM1tvU3LBoMZbROzrt5TT84tCoJDvHnrpL0OvxPwrzL5CUU7h4UTxhTOyQkEinbYAnWlW9wdrvtdczsEvANkFPqBZ53B3hVHZHMLOG8QRWaTBicF68vSHEJFqb4=

CHANGELOG.md

@@ -21,6 +21,7 @@ CHANGELOG
 * Added support for playback rate switching [[view](https://github.com/videojs/video.js/pull/1132)]
 * Fixed an issue with the loadstart event order that caused the big play button to not hide [[view](https://github.com/videojs/video.js/pull/1209)]
 * Modernized the fullscreen API and added support for IE11 [[view](https://github.com/videojs/video.js/pull/1205)]
+* Added cross-browser testing with SauceLabs, and added Karma as the default test runner ([view](https://github.com/videojs/video.js/pull/1187))
 
 --------------------
 

Gruntfile.js

@@ -135,16 +135,97 @@ module.exports = function(grunt) {
       }
     },
     karma: {
+      // this config file applies to all following configs except if overwritten
       options: {
         configFile: 'test/karma.conf.js'
       },
-      dev: {
-        configFile: 'test/karma.conf.js',
-        autoWatch: true
+
+      // this only runs on PRs from the mainrepo on saucelabs
+      saucelabs: {
+        browsers: ['chrome_sl', 'ipad_sl']
       },
-      ci: {
-        configFile: 'test/karma.conf.js',
-        autoWatch: false
+
+      // these are run locally on local browsers
+      dev: {
+        browsers: ['Chrome', 'Firefox', 'Safari']
+      },
+      chromecanary: {
+        browsers: ['ChromeCanary']
+      },
+      chrome: {
+        browsers: ['Chrome']
+      },
+      firefox: {
+        browsers: ['Firefox']
+      },
+      safari: {
+        browsers: ['Safari']
+      },
+      ie: {
+        browsers: ['IE']
+      },
+      phantomjs: {
+        browsers: ['PhantomJS']
+      },
+
+      // This is all the minified tests run locally on local browsers
+      minified_dev: {
+        browsers: ['Chrome', 'Firefox', 'Safari'],
+        configFile: 'test/karma.minified.conf.js'
+      },
+      minified_chromecanary: {
+        browsers: ['ChromeCanary'],
+        configFile: 'test/karma.minified.conf.js'
+      },
+      minified_chrome: {
+        browsers: ['Chrome'],
+        configFile: 'test/karma.minified.conf.js'
+      },
+      minified_firefox: {
+        browsers: ['Firefox'],
+        configFile: 'test/karma.minified.conf.js'
+      },
+      minified_safari: {
+        browsers: ['Safari'],
+        configFile: 'test/karma.minified.conf.js'
+      },
+      minified_ie: {
+        browsers: ['IE'],
+        configFile: 'test/karma.minified.conf.js'
+      },
+      minified_phantomjs: {
+        browsers: ['PhantomJS'],
+        configFile: 'test/karma.minified.conf.js'
+      },
+
+      // This is all the minified api tests run locally on local browsers
+      minified_api_dev: {
+        browsers: ['Chrome', 'Firefox', 'Safari'],
+        configFile: 'test/karma.minified.api.conf.js'
+      },
+      minified_api_chromecanary: {
+        browsers: ['ChromeCanary'],
+        configFile: 'test/karma.minified.api.conf.js'
+      },
+      minified_api_chrome: {
+        browsers: ['Chrome'],
+        configFile: 'test/karma.minified.api.conf.js'
+      },
+      minified_api_firefox: {
+        browsers: ['Firefox'],
+        configFile: 'test/karma.minified.api.conf.js'
+      },
+      minified_api_safari: {
+        browsers: ['Safari'],
+        configFile: 'test/karma.minified.api.conf.js'
+      },
+      minified_api_ie: {
+        browsers: ['IE'],
+        configFile: 'test/karma.minified.api.conf.js'
+      },
+      minified_api_phantomjs: {
+        browsers: ['PhantomJS'],
+        configFile: 'test/karma.minified.api.conf.js'
       }
     },
     vjsdocs: {
@@ -231,11 +312,66 @@ module.exports = function(grunt) {
   // grunt.loadTasks('./docs/tasks/');
   // grunt.loadTasks('../videojs-doc-generator/tasks/');
 
+  grunt.registerTask('pretask', ['jshint', 'less', 'build', 'minify', 'usebanner']);
   // Default task.
-  grunt.registerTask('default', ['jshint', 'less', 'build', 'minify', 'usebanner', 'dist']);
+  grunt.registerTask('default', ['pretask', 'dist']);
   // Development watch task
   grunt.registerTask('dev', ['jshint', 'less', 'build', 'qunit:source']);
-  grunt.registerTask('test', ['jshint', 'less', 'build', 'minify', 'usebanner', 'qunit']);
+  grunt.registerTask('test-qunit', ['pretask', 'qunit']);
+
+  // The test task will run `karma:saucelabs` when running in travis,
+  // when running via a PR from a fork, it'll run qunit tests in phantom using
+  // karma otherwise, it'll run the tests in chrome via karma
+  // You can specify which browsers to build with by using grunt-style arguments
+  // or separating them with a comma:
+  //   grunt test:chrome:firefox  # grunt-style
+  //   grunt test:chrome,firefox  # comma-separated
+  grunt.registerTask('test', function() {
+    var tasks = this.args,
+        tasksMinified,
+        tasksMinifiedApi;
+
+    grunt.task.run(['pretask']);
+
+    if (process.env.TRAVIS_PULL_REQUEST) {
+      grunt.task.run(['karma:phantomjs', 'karma:minified_phantomjs', 'karma:minified_api_phantomjs']);
+    } else if (process.env.TRAVIS) {
+      grunt.task.run(['karma:saucelabs']);
+    } else {
+      // if we aren't running this in a CI, but running it manually, we can
+      // supply arguments to this task. These arguments are either colon (`:`)
+      // separated which is the default grunt separator for arguments, or they
+      // are comma (`,`) separated to make it easier.
+      // The arguments are the names of which browsers you want. It'll then
+      // make sure you have the `minified` and `minified_api` for those browsers
+      // as well.
+      if (tasks.length === 0) {
+        tasks.push('chrome');
+      }
+      if (tasks.length === 1) {
+        tasks = tasks[0].split(',');
+      }
+
+      tasksMinified = tasks.slice();
+      tasksMinifiedApi = tasks.slice();
+
+      tasksMinified = tasksMinified.map(function(task) {
+        return 'minified_' + task;
+      });
+
+      tasksMinifiedApi = tasksMinifiedApi.map(function(task) {
+        return 'minified_api_' + task;
+      });
+
+      tasks = tasks.concat(tasksMinified).concat(tasksMinifiedApi);
+      tasks = tasks.map(function(task) {
+        return 'karma:' + task;
+      });
+
+
+      grunt.task.run(tasks);
+    }
+  });
 
   var fs = require('fs'),
       gzip = require('zlib').gzip;

browsers.json

@@ -1,37 +0,0 @@
-[
-  {
-    "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"
-  }
-]

package.json

@@ -13,7 +13,7 @@
   "homepage": "http://videojs.com",
   "author": "Steve Heffernan",
   "scripts": {
-    "test": "grunt test --verbose"
+    "test": "grunt test"
   },
   "repository": {
     "type": "git",
@@ -24,40 +24,42 @@
     "videojs-swf": "4.4.0"
   },
   "devDependencies": {
-    "grunt-cli": "~0.1.0",
-    "grunt": "0.4.2",
-    "grunt-contrib-connect": "~0.7.1",
-    "grunt-contrib-jshint": "~0.4.3",
-    "grunt-contrib-watch": "~0.1.4",
-    "grunt-contrib-qunit": "~0.2.1",
     "calcdeps": "~0.1.7",
-    "grunt-contrib-clean": "~0.4.0a",
-    "grunt-contrib-copy": "~0.3.2",
-    "mocha": "~1.8.1",
-    "contribflow": "~0.2.0",
-    "grunt-s3": "~0.2.0-alpha",
-    "semver": "~1.1.4",
-    "grunt-contrib-cssmin": "~0.6.0",
-    "uglify-js": "~2.3.6",
-    "grunt-contrib-less": "~0.6.4",
-    "grunt-karma": "~0.6.2",
-    "karma": "~0.10.0",
-    "karma-chrome-launcher": "~0.1.2",
-    "karma-firefox-launcher": "~0.1.3",
-    "karma-ie-launcher": "~0.1.1",
-    "karma-opera-launcher": "~0.1.0",
-    "karma-phantomjs-launcher": "~0.1.1",
-    "karma-safari-launcher": "~0.1.1",
-    "karma-qunit": "~0.1.1",
-    "videojs-doc-generator": "0.0.1",
-    "qunitjs": "~1.12.0",
-    "grunt-zip": "0.10.2",
-    "grunt-banner": "~0.2.0",
     "chg": "~0.1.8",
-    "grunt-tagrelease": "~0.3.3",
+    "contribflow": "~0.2.0",
     "github": "~0.1.14",
-    "open": "0.0.4",
+    "grunt": "^0.4.4",
+    "grunt-banner": "~0.2.0",
+    "grunt-cli": "~0.1.0",
+    "grunt-contrib-clean": "~0.4.0a",
+    "grunt-contrib-connect": "~0.7.1",
+    "grunt-contrib-copy": "~0.3.2",
+    "grunt-contrib-cssmin": "~0.6.0",
+    "grunt-contrib-jshint": "~0.4.3",
+    "grunt-contrib-less": "~0.6.4",
+    "grunt-contrib-qunit": "~0.2.1",
+    "grunt-contrib-watch": "~0.1.4",
+    "grunt-karma": "^0.8.3",
+    "grunt-s3": "~0.2.0-alpha",
+    "grunt-tagrelease": "~0.3.3",
     "grunt-version": "~0.3.0",
-    "sinon": "~1.9.1"
+    "grunt-zip": "0.10.2",
+    "karma": "^0.12.14",
+    "karma-chrome-launcher": "^0.1.3",
+    "karma-firefox-launcher": "^0.1.3",
+    "karma-ie-launcher": "^0.1.5",
+    "karma-opera-launcher": "~0.1.0",
+    "karma-phantomjs-launcher": "^0.1.4",
+    "karma-qunit": "^0.1.1",
+    "karma-safari-launcher": "^0.1.1",
+    "karma-sauce-launcher": "^0.2.8",
+    "karma-sinon": "^1.0.3",
+    "mocha": "~1.8.1",
+    "open": "0.0.4",
+    "qunitjs": "~1.12.0",
+    "semver": "~1.1.4",
+    "sinon": "~1.9.1",
+    "uglify-js": "~2.3.6",
+    "videojs-doc-generator": "0.0.1"
   }
 }

test/karma.conf.js

@@ -0,0 +1,124 @@
+module.exports = function(config) {
+  var customLaunchers = {
+    chrome_sl: {
+      singleRun: true,
+      base: 'SauceLabs',
+      browserName: 'chrome',
+      platform: 'Windows 7',
+      version: '34'
+    },
+
+    firefox_sl: {
+      singleRun: true,
+      base: 'SauceLabs',
+      browserName: 'firefox',
+      platform: 'Windows 8'
+    },
+
+    safari_sl: {
+      singleRun: true,
+      base: 'SauceLabs',
+      browserName: 'safari',
+      platform: 'OS X 10.8'
+    },
+
+    ipad_sl: {
+      singleRun: true,
+      base: 'SauceLabs',
+      browserName: 'ipad',
+      platform:'OS X 10.9',
+      version: '7.1'
+    },
+
+    android_sl: {
+      singleRun: true,
+      base: 'SauceLabs',
+      browserName: 'android',
+      platform:'Linux'
+    }
+  };
+
+  config.set({
+    basePath: '',
+
+    frameworks: ['qunit', 'sinon'],
+
+    autoWatch: false,
+
+    singleRun: true,
+
+    customLaunchers: customLaunchers,
+
+    files: [
+      '../test/karma-qunit-shim.js',
+      "../src/js/core.js",
+      "../src/js/core-object.js",
+      "../src/js/events.js",
+      "../src/js/lib.js",
+      "../src/js/util.js",
+      "../src/js/component.js",
+      "../src/js/button.js",
+      "../src/js/slider.js",
+      "../src/js/menu.js",
+      "../src/js/media-error.js",
+      "../src/js/player.js",
+      "../src/js/control-bar/control-bar.js",
+      "../src/js/control-bar/live-display.js",
+      "../src/js/control-bar/play-toggle.js",
+      "../src/js/control-bar/time-display.js",
+      "../src/js/control-bar/fullscreen-toggle.js",
+      "../src/js/control-bar/progress-control.js",
+      "../src/js/control-bar/volume-control.js",
+      "../src/js/control-bar/mute-toggle.js",
+      "../src/js/control-bar/volume-menu-button.js",
+      "../src/js/control-bar/playback-rate-menu-button.js",
+      "../src/js/poster.js",
+      "../src/js/loading-spinner.js",
+      "../src/js/big-play-button.js",
+      "../src/js/error-display.js",
+      "../src/js/media/media.js",
+      "../src/js/media/html5.js",
+      "../src/js/media/flash.js",
+      "../src/js/media/loader.js",
+      "../src/js/tracks.js",
+      "../src/js/json.js",
+      "../src/js/setup.js",
+      "../src/js/plugins.js",
+      '../test/unit/*.js'
+    ],
+
+    plugins: [
+      'karma-qunit',
+      'karma-chrome-launcher',
+      'karma-firefox-launcher',
+      'karma-ie-launcher',
+      'karma-opera-launcher',
+      'karma-phantomjs-launcher',
+      'karma-safari-launcher',
+      'karma-sauce-launcher',
+      'karma-sinon'
+    ],
+
+    reporters: ['dots'],
+
+    // web server port
+    port: 9876,
+
+    // cli runner port
+    runnerPort: 9100,
+
+    colors: true,
+
+    logLevel: config.LOG_INFO,
+
+    captureTimeout: 60000,
+
+    sauceLabs: {
+      startConnect: true,
+      tunnelIdentifier: process.env.TRAVIS_JOB_NUMBER,
+      build: process.env.TRAVIS_BUILD_NUMBER,
+      testName: process.env.TRAVIS_BUILD_NUMBER + process.env.TRAVIS_BRANCH,
+      recordScreenshots: false
+    }
+  });
+};

test/karma.conf.js.example

@@ -1,111 +0,0 @@
-// Karma example configuration file
-// NOTE: To configure Karma tests, do the following:
-//       1.  Copy this file and rename the copy with a .conf.js extension, for example:  karma.conf.js
-//       2.  Configure the properties below in your conf.js copy
-//       3.  Run your tests
-
-module.exports = function(config) {
-  config.set({
-    // base path, that will be used to resolve files and exclude
-    basePath: '',
-
-    frameworks: ['qunit'],
-
-    // Set autoWatch to true if you plan to run `grunt karma` continuously, to automatically test changes as you make them.
-    autoWatch: false,
-
-    // Setting singleRun to true here will start up your specified browsers, run tests, and then shut down the browsers.  Helpful to have in a CI environment, where you don't want to leave browsers running continuously.
-    singleRun: true,
-
-    // Start these browsers, currently available:
-    // - Chrome
-    // - ChromeCanary
-    // - Firefox
-    // - Opera
-    // - Safari (only Mac)
-    // - PhantomJS
-    // - IE (only Windows)
-    // Example usage:
-    // browsers: ['Chrome','Firefox','Safari'],
-    browsers: [],
-
-    // List of files / patterns to load in the browser
-    // Add any new src files to this list.
-    // If you add new unit tests, they will be picked up automatically by Karma,
-    // unless you've added them to a nested directory, in which case you should
-    // add their paths to this list.
-    files: [
-      '../test/karma-qunit-shim.js',
-      '../src/js/core.js',
-      '../src/js/core-object.js',
-      '../src/js/events.js',
-      '../src/js/lib.js',
-      '../src/js/component.js',
-      '../src/js/button.js',
-      '../src/js/slider.js',
-      '../src/js/menu.js',
-      '../src/js/player.js',
-      '../src/js/control-bar/control-bar.js',
-      '../src/js/control-bar/play-toggle.js',
-      '../src/js/control-bar/time-display.js',
-      '../src/js/control-bar/fullscreen-toggle.js',
-      '../src/js/control-bar/progress-control.js',
-      '../src/js/control-bar/volume-control.js',
-      '../src/js/control-bar/mute-toggle.js',
-      '../src/js/control-bar/volume-menu-button.js',
-      '../src/js/poster.js',
-      '../src/js/loading-spinner.js',
-      '../src/js/big-play-button.js',
-      '../src/js/media/media.js',
-      '../src/js/media/html5.js',
-      '../src/js/media/flash.js',
-      '../src/js/media/loader.js',
-      '../src/js/tracks.js',
-      '../src/js/json.js',
-      '../src/js/setup.js',
-      '../src/js/plugins.js',
-      '../src/js/util.js',
-      '../test/unit/*.js'
-    ],
-
-    plugins: [
-      'karma-qunit',
-      'karma-chrome-launcher',
-      'karma-firefox-launcher',
-      'karma-ie-launcher',
-      'karma-opera-launcher',
-      'karma-phantomjs-launcher',
-      'karma-safari-launcher'
-    ],
-
-    // list of files to exclude
-    exclude: [
-
-    ],
-
-
-    // test results reporter to use
-    // possible values: 'dots', 'progress', 'junit'
-    reporters: ['progress'],
-
-
-    // web server port
-    port: 9876,
-
-
-    // cli runner port
-    runnerPort: 9100,
-
-
-    // enable / disable colors in the output (reporters and logs)
-    colors: true,
-
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    //logLevel: config.LOG_INFO,
-
-    // If browser does not capture in given timeout [ms], kill it
-    captureTimeout: 60000
-  });
-};

test/karma.minified.api.conf.js

@@ -0,0 +1,47 @@
+module.exports = function(config) {
+  config.set({
+    frameworks: ['qunit'],
+
+    autoWatch: false,
+
+    singleRun: true,
+
+    files: [
+      '../test/karma-qunit-shim.js',
+      '../node_modules/sinon/pkg/sinon.js',
+      '../build/files/minified.video.js',
+      '../test/unit/test-helpers.js',
+      '../test/unit/api.js'
+    ],
+
+    plugins: [
+      'karma-qunit',
+      'karma-chrome-launcher',
+      'karma-firefox-launcher',
+      'karma-ie-launcher',
+      'karma-opera-launcher',
+      'karma-phantomjs-launcher',
+      'karma-safari-launcher'
+    ],
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress', 'junit'
+    reporters: ['dots'],
+
+    // web server port
+    port: 9876,
+
+    // cli runner port
+    runnerPort: 9100,
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+    // If browser does not capture in given timeout [ms], kill it
+    captureTimeout: 60000
+  });
+};

test/karma.minified.conf.js

@@ -0,0 +1,45 @@
+module.exports = function(config) {
+  config.set({
+    frameworks: ['qunit'],
+
+    autoWatch: false,
+
+    singleRun: true,
+
+    files: [
+      '../test/karma-qunit-shim.js',
+      '../node_modules/sinon/pkg/sinon.js',
+      '../build/files/test.minified.video.js'
+    ],
+
+    plugins: [
+      'karma-qunit',
+      'karma-chrome-launcher',
+      'karma-firefox-launcher',
+      'karma-ie-launcher',
+      'karma-opera-launcher',
+      'karma-phantomjs-launcher',
+      'karma-safari-launcher'
+    ],
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress', 'junit'
+    reporters: ['dots'],
+
+    // web server port
+    port: 9876,
+
+    // cli runner port
+    runnerPort: 9100,
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+    // If browser does not capture in given timeout [ms], kill it
+    captureTimeout: 60000
+  });
+};

test/unit/media.html5.js

@@ -1,4 +1,31 @@
-module('HTML5');
+var player, tech, el;
+
+module('HTML5', {
+  'setup': function() {
+
+    el = document.createElement('div');
+    el.innerHTML = '<div />';
+
+    player = {
+      id: function(){ return 'id'; },
+      el: function(){ return el; },
+      options_: {},
+      options: function(){ return {}; },
+      controls: function(){ return false; },
+      usingNativeControls: function(){ return false; },
+      on: function(){ return this; },
+      off: function() { return this; },
+      ready: function(){}
+    };
+    tech = new vjs.Html5(player, {});
+  },
+  'teardown': function() {
+    tech.dispose();
+    el = null;
+    player = null;
+    tech = null;
+  }
+});
 
 test('should detect whether the volume can be changed', function(){
   var testVid, ConstVolumeVideo;
@@ -18,27 +45,24 @@ test('should detect whether the volume can be changed', function(){
 });
 
 test('should re-link the player if the tech is moved', function(){
-  var player, tech, el;
-  el = document.createElement('div');
-  el.innerHTML = '<div />';
-
-  player = {
-    id: function(){ return 'id'; },
-    el: function(){ return el; },
-    options_: {},
-    options: function(){ return {}; },
-    controls: function(){ return false; },
-    usingNativeControls: function(){ return false; },
-    on: function(){ return this; },
-    ready: function(){}
-  };
-  tech = new vjs.Html5(player, {});
   vjs.Html5.movingMediaElementInDOM = false;
   tech.createEl();
 
   strictEqual(player, tech.el()['player']);
 });
 
+test('test playbackRate', function() {
+  var playbackRate;
+
+  tech.createEl();
+
+  tech.el().playbackRate = 1.25;
+  strictEqual(tech.playbackRate(), 1.25);
+
+  tech['setPlaybackRate'](0.75);
+  strictEqual(tech.playbackRate(), 0.75);
+});
+
 test('patchCanPlayType patches canplaytype with our function, conditionally', function() {
   // the patch runs automatically so we need to first unpatch
   vjs.Html5.unpatchCanPlayType();
@@ -92,30 +116,3 @@ test('should return a maybe for mp4 on OLD ANDROID', function() {
   vjs.IS_OLD_ANDROID = isOldAndroid;
   vjs.Html5.unpatchCanPlayType();
 });
-
-test('test playbackRate', function() {
-  var el, player, playbackRate, tech;
-
-  el = document.createElement('div');
-  el.innerHTML = '<div />';
-
-  player = {
-    id: function(){ return 'id'; },
-    el: function(){ return el; },
-    options_: {},
-    options: function(){ return {}; },
-    controls: function(){ return false; },
-    usingNativeControls: function(){ return false; },
-    on: function(){ return this; },
-    ready: function(){}
-  };
-
-  tech = new vjs.Html5(player, {});
-  tech.createEl();
-
-  tech.el_.playbackRate = 1.25;
-  strictEqual(tech.playbackRate(), 1.25);
-
-  tech['setPlaybackRate'](0.75);
-  strictEqual(tech.playbackRate(), 0.75);
-});