Lesson 2: Writing, testing, and debugging JavaScript CHAPTER 3 97
<!--QUnit-Metro references-->
<link rel="stylesheet" type="text/css" href="css/qunitmetro.css" />
<link rel="stylesheet" type="text/css" href="css/qunitmetro-dark.css" />
<script type="text/javascript" src="js/qunitmetro.js"></script></head>
<body>
<h1>Tests</h1>
<div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options=""></div>
</body>
</html>
The QUnit-Metro setup is done, but in this file, you still need to add a reference to the test
code file. Your code and your tests should be in separate files. You already have a reference
to the default.js file, so you will be adding one more reference. Navigating to Debug and
choosing Start Debugging displays the default.html file. Right-click the screen to display the
application bar at the bottom and click Run Tests. The QUnit summary screen is displayed, as
shown in Figure 3-9.FIGURE 3-9 he QUnit-Metro summary screen showing no tests runTThis screen is showing that no tests have passed and no tests have failed because you have
no tests yet. Now, add a Hello World test to the application.
A tests.js file must be added to the js folder by right-clicking the js folder and navigating to
Add | New Item | JavaScript File. Name the file tests.js and click OK.
Next, a reference to this file must be added to the default.html file. With the default.html
file open, drag the tests.js file out to the source of the default.html file and drop the file right
after the last ending script tag (</script>). Your results should look like the following, in which
the inserted line is bold: