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;
  }
}

Could you create a minimal, reproducible example, preferably on StackBlitz or similar? What is the rest of component.spec.ts and component.ts? — Chris Yungmann
– Chris Yungmann, Commented Oct 10, 2019 at 21:31

BuZZ-dEE · Accepted Answer · 2023-05-05 20:39:36Z

47

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!

edited May 5, 2023 at 20:39

BuZZ-dEE

7,15316 gold badges75 silver badges105 bronze badges

answered Oct 11, 2019 at 8:38

Pedro Bezanilla

1,38518 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aizen Murtaza · Accepted Answer · 2020-01-24 07:24:05Z

21

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
   })

answered Jan 24, 2020 at 7:24

Aizen Murtaza

1,8182 gold badges22 silver badges31 bronze badges

3 Comments

Rebai Ahmed Over a year ago

I have a question, why you used providers?

Aizen Murtaza Over a year ago

@RebaiAhmed sorry, can't tell now, it was more than 3 years ago. I haven't worked on frontend for while now.

Rayshaun Thompson Over a year ago

@RebaiAhmed In the context of Typescript and Angular, components that take a service (or anything else) via dependency injection get that service in their constructor. You inject dependencies into the test component via the providers list.

satanTime · Accepted Answer · 2020-12-21 07:34:48Z

4

You might consider usage of ng-mocks to avoid all that boilerplate to configure TestBed.

beforeEach(() => MockBuilder(UsersListComponent)
  .mock(TopToolBarService, {
    // adding custom behavior to the service
    getCustomer: jasmine.createSpy().and.returnValue('king'),
  })
);

it('should return data from service function', () => {
  const fixture = MockRender(UsersListComponent);
  // now right after the render the property should be true
  expect(fixtur.point.componentInstance.bDefine).toBe(true);
}));

answered Dec 21, 2020 at 7:34

satanTime

13.7k1 gold badge34 silver badges78 bronze badges

5 Comments

sunil Over a year ago

How to mock the custom pipe using ng-mock , any example ?

satanTime Over a year ago

There is MockPipe function: ng-mocks.sudo.eu/api/MockPipe

Rebai Ahmed Over a year ago

Why we combined ng-mocks and jasmine.createSpy()?

satanTime Over a year ago

ng-mocks allows you to customize only what you want, for example getCustomer only. So you don't need to mock other dependencies if they exist.

Rebai Ahmed Over a year ago

What's the advantage of including ng-mocks here?

observingstream · Accepted Answer · 2019-10-10 21:33:09Z

1

You have to configure the testing module before you run your code. It doesn't know about your spy object unless you pass it to the TestBed.configureTestingModule as an import.

https://angular.io/guide/testing#component-with-a-dependency

answered Oct 10, 2019 at 21:33

observingstream

4663 silver badges8 bronze badges

1 Comment

runderworld Over a year ago

link broken, update to angular.io/guide/…

Pradeep Vasu · Accepted Answer · 2024-06-28 08:20:26Z

-1

Hi please try this.

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { AppService } from './app.service';
import { of } from 'rxjs/internal/observable/of';

describe('AppComponent', () => {

  beforeEach( () => {
    TestBed.configureTestingModule({
      imports: [AppComponent],
      providers: [AppService],
    }).compileComponents();
  });

  it('should render with mocked title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const service = fixture.debugElement.injector.get(AppService);
    let mockData = {
      id: 1,
      title: 'Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptop',
      price: 109.95,
      description:
        'Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday',
      category: "women's clothing",
      image: 'https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg',
      rating: { rate: 3.9, count: 120 },
    };

    spyOn(service, 'getData').and.returnValue(of(mockData));
  
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptop');
    
  });


});

for more details please visit my blog

https://code-js.in/angular/understanding-unit-testing-in-angular-mocked-service-api-calls-and-component-rendering/

answered Jun 28, 2024 at 8:20

Pradeep Vasu

12 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to mock service function in Angular component for unit test

5 Answers 5

Comments

3 Comments

5 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

5 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related