angular - 无法在 Angular 4 中监视注入(inject)服务的方法

Question

我正在尝试监视和拦截我在我尝试进行单元测试的组件中使用的服务方法:

这是我要测试的组件:

export class SearchModuleCheckCardListComponent implements OnInit {
    httpError: boolean = false;


  constructor(private searchModuleService: SearchModuleService) {
    console.log("Constructor");
  }

  ngOnInit() {
    this.fetchSearchModule();
  }



  /**
   * Get all search modules from the back end service
   */
  fetchSearchModule() {
    console.log("FetchSearchModule");
    this.searchModuleService.fetchSearchModules().subscribe(searchModules => 
    {
      //Most code abstracted out for simplicity
      this.httpError = false;
    }, err => {
      this.httpError = true;
    })
  }

基本上我要测试的是属性 httpError 已设置，这就是我的规范文件的样子:(再次删除不相关的代码)

describe('SearchModuleCheckCardListComponent', () => {
  let component: SearchModuleCheckCardListComponent;
  let fixture: ComponentFixture<SearchModuleCheckCardListComponent>;
  let searchModuleService: SearchModuleServiceStub;



  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
                      SearchModuleCheckCardListComponent,
                    ],
      providers:    [
                      { provide: SearchModuleService, useClass: SearchModuleServiceStub },
                    ]
    })
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SearchModuleCheckCardListComponent);
    component = fixture.componentInstance;
    searchModuleService = fixture.debugElement.injector.get(SearchModuleService);
    fixture.detectChanges();
  });

it('should set httpError on error', () => {
    spyOn(searchModuleService, 'fetchSearchModules').and.returnValue(Observable.throw('error'));

    //'Trying to test:'expect(component.httpError).toBeTruthy();

    //This fails  inspite of fetchSearchModules being called in the stub
    expect(searchModuleService.fetchSearchModules).toHaveBeenCalled();
  })
}); 

这是 searchModuleServiceStub 的样子:

export class SearchModuleServiceStub {


  constructor() {}


  fetchSearchModules(): Observable<SearchModule[]> {
    console.log('fetchSearchModules Called');
    return Observable.of(SEARCH_MODULES);
  }
}

现在，当我运行测试时，控制台确实注销了“fetchSearchModules Called”，但 spy 似乎仍然没有拦截函数调用

Answer 1

这是因为 ngOnInit() 生命周期 Hook 在您创建 spy 之前被触发。因此，该函数已在 spy 不知情的情况下被调用。

你有两个选择:

1) 在创建 spy 后，在测试中重新启动 ngOninit()。
2) 在 beforeEach()

中调用 TestBed.createComponent() 之前 创建 spy