Unit Testing In Angular


19 Oct

Credit for this image goes to “


Actually you may asking why I need to learn unit testing while I can spend more time developing a good feature .. ! Why Unit testing is important , When should i write unit test .. a lot of questions are crossing your mind each time you hear about unit testing ..

In This Article we are going to discover Why , When & How UNIT TESTING in Angular !

Are you ready for the first ride of Unit Testing journey ! Let’s Start ..

First Of All , Why should i Learn Unit Testing .. Why It’s Important ?

  • Starting with coding a feature is a common mistake , But Unit testing makes you first think of design for your code structure .
  • Put your code on a solid ground , that you are sure that your code has less or zero bugs .
  • Makes Refactoring you code or adding a new feature more easier , because test cases ensure that you didn’t break any other part of the application with that new part .
  • Unit testing add a good documentation for your code .

Is there’s only Unit Testing or there’s more types ?

of course there’s more of testing types :

Testing Types

  • Unit Testing

Testing the small parts of application and fully depend on itself , In angular it’s testing component in isolation without any external resources and templates .

  • Integration Testing

Testing Interactions Between two units , In angular it’s testing with template and external resources .

  • End to End Testing

It is for Automated Testing , The tests ensure the application performs as expected from start to finish. As the tests run, the browser interaction just as a user would use your application. Angular end to end tests are powered by a framework called Protractor.

But In Our journey we’re going to talk about Unit Testing In Angular .

“ Tests are stories we tell the next generation of programmers on a project.”
― Roy Osherove , The Art of Unit Testing


How Can I start Unit Testing In Angular then ?

You first need to know what tools angular provides you to go with unit testing ..

  1. Jasmine :

Jasmine is a java-script testing framework , attempts to describe tests in a human readable format so that non-technical people can understand what is being tested.

2. Karma :

Karma is a test runner which is a tool which lets us run jasmine tests inside browsers from the command line. The results of the tests are also displayed on the command line.
Karma can also watch your development files for changes and re-run the tests automatically.

Those are the tools you need to know about to start testing In an Angular project .

Note : This article will be more helpful and useful from next section if you have angular basics to understand how to create angular projects & internal structure but don’t worry i will give you some tips to start your app .

Prerequisites To Start :

You need to have node on you machine & Install angular-cli and create a new project from command line :

  1. npm install -g @angular/cli
  2. ng new angular-unit-testing

Getting Started:

Open your angular project and let’s dive more into structure to discover where we could write our test cases .

Angular project Structure

As Shown in this Figure , In src/app Where you can find your app component by default and any other generated components , there’s one kind of files you never tried to open or discover before .. It’s where we are going to write .. yes those highlighted files are our destination componentName.component.spec.ts .

Testing File — .spec .ts — Structure :

Here’s a structure to follow within spec file :

describe ( ‘TestName’ , ( ) => {
  It ( ‘sub_testName’ , ( ) => { }}) ;

As Shown in Above Code , you have :

  • describe( ) Method

It’s a method that used to define suite & suite means group of related tests .

  • It( ) Method

Used to define a single test case and it takes 2 parameters , string describes what this test case should return and the other one will be the function that test runner will call .

And Inside of each It( ) Method , You will write your test case implementation which divided into 3 steps : Arrange , Act , Assert , It’s a pattern for arranging and formatting code in Unit Test methods:Each method should group these functional sections, separated by blank lines:

  1. Arrange all necessary preconditions and inputs.
  2. Act on the object or method under test.
  3. Assert that the expected results have occurred.
// In you component.spec.tsdescribe ( ‘TestName’ , ( ) => {
  It ( ‘sub_testName’ , ( ) => {   let instance = new ComponentName ; //initialize - Arrange  let result = instance.functionName(“Marina”);//make a change - Act  expect(result).toContain(“Marina”) ; //expect the result - Assert}}) ;

And funtionName is an implemented function in you component.ts

// In you component.tsfunction functionName (name) {
  alert("My Name is " + name );

As Shown in Snippet code above , in component.spec.ts you have a descriptive code lines arranging component instance you’re going to use as first step , then making change on a function within that component and finally expecting the results .

Finally Run your tests

When you finish your test case , run angular testing command : ng test

karma window will open running the test cases & showing description written in describe method and sub description for test case written in It method you’re running with results if failed or passed .

Karma running test cases


Good test should tell a story

It’s not necessary to follow the same structure (Arrange , Act , Assert ) in details and same way each time but it’s better to make your testing code more readable , and better structured .. This is one of tips to write a good unit test

This is not the end of course , There’s still a lot to discover this is only the beginning .. Wait for the next Article For Testing Components , Services & More 🙂

Don’t just read about it , try it !

Happy learning ..

Marina Shafik