In AngularJS, testing is normally carried out using Karma (framework). Angular JS testing can be carried out without Karma, but the Karma framework has such a brilliant functionality for testing AngularJS code, that it makes sense to use this framework.
In AngularJS, we can perform Unit Testing separately for controllers and directives. We can also perform end of end testing of AngularJS, which is testing from a user perspective.
In this tutorial, you will learn-
Introduction & Installation of Karma framework Installation of Karma Configuration of the Karma framework Testing AngularJS Controllers Testing AngularJS directives End to End Testing AngularJS JS applications
Introduction & Installation of Karma framework
Karma is a testing automation tool created by the Angular JS team at Google. The first step for using Karma is to install Karma. Karma is installed via npm (which is a package manager used for easy installation of modules on a local machine).
Installation of Karma
The installation of Karma via npm is done in a two steps process. Step 1) Execute the below line from within the command line Wherein,
npm is the command line utility for the node package manager used for installing custom modules on any machine. The install parameter instructs the npm command line utility that installation is required. There are 3 libraries being specified in the command line that are required to work with karma.
karma is the core library which will be used for testing purposes. karma-chrome-launcher is a separate library which enables karma commands to be recognized by the chrome browser. karma-jasmine – This installs jasmine which is a dependent framework for Karma.
Step 2) The next step is to install the karma command line utility. This is required for executing karma line commands. The karma line utility will be used to initialize the karma environment for testing. To install the command line utility execute the below line from within the command line wherein,
karma-cli is used to install the command line interface for karma which will be used to write the karma commands in the command line interface.
Configuration of the Karma framework
The next step is to configure karma which can be done via the command After the above step is executed, karma will create a karma.conf.js file. The file will probably look like the snippet shown below The above configuration files tell the karma runtime engine the following things
‘Your application Name’ – This will be replaced by the name of your application. ‘Your application Name’/AngularJS/AngularJS.js’ – This tells karma that your application depends on the core modules in AngularJS ‘Your application Name’/AngularJS-mocks/AngularJS-mocks.js’ – This tells karma to use the Unit Testing functionality for AngularJS from the Angular.JS-mocks.js file. All of the main application or business logic files are present in the lib folder of your application. The tests folder will contain all of the unit tests.
To check if karma is working, create a file called Sample.js, put in the below code and place it in the test directory. The above code has the following aspects
The describe function is used to give a description of the test. In our case, we are giving the description ‘Sample test’ to our test. The ‘it’ function is used to give a name to the test. In our case, we are giving the name of our test as ‘Condition is true’. The name of the test needs to be meaningful. The combination of the ‘expect’ and ‘toBe’ keyword states on what is the expected and actual value of the test result. If the actual and expected value is the same, then the test will pass else it will fail.
When you execute the following line at the command prompt, it will execute the above test file The below output is taken from the IDE Webstorm in which the above steps were carried out.
The output comes in the Karma explorer within Webstorm. This window shows the execution of all tests which are defined in the karma framework. Here you can see that the description of the test executed is shown which is “Sample test”. Next, you can see that the test itself which has a name of “Condition is true” is executed. Note that since all tests have the green “Ok” icon next to it which symbolizes that all tests passed.
Testing AngularJS Controllers
The karma testing framework also has the functionality to test Controllers end to end. This includes testing of the $scope object which is used within Controllers. Let’s look at an example of how we can achieve this. In our example, We would first need to define a controller. This controller would carry out the below-mentioned steps
Create an ID variable and assign the value 5 to it. Assign the ID variable to the $scope object.
Our test will test the existence of this controller and also test to see if the ID variable of the $scope object is set to 5. First we need to ensure the following pre-requisite is in place Install the Angular.JS-mocks library via npm. This can be done by executing the below line in the command prompt Next is to modify the karma.conf.js file to ensure the right files are included for the test. The below segment just shows the files part of the karma.conf.js which needs to be modified
The ‘files’ parameter basically tells Karma all the files that are required in the running of the tests. The AngularJS.js and AngularJS-mocks.js file are required to run AngularJS unit tests The index.js file is going to contain our code for the controller The test folder is going to contain all our AngularJS tests
Below is our Angular.JS code which will be stored as a file Index.js in the test folder of our application. The below code just does the following things
Create an Angular JS module called sampleApp Create a controller called AngularJSController Create a variable called ID, give it a value of 5 and assign it to the $scope object
Once the above code is executed successfully, the next step would be to create a Test Case to ensure the code has been written and executed properly. The code for our test will be as shown below. The code will be in a separate file called ControllerTest.js, which will be placed in the test folder. The below code just does the following key things
beforeEach function – This function is used to load our AngularJS.JS module called ‘sampleApp’ before the test run. Note that this is the name of the module in an index.js file. The $controller object is created as a mockup object for the controller ”Angular JSController” which is defined in our index.js file. In any sort of Unit Testing, a mock object represents a dummy object which will actually be used for the testing. This mock object will actually simulate the behavior of our controller. beforeEach(inject(function($controller) – This is used to inject the mock object in our test so that it behaves like the actual controller. var $scope = {}; This is a mock object being created for the $scope object. var controller = $controller(‘AngularJSController’, { $scope: $scope }); – Here we are checking for the existence of a controller named ‘Angular.JSController’. In here we are also assigning all variables from our $scope object in our controller in the Index.js file to the $scope object in our test file Finally, we are comparing the $scope.ID to 5
The above test will run in the karma browser and give the same pass result as was shown in the previous topic.
Testing AngularJS Directives
The karma testing framework also has the functionality to test custom directives. This includes the templateURL’s which are used within custom directives. Let’s look at an example of how we can achieve this. In our example, we will first define a custom directive which does the following things
Create an AngularJS module called sampleApp Create a custom directive with the name – Guru99 Create a function that returns a template with a header tag which displays the text “This is AngularJS Testing.”
Once the above code is executed successfully, the next step would be to create a test case to ensure the code has been written and executed properly. The code for our test will be as shown below The code will be in a separate file called DirectiveTest.js, which will be placed in the test folder. The below code just does the following key things
beforeEach function – This function is used to load our Angular JS module called ‘sampleApp’ before the test run.
The $compile service is used to compile the directive. This service is mandatory and needs to be declared so that Angular.JS can use it to compile our custom directive.
The $rootscope is the primary scope of any AngularJS.JS application. We have seen the $scope object of the controller in earlier chapters. Well, the $scope object is the child object of the $rootscope object. The reason this is declared here is because we are making a change to an actual HTML tag in the DOM via our custom directive. Hence, we need to use the $rootscope service which actually listens or knows when any change happens from within an HTML document.
var element = $compile(“
The above test will run in the karma browser and give the same pass result as was shown in the previous topic.
End to End Testing AngularJS JS applications
The karma testing framework along with a framework called Protractor has the functionality of testing a web application end to end. So it’s not only testing of directives and controllers, but also testing of anything else which may appear on an HTML page. Let’s look at an example of how we can achieve this. In our example below, we are going to have an AngularJS application which creates a data table using the ng-repeat directive.
We are first creating a variable called “tutorial” and assigning it some key-value pairs in one step. Each key-value pair will be used as data when displaying the table. The tutorial variable is then assigned to the scope object so that it can be accessed from our view. For each row of data in the table, we are using the ng-repeat directive. This directive goes through each key-value pair in the tutorial scope object by using the variable ptutor. Finally, we are using the
Once the above code is executed successfully, the next step would be to create a test case to ensure the code has been written and executed properly. The code for our test will be as shown below Our test is actually going to test the ng-repeat directive and ensure that it contains 3 rows of data as it should from the above example. First we need to ensure the following pre-requisite is in place Install the protractor library via npm. This can be done by executing the below line in the command prompt The code for our test will be as shown below. The code will be in a separate file called CompleteTest.js , which will be placed in the test folder. The below code just does the following key things
The browser function is provided by the protractor library and assumes that our AngularJS application (with the code shown above) is running on our site URL – http://localhost:8080/Guru99/ var list=element.all(by.repeater(ptutor in tutorial’)); -This line of code is actually fetching the ng-repeat directive which is populated by the code ‘ptutor in tutorial’. The element and by.repeater are special keywords provided by the protractor library that allows us to get details of the ng-repeat directive. expect(list.count()).toEqual(3); – Lastly, we are using the expect function to see that we are indeed getting 3 items being populated in our table as a result of the ng-repeat directive.
The above test will run in the karma browser and give the same pass result as was shown in the previous topic.
Summary
Testing in AngularJS is achieved by using the karma framework, a framework which has been developed by Google itself. The karma framework is installed using the node package manager. The key modules which are required to be installed for basic testing are karma, karma-chrome-launcher ,karma-jasmine, and karma-cli. The tests are written in separate js files, normally kept in the test folder of your application. The location of these test files must be mentioned in a special configuration file called karma.conf.js. Karma uses this configuration file when executing all tests. Karma can be used to test Controllers and custom directives as well. For an end to end web testing, another framework called protractor needs to be installed via the Node, package manager. This framework provides special methods which can be used to test all of the elements on an HTML page.
