The Ultimate AngularJS Testing Guide

AngularJS is the first version released by Google in 2010 as a fully-fledged JavaScript framework for developing single-page applications (SPAs). In order to achieve this, AngularJS was built upon a Model-View-Controller (MVC) architecture. In spite of the fact that the long-term support for AngularJS ended on 31 December 2021.

That said, people still consider its features worthy and use it for developing extensive web applications. Moreover, applications that were built before the support ended continue to work as usual. 

AngularJS is used widely in production by several top companies such as Google, Microsoft, NASA, and more. It incorporates component-based development, which is reusable and thus saves a lot of time. Moreover, it is an open-source and free framework which has rich community support. 

How to Perform AngularJS testing?

During the development of AngularJS, Google engineers kept in mind the testing aspect of the framework, thus keeping the entire framework testable. During the testing of AngularJS applications, product requirements and test cases, and scenarios are validated. 

AngularJS testing is either automated or manual. In manual testing, testing is done manually taking a good amount of time and effort, whereas automated testing is far more effective and quicker than manual testing. To perform automated testing, one has to take advantage of several tools such as Jasmine, Cypress, and more. 

Apart from this, you can take the help of online cloud testing tools such as BrowserStack, which has eased the process of testing to a greater extent. It broadens the scope of testing into numerous combinations of browsers and operating systems, which is highly effective for design and development companies. 

Tools used for AngularJS Testing

Automating tests increases the effectiveness of the tests as compared to manual tests. Automated tests have wide test coverage and better speed while testing AngularJS applications. Automated testing does not require human intervention and is cheaper than manual testing. Here are some tools that are helpful while running automated tests in AngularJS applications. 

Karma

Karma is an automated testing tool that was created by the AngularJS team at Google itself. Karma is often mistaken to be considered a framework or an assertion library. However, it is a test runner tool that allows running test cases inside various browsers through the command line. 

Karma rolls out directly from the Angular team, as a result of which it has become the default test runner for applications created with Angular CLI. Karma also offers easy integration of testing frameworks and services. 

Karma offers several advantages, such as being open-source and backed by Google. Karma being backed by a tech giant builds trust among the users and automatically encourages good community support. 

Creating a Test Environment

Now, let us learn to install Karma.

Step 1: Install Karma, Karma launcher, and Jasmine which is the dependent framework for karma via npm. 

npm install karma karma-chrome-launcher karma-jasmine

Step 2: Now, install the Karma CLI utility that will be required to initialize the Karma environment for testing. 

npm install karma-cli

Step 3: Configure Karma via the command 

karma -init

Jasmine

Jasmine is a BDD testing framework for the purpose of testing JavaScript code and integrates very well with Karma. In the official documentation of Angular, Jasmine and Karma are both recommended as testing frameworks.

Jasmine provides an extension known as Jasmine-jQuery, which eases front-end testing. Moreover, Jasmine has an easy syntax, which is quite readable and maintainable. 

The biggest advantage of using Jasmine is it is highly compatible with numerous libraries and frameworks. Moreover, it has a strong community and an easy learning curve. However, one major drawback of using Jasmine is that it will require several configurations before selecting any assertion library. Also, the user has to use a mocking framework before using Jasmine. 

Creating a Test Environment

Step 1: Install npm modules

npm install jasmine-node

Step 2: Initialize the Jasmine Environment 

jasmine init

Step 3: Initialize the configuration file 

The configuration JSON file will be stored in the spec/support folder. By default, it is named as jasmine.json. 

Protractor

Protractor is an open-source testing framework for AngularJS that comes in handy in combining popular technologies such as Mocha, Jasmine, Selenium, and more. Initially, it was developed by Google Engineers to support Angular testing. 

However, later it was released as an open-source framework. The protractor wraps over all the features of Selenium WebDriver and Angular-specific features. Protractor supports both Angular and Non-angular features, which broadens the scope of testing, offering end-to-end testing features for the entire application, even if has non-angular components. 

Protractor makes it easy to run image comparisons and also runs on top of the Selenium web driver. Hence, Protractor supports all the capabilities of a web driver.

Some drawbacks of using Protractor are there such as it supports only JavaScript, limited browser support, and the absence of a Robot class in Protector. 

Creating a Test Environment

Step 1: Install Protractor globally via npm

npm install -g protractor

Step 2: Check Protractor is installed

Follow the command to check if Protractor is installed.

protractor -version

Step 3: Update the web driver manager

webdriver-manager update

Step 4: Start the WebDriver manager

Once the web driver is started, it will automatically load and run the tests in the relevant browser.

webdriver-manager start

Cypress

Cypress is an end-to-end testing framework that is not limited entirely to Angular. Cypress is a full-fledged JavaScript framework that states you could start writing tests right after installing it in your system. 

Cypress is built on a new architecture and runs in the same loop as the application being tested, which makes it fast, reliable, and convenient. Moreover, Cypress provides several bundled packages such as Mocha, Chai, and Sinon. While installing Cypress, it does not require any additional downloads or dependencies. However, Cypress only supports JavaScript testing and is not very well suited for cross-browser testing. 

Creating a Test Environment

Step 1: Initialize the project

npm init

Step 2: Install Cypress via npm 

npm install cypress --save-dev

Testing AngularJS Controllers

A controller is a JavaScript Object that controls the data of AngularJS applications. The ng-controller directive defines the application controller.  

In this section, let’s test controllers with the ability of the Karma testing framework. 

Let’s understand, with the help of an example to define a controller, which would create an ID variable and assign it to the scope. 

Step 1: Install Angular.Js mocks library via npm

npm install Angular JS-mocks

Step 2: Modify configuration file 

In the Karma configuration file, karma.conf.js mention the Karma files must include for testing.

files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']

Step 3: Create a sample AngularJS application 

In the test folder of the application, paste the following code inside the index.js file. 

var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.controller('AngularJSController', function($scope) {
$scope.ID =1;
});

Step 4: Write test case

In the test folder, paste the following code inside ControllerTest.js file.

describe('AngularJSController', function() {
beforeEach(module('sampleApp'));

var $controller;

beforeEach(inject(function(_$controller_){
$controller = _$controller_;
}));

describe('$scope.ID', function() {
it('Check the scope object', function() {
var $scope = {};
var controller = $controller('AngularJSController', { $scope: $scope });
expect($scope.ID).toEqual(1);
});
});
});

Upon executing, the test will run in the Karma browser.

Testing AngularJS directives

Directives in Angular are the classes used to modify the previous behavior of the elements in the template. It could be achieved by adding new elements, removing old elements, or even changing the appearance of the elements in the DOM. 

Step 1: Install Angular.Js mocks library via npm

npm install Angular JS-mocks

Step 2: Modify configuration file 

In the Karma configuration file, karma.conf.js mention the Karma files must include for testing.

files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']

Step 3: Create a sample AngularJS application 

var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.directive('BrowserStack', function () {
return {
restrict: 'E',
replace: true,
template: '<p>AngularJS testing</p>'
};
});

Step 4: Write a test case

describe('Unit testing directives', function() {
var $compile,
$rootScope;
beforeEach(module('sampleApp'));

beforeEach(inject(function(_$compile_, _$rootScope_){
$compile = _$compile_;
$rootScope = _$rootScope_;
}));

it('Check the directive', function() {
var element = $compile("<ng-BrowserStack></ng-BrowserStack>")($rootScope);
$rootScope.$digest();
expect(element.html()).toContain("AngularJS testing");
});
});

Testing AngularJS Filters

Filters in AngularJS are provided to format data to be displayed in UI without changing the original format. Filters are added to an expression with the help of a pipe (“ | ”) symbol.

{{expression | filterName:parameter }}

How to do AngularJS testing using BrowserStack? 

Let’s now test a real AngularJS web application, Upwork (www.upwork.com). 

Let us test the Upwork application using BrowserStack Live covering different combinations of browsers and operating systems. But, if you would like to perform automation testing, sign up for BrowserStack Automate.

Step 1: Enter the URL of the application that is under test. 

Step 2: Select the combination of device and Browser 

After selecting the combination of browser and operating system, BrowserStack Live will display apps loading on actual devices for a real user experience. 

Upwork on iPhone 14 plus

Upwork on MacOS

Try BrowserStack Now