As we showed in the Jasmine blog post JustCode provides seamless integration of JavaScript unit testing inside Visual Studio. JustCode supports two of the most widely used JavaScript unit testing frameworks – Jasmine and QUnit, allowing you to leverage the one that better fits your needs or both.

Today’s post covers the support of QUnit JavaScript unit tests in JustCode.

JQuery’s QUnit testing framework

QUnit is a powerful, easy-to-use, JavaScript test suite. It's used by the jQuery project to test its code and plugins but is capable of testing any generic JavaScript code. In order to find out more about the framework and its capabilities please visit QUnit official page.

To start using QUnit tests in JustCode all you need to do is add a qunit.js file in your solution.

JustCode will help you by analyzing the whole solution, find all the QUnit tests and show them in the Unit Test Window. QUnit tests and async tests are supported, as well as grouping them into QUnit modules:

As shown here all tests in the solution are dispalyed and can be grouped, filtered, executed in combination with other tests from well known testing frameworks like NUnit, MbUnit etc.

JavaScript tests run easily with JustCode

QUnit requires special HTML file to be prepared in order for the test to run correctly. JustCode removes this manual process, but supports custom HTML pages as well.

If you want to run the tests just hit Run and JustCode will auto-generate all required artifacts to run QUnit tests - a test HTML page with included qunit.js, qunit.css and all the required JQuery files. The tests will execute in an Internet Explorer browser and JustCode will show you the result for each test.

Notice that for each test JustCode shows you all the different output messages.

If you have chosen to show the browser window from JustCode->Options->Unit Testing settings, you will see the test results in the browser as well:

References

As shown in the Jasmine blog post you can include additional JavaScript files in your test files using Visual Studio reference tags (“/// <reference path”). JustCode will analyze those references and will include them in the auto-generated test page. You can use this to replace any QUnit file required for the tests like qunit.js and any JQuery file. This saves you from generating custom html page when you want to use newer version of QUnit or JQuery in your tests.

Custom HTML test page

You can use a custom HTML test page for a specific file if you need more customization and auto-generated test pages don’t work in your scenario. Just add an html (or htm) web page with the same name as your QUnit tests file and JustCode will run these tests with your test web page instead of auto-generating one.

Keep in mind that Internet Explorer requires you to use “Mark of the Web” in the beginning of your page. We want to handle this requirement better in the future versions of JustCode.

SpecIt extensions to QUnit (Beta)

With this version of JustCode we went even further with the QUnit integration and added support for SpecIt extensions for QUnit. SpecIt is a wrapper around QUnit that has a similar style to RSpec. For more about what SpecIt is and how it extends QUnit you can visit the SpecIt readme page.

To start using SpecIt you need to add a specit.js file in your solution and reference that file in your JavaScript tests files. Like so:

/// <reference path="specit.js" />

JustCode will analyze and show your SpecIt style tests in the Unit Test Window.

 Running SpecIt tests is like running all other test frameworks using the Run button.

Keep in mind that SpecIt tests support is still in beta and running tests may fail. As a workaround you can take the auto-generated URL from Internet Explorer and use some other browser to navigate to the test page. That’s a limitation of using Internet Explorer executing SpecIt tests locally. We will be working on improving the SpecIt tests execution and supporting more browsers out of the box.

Happy QUnit  JavaScript testing with JustCode!

The JustCode team