In this post, I will show you how to test Angular2 application using Karma runner and Jasmine framework. You will learn how to setup the environment, configure dependencies in TestBed and test your services and components.
- Installing dependencies
- Writing first test
- Testing angular2 application
First of all, you need to install karma and all other dependencies:
You need to add these to the project.json file and run
There are two files needed for the karma setup. First one is karma.conf.js. You guessed it right - it’s a config file for karma. The whole file is available on GitHub. There are two parts - one is setting up paths to all files needed by the tests and the other is just the options for karma (browser, type of report etc).
This file is responsible for initializing the Angular2 application and loading all the tests. Again - whole file is available on GitHub.
To test the whole setup, run a command window and cd into the project directory. First, build the frontend application with
gulp build (or have a watch running all the time with
karma start --single-run. This should start the karma runner, open chrome and show a message it didn’t find any tests (unless you already have some):
Writing first test
Our first test will check if the whole setup works fine. Such tests are called sanity tests and they check for the known truths. Like that 2+2 is 4 :). Let’s get to it!
Add a file
sanityTests.spec.ts somewhere in the Frontend folder. I created
tests directory and keep it there. All test files must end with spec.ts - that is how, karma will know it has to run them.
So this is it - we have our first test, let’s run it! (remember about
Now, when we are sure, our setup works fine, we can start testing our application.
Testing angular2 application
The Angular team prepared a framework to make it easy to test it. The whole concept uses a
TestBed class. You need it to setup the test environment and create components to be tested. I will now demonstrate how to do it, by adding tests to the demo app I prepared for the tutorial, I posted before.
In the demo application we’ve had a HelloService class. It was using HTTP protocol to communicate with the API and get the greeting message.
First step is to setup
TestBed for our tests:
What happens here is, we tell the
TestBed to use a
MockBackend for the
Http class dependencies.
MockBackend doesn’t send real http requests. Instead it allows us to modify its behaviour in the test.
This is an example test for our
HelloService. As you can see, it tells the mockBackend to response with “Hello Michal” string when the request comes. Then we run the service method and check if the result is what it should be.
Now, it’s the time to test
HomeComponent. First, we need to prepare the
Here, we’re creating a mock for the
HelloService. It’s using a Spy from jasmine framework, which will return configured greet as an
Observable. The mock is specified as a value for
This is a test for our component. We check if angular can initialize it and also if the page contains elements it should.
Now the output from karma runner looks better:
As you see, testing angular apps is not very complicated. You just have to remember how to setup TestBed and use it in the tests. As before, the whole code for this post is available on GitHub, so go ahead, fork and have a play with it!