Creating a QUnit Test Project in Visual Studio 2010

February 20, 2013, 2:55 pm by Rhyous

You may want to Unit Test your JavaScript code and one library to do this with is QUnit.

QUnit is based on the idea of opening a web page to run your JavaScript tests. So here is how I create a new QUnit project in Visual Studio.

This article assumes that you have the following installed already:

  • Visual Studio 2010 or later
  • The NuGet Add-in for Visual Studio

Step 1 – Create a Visual Studio Project

  1. Open Visual Studio.
  2. Go to File | New | Project.
  3. Select ASP.NET Empty Web Application.
  4. Give the project a name:
    Note: For this walk-thru, I named mine QUnitExample
  5. Click OK.

Step 2 – Import QUnit

Method 1 – Using NuGet

This step requires internet access.

  1. Right-click on your Project and choose Manage NuGet Packages.
  2. Search for QUnit and locate QUnit for ASP.NET MVC.
  3. Click Install next to QUnit for ASP.NET MVC.
  4. Click Close.

You should now see a folder called Content with a QUnit.css file and a folder called Scripts with a QUnit.js file.

Note: The NuGet package had old files, so I had to update them manually following Method 2.

Method 2 – Just downloading the files

If the NuGet package is not up to date, you may want to download the files manually. Follow the steps above to get QUnit through NuGet and if it doesn’t work, download the latest files from the QUnit web site and replace the ones NuGet added to your project with the latest ones.

Step 3 – Create an HTML file to display test results

  1. Right-click on the project and Choose Add | New Item.
  2. Find and choose HTML Page.
  3. Give the page a name.
    Note: I named mine QUnitTestResults.htm.
  4. Open the QUnitTestResults.htm file for editing.
  5. I made the DOCTYPE tag simpler in line 1:
  6. Enter something in the Title: Line 4.
    Note: I called mine QUnit Test Results.
  7. Add a Link to the qunity.css file: Line 5.
  8. Add a script in the body that calls the qunit.js file: Line 8.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Test Results</title>
  <link rel="stylesheet" href="/Content/qunit.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="/Scripts/qunit.js"></script>
  <script src="/Scripts/tests.js"></script>
</body>
</html>

Step 4 – Create your first QUnit Test

  1. Right-click on the Project and choose Add | New Folder.
  2. Rename the folder to TestScripts.
    Note: I like to keep the test scripts separate from the other scripts.
  3. Right-click on the TestScripts folder and Choose Add | New Item.
  4. Find and choose JScript File.
  5. Give the JavaScript file a name.
    I named mine ExampleTests.js.
  6. Open the ExampleTests.js file for editing.
  7. Add a test method to the ExampleTests.js file.
test("hello test", function () {
    ok(1 == "1", "Passed!");
});

Note: This test is straight from the QUnit home page.

Step 5 – Add the Tests to your HTML file

  1. Open the QUnitTestResults.htm file for editing.
  2. Add a script in the body that calls the ExampleTests.js file: Line 9.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Test Results</title>
  <link rel="stylesheet" href="/Content/qunit.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="/Scripts/qunit.js"></script>
  <script src="/Scripts/tests.js"></script>
  <script src="/TestScripts/ExampleTests.js"></script>
</body>
</html>

Step 6 – Run the tests

  1. Right-click on the QUnitExample project and choose Set as StartUp Project.
  2. Right-click on QUnitTestResults.htm and choose Set As Start Page.
  3. Click Debug | Start Debugging.

Step 7 – Start testing your JavaScript files

Now you probably want to recreate this project in as an additional project to your production solution (if you haven’t done this already).

It is time to start testing your JavaScript file. If you add the script to your project as a link, then you don’t have to maintain two copies of it.

  1. Right-click on the Scripts folder and choose Add | Existing Item.
  2. Browse to the JavaScript file that you want to test and select it but don’t add it yet.
  3. Click the down arrow next to Add and choose Add as link.
  4. Right-click on the TestScripts folder and Choose Add | New Item.
  5. Find and choose JScript File.
    Note: My file is called MySample.js.
  6. Give the JavaScript file a name.
    Note: I named mine MySampleTests.js.
  7. Open the ExampleTests.js file for editing.
  8. Start adding tests.

Conclusion

This method allows for rudimentary testing of your JavaScript. However, it does not integrate with Visual Studio, or Code Coverage, or Gated Check-ins. So there is a lot more work that needs to be done.

Category: JavaScript, Unit Tests  |  Comment (RSS)  |  Trackback

One Comment

  1. chrisseroka says:
    July 4, 2013 at 3:09 pm

    Awesome summary, thanks

    Reply to this comment

Leave a Reply

How to post code in comments?