You are reading the article Angularjs Unit Testing: Karma Jasmine Tutorial updated in October 2023 on the website Vibergotobrazil.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested November 2023 Angularjs Unit Testing: Karma Jasmine Tutorial
One of the most brilliant features of chúng tôi is the Testing aspect. When the developers at Google developed AngularJS, they kept testing in mind and made sure that the entire AngularJS framework was testable.
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 frameworkKarma 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 KarmaThe installation of Karma via npm is done in a two steps process.
Step 1) Execute the below line from within the command line
npm install karma karma-chrome-launcher karma-jasmineWherein,
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
npm install karma-cliwherein,
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 frameworkThe next step is to configure karma which can be done via the command
"karma –init"After the above step is executed, karma will create a chúng tôi file. The file will probably look like the snippet shown below
files: [ 'Your application Name'/AngularJS/AngularJS.js', 'Your application Name'/AngularJS-mocks/AngularJS-mocks.js', 'lib/app.js', 'tests/*.js' ]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 chúng tôi 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 chúng tôi put in the below code and place it in the test directory.
describe('Sample test', function() { it('Condition is true', function() { expect('AngularJS').toBe('AngularJS'); }); });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
KARMA startThe 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 ControllersThe 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
npm install Angular JS-mocksNext is to modify the chúng tôi file to ensure the right files are included for the test. The below segment just shows the files part of the chúng tôi which needs to be modified
files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
The ‘files’ parameter basically tells Karma all the files that are required in the running of the tests.
The chúng tôi and chúng tôi file are required to run AngularJS unit tests
The chúng tôi file is going to contain our code for the controller
The test folder is going to contain all our AngularJS tests
Below is our chúng tôi code which will be stored as a file chúng tôi 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
var sampleApp = AngularJS.module('sampleApp',[]); sampleApp.controller('AngularJSController', function($scope) { $scope.ID =5; });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 chúng tôi 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 chúng tôi module called ‘sampleApp’ before the test run. Note that this is the name of the module in an chúng tôi file.
The $controller object is created as a mockup object for the controller ”Angular JSController” which is defined in our chúng tôi 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 chúng tôi file to the $scope object in our test file
Finally, we are comparing the $scope.ID to 5
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(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 DirectivesThe 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.”
var sampleApp = AngularJS.module('sampleApp',[]); sampleApp.directive('Guru99', function () { return { restrict: 'E', replace: true, }; });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 chúng tôi 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 chúng tôi can use it to compile our custom directive.
The $rootscope is the primary scope of any chúng tôi 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.
expect(element.html()).toContain(“This is AngularJS Testing”) – This is used to instruct the expect function that it should find the element(in our case the div tag) to contain the innerHTML text of “This is AngularJS Testing”.
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() { $rootScope.$digest(); expect(element.html()).toContain("This is AngularJS Testing"); }); });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 applicationsThe 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.
var app = AngularJS.module(‘DemoApp’, []); app.controller(‘DemoController’, function($scope) { $scope.tutorial =[ {Name: “Controllers” , Description : “Controllers in action”}, {Name: “Models” , Description : “Models and binding data”}, {Name: “Directives” , Description : “Flexibility of Directives”} ] });
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
"npm install protractor"The code for our test will be as shown below.
The code will be in a separate file called chúng tôi , which will be placed in the test folder. The below code just does the following key things
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.
Describe('Unit testing end to end', function() { beforeEach(function() { }) it('Check the ng directive', function() { var list=element.all(by.repeater(ptutor in tutorial')); expect(list.count()).toEqual(3); }); });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 chúng tôi 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.
You're reading Angularjs Unit Testing: Karma Jasmine Tutorial
Update the detailed information about Angularjs Unit Testing: Karma Jasmine Tutorial on the Vibergotobrazil.com website. We hope the article's content will meet your needs, and we will regularly update the information to provide you with the fastest and most accurate information. Have a great day!