Angular Test Driven Development with Karma and Jasmine

Posted By :Harsh Soni |29th April 2019
Angular Test Driven Development with Karma and Jasmine

One of the common problems with technologies no matter what is the language used to build it, you will definitely break thing that previously worked when adding or releasing new features. This is where TDD (Test driven development) comes into play. TDD is one of the main parts of the agile development work culture. It increases the quality of the code, improves bug detection and faster development. 

 

Jasmine is the most popular testing framework for Javascript apps as it is simple to start and easy enough to cover all the possible scenarios. It is a Behavior Driven Development testing framework which means it works on behavior specific test. It doesn't rely on any browsers, DOM or any other JavaScript framework. 

 

Karma is simply your testing server and a tool that allows you to execute JS code in multiple browsers. In its core its a Node server which watches the changes in your application file and re-runs your test cases to find any mistake. You can see the test case results on the command line

 

 

Assuming that you have already set up your angular application, now I am going to set up Karma so that I can run my test along with the development

 

Karma Setup 

 

Run the following command in your root directory of the APP

 

npm install karma karma-jasmine jasmine-core karma-chrome-launcher --save-dev

 

Also, install the Karma CLI as well

 

npm install -g karma-cli

 

Now we will install Angular, ui-router, and angular-mocks as dependencies to Karma. 

 

npm install angular angular-ui-router angular-mocks --save-dev

 

If all goes well, verify the karma installation by the following command

 

./node_modules/karma/bin/karma start

 

After this, we need a karma configuration file for our test server.

 

./node_modules/karma/bin/karma init

 

You will be asked a few questions similar to the npm install and a new file karma.conf.js will be created in the root folder, to read more about its properties, see the config docs.

 


About Author

Harsh Soni

Harsh is an experienced Developer with multiple tech stack such as PHP, NodeJs, Javascript, Angular. He loves learning new technologies and experimenting on them.

Request For Proposal

Sending message..

Ready to innovate ? Let's get in touch


Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Chat With Us