Unit Testing In Angular Applications
Unit testing is a software development process in which the smallest testable parts of an application, called units, are individually and independently scrutinized for proper operation. Unit testing is often automated but it can also be done manually. Unit tests are typically written and run by software developers to ensure that code meets its design and behaves as intended
In procedural programming a unit can be considered as an individual function or procedure however In object-oriented programming, a unit could be an entire interface such as a class. Unit tests are a set of short code fragments written by programmers or by white box testers during the software development process to ensure each module or units works as intended. Each test case is independent of the others. Substitutes such as method stubs, mock objects, fakes, and test harnesses can be used to assist testing a module in isolation.
Unit test in Angular :
Generally Unit tests means running a set of code and verifying the aspects and behavior such as function calls or return values of a single unit. A single test in angular can be as small as verifying a scope or verifying the interaction between a service and its dependencies. In Angular, any set of codes that directly verifies the behavior and working of other code part can be considered as a unit test
Unit tests are different from end-to-end testing. End-to-end(E2E) testing is can be done using a browser automation tools like Selenium to interact with your application’s interface and verify high level details like URLs, text, and HTML attributes. If something is broken in your code, system will alert the operator. In angular unit testing we need to test services that interact with remote services as well as code that directly manipulates the DOM. In angular also there are multiple tools available that helps us to do the unit test. Now let us check how we can make use of the tools that available for unit testing in angular.
Tools for testing Angular application:
We are now going to discuss the tools that makes unit testing much easier to set up and run in Angular applications.
Jasmine uses behaviour-driven notation that results in a fluent and improved testing experience. These are the main concepts:
- Suites— describe(string, function) functions, take a title and a function containing one or more specs.
- Specs— it(string, function) functions, take a title and a function containing one or more expectations.
- Expectations— are assertions that evaluate to true or false. Basic syntax reads expect(actual).toBe(expected)
- Matchers — are predefined helpers for common assertions. Eg:toBe(expected), toEqual(expected).
Installation and configuration of Angular testing tools :
Karma runs on Node.js and is available as an NPM package so you can install Karma using npm.
Karma works on the three latest stable versions of node. That is 0.8.x, 0.10.x and 0.12.x at this point. Also, works on iojs 2.x.x.
Installing Karma and plugins :
Before we start the installation please ensure that node.js is installed on your machine.
The recommended approach is to install Karma locally in the project’s directory so open your terminal and navigate to your project directory.
# Install Karma:
$ npm install karma --save-dev
# Install plugins that your project needs:
$ npm install karma-jasmine karma-chrome-launcher --save-dev
This will install karma, karma-jasmine and karma-chrome-launcher packages into node_modules in your current working directory and also save these as devDependencies in package.json, so that any other developer working on the project will only have to do npm install in order to get all these dependencies installed.
#install karma-cli globally:
$ npm install -g karma-cli
configure your karma.conf.js
The configuration file can be generated using karma init:
$ karma init my.conf.js
this command will ask number of queries to input your answers to configure karma.conf.js as follows :
Which testing framework do you want to use ? Press tab to list possible options. Enter to move to the next question.
- jasmine Do you want to use Require.js ? This will add Require.js plugin. Press tab to list possible options. Enter to move to the next question.
- no Do you want to capture a browser automatically ? Press tab to list possible options. Enter empty string to move to the next question.
- Chrome > Firefox > What is the location of your source and test files ? You can use glob patterns, eg. “js/*.js” or “test/**/*Spec.js”. Press Enter to move to the next question.
- *.js > test/**/*.js > Should any of the files included by the previous patterns be excluded ? You can use glob patterns, eg. “**/*.swp”. Press Enter to move to the next question.
- Do you want Karma to watch all the files and run the tests on change ? Press tab to list possible options. > yes Config file generated at “/Users/vojta/Code/karma/my.conf.js”.
After these queries a configuration file (my.conf.js)will get generated in your project root directory. Then Download and copy angular-mock.js in your project root directory.
Edit my.conf.js and Change the base path if you need and set path of angular.js and angular-mock.js files as your file structure.
Starting Karma :
While starting Karma, the configuration file path can be passed in as the first argument.
By default, Karma will look for karma.conf.js or karma.conf.coffee in the current directory.
$ karma start my.conf.js
This will open up a google chrome window on success.
You can change the karma default configurations through commands. Following command allow you to see all available options.
$ karma start --help
Let’s Get Started with a basic Example:
1. Create your index file (index.html)
2. Write your controller ‘UserListCtrl’ (app.js)
3. Write your unit test codes (test/create user_test.js )
5.Running Your First Test
$ karma start my.conf.js