Quality Assurance Testing with TestSwarm and QUnit

Kaltura’s HTML5 Media Library is continuously tested upon each commit to the svn repository.
Testing is performed on Internet Explorer 7 through 9, Firefox 3.6 and the latest Firefox, the latest Google Chrome, Android 2.x, 3.x, and 4.x, the latest Safari, latest iPhone, and the latest iPad running on a private virtualization cluster.
Each revision to the library triggers a job submission to our TestSwarm server. Test results can be viewed at http://html5video.org/testswarm/user/html5video .

Please visit the html5video.org wiki for the most recent version of this document.

Running Tests

TestSwarm is a simple php application that anyone may visit with their browser and their browser will be added to the testing swarm, running any tests in the testing queue.
To add your browser to the testswarm, visit http://html5video.org/testswarm/run/html5video .
Once your browser loads the page, TestSwarm will continually run tests in an iFrame testrunner until the browser is closed.

Interpreting Test Results

The Kaltura HTML5 Video Library’s test results are stored at http://html5video.org/testswarm/user/html5video/ where testswarm provides a way to drill into test results and view errors and passes from test runs.
To open a specific test job, click on the Name of the job:
And this will open the job report for this commit.
Clicking on the svn revision number will take you to the ChiliProject repository browser where you may view the difference to the library that this revision contains. Clicking on the Name of a test will run the test in your browser, and clicking on a green, red, or black square will take you to the result page for specific browser and test combinations:

Writing Tests

Testing with QUnit

QUnit is a testing framework for JavaScript that jQuery uses to perform regression and unit testing on the jQuery library.
From the QUnit website:

QUnit is a powerful, easy-to-use, JavaScript test suite. It’s used by the jQuery project to test its code and plugins but is capable of testing any generic JavaScript code (and even capable of testing JavaScript code on the server-side).

QUnit runs any JavaScript and adds assertions that will pass or fail according to weather the code being tested operates as expected.
The following is a simple example with two tests.
test( "a basic test example", function() {
        ok( true, "this test is fine" );
        var value = "hello";
        equal( value, "hello", "We expect value to be hello" );
})
Here is the full source code for a web page that includes the previous tests and the appropriate javascript includes:
<!DOCTYPE html>
<html>
<head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
        <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
        <script>
                $(document).ready(function(){
                        test("a basic test example", function() {
                                ok( true, "this test is fine" );
                                var value = "hello";
                                equal( value, "hello", "We expect value to be hello" );
                        });
                });
        </script>
</head>
<body>
        <h1 id="qunit-header">QUnit example</h1>
        <h2 id="qunit-banner"></h2>
        <div id="qunit-testrunner-toolbar"></div>
        <h2 id="qunit-userAgent"></h2>
        <ol id="qunit-tests"></ol>
        <div id="qunit-fixture">test markup, will be hidden</div>
</body>
</html>
Running this test will result in the following:

Automatic Test Selection

Each plugin that is stored in the svn repository lives in its own folder within the “modules” folder like http://www.kaltura.org/kalorg/html5video/trunk/mwEmbed/modules/KalturaSupport
Within the plugin folder there is a folder called tests that contains html files. If the file ends with .qunit.html then that file will be added to the testing queue upon each update to the svn repository.

Kaltura QUnit Implementation

Kaltura has built upon QUnit to test its HTML5 video library and made the creation of tests very straightforward. Merely include the qunit-bootstrap.js file and the mwEmbedLoader.php in your demonstration or testing page, and then add your tests in a JavaScript <script> block in a function called jsKalturaPlayerTest. The final step is adding the qunit-kaltura-bootstrap.js below any mw.setConfig and jsCallbackReady directives necessary to setup players and plugins for testing.
<script type="text/javascript" src="../../../tests/qunit/qunit-bootstrap.js"></script>
<script type="text/javascript" src="../../../mwEmbedLoader.php?debug=true"></script>
<script type="text/javascript">	
function jsKalturaPlayerTest( videoId ){
 
	var $iframe = $('#' + videoId + '_ifp').contents();
	var iframeContext = window.frames['kaltura_player_ifp'];
 
	test( "Iframe in DOM", function() {
		ok( $('#' + videoId + '_ifp').length , 'iframe found' );
		equal( typeof iframeContext, 'object', "iframe JavaScript context available" );
	});
}
</script>
<!-- qunit-kaltura must come after qunit-bootstrap.js and after mwEmbedLoader.php and after any jsCallbackReady stuff-->
<script type="text/javascript" src="resources/qunit-kaltura-bootstrap.js"></script>
Please view the source for the Basic Player Test and the tests folder for further examples.
This entry was posted in Uncategorized. Bookmark the permalink.

One Response to Quality Assurance Testing with TestSwarm and QUnit

  1. Pingback: HTML5 Gravy Train; All over your Kaltura Players | Kaltura Community Blog

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">