How to mock service function in Angular component for unit test

Question

I am writing unit test for angular app, I am testing if the service function returns a value.

component.spec.ts

import {TopToolBarService} from '../../top-toolbar/top-toolbar.service';  beforeEach(async(() => {    TestBed.configureTestingModule ({    declarations: [ UsersListComponent],    providers: [TopToolBarService],//tried mocking service here,still test failed    schemas:[CUSTOM_ELEMENTS_SCHEMA]  })   .compileComponents(); }));    beforeEach(() => {     fixture = TestBed.createComponent(UserListComponent);     component = fixture.componentInstance;     fixture.detectChanges();   });      it('should return data from service function', async(() => {     let mockTopToolBarService: jasmine.SpyObj<TopToolBarService>;     mockTopToolBarService = jasmine.createSpyObj('TopToolBarService', ['getCustomer']);     mockTopToolBarService.getCustomer.and.returnValue("king");     fixture.detectChanges();     expect(component.bDefine).toBe(true); //fails   }))  

component.ts

bDefine = false; ngOnInit() {  let customer = this.topToolBarService.getCustomer();  if (customer == null) {    bDefine = false;  } else {     bDefine = true;    } } 

I believe I have mocked the service function in my test, so I expect it must have reached else part where variable is set to 'true'.

TopToolBarService.ts

import { EventEmitter, Injectable, Output } from "@angular/core";  @Injectable() export class TopToolBarService { customer = null;    getCustomer() {     return this.customer;   } } 

Answer 1

Try updating providers inside beforeEach(async(() => ...) and moving your mockedService variable on the top of it:

describe('Component TEST', () => {    ...    let mockToolBarService;    ...       beforeEach(async(() => {       ...       mockToolBarService = jasmine.createSpyObj(['getCustomer']);       mockToolBarService.getCustomer.and.returnValue('king');       TestBed.configureTestingModule ({            ...            providers: [ { provide: TopToolBarService, useValue: mockToolBarService } ]            ... 

Hope it helps!

Answer 2

Change your provider value

beforeEach(() => {    TestBed.configureTestingModule({       declarations: [ UsersListComponent],       providers: [{          provide: TopToolBarService,          useValue: jasmine.createSpyObj('TopToolBarService', ['getCustomer'])       }],       schemas:[CUSTOM_ELEMENTS_SCHEMA]      });      mockTopToolBarService = TestBed.get(TopToolBarService);       mockTopToolBarService.getCustomer.and.returnValue(of([])); // mock output of function    })