Tests in Javascript Metro Applications

One thing I miss in the tools and templates around HTML5/Javascript development for Windows 8 is a test strategy, or at least some encouragement in the templates to send you in that direction. There is no test runner for metro apps using Javascript in the tools today.  Internally Microsoft would have some test support, but not yet public tooling. A test runner in VS would be nice, and a strategy to run tests in CI/deploy/build process, like the Team City or Team foundation Service would be great.

To use the same frameworks as you do in other web projects and run them in your app (and not in the IDE) would give you feedback and a way to start testing you app. A good start.

Before I got into getting Qunit or Jasmine to run in my app I did some research, and I found some useful tools and samples that I thought I share in this post.

QUnit

I found a helpful project called QUnitMetro over on GitHub. The project is a fork of QUnit to work with Windows 8 development. This way you could add test for each page and run them from the app bar. Neat.

image

All you need is include qunitmetro.js and one of the css themes of your choice, and add an app bar to you app if you don´t already have that.

https://gist.github.com/3039283#file_qunitmetro+files

This will add a “Run Tests” button to your app bar. The convention is that “Run Tests” will run test in the same directory as your page is named test.js. Note that the loading of the tests is done the “navigated” event. So tests with not be loaded for the default page.

image

It’s possible to change this convention. Either only the file name on config or the whole convention in the qunitmetro.js file.

https://gist.github.com/3039283#file_qunitmetro+config
The “Run Tests” will show a modal with you tests.

image

Jasmine

In the Jasmine case I found similar approach, but not with integration through the app bar. The solution is described in a post called Testing metro apps with Jasmine with a good overview and screens, so there is no need for me to do that allover again.

Here the testrunner is in a page as seen in this sample. To use this with a similar approach as the QUnit runner wouldn´t be that far off.

Summary

You´re not alone in search for a test strategy for your Javascript metro apps.

We’ve seen two samples of getting simple tests to run in your metro application. Sure there is more features on the wish list. We´ll see what the future will hold.

Enjoy!

This Post Has 2 Comments

Leave a Reply

Close Menu