Javascript — How to set up a testing environment with Jasmine and karma
By: Bhargav Bachina
Tags: Angular, Programming, Software Development, Web Development, JavaScript

Javascript — How to set up a testing environment with Jasmine and karma

From testing a single javascript file to testing Angular project

Javascript is one of the popular programming languages nowadays. We are shipping thousands of lines of code to production every day and shipping with confidence is very important for both businesses and developers. It is very difficult to predict the application behavior in production and a small bug in the production environments leads to unexpected behavior and non-availability of apps.

Jasmine is an excellent framework for testing javascript apps and it provides a lot of good features to test applications in both browser and server side. Jasmine is a behavior-driven javascript framework and combines with karma, a test runner becomes a powerful testing setup for our javascript apps.

Testing with jasmine and karma

Here are the topics that we cover in this article

Testing with jasmine in the browser

Testing with jasmine on the server (node)

Setup and teardown methods

focused, pending and skip tests

Using this keyword

Integration with karma (javascript)

Integration with karma (typescript)

Testing with simple angular project

Testing with jasmine in the browser

Let’s download the jasmine standalone zip from here. After you download and unzip you can see the following folder structure, all the source files are under src and all the test specs are under spec folder

jasmine default folder

Let’s remove the default spec and src files and put these files under those folders

Calculator.js is a simple file where we have three methods add, subtract and multiply and CalculatorSpec.js is the spec file which tests all the methods.

Calculator.js and CalculatorSpec.js files

Load the SpecRunner.html in the browser and we can see the results and we can click on each result to see the specific result.

Spec file running in the browser

Testing with jasmine on the server (node)

setting up jasmine on the server side is pretty easy. Let’s do the following steps.

// create a nodejs project

npm init // install dependencies for jasmine and console reporter

npm install jasmine --save

npm install jasmine-console-reporter --save-dev

Add two files Calculator.js and CalculatorSpec.js

folder structure

The important part here is jasmine.js which is the configuration file for jasmine. This consists of spec folder and we are using jasmine-console-reporter for the console output.

Let’s run npm test to see the following output. We can see a similar output as in the browser version. Here is the complete project from the GitHub.

Running jasmine test on the server

Setup and teardown methods

There are setup and teardown methods for the tests.

beforeEach() and afterEach() runs before and after for every test suite.

beforeAll() and afterAll() runs before and after all test suites

Setup and teardown methods

Let’s put these into practice we have this file with all setup and teardown methods.

with setup and teardown methods

We can see the order of these methods in action.

setup and teardown methods in action

focused, pending and skip tests

We can actually run specific tests, skip some tests and we can even declare some with a pending state.

focused

we can just add f to it() method to make only that particular test running.

focussed test

focussed test in action

pending

We can just add pending(message) in any method to mark tests pending

pending test

pending test in action

exclude

We can skip the test with xit() method.

skip test

skip tests in action

Using this keyword

We can initialize and share the variables with the help of this keyword in jasmine among beforeEach(), it() and afterEach() methods.

Let’s see that in action.

sharing variables with this keyword

sharing variables with this in action

Integration with karma (Javascript)

Why do we need karma?

Karma is a test runner for javascript apps, all we need to define configuration file and karma will take care from running tests to displaying those in the browser. We can even configure which browser we want tests to run.

For example, We are running CalculatorSpec.js in the browser with the help of SpecRunner.html and every time we have to run that html file manually and we need to reload every time we edit the test files. Karma is a great tool to automate all this stuff for us.

Let’s put all this into practice.

Now we have two simple files test.spec.js and calculator.spec.js and which we want to run with karma. Here is the complete project

test files

folder structure for karma and jasmine

First, we need to install all these dependencies and run karma test or npm test

// install all these dependencies npm install jasmine-core karma karma-chrome-launcher karma-jasmine karma-jasmine-html-reporter karma-spec-reporter --save-dev

Then we need to add karma.conf.js which has all the configuration for running the tests like frameworks used, browser, the location of the files etc.

karma.conf.js

When we run the npm test which automatically triggers browser and display the results in both stdout and browser.

stdout output

running tests in the browser

try to edit and change the test file to see the failures

failures in the browser

Integration with karma (Typescript)

We need to use webpack to transpile typescript to javascript and test that transpiled bundle.

The differences are that we have .ts files and webpack which transpiles to javascript and point karma to bundle directory to run the tests.

folder structure for jasmine karma typescript

Let’s run npm test to see the results in the browser.

transpiles typescript to javascript and then run tests

running in the browser

Testing with simple angular project

Let’s test the simple Angular project with jasmine and karma. I built the following project with angular CLI and this project comes with karma and jasmine setup and runs all the components out of the box. We can change the components and write our test cases according to our requirement.

All we need to do run npm test to run tests in the angular project.

running tests in the angular project

Conclusion

We went through the basics of jasmine, karma and how to set up a testing environment with these. Understanding these testing frameworks are very important since writing an app is equally important as writing unit tests.