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