JustCode Delivers Again! Painless Unit Testing in WinJS Applications

One of the biggest complaints I hear as I travel around the world promoting Modern Application Development with WinJS is the lack of support for WinJS unit testing. Those that follow this blog know that I am a huge proponent of unit testing, and some have even commented that I’ve been relatively dark on the subject when I write about WinJS development.

Well, I am proud to announce that the wait is over! With the latest release of JustCode, unit testing is a breeze!

Background

My involvement began when I sat down with my good friend and fellow Teleriker Jeff Fritz at the MVP Summit to talk about QUnitMetro. QUnitMetro is a fork of QUnit that was modified to specifically support Windows 8 Store/Modern applications. (NOTE: Jeff created the fork when we were still calling Windows 8 Modern Applications “Metro”, and it’s really not worth renaming from an open source point of view).

We hacked up some quick unit tests, and the fork worked really well. But I wanted more. I wanted to be able to specify which tests to run, get a nice user interface displaying the results, rerun failed tests, etc. Essentially I wanted everything that I currently have when I add unit tests to managed code.

Joining Forces with the JustCode and Windows 8 Teams

One of the teams that I support as an Evangelist at Telerik is JustCode. I’ve had a long relationship with them, and we work very well together. They have been extremely responsive in the past to my requests, so I of course immediately reached out to them to see if we could incorporate JustCode and QUnitMetro together. Turns out they were already working on a solution.

Another team that I support is the Windows 8 HTML/WinJS team, so I reached out to them as well. Turns out they too have a solution in place that is part of the Continuous Integration builds for the Windows 8 control suite.

The next logical step was to get everyone together in a room and work out some synergies. That also turned out to be pretty easy, as they were already working together! And here I thought I was bringing a whole new paradigm. Our teams are just that on top of everything!

The Result

What came out of those meetings and collaborations is pretty awesome. JustCode has added the ability to run WinJS tests using QUnitMetro interactively through the JustCode Unit Test window. Everything that I had asked for!

Additionally, it was architected such that as additional JavaScript unit testing frameworks start to support WinJS unit testing, they will be accessible to the JustCode Unit Test Windows as well.

Getting Started

To get started writing WinJS unit tests, first create a JavaScript Windows Store application (go figure ). I use my template that I created for WinJS applications as documented here. Add QUnitMetro to your project (downloaded from www.qunitmetro.org), and reference it as a script in your default.js file as shown in Listing 1.

NOTE: You do not have to add qunitmetro.css to your project for the JustCode Test Runner, but if you want to run tests as documented on the QUnitMetro site, you will need to add the .css file as well.

<!-- WinJSLayoutNavigation1 references -->

<linkhref="/css/default.css"rel="stylesheet"/>

<scriptsrc="js/navigation.js"></script>

<scriptsrc="/js/default.js"></script>

<scriptsrc="js/qunitmetro.js"></script>

Listing 1 – Adding qunitmetro.js to default.html

Another option is to add QUnitMetro to your project via NuGet.

Writing Your First Test

To write your first test, add a JavaScript file to your project. It doesn’t matter where. By convention, I place my general tests at the same level as my default.js, and then page specific tests next to the page.

NOTE: You can also create a separate project for your unit tests, and then add the files to be tested into your test project. Although I don’t cover that setup in this blog post, Figure 1 shows the Add Existing Item dialog with the “Add As Link” option.

Figure 1 – The Add As Link option for adding existing items

In your JavaScript file, add the code from Listing 2.

test("hello test", function () {

ok(1 == "1", "Passed!");

});

Listing 2 – First QUnit Unit Test

The first test I will add is silly, but I use it to illustrate the test runner in action. Please visit the on QUnit and QUnit Metro, please visit the respective home pages.

Running the Test

To run the test, open the JustCode Unit Test Window. You should see something similar to Figure 2.

Figure 2- Unit Test Window

NOTE: If you don’t see your test, refresh the JustCode analysis (JustCode->Analysis->Refresh Code Analysis). This is a known issue in this preview release under certain conditions, and will be resolved shortly.

When you click the arrow to run the test, you will be prompted with the following dialog (Figure 3):

Figure 3 – Add JustCode support file Dialog

This is because we didn’t add in the required QUnitMetro.JustCode.js file ourselves. This file is equivalent to a test adapter you would see in managed code. Frankly, this feature goes above and beyond what I expected from the team. Truly makes it easy to configure your project for running tests. NOTE: JustCode will also add the script tag for qunitmetro.js if you didn’t do it manually as described above.

Clicking “Ok” adds the required file to your project (in the /js directory) as well as adds the correct script tag into the default.html file. And it runs your tests! Not bad for reducing the friction of unit testing!

Summary

Although I only showed a very simple test in this post, the point is simple. JustCode significantly reduces friction and adds large scale value when it comes to WinJS unit testing (well, and in a lot of other areas as well).

All you need to do is add QUnit-Metro into your project, write some tests, and run them in the test window. Easy Peasy.

Phil Japikse

Philip Japikse is an international speaker, a Microsoft MVP, ASPInsider, INETA Community Champion, MCSD, CSM/ CSP, and a passionate member of the developer community. Phil has been working with .Net since the first betas, developing software for over 20 years, and heavily involved in the agile community since 2005. Phil also hosts the Hallway Conversations podcast (www.hallwayconversations.com) and serves as the Lead Director for the Cincinnati .Net User’s Group (http://www.cinnug.org). You can follow Phil on twitter via www.twitter.com/skimedic, or read his personal blog at www.skimedic.com/blog.

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.