Angular 4键盘事件的单元测试

Question

我正在尝试为我编写的限制输入框字符的工具编写单元测试。该方法接收键盘事件并确定哪个 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.

- JamesHandshoe

---

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

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 keypressed事件是不可能的。因此，为了测试这个问题，我使用jasmine spy来查看当我将KeyboardEvent传递给我构建的实用函数时，是否调用了preventDefault。希望这能为某些人节省时间......我花了一段时间才到这里！

- JamesHandshoe

Answer 2

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

- Mohamed Gara