angular 中从 stencilJS 组件发出的单元测试事件

Question

我有一个 angular 组件，在模板中我有一个 stencilJS 组件，它发出一个我在父组件中处理的事件。我正在尝试为“handleEvent”方法编写单元测试用例，但我无法使用 By.directive(platformNavbarComponent) 获取组件的组件实例，spyOn().and.callFake(...) 也不起作用或可以找到与我的问题相关的任何信息。

Parent.component.html

<cel-platform-navbar 
 (platformSelected)="handleEvent($event)">
</cel-platform-navbar>

Parent.component.ts

handleEvent(ev) {
 console.log(ev)
}

这是我写的测试用例，我收到以下错误

Expected spy handleEvent to have been called

这是测试用例

fit('should call handler for "platformSelected" event', () => {
    const event = new CustomEvent('platformSelected', {detail:{navigationUrl: 'abc'}});
    
    fixture.detectChanges();
        
    const spy = spyOn(component, 'handleEvent').and.callThrough();
        
    window.dispatchEvent(event);
    fixture.detectChanges();
        
    expect(spy).toHaveBeenCalled();
       
  });

Answer 1

尝试使用 triggerEventHandler。

fit('should call handler for "platformSelected" event', () => {
    const spy = spyOn(component, 'handleEvent').and.callThrough();
    const celPlatformNavbar = fixture.debugElement.query(By.css('cel-platform-navbar'));
    celPlatformNavbar.triggerEventHandler('platformSelected', { detail:{navigationUrl: 'abc' }});
    
    fixture.detectChanges();
    expect(spy).toHaveBeenCalled();
       
  });

一篇不错的文章 triggerEventHandler link here.

angular 中从 stencilJS 组件发出的单元测试事件

Unit testing events emitted from stencilJS components in angular

unit-testing

jasmine

angular

stenciljs