KeyboardEvent的Angular 4单元测试

Question

我试图为我编写的用于限制输入字段可用字符的实用程序编写单元测试。 该方法获取键盘事件，并确定触发了哪个event.code并返回true或event.preventDefault（）。 这很好用，但是我无法在茉莉花/业力中测试它。

模板的当前输入

<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。

Answer 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按键事件（根据我的阅读）。 因此，为了对此进行测试，我使用了一个茉莉花间谍，以查看将KeyboardEvent传递给所构建的实用程序函数时是否调用了preventDefault。 希望这可以节省某人的时间...花了我一段时间才能到达这里！

Answer 2

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