Test driven development is a technique familiar to C# Developers, so much so that Visual Studio 2012 can create a unit testing project for you when you create a C# Metro app project. But for developers choosing the JavaScript and HTML path unit testing frameworks are few and far between. QUnit-Metro, a fork of the popular QUnit framework, hopes to fill this hole. I decided to test this unit testing framework and here are my findings.

Per the instructions on the QUnit-Metro website installation is pretty straight forward. You add a button to your AppBar with the following mark up:

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'runTestsAppBarCmd', label:'Run Tests', icon:'repair', section: 'global', onclick: QUnitMetro.runTests}"><button>

While this is the creator’s suggested method I found that you can use any button to initiate the tests so long as you bind the “onclick” event to QUnitMetro.runTests. Using a button on the AppBar only gives the added benefit of having the button hidden until it is needed.

The next step is to add the markup that QUnit-Metro will append its test results to:

<div id="unitTestContainer">
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<button id="closeTests">Close</button>

This works for displaying the unit test report, I found that the “Close” button didn’t actually work for me. This is when I forked the code so I could start making modifications to the framework. My version of the framework is available on GitHub, which contains a solution for the “Close” button. With my version you will need to change the markup of the “Close” button to:

<button id="closeTests" data-win-options="{ onclick: QUnitMetro.closeResults}">Close</button>

Once you have the markup added to run and display QUnit-Metro you need to include the library’s JavaScript and CSS by adding the following to the <head /> section of your HTML:

<script src="/js/qunitmetro.js"></script>
<link href="/css/qunitmetro.css" rel="stylesheet" />

The default style sheet is functional but it doesn’t really fit into the Metro UI design paradigm.

I rewrote the style sheet to make it match Microsoft’s supplied ui-dark.css. This and one to match the ui-light.css from Microsoft is in my version of QUnit-Metro on GitHub.

Now to the real purpose of a unit testing framework, the tests. Tests are written in a separate JavaScript file and including in the pages to be tested in the same manner as any JavaScript file. The QUnit-Metro site doesn’t actually mention how tests are written but it does direct you to the QUnit site stating the test use the same syntax. The QUnit site gives the following example of test syntax:

test( "hello test", function() {
ok( 1 == "1", "Passed!" );

At first I thought that this didn’t work because QUnit-Metro was not finding any tests to run. The issue turned out to not be the syntax of my test but a bug in the framework. I found and corrected the issue, adding the fix to my version of the framework.

For a young project (as of this writing the framework is less then a month old) QUnit-Metro is surprisingly useful and robust. It has several assertions and support for breaking test out into separate modules. It is a tool I look forward to seeing grow and plan on using to test my own Windows 8 HTML and JavaScript apps.

QUnit-Metro can be found at: http://qunitmetro.github.com/QUnitMetro/
And my own modifications can be found at: https://github.com/jworley/QUnitMetro

Like this post? Share it!