undefined is not an object. While Unit Testing on Angular

Question

I have been testing my simple component in angular. I am trying to test a function which returns some data from a service's function. I configured the testbed setup the initial boilerplate, not when i try to test the function it says

TypeError: undefined is not an object (evaluating 'this.siAuthenticationService.getCustomerList') in http:/ /localhost:9876/_karma_webpack_/main.js

This is my component:

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

import { SiAuthenticationService } from '@strategic-insights/ng-authentication-fr';

declare var $: any;

@Component({
  selector: 'si-customer-access',
  templateUrl: './si-customer-access.component.html',
  styleUrls: ['./si-customer-access.component.scss']
})
export class SiCustomerAccessComponent {
  customerList: any;
  selectedCustomer: any;

  constructor (private siAuthenticationService: SiAuthenticationService) {
    this.customerList = this.fetchCustomerList()
    $('#siCustomerAccessModal').modal({
      backdrop: 'static',
      keyboard: false,
      focus: true,
      show: true
    });

  }

  fetchCustomerList(){
    return this.siAuthenticationService.getCustomerList();
  }
  
  submit () {
   this.siAuthenticationService.setActiveCustomer(this.selectedCustomer);
  }

  setSelectedCustomer (selectedCustomer: string) {
    this.selectedCustomer = selectedCustomer;
  }

}

This is my spec file:

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

import { SiCustomerAccessComponent } from './si-customer-access.component';
import { SiAuthenticationService } from '@strategic-insights/ng-authentication-fr';
import { HttpClientModule } from '@angular/common/http';

describe('SiCustomerAccessComponent', () => {
  let component: SiCustomerAccessComponent;
  let fixture: ComponentFixture<SiCustomerAccessComponent>;
  let service: SiAuthenticationService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ SiCustomerAccessComponent],
      providers : [{provide: SiAuthenticationService}],
      imports: [HttpClientModule],
    })
    fixture = TestBed.createComponent(SiCustomerAccessComponent);
    component = fixture.componentInstance;
    service = TestBed.get(SiAuthenticationService);
  });


  beforeEach(() => {

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

  it('fetchCustomerList to be called',()=>{
    component.fetchCustomerList()
    expect(component.fetchCustomerList).toHaveBeenCalled()
    service.getCustomerList()
    expect(service.getCustomerList).toHaveBeenCalled()
  })
});

Can anyone help me where I am going wrong?

Wandrille Wandrille · Accepted Answer · 2020-02-10T07:05:21

You need to spy your method. See an official example of Angular :

let httpClientSpy: { get: jasmine.Spy };
let heroService: HeroService;

beforeEach(() => {
  // TODO: spy on other methods too
  httpClientSpy = jasmine.createSpyObj('HttpClient', ['get']);
  heroService = new HeroService(<any> httpClientSpy);
});

it('should return expected heroes (HttpClient called once)', () => {
  const expectedHeroes: Hero[] =
    [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];

  httpClientSpy.get.and.returnValue(asyncData(expectedHeroes));

  heroService.getHeroes().subscribe(
    heroes => expect(heroes).toEqual(expectedHeroes, 'expected heroes'),
    fail
  );
  expect(httpClientSpy.get.calls.count()).toBe(1, 'one call');
});

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

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

  heroService.getHeroes().subscribe(
    heroes => fail('expected an error, not heroes'),
    error  => expect(error.message).toContain('test 404 error')
  );
});

undefined is not an object. While Unit Testing on Angular

1 Answers