web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-10-31 00:08:01 +02:00
Code Releases Activity

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

Browse Source 
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.
This commit is contained in:
Steve Heffernan
2013-04-12 16:51:04 -07:00
parent 2138d4f2a0
commit 3b48be921e
12 changed files with 2191 additions and 1488 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
.bunyipconfig.js.example Normal file
View File

@@ -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": "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;

1
.gitignore vendored
View File

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

37
browsers.json Normal file
View File

@@ -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"
}
]

16
src/js/lib.js
View File

@@ -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;
};

2
src/js/player.js
View File

@@ -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;
}

32
test/index.html
View File

@@ -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 @@
<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>

194
test/qunit/qunit/qunit.css
View File

@@ -1,17 +1,17 @@
/**
* QUnit - A JavaScript Unit Testing Framework
* QUnit v1.11.0 - A JavaScript Unit Testing Framework
*
* http://docs.jquery.com/QUnit
* http://qunitjs.com
*
* Copyright (c) 2011 John Resig, Jörn Zaefferer
* Dual licensed under the MIT (MIT-LICENSE.txt)
* or GPL (GPL-LICENSE.txt) licenses.
* Copyright 2012 jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
*/
/** Font Family and Sizes */
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
}
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
@@ -20,134 +20,148 @@
/** Resets */
#qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult {
margin: 0;
padding: 0;
#qunit-tests, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
margin: 0;
padding: 0;
}
/** Header */
#qunit-header {
padding: 0.5em 0 0.5em 1em;
padding: 0.5em 0 0.5em 1em;
color: #8699a4;
background-color: #0d3349;
color: #8699a4;
background-color: #0d3349;
font-size: 1.5em;
line-height: 1em;
font-weight: normal;
font-size: 1.5em;
line-height: 1em;
font-weight: normal;
border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
-webkit-border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
}
#qunit-header a {
text-decoration: none;
color: #c2ccd1;
text-decoration: none;
color: #c2ccd1;
}
#qunit-header a:hover,
#qunit-header a:focus {
color: #fff;
color: #fff;
}
#qunit-testrunner-toolbar label {
display: inline-block;
padding: 0 .5em 0 .1em;
}
#qunit-banner {
height: 5px;
height: 5px;
}
#qunit-testrunner-toolbar {
padding: 0.5em 0 0.5em 2em;
color: #5E740B;
background-color: #eee;
padding: 0.5em 0 0.5em 2em;
color: #5E740B;
background-color: #eee;
overflow: hidden;
}
#qunit-userAgent {
padding: 0.5em 0 0.5em 2.5em;
background-color: #2b81af;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
padding: 0.5em 0 0.5em 2.5em;
background-color: #2b81af;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
}
#qunit-modulefilter-container {
float: right;
}
/** Tests: Pass/Fail */
#qunit-tests {
list-style-position: inside;
list-style-position: inside;
}
#qunit-tests li {
padding: 0.4em 0.5em 0.4em 2.5em;
border-bottom: 1px solid #fff;
list-style-position: inside;
padding: 0.4em 0.5em 0.4em 2.5em;
border-bottom: 1px solid #fff;
list-style-position: inside;
}
#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
display: none;
display: none;
}
#qunit-tests li strong {
cursor: pointer;
cursor: pointer;
}
#qunit-tests li a {
padding: 0.5em;
color: #c2ccd1;
text-decoration: none;
padding: 0.5em;
color: #c2ccd1;
text-decoration: none;
}
#qunit-tests li a:hover,
#qunit-tests li a:focus {
color: #000;
color: #000;
}
#qunit-tests ol {
margin-top: 0.5em;
padding: 0.5em;
#qunit-tests li .runtime {
float: right;
font-size: smaller;
}
background-color: #fff;
.qunit-assert-list {
margin-top: 0.5em;
padding: 0.5em;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background-color: #fff;
box-shadow: inset 0px 2px 13px #999;
-moz-box-shadow: inset 0px 2px 13px #999;
-webkit-box-shadow: inset 0px 2px 13px #999;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.qunit-collapsed {
display: none;
}
#qunit-tests table {
border-collapse: collapse;
margin-top: .2em;
border-collapse: collapse;
margin-top: .2em;
}
#qunit-tests th {
text-align: right;
vertical-align: top;
padding: 0 .5em 0 0;
text-align: right;
vertical-align: top;
padding: 0 .5em 0 0;
}
#qunit-tests td {
vertical-align: top;
vertical-align: top;
}
#qunit-tests pre {
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
}
#qunit-tests del {
background-color: #e0f2be;
color: #374e0c;
text-decoration: none;
background-color: #e0f2be;
color: #374e0c;
text-decoration: none;
}
#qunit-tests ins {
background-color: #ffcaca;
color: #500;
text-decoration: none;
background-color: #ffcaca;
color: #500;
text-decoration: none;
}
/*** Test Counts */
@@ -157,19 +171,18 @@
#qunit-tests b.failed { color: #710909; }
#qunit-tests li li {
margin: 0.5em;
padding: 0.4em 0.5em 0.4em 0.5em;
background-color: #fff;
border-bottom: none;
list-style-position: inside;
padding: 5px;
background-color: #fff;
border-bottom: none;
list-style-position: inside;
}
/*** Passing Styles */
#qunit-tests li li.pass {
color: #5E740B;
background-color: #fff;
border-left: 26px solid #C6E746;
color: #3c510c;
background-color: #fff;
border-left: 10px solid #C6E746;
}
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
@@ -183,17 +196,17 @@
/*** Failing Styles */
#qunit-tests li li.fail {
color: #710909;
background-color: #fff;
border-left: 26px solid #EE5757;
white-space: pre;
color: #710909;
background-color: #fff;
border-left: 10px solid #EE5757;
white-space: pre;
}
#qunit-tests > li:last-child {
border-radius: 0 0 15px 15px;
-moz-border-radius: 0 0 15px 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
@@ -209,18 +222,23 @@
/** Result */
#qunit-testresult {
padding: 0.5em 0.5em 0.5em 2.5em;
padding: 0.5em 0.5em 0.5em 2.5em;
color: #2b81af;
background-color: #D2E0E6;
color: #2b81af;
background-color: #D2E0E6;
border-bottom: 1px solid white;
border-bottom: 1px solid white;
}
#qunit-testresult .module-name {
font-weight: bold;
}
/** Fixture */
#qunit-fixture {
position: absolute;
top: -10000px;
left: -10000px;
position: absolute;
top: -10000px;
left: -10000px;
width: 1000px;
height: 1000px;
}

3340
test/qunit/qunit/qunit.js
View File

File diff suppressed because it is too large Load Diff

3
test/unit/component.js
View File

@@ -179,7 +179,8 @@ test('should change the width and height of a component', function(){
comp.height('123px');
ok(comp.width() === 500, 'percent values working');
ok(vjs.getComputedStyleValue(el, 'width') === comp.width() + 'px', 'matches computed style');
var compStyle = vjs.getComputedDimension(el, 'width');
ok(compStyle === comp.width() + 'px', 'matches computed style');
ok(comp.height() === 123, 'px values working');
comp.width(321);

19
test/unit/controls.js vendored
View File

@@ -1,6 +1,8 @@
module('Controls');
test('should hide volume control if it\'s not supported', function(){
expect(2);
var noop, player, volumeControl, muteToggle;
noop = function(){};
player = {
@@ -11,7 +13,8 @@ test('should hide volume control if it\'s not supported', function(){
features: {
volumeControl: false
}
}
},
volume: function(){}
};
volumeControl = new vjs.VolumeControl(player);
@@ -22,7 +25,7 @@ test('should hide volume control if it\'s not supported', function(){
});
test('should test and toggle volume control on `loadstart`', function(){
var noop, listeners, player, volumeControl, muteToggle;
var noop, listeners, player, volumeControl, muteToggle, i;
noop = function(){};
listeners = [];
player = {
@@ -53,9 +56,9 @@ test('should test and toggle volume control on `loadstart`', function(){
'muteToggle is hidden initially');
player.tech.features.volumeControl = false;
listeners.forEach(function(listener) {
listener();
});
for (i = 0; i < listeners.length; i++) {
listeners[i]();
}
ok(volumeControl.el().className.indexOf('vjs-hidden') >= 0,
'volumeControl does not hide itself');
@@ -63,9 +66,9 @@ test('should test and toggle volume control on `loadstart`', function(){
'muteToggle does not hide itself');
player.tech.features.volumeControl = true;
listeners.forEach(function(listener) {
listener();
});
for (i = 0; i < listeners.length; i++) {
listeners[i]();
}
ok(volumeControl.el().className.indexOf('vjs-hidden') < 0,
'volumeControl does not show itself');

11
test/unit/lib.js
View File

@@ -94,8 +94,6 @@ test('should get and remove data from an element', function(){
});
test('should read tag attributes from elements, including HTML5 in all browsers', function(){
var container = document.createElement('div');
var tags = '<video id="vid1" controls autoplay loop muted preload="none" src="http://google.com" poster="http://www2.videojs.com/img/video-js-html5-video-player.png" data-test="asdf" data-empty-string=""></video>';
tags += '<video id="vid2">';
// Not putting source and track inside video element because
@@ -103,8 +101,9 @@ test('should read tag attributes from elements, including HTML5 in all browsers'
// Still may not work in oldIE.
tags += '<source id="source" src="http://google.com" type="video/mp4" media="fdsa" title="test" >';
tags += '<track id="track" default src="http://google.com" kind="captions" srclang="en" label="testlabel" title="test" >';
container.innerHTML += tags;
document.getElementById('qunit-fixture').appendChild(container);
tags += '</video>';
document.getElementById('qunit-fixture').innerHTML += tags;
var vid1Vals = vjs.getAttributeValues(document.getElementById('vid1'));
var vid2Vals = vjs.getAttributeValues(document.getElementById('vid2'));
@@ -131,8 +130,8 @@ test('should get the right style values for an element', function(){
el.style.height = '100%';
el.style.width = '123px';
ok(vjs.getComputedStyleValue(el, 'height') === '1000px');
ok(vjs.getComputedStyleValue(el, 'width') === '123px');
ok(vjs.getComputedDimension(el, 'height') === '1000px');
ok(vjs.getComputedDimension(el, 'width') === '123px');
});
test('should insert an element first in another', function(){

3
test/unit/player.js
View File

@@ -124,7 +124,6 @@ test('should get tag, source, and track settings', function(){
ok(player.el().className.indexOf('video-js') !== -1, 'transferred class from tag to player div');
ok(player.el().id === 'example_1', 'transferred id from tag to player div');
ok(tag['player'] === player, 'player referenceable on original tag');
ok(vjs.players[player.id()] === player, 'player referenceable from global list');
ok(tag.id !== player.id, 'tag ID no longer is the same as player ID');
ok(tag.className !== player.el().className, 'tag classname updated');
@@ -194,6 +193,8 @@ test('should transfer the poster attribute unmodified', function(){
});
equal(player.tech.el().poster, poster, 'the poster attribute should not be removed');
player.dispose();
});
test('should load a media controller', function(){