Question

我在Angular中有一条指令，当遇到textarea的最大长度时，该指令阻止使用Enter

@Directive({
    selector: '[abEnter]'
})
export class EnterDirective {
    @HostListener('keypress', ['$event'])
    onKeypress(event) {
        if ((event.target.textLength >= event.target.maxLength) && (event.keyCode === 13)) {
            event.preventDefault();
        }
    }
}

不确定如何测试。在尝试类似的东西

    it('should allow Enter key when maxlength is not met', () => {
            component.textareaValue = 'abc';
            fixture.detectChanges();
            
            const event = createEnterKeyPress();
            element.triggerEventHandler('keypress', event);
            expect(event.preventDefault).not.toHaveBeenCalled();
        });
    
        function createEnterKeyPress() {
            return {keyCode: 13, preventDefault: jasmine.createSpy('preventDefault')};
        }

但是它没有按预期工作

元素是：

element = fixture.debugElement.query(By.css('textarea'));

Answer 1

您应该使用Person myPerson = Person.FromFile("@c:\Public\PeopleFiles\JohnSmith.txt");：

dispatchEvent

注意：不建议使用“按键”。但是您可以使用所需的任何事件类型。

Answer 2

感谢您的答复。我尝试过：

fit('should not allow Enter when maxlength (10) is met', () => {
        component.textareaValue = '0123456789';
        fixture.detectChanges();

        const keydownEvent = new Event('keypress') as any;
        keydownEvent.which = KeyCodes.ENTER;
        keydownEvent.keyCode = KeyCodes.ENTER;
        const spy = spyOn(keydownEvent, 'preventDefault');

        const element: HTMLTextAreaElement = fixture.debugElement.query(By.css('textarea')).nativeElement;
        element.dispatchEvent(keydownEvent);
        expect(spy).toHaveBeenCalled();
    });

我期望它在达到mexlength时通过，并应调用preventDefault，但在这种情况下会失败。

如何在角度指令中测试按键事件

2 个答案: