Unit testing with Fireunit Scripting - Demo 7 / 7
Introduction
The purpose of this page is to test a bunch Flowplayer features; however, it doesn't do anything useful for the end-user. This page requires three things to work:
- A Firefox 3+ browser.
- The Firebug 1.2+ web development tool, which is a Firefox Add-on.
- The Fireunit unit testing extension for Firebug. This is quite a new technology authored by John Resig (developer of the jQuery JavaScript library) and Jan Odvarko.
Below is the test video and on the right is a rough list of the tests being performed. After the video, you can see the test script being used. It's quite huge and tests quite a lot of features. Try to follow it if you want to learn more about this interesting topic.
- many different cuepoint tests
- events: onStart, onFinish, onMute/Unmute, onLoad
- basics: setVolume, update clip
- advanced: setPlaylist, replace entire player
- plugins: loadPlugin, content, controlbar, screen
- animations: animate, fadeIn, fadeTo, fadeOut
- styling with a css call
- plugin methods: get/setHtml, enable
Show this test as a standalone version.
The test
Here is the JavaScript source for the test:
var player = $f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
debug: true,
// {{{ basic functionality
clip: {
baseUrl: "http://blip.tv/file/get",
url: 'KimAronson-TwentySeconds65459.flv',
// test cuepoints given in configuration
onCuepoint: [[400, 500], function(clip, time) {
points.push(time);
// mute / unmute
if (time == 400) {
this.mute();
} else {
this.unmute();
}
}],
// test on start
onStart: function(clip) {
fireunit.ok(this.isLoaded(), "config.onStart");
this.setVolume(80);
// update current clip
this.getClip(0).update({duration: 4});
}
},
onVolume: function(level) {
fireunit.ok(level == 80, "onVolume ok");
},
onMute: function() {
fireunit.ok(this.getStatus().muted, "isMuted ok");
},
onUnmute: function() {
fireunit.ok(!this.getStatus().muted, "!isMuted ok");
},
// when clip finishes, some wild stuff is happening.
onFinish: function(clip) {
fireunit.compare(parseInt(this.getTime()), 4, "onFinish ok");
// replace the whole player with a new one
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
debug: true,
playlist: [{
url: 'http://blip.tv/file/get/KimAronson-TwentySeconds4461.flv',
duration: 3,
onStart: function(clip) {
fireunit.ok(true, "whole player replaced");
},
// when new player finishes, replace its playlist
onFinish: function() {
this.setPlaylist([{
url: 'http://blip.tv/file/get/KimAronson-TwentySeconds4461.flv',
duration: 2
}]);
}
}],
// final event: playlist was replaced.
onPlaylistReplace: function(pl) {
fireunit.compare(pl[0].duration, 2, "playlistReplace");
this.stop();
// tests are done
fireunit.testDone();
}
});
},
//}}}
onLoad: function() {
// test onLoad
fireunit.ok(this.isLoaded(), "config.onLoad");
// array argument for onCuepoint
this.onCuepoint([200, 300], function(clip, time) {
points.push(time);
});
// test onUpdate
this.getCommonClip().onUpdate(function(clip) {
fireunit.ok(clip.duration == 4, "onUpdate ok");
});
// {{{ load content plugin
this.onCuepoint([{time: 600, test: 3.0}], function(clip, point) {
// small onCuepoint test with object argument
points.push(point.time);
fireunit.ok(point.test == 3.0, "cuepoint property");
this.loadPlugin("content",
"http://releases.flowplayer.org/swf/flowplayer.content-3.2.0.swf", function() {
fireunit.ok(true, "content plugin loaded");
// test setHtml/getHtml
fireunit.ok(typeof this.setHtml == 'function', "setHtml exposed");
this.setHtml("test content");
fireunit.ok(this.getHtml() == 'test content', "setHtml/getHtml ok");
// css method
this.css({
bottom:30,
height:30,
left:10,
width:200,
backgroundColor: '#123456'
});
fireunit.ok(this.bottom == 30 && this.width == 200, "content css ok");
// animation
this.animate({top:20, right:10, width:250, height:100}, 1000, function() {
fireunit.ok(
this.top == 20 && this.height == 100, "content animation ok"
);
});
// fadeTo
$f().getPlugin("content").fadeTo(0.7, 600, function() {
fireunit.ok(this.opacity == 0.7, "content fadeTo ok");
});
});
});
//}}}
// {{{ controlbar
this.onCuepoint(1000, function(clip, time) {
points.push(time);
var c = this.getControls();
// enable method. cannot get test results
c.enable({fullscreen:false, stop:true});
// css method
c.css({top:'10%', height:30, width:'80%', backgroundColor: '#123456'});
fireunit.ok(c.height == 30 && c.width == '80%', "controls css ok");
// animation
c.animate({bottom:0, width:'100%', left:0}, 2000, function() {
fireunit.ok(this.bottom == 0 && this.left == 0, "controlbar animation ok");
});
// fadeOut / fadeIn
$f().getPlugin("controls").fadeOut(1000, function() {
fireunit.ok(this.opacity == 0, "controls fadeOut ok");
this.fadeIn(1000, function() {
fireunit.ok(this.opacity == 1, "controls fadeIn ok");
});
});
});
//}}}
//{{{ screen
this.onCuepoint(2000, function(clip, time) {
points.push(time);
var c = this.getScreen();
// css method
c.css({top:'10%', height:'50%', width:'80%'});
fireunit.ok(c.height == '50%' && c.width == '80%', "screen css ok");
// animation
c.animate({top:0, height:'90%', left:20}, 2000, function() {
fireunit.ok(this.top == 0 && this.left == 20, "screen animation ok");
});
// fadeOut / fadeIn
c.fadeOut(1000, function() {
fireunit.ok(this.opacity == 0, "screen fadeOut ok");
this.fadeIn(1000, function() {
fireunit.ok(this.opacity == 1, "screen fadeIn ok");
});
});
});
//}}}
// cuepoints
this.onCuepoint(3500, function(clip, time) {
points.push(3500);
fireunit.compare(
"" + points,
"" + [100, 200, 300, 400, 500, 600, 1000, 2000, 3500],
"cuepoints ok"
);
});
}
});
// additional onLoad listeners
player.onLoad(function() {
fireunit.ok(this.isLoaded(), "player.onLoad");
this.onCuepoint(100, function(clip, time) {
points.push(time);
});
// custom on start
player.onStart(function() {
fireunit.ok(this.isLoaded(), "player.onStart");
});
});
player.onLoad(function() {
fireunit.ok(this.isLoaded(), "player.onLoad2");
});