98 CHAPTER 3 Getting started with JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App2</title><!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script><!-- App2 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script><!--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 src="js/qunitmetro.js"></script>
<script src="js/tests.js"></script></head>
<body>
<h1>Tests</h1>
<div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options=""></div>
</body>
</html>
Now you can write the first test. When using TDD, always write the test first, run it to see
the test fail, and then add code to make the test pass. In the tests.js file, add the following test
to see whether a greeting variable contains Hello World:
test("A Hello World Test", function () {
equal(greeting, "Hello World", "Expect greeting of Hello World");
});Here is an overview of what’s happening with this code. The code is calling a test function,
which is included in the QUnit source code and requires two parameters. The first param-
eter is the name of the test, which is A Hello World Test. The name of the test is displayed in
the QUnit summary screen when you run the tests. The second parameter is an anonymous
function, in which you add any code to execute and then perform assertions to verify that the
test is successful. In this anonymous function, the equal function is called to see whether the
greeting variable contains Hello World. The equal function takes three parameters. The first
parameter is the actual value, in this case, the greeting variable. The second parameter is the
expected value, Hello World. The third parameter is a message you want to display, in this
case, Expect Greeting Of Hello World.
Because you have not created a greeting variable, this test should fail. When you run the
tests (click Debug, choose Start Debugging, right-click the screen, and choose Run Tests), you
should see the failed test with a red indicator. Figure 3-10 shows the QUnit summary screen
with the failed test.