Top unit testing frameworks in UI space
Unit testing, as the name implies, is about testing individual units of code.
In this article, we will let you know about what is unit testing and Unit Testing of Angular Applications.
In this article, we completely aimed at beginners and who are familiar about Angular but haven’t gone deep into unit testing their applications. So, let’s dive deep in and explore about unit testing of Angular applications.
A WORD ABOUT UNIT TESTING:
Unit testing is a software testing process in which the smallest testable parts of an application, called units, are individually and independently explored for proper operation. Unit testing is generally automated but it can also be done manually. Each unit is tested separately before integrating them into modules to test the interfaces between the modules.
The major goal of unit testing is to isolate each part of the program and test that the individual parts are working correctly. This means that for any function or procedure when a set of inputs are given then it should return the proper values. It should handle the failures gracefully during the course of execution when any invalid input is given.
There are many test frameworks and tools available to the Angular developer, and they may already have preferences around tooling. To setup a decent testing environment for your AngularJS application, you will need a several npm modules. So, let’s take a quick look at them.
Karma:
Karma is a test runner provided by the Angular team, Karma will execute your tests in multiple browsers which shall ensure that your application is compatible with all browsers. Karma is an engine that runs the test against code. Though, it has been written for AngularJS, it is not specifically tied to it and it can be used for any JavaScript application.
Configuration:
Navigate to your working directory in your terminal or command prompt and follow the given instructions.
Install AngularJS
* npm install angular –save
Install Karma
* npm install -g karma –save-dev
Install Jasmine
* npm install karma-jasmine jasmine-core –save-dev
Install ngMock
* ngMock allows you to inject and mock angular services to
help you test your application.
* npm install angular-mocks –save-dev
karma.conf.js
* karma init.
* Select Jasmine as your testing framework.
* Select a browser.
*Specify the paths to your js and spec files.
* Open your karma.conf.js and add the location of angular.js in to file array.
node_modules/angular/angular.js
* Add the location of ngMock just below of that.
node_modules/angular-mocks/angular-mocks.js
This is the process of the configuration, now a user can proceed and write his code.
Mocha:
Mocha is a testing framework for JavaScript running on node.js. It holds test suites and test cases, and it offers fair reporting features. It uses declarative syntaxes to nest expectations into cases and suites. Mocha can be used with most various JavaScript assertion libraries like;
Should.js, express.js, and chai.
describe(‘Array’, function( ) {
describe(‘#indexOf( )’, function( ) {
it(‘should return -1 when the value is not present’, function( ) {
assert.equal(-1, [1,2,3].indexOf(5));
assert.equal(-1, [1,2,3].indexOf(0));
});
});
});
Chai:
We have seen how Mocha provides test-suite and test-cases capabilities for JavaScript. Chai offers various ways of verifying things in test cases. These verifications are performed through “assertions” and marks a test case as failed or passed.
Sinon:
Sinon describes itself as “standalone test spies, stubs, and mocks for JavaScript”. Stubs, spies, and mocks all answer the same question. Sinon provides smart and precise way to monitor whether the function is called, if so, with which arguments, and how many times, etc.
Final Thought:
AngularJS is still a young, and growing framework. Unit testing in AngularJS applications follows a fractal design. Hope that the testing patterns we’ve mentioned in this article prove useful in your own development and practices.