NgOnInit中调用的模拟函数的角间谍

Question

我有一个具有多个依赖项的用户服务。这就是为什么我嘲笑它不将那些依赖项导入到组件的测试中。

问题：

我如何监视模拟函数的调用？

代码：

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

import {HeaderComponent} from './header.component';
import {HttpClientTestingModule} from '@angular/common/http/testing';
import {NO_ERRORS_SCHEMA} from '@angular/core';
import {UserService} from '../user/user.service';
import {ReplaySubject, Subject} from 'rxjs';
import {User} from '../user/user.interface';

describe('HeaderComponent', () => {
  let component: HeaderComponent;
  let fixture: ComponentFixture<HeaderComponent>;

  class MockUserService {
    fakeUser: User = {
      userName: 'Mr. Fake',
      onlineStatus: false
    };
    public userChanged: ReplaySubject<User> = new ReplaySubject<User>();
    constructor() { }
    public getUser(): void {
      this.userChanged.next(this.fakeUser);
    }
  }

  let getUserSpy;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [HeaderComponent],
      imports: [HttpClientTestingModule],
      providers: [{provide: UserService, useClass: MockUserService}],
      schemas: [ NO_ERRORS_SCHEMA ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HeaderComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

  it('should query user on load from user service', () => {
    getUserSpy = spyOn<any>(MockUserService, 'getUser');
    expect(getUserSpy).toHaveBeenCalled();
  });
});

我知道

getUser() method does not exist

编辑解决方案

The function must be retrieved with `userService = fixture.debugElement.injector.get(UserService);` and then spied on before `detectChanges` is called.

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

import {HeaderComponent} from './header.component';
import {HttpClientTestingModule} from '@angular/common/http/testing';
import {NO_ERRORS_SCHEMA} from '@angular/core';
import {UserService} from '../user/user.service';
import {ReplaySubject} from 'rxjs';
import {User} from '../user/user.interface';

describe('HeaderComponent', () => {
  let component: HeaderComponent;
  let fixture: ComponentFixture<HeaderComponent>;

  class MockUserService {
    fakeUser: User = {
      userName: 'Mr. Fake',
      onlineStatus: false
    };
    public userChanged: ReplaySubject<User> = new ReplaySubject<User>();
    constructor() { }
    public getUser(): void {
      this.userChanged.next(this.fakeUser);
    }
  }

  let userService: UserService;

  let getUserSpy;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [HeaderComponent],
      imports: [HttpClientTestingModule],
      providers: [{provide: UserService, useClass: MockUserService}],
      schemas: [ NO_ERRORS_SCHEMA ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HeaderComponent);
    component = fixture.componentInstance;
    userService = fixture.debugElement.injector.get(UserService);
    getUserSpy = spyOn<any>(userService, 'getUser');
    fixture.detectChanges();
  });

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

  fit('should query user on load from user service', () => {
    expect(getUserSpy).toHaveBeenCalled();
  });
});

Answer 1

您可以在本地定义marketService变量：

  it('should query user on load from user service', () => {
    const marketService = TestBed.get(MarketService);
    spyOn<any>(marketService, 'getUser');

    /* call here component method that use marketService.getUser method */
    expect(marketService.getUser).toHaveBeenCalled();
  });

或所有测试描述之前：

describe('title', () => {
  let marketService: MarketService;


  beforeEach(() => {
    /* others */

    marketService = TestBed.get(MarketService);

    /* others */
  });

  it('expectation', () => {});
});