Implement unit testing with jasmine/karma by mocking Http Post - Angular 5

Question

I am completely new to unit testing and I am implementing unit testing using jasmine/karma for the first time. I am facing few issues in understanding how I should implement testing by mocking for Http Post. I have gone through few solutions such as : solution1 and solution2

But still I have faced few issues in understanding them and have also faced few errors.

By following solution2 I have tried to implement as follows:

http.service.ts

 update(id,password,url){

    let content = {
        "username": id,
        "password":password,

     }

     const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json'
      })
    };

     return this.http.post(url,content,httpOptions).subscribe((data:any) => {

        if(data.length){
          return true;
        }
        else{
          return false;
        }
      })

http.service.spec.ts

import { TestBed, inject } from '@angular/core/testing';
import { HttpClientModule } from '@angular/common/http'; 
import { HttpService } from './http.service';
import {HttpModule, XHRBackend,Response,ResponseOptions, Connection} from 
'@angular/http';
import {  of } from 'rxjs';
import { MockBackend } from '@angular/http/testing';

 describe('HttpService', () => {
 let mockbackend, service;
 beforeEach(() => {TestBed.configureTestingModule({
 imports:[HttpClientModule, HttpModule],
 providers:[{
 provide: XHRBackend, useclass: MockBackend
 }]

 })
 });

  beforeEach(inject([ XHRBackend], (_service, 
  _mockbackend) => {
  service = _service;
  mockbackend = _mockbackend;
  }));

  it('post method is successfull',() =>{
  const status = 'success';
  const username = '5555555';
  const password = 'test';
  const currentUserExpected = JSON.stringify({status:status});
  const response = { status : status};
  const responseOptions = new ResponseOptions();
  responseOptions.body = JSON.stringify(response);
  mockbackend.connections.subscribe(connection =>{
  connection.mockRespond(new Response(responseOptions));
  });
  service.update(username,password).subscribe(respond =>{
  expect(respond).toEqual(true)
  })
   })

The error I am receiving is this:

Error

Cannot read property 'connections' of undefined

Can someone please help me out in understanding where I am going wrong.

Also I would like to receive reference to any documentation which can help me better understand this.

here is some documentation that may help: https://angular.io/guide/testing#testing-http-services — user372225, Nov 28 '18 at 17:51

score 1 · Answer 1 · answered Nov 28 '18 at 18:04

Here is an example that may help: employee-home.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Employee } from '../models/employee';
import { USER_PROFILE_API_LOCATION  } from '../../serviceConstants';


@Injectable({
  providedIn: 'root'
})
export class EmployeeHomeService {
  constructor(private http: HttpClient) {}

  retrieveEmployee(): Observable<Employee> {
    return this.http.get<Employee>(USER_PROFILE_API_LOCATION);  
  }

  updateEmployee(employee: Employee): Observable<Employee> {
    return this.http.put<Employee>(USER_PROFILE_API_LOCATION, employee); 
  }
}

and then: employee-home.service.spec.ts

import { asyncData, asyncError } from '@bis-angular/shared-helpers-testing';
import { EmployeeHomeService } from './employee-home.service';
import { Employee } from '../models/employee';
import { HttpErrorResponse } from '@angular/common/http';
import { EMPLOYEE } from '../../../fixtures/employee-fixture';

describe('EmployeeHomeService', () => {
  describe('retrieveEmployee function', () => {
     let httpClientSpyGet: { get: jasmine.Spy };
     let employeeHomeServiceGet: EmployeeHomeService;

    beforeEach(() => {
       httpClientSpyGet = jasmine.createSpyObj('HttpClient', ['get']);
       employeeHomeServiceGet = new 
EmployeeHomeService(<any>httpClientSpyGet);
    });

it('should return expected employee (HttpClient called once)', () => {
  const expectedEmployee: Employee = EMPLOYEE;

  httpClientSpyGet.get.and.returnValue(asyncData(expectedEmployee));

  employeeHomeServiceGet
    .retrieveEmployee()
    .subscribe(employee => expect(employee).toEqual(expectedEmployee, 'expected employee'), fail);
  expect(httpClientSpyGet.get.calls.count()).toBe(1, 'one call');
});

it('should return an error when the server returns an error', () => {
  const errorResponse = new HttpErrorResponse({
    error: 'test error',
    status: 404,
    statusText: 'Not Found'
  });

  httpClientSpyGet.get.and.returnValue(asyncError(errorResponse));

  employeeHomeServiceGet
    .retrieveEmployee()
    .subscribe(
      employee => fail('expected an error, not employee'),
      error => expect(error.error).toContain('test error')
    );
});
   });

  describe('updateEmployee function', () => {
    let httpClientSpyPut: { put: jasmine.Spy };
    let employeeHomeServicePut: EmployeeHomeService;
    const expectedEmployee: Employee = EMPLOYEE;

beforeEach(() => {
  httpClientSpyPut = jasmine.createSpyObj('HttpClient', ['put']);
  employeeHomeServicePut = new EmployeeHomeService(<any>httpClientSpyPut);
});

it('should save employee (HttpClient called once)', () => {
  httpClientSpyPut.put.and.returnValue(asyncData(expectedEmployee));

  employeeHomeServicePut
    .updateEmployee(expectedEmployee)
    .subscribe(employee => expect(employee).toEqual(expectedEmployee, 'expected employee'), fail);
  expect(httpClientSpyPut.put.calls.count()).toBe(1, 'one call');
});

it('should return an error when the server returns an error', () => {
  const errorResponse = new HttpErrorResponse({
    error: 'test error',
    status: 404,
    statusText: 'Not Found'
  });

  httpClientSpyPut.put.and.returnValue(asyncError(errorResponse));

  employeeHomeServicePut
    .updateEmployee(expectedEmployee)
    .subscribe(
      employee => fail('expected an error, not employee'),
      error => expect(error.error).toContain('test error')
    );
});
   });
 });

helpers: async-observable-helpers.ts

import { defer } from 'rxjs';


export function asyncData<T>(data: T) {
  return defer(() => Promise.resolve(data));
}


export function asyncError<T>(errorObject: any) {
  return defer(() => Promise.reject(errorObject));
}

Implement unit testing with jasmine/karma by mocking Http Post - Angular 5

1 Answers1

Linked