This is a message.

Unit testing with Fireunit

Learn how to use Fireunit to test your Flowplayer scripts

  • 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

standalone demo

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.

The Test

var player = $f("player",
"http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
 
debug: true,
 
clip: {
 
baseUrl: "http://stream.flowplayer.org",
url: 'KimAronson-TwentySeconds1318.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.18.swf", {
debug: true,
 
playlist: [{
url: 'http://stream.flowplayer.org/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://stream.flowplayer.org/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");
});
 

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",
"flowplayer.content-3.2.9.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");
});
 
});
});
 
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");
});
});
 
});
 
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");
});

JavaScript