Angular：测试是否执行了 EventEmitter 订阅回调

Question

我已经像这样嘲笑过 TranslateService：

import { EventEmitter } from '@angular/core';
import { LangChangeEvent } from '@ngx-translate/core';

export class MockTranslateService {
    onLangChange = new EventEmitter<LangChangeEvent>();
    setDefaultLang(lang: string) { }
    use(lang: string) {
        this.onLangChange.emit({lang: lang} as LangChangeEvent);
     }
}

这是我要测试的 app.component 的 ngOnInit 方法：

ngOnInit() {
    this.translateService.setDefaultLang('en');

    this.translateService.onLangChange.subscribe((langChangeEvent: LangChangeEvent) => {
        this.localStorageService.setItem(LocalStorageService.languageKey, langChangeEvent.lang);
    });
}

这是我在 app.component.spec.ts 中为 ngOnInit 编写的测试，用于检查 ngOnInit 是否将语言保存在本地存储中：

  describe('ngOnInit', () => {
  it('should set new lang key to localStorageService on TranslateService.onLangChange observable emit', () => {
    const localStorageService = fixture.debugElement.injector.get(LocalStorageService);
    const translateService = fixture.debugElement.injector.get(TranslateService);
    spyOn(localStorageService, 'setItem');
    spyOn(translateService.onLangChange, 'emit');
    component.ngOnInit();
    translateService.onLangChange.emit({lang: 'de'}); <----- Shouldn't this have triggered the subscription callback in the ngOnInit of the component?
    expect(translateService.onLangChange.emit).toHaveBeenCalled();
    fixture.detectChanges();

    expect(localStorageService.setItem).toHaveBeenCalledWith(LocalStorageService.languageKey, 'de');
});

}); 

这是这个测试的输出：

我不明白。如果我在测试中调用 EventEmitter 的发出，那不应该触发组件中的订阅吗？

Answer 1

问题是你创建了一个spy:

spyOn(translateService.onLangChange, 'emit');

这个 spy 替换了原始的 emit 事件，该函数现在只能作为 spy 工作。您需要将其更改为：

spyOn(translateService.onLangChange, 'emit').and.callThrough();

这样EventEmitter 的原始emit 功能就可以工作了。