angular 4 unit testing | example | Angular

unit test in angular:

Application testing is the major requirement in all programming languages. Testing the behavior or functionality of the application which must be match with user expectations. In angular two types of application testing may be performed.

1. End to end (e2e) testing using protector

2. Unit testing

1. End to end testing is the top down approach where all test are performed as whole and implemented on browser at user level. To implement e2e testing protector is used.

2. Unit testing is performed at unit level where individual test cases are written as module wise. Unit testing is performed on pipes and service level.Generally component unit testing does not performed directly they are performed using angular testing utilities like TestBed because most of cases components are attached together.

Karma: It provides browser environment for testing. It also called angular test runner.

Jasmine: Jasmin is a javascript code testing tool which also called behavior driven development (BDD) tool. It usually works with karma.

Example:

Step 1: Create new angular project.

Step2 : Create new file(here hello.spec.ts) in app folder

Step 3: Write following code into hello.spec.ts

describe('hellotest' ,() =>{
    let expected ='';
    let notexpected='';
    let expectMatch=null;
    beforeEach(()=>{
        expected ='hellotest',
        notexpected = 'hellotest12',
        expectMatch = new RegExp(/^hello/);
    })
    afterEach(()=>{
        expected ='',
        notexpected = '';
    })
    /* it('check test' , ()=> expect('hellotest').toBe('hellotest'));
    it('check not test' , ()=> expect('hellotest').not.toBe('hellotest12')); */
    it('check test' , ()=> expect('hellotest').toBe(expected));
    it('check not test' , ()=> expect('hellotest').not.toBe(notexpected));
    it('check not test for match' , ()=> expect('hellotest').toMatch(expectMatch));
})

Step 4. Run test using ng test

Step 5: Create new service and test service method. ng g s test

Step 6: Write following code into test.service,ts

import { Injectable } from '@angular/core';

@Injectable()
export class TestService {

  constructor() { }
add(a,b)
{
  return a+b;
}
}

Step 7: Write following code into test.service.spec.ts

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

import { TestService } from './test.service';

describe('TestService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [TestService]
    });
  });

  it('should be created', inject([TestService], (service: TestService) => {
    expect(service).toBeTruthy();
  }));
  it('add function must be there', inject([TestService], (service: TestService) => {
    expect(service.add).toBeTruthy();
  }));
  it('add function should work correctly', inject([TestService], (service: TestService) => {
    expect(service.add(2,3)).toEqual(5);
  }));
});

Step 8 : run test again ng test

Output

unit test example in angular 5

angular 4 unit testing | example

unit test in angular:

Submit a Comment Cancel reply