Practice exercises CHAPTER 3 123
FIGURE 3-19 he Web Calculator user interfaceT- Switch back to Visual Studio by pressing Alt+Tab. Notice that the title bar says
(Running). - Press Shift+F5 to stop debugging. Note that Shift+F5 works only when Visual Studio
has the focus. It does not work when the running application has the focus.
Exercise 2: Add the QUnit testing framework
In this exercise, you continue with the project from Exercise 1 and add the QUnit test frame-
work, which will help you with your JavaScript development for the calculator.- Open the project from Exercise 1.
If you didn’t perform Exercise 1, you can use the project located in the Exercise 2 Start
folder. - In the Solution Explorer window, add QUnit by right-clicking the WebCalculator node.
Click Manage NuGet Packages, choose Online, and type QUnit in the search box.
Install QUnit for ASP.NET MVC. - In the Solution Explorer window, add a JavaScript file for your JavaScript tests by right-
clicking the Scripts folder. Click Add and choose JavaScript File. Set name to tests.js
and click OK. - In the Solution Explorer window, add an HTML test page by right-clicking the
WebCalculator project node. Click Add and choose HTML Page. Name the page
CalculatorTests.html and click OK. - Add markup in the element of the CalculatorTests.html file that adds refer-
ences to the QUnit.css file, QUnit.js file, CalculatorLibrary.js file, and tests.js file. - To complete the QUnit framework setup, add markup in the element for the
QUnit header, banner, toolbar, user agent tests, and fixture. Your HTML source should
look like the following:
<!DOCTYPE html>