Unit Testing In Angular Applications

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.

Karma

Karma is task runner application which build on NodeJS application. This JavaScript command line tool helps to spawn a web server which loads your application’s source code and executes your tests. You can configure Karma to run against a number of browsers, which is useful for being confident that your application works on all browsers you need to support. Karma is executed on the command line and will display the results of your tests on the command line once they have run in the browser.

Jasmine

Jasmine is a popular JavaScript behavior driven development framework. Jasmine is widely used for writing unit test scripts for testing Angular applications. Jasmine provides functions to help with structuring your tests and also making assertions. As your tests grow, keeping them well-structured and documented is vital, and Jasmine helps achieve this.

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.

Editing my.conf.js File

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)

Creating Index File

2. Write your controller ‘UserListCtrl’  (app.js)

Writing Controller ‘UserListCtrl’

3. Write your unit test codes (test/create user_test.js )

Writing Unit Test Codes

5.Running Your First Test

$ karma start my.conf.js

 Running Test

Cheers!!!

Know More About This Topic from our Techies

Latest Post