KeyboardEvent 的 Angular 4 单元测试答案

【问题标题】：Angular 4 unit test for KeyboardEventKeyboardEvent 的 Angular 4 单元测试
【发布时间】：2018-04-16 12:46:53
【问题描述】：

我正在尝试为我编写的实用程序编写一个单元测试，以限制输入字段的可用字符。该方法接受键盘事件并确定触发了哪个 event.code 并返回 true 或 event.preventDefault()。这很好用，但我无法在 jasmine / karma 中对其进行测试。

来自模板的当前输入

<input [(ngModel)]="donationValue" formControlName="donationAmount" 
type="tel" class="donation-amount" (keydown)="checkCharacter($event)" 
placeholder="Enter Amount..."/>

这是我目前的测试

it('should return have defaultPrevented as true', fakeAsync(() => {
        const goalInput = 
fixture.debugElement.query(By.css('input.donation-
amount')).nativeElement;
        const keyEventData = { isTrusted: true, code: 'KeyA' };
        const keyEvent = new KeyboardEvent('keydown', keyEventData);
        goalInput.dispatchEvent(keyEvent);
        tick();
        fixture.detectChanges();                
        expect(keyEvent.defaultPrevented).toBe(true);
    }));

我在这些方法上发现了其他测试，但它们正在被解雇。我怀疑 isTrusted 属性设置为 false，即使我尝试将其设置为 true。

【问题讨论】：

请将您的 HTML 和组件代码更新到帖子中

标签： javascript angular unit-testing karma-jasmine

【解决方案1】：

所以 - 我最终使用的答案是这样的：

it('Should call prevent default', inject([ManageUtils], (manageUtils: ManageUtils) => {
    const keyEvent = new KeyboardEvent('keydown', { code: 'KeyA' });
    const spy = spyOn(keyEvent, 'preventDefault');        
    manageUtils.checkCharacterForProperCurrency(keyEvent);
    fixture.detectChanges();
    expect(spy).toHaveBeenCalled()
}));

it('Should not call prevent default', inject([ManageUtils], (manageUtils: ManageUtils) => {
    const keyEvent = new KeyboardEvent('keydown', { code: 'Digit0' });
    const spy = spyOn(keyEvent, 'preventDefault');        
    manageUtils.checkCharacterForProperCurrency(keyEvent);
    fixture.detectChanges();
    expect(spy).toHaveBeenCalledTimes(0);
}));

正如其中一位响应者所回答的那样，不可能创建一个真正的 isTrusted 按键事件（根据我所阅读的内容）。所以为了测试这一点，我使用了一个 jasmine spy 来查看当我将 KeyboardEvent 传递给我构建的实用程序函数时是否调用了 preventDefault。希望这可以节省一些时间...我花了一段时间才到这里！

【讨论】：

【解决方案2】：

当事件被触发时，你不能强制 isTrusted 的值为 false 通过 dispatchEvent 调用。这里是文档https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted

【讨论】：