Unit Testing in Javascript

For unit testing, an environment is required that facilitates a test runner, and provide some utilities to write the test cases.
There are various frameworks that are available for unit testing. Some of them are-
QUnit, Jasmine, Mocha, etc.

QUnit

We need to include “qunit.js”- the testing framework and “qunit.css”- which provide styling of the test environment for displaying the results of the test.

Format :-

<script>
QUnit.test(“a basic example”, function(assert){
var test = “world”;
assert.equal(test, “world”, “The value should be world”);
});
</script>

Types of assertion

1. Ok (truthy [,msg]) – if argument evaluates to true, assertion passes.

2. equal (actual, expected) - equivalent to ==

3. strictEqual (actual, expected) – equivalent to ===

4. deepEqual() – handles undefined, NaN. It can also be used to compare {key : value}

Other features

1. The test runner handles the execution and hence document.ready() block is not required. Calling the test() on QUnit defers the execution and adds it to a queue which is then handled by the test runner.
2. Name of a failed test case is saved in session storage which is executed when suite runs again. And it executes before any other tests. Only execution order gets affected by this and not the output order.
3. Checkbox of "No Try-Catch" tells QUnit not to use exception handling. And when any test case fails, the runner will die and we will get a native exception which can then be used for debugging.
4. It can also define how many assertions a test is containing. When the test completes without the correct no. of assertions, it will fail, no matter what result the other assertions produced.
assert.expect(3) – test should contain 3 assertions.
5. For Asynchronous callbacks, we use assert.async(), which return a “done()” function that should be called when the operation has completed.
E.g. :
QUnit.test(“async test:async input focus”, function(assert){
var done = assert.async();
var testInput = $(“#test-input”).focus();
setTimeout(function(){
asser.equal(document.activeElement, input[0], “Input was focused”);
done();
});
});

6.Code coverage checks whether all functions in test are being tested or not. It can be achieved using Blanket.js

7. For ajax calls, we have to use Mockjax, which will intercept or mock the URL, and return the value that we write in Respose Text.

KARMA

Steps to use Karma –

1. Install Node.js (Using Admin account)

2. Install Karma and its plugins-

a. npm install –g karma -- save-dev

b. npm install –g karma-qunit -- save-dev

or

npm install –g karma-jasmine -- save-dev

c. npm install –g karma-chrome(or firefox/phantomJS)-launcher --save-dev

To install karma config file at your desired location –

Eg.

D:\Projects\UnitTestApp\Tests > node C:\Users\currentUser\AppData\Roaming\npm\node_modules\karma\bin\karma init myKarma.conf.js

• This init will ask series of questions regarding the setup of the config file, example, which browser to use, path of the file to be testes, etc.

Then run this file using –

D:\Projects\UnitTestApp\Tests > node C:\Users\currentUser\AppData\Roaming\npm\node_modules\karma\bin\karma start myKarma.conf.js

Integrating Karma with Visual Studio

1. Install KarmaVS from Nuget package manager.

2. Include the karma.conf.js in the root directory of the project and rename it to karma.unit.conf.js(important).

3. Show output from Karma in the output window.