How to write unit tests for component in an Angular app using the Jasmine framework and karma

In this article, we discuss how to write a unit test for components for the angular application.
Unit Test: It’s a fundamental step in software development.
There are mainly 3 types of tests:

1) Unit tests
2) Integration tests
3) E2E (end to end) tests

In this article, we discuss the ” Unit tests” using the “Jasmine framework”.


Jasmine framework provides several valuable functions to write tests. Below are the main Jasmine methods:

1) it(): Declaration of a particular test
2) describe(): It’s a suite of tests
3) expect(): Expect the value in true form


it('should change title to Hello New World', async(() => {
    fixture = TestBed.createComponent(HellowordComponent);
    fixture.nativeElement.querySelector('button').click();
    fixture.detectChanges();
    expect(fixture.nativeElement.querySelector('h1').textContent).toEqual('Hello New World');
}));

Let’s start the new application for the write unit test
Setting Up an Angular App
First, we need to create a new project to start.


ng new unittest-angular

The above command creating the application will take a few minutes to download all of the necessary dependencies. after creating the application you need browse the created application folder example ” cd unittest-angular”. Open that project in the visual studio code just write the “code .” to open project, in that we can find the “karma.conf.js”
Let’s create an HellowordComponent to write unit tests to generate “HellowordComponent” run below command.


ng generate component helloword

let’s add the title attribute in the helloword component. Display in the below code.


import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-helloword',
  templateUrl: './helloword.component.html',
  styleUrls: ['./helloword.component.scss']
})
export class HellowordComponent implements OnInit {


  title = "Hello World";

  constructor() { }

  ngOnInit(): void {
  }

  onClick(){
    this.title = "Hello New World";
  }

You can see there is another file created helloword.component.spec.ts and this is a test file that is responsible for testing in Angular and testing file looks like this. we need to write the code there to test.


import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { HellowordComponent } from './helloword.component';

describe('HellowordComponent', () => {
  let component: HellowordComponent;
  let fixture: ComponentFixture<HellowordComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HellowordComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HellowordComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it(`should have a title 'Hello World'`, async(() => {
    fixture = TestBed.createComponent(HellowordComponent);
    component = fixture.debugElement.componentInstance;
    expect(component.title).toEqual('Hello World');
  }));

  it('should change title to Hello New World', async(() => {
    fixture = TestBed.createComponent(HellowordComponent);
    fixture.nativeElement.querySelector('button').click();
    fixture.detectChanges();
    expect(fixture.nativeElement.querySelector('h1').textContent).toEqual('Hello New World');
}));

});

The fixture creates a wrapper around a component instance, The fixture TestBed.createComponent() method allows accessing the component and its template. Above example, we used to check the title value for the unit test

expect(fixture.nativeElement.querySelector('h1').textContent).toEqual('Hello New World');

We need to run the below command to testing an Angular component.

 ng test

You can see the chrome browser option with the debug. display in the below video.

Download the Code from the below link.
Download Code

Spread the love
  •  
  •  
  •  
  •  
  • 2
  • 2
  •  
  •