- Windows 8
- Visual Studio 2012
Once you’ve added the QUnit-Metro interface you’re ready to get started writing tests. But before writing a test take a look at the additional files that the QUnit-Metro Nuget Package adds to the project.
In the screenshot (click for a full size image), I’ve pointed in a clockwise order:
- The package is added and listed in the packages file now for Nuget.
- There are now three CSS files added for QUnit. Two are Metro specific, which gives a more Metro look to the results of the tests.
- The qunitmetro.js file is the testing framework.
With this collateral added we can setup a test within the default.html page of the project. First add the following code so that your default.html file looks like this:
<meta charset="utf-8" />
<!– These files are included when the project is generated, I don’t really know where they are… –>
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<link href="/css/default.css" rel="stylesheet" />
<link href="/css/qunitmetro-light.css" rel="stylesheet" />
<p>Content goes here</p>
<!– This is for testing only. It goes away when application is ready to ship. –>
The Microsoft.WinJS.1.0.RC libraries are included by default, which I’m assuming when I get fully upgraded to the released version of Windows 8 and Visual Studio 2012 that this might just read Microsoft.WinJS.1.0. The section of scripts and links below that are the added QUnit-Metro files. I included the qunitmetro-light.css file for metro style test results.
In the body of the page the div with the id of qunit…
is added where the test results will display. That’s how simple it actually is. To add actual tests, I’ve added a default_tests.js file to the js directory. I then added a simple test to the file that I’ve shown below.
ok(1 == "1", "Passed!");
Run the application and you’ll find the following result displayed in your application.
This is one place where an odd thing seems to be occurring (if you have any idea what the problem is, leave a comment, and I’ll do the same when I get the issues resolved). The test just keeps reporting “Running…” until you click on Readingz, noglobals, or somewhere else on the screen in that area to make an action occur. When I click on Readingz the test runs successfully like it should.
What’s up with that? It’s a pretty odd action.
Another issue that I ran into, which was a user error issue on my behalf, was I swapped around the three script files so the qunit-metro file loaded last. I actually stumbled and posted the issue on Stackoverflow here.