Angular单元测试如何订阅事件发射器

Question

在我的单元测试中，我想用ngOnDestroy方法中的这三个事件发射器调用openDialog,openPdf,getPath。我怎么打电话给他们?

component.ts:

pdfPath: string = ''; // will be edited later
@Output() openDialog = new EventEmitter();
@Output() openPdf = new EventEmitter();
@Output() getPath: EventEmitter<string> = new EventEmitter();

getData() {
// ...
this.openDialog.emit(true);
}
showData() {
// ...
this.openPdf.emit();
}
fetchData() {
// ...
this.getPath.emit(this.pdfPath);
}

ngOnDestroy(): void {
this.openDialog.unsubscribe();
this.openPdf.unsubscribe();
this.getPath.unsubscribe();
}

我试过在beforeEach中这样调用它们，并使用spyOn(组件)。openDialog、"订阅");，但这不起作用:

const emitter = new EventEmitter();
component.openDialog = emitter;
component.openPdf = emitter;
component.getPath = emitter;
emitter.emit(true);

Answer 1

我希望我正确理解了你的问题。

如果您想检查emit函数是否被调用，那么您可以使用spy检查:

it('#getData should emit openDialog', () => {
const emitSpy = spyOn(component.openDialog, 'emit');
component.getData();
expect(emitSpy).toHaveBeenCalled(); // checks if `openDialog.emit()` has been called
expect(emitSpy).toHaveBeenCalledWith(true); // checks if `openDialog.emit()` has been called with `true`
});

有关间谍的更多信息，请搜索"茉莉间谍"。

如果您只是在单元测试中使用emit()函数，那么您可以使用自动生成的component变量:

describe('BookShelfComponent', () => {
let component: BookShelfComponent; // your component
let fixture: ComponentFixture<BookShelfComponent>;
// ...
beforeEach(() => {
fixture = TestBed.createComponent(BookShelfComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('#openDialog.emit should emit openDialog', () => {
const emitSpy = spyOn(component.openDialog, 'emit');
component.openDialog.emit(); // call `emit()`
expect(emitSpy).toHaveBeenCalled(); // only for the demonstration that `emit()` was executed
});
});

如果这还不能回答你的问题，再试着更清楚地描述你的问题。

代码中的另一个异常是ngOnDestroy()。将unsubscribe()调用到EventEmitter，这是不应该的。因为eventemitter应该只用于从组件发出事件，因此它们不应该被订阅，所以不需要取消订阅。
如果你需要订阅它，你应该使用一个主题，而不是一个EventEmitter与@Output。