在茉莉花测试用例中测试发射答案

【问题标题】：Test for emit in jasmine test cases在茉莉花测试用例中测试发射
【发布时间】：2021-03-03 13:51:30
【问题描述】：

我正在学习用 jasmine 为 Angular 应用程序编写测试用例我有以下功能

public renderPage() {
   
    this.setupData();
    //===
    this.emitEvent('onPageReady', { canSwipe: this.canSwipe }, true);
  }

我想检查这个函数是否触发了emitevent，我在测试用例中尝试了以下

 it('should emit from RenderPage', () => {
    spyOn(component, 'renderPage');
    expect(component.renderPage.emit).toHaveBeenCalled();
  });

但这给了我错误，请指导正确的方法是什么

【问题讨论】：

标签： angular unit-testing jasmine tdd karma-jasmine

【解决方案1】：

您正在监视您尝试测试的方法。如果执行此方法，它将存根该方法并且不执行任何操作。此外，您还没有实际调用您的测试方法或任何会触发该方法的方法。

您需要做的是监视 emitEvent 函数并执行您的方法。

const spy = spyOn(component, 'emitEvent')
component.renderPage();
expect(spy).toHaveBeenCalled()

请注意，这是为您提供总体思路的相当伪代码。这可能无法开箱即用

【讨论】：

【解决方案2】：

您可以将组件包装在测试组件中

@Component({
    template: `<app-your-comp> (onPageReady)="onPageReady($event)"></app-your-comp>`
})
class TestComponent {
    e: any;
    onPageReady(e) {
        this.e = e;
    }
}

describe('YourComponent', () => {
    let testComponent: TestComponent;
    let component: YourComponent;
    let fixture: ComponentFixture<TestComponent>;

    beforeEach(async () => {
        await TestBed.configureTestingModule({
        }).compileComponents();
        fixture = TestBed.createComponent(TestComponent);
        testComponent = fixture.componentInstance;
        const e = fixture.debugElement.query(By.directive(YourComponent));
        component = e.componentInstance as YourComponent;
    });

    it('should call onPageReady', async () => {
       // do something
       expect(testComponent.e).toEqual(/* some evt arg */);
    });

【讨论】：