Overview

When you write code with unit testing, then the time spent for a developer to resolve bugs will be small. It will give a developer more confidence about his/her work. Unit testing will ensure developers when they are adding a new feature, it will not break any other part of the application.

Here we are going to see how we can do unit testing in Angular using Jasmine and Karma.

Lets create a new Angular project.

In command prompt we need to execute

ng new (project name). 

Example:

ng new Unit-Testing

All our dependencies for testing will get installed when you create a project. We can see it in the package. json.

Jasmine-core is a testing framework, it will have functionalities, where we can write our test code.

Karma is a browser testing , simply will call it a test runner. While creating a new project we will get configuration file called karma.conf.js

Karma.conf.js file:

frameworks: This is where jasmine is set as a testing framework.

autoWatch : It is set as true by default . It will run our tests in watch mode.

browsers: By default it is chrome. We can add other browsers also here.

reporters: It will contain a list of reporters.

To execute our test, we have to run the command “ng test”, when we execute this command, this will open the browser and show the console. We can leave the execution of the unit test in watch mode.

While creating a new project , Inside the src folder by default we will get a test file called test.ts. We are never going to change anything in this file.

Test.ts file: 

getTestBed() is a powerful testing tool which is provided by angular. It is initialized in test.ts file.

Whenever we generate a component. It will create 4 files, html file, css file, ts file, spec.ts file. spec.ts file is where we are going to write all our test code.

Lets look into defaultly created file app.component.spec.ts

Inside the describe function component name (AppComponent), this will start our test block with the title matching test component name.

beforeEach(async ()) – Will let all asynchronous code finish before continuing.

TestBed.configureTestingModule – To test any component, module, services we need to include inside testbed

app.component.spec.ts file: 

Here we can see the default 3 tests in app.component.spec.ts. Will see one test in detail.

In the second test we are checking whether ‘title’ contains ‘unit-test’ or not. We createComponent function of the angular testbed. As a result we get a fixture object that is going to allow us to create an instance of the component. Now we have an instance of app.component so that we can check the value in text property which jasmine expects to be equal to expected value.

Output:

Conclusion: 

 We can perform different kinds of tests using jasmine and karma. We can write test cases for all functions for angular components, services and modules.