如何在angular指令中测试按键事件
如何在angular指令中测试按键事件
提问于 2020-09-09 21:59:19
我在Angular中有一个指令，当满足文本区域的最大长度时，它会阻止使用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'));回答 2
Stack Overflow用户
发布于 2020-09-10 02:05:50
您应该使用dispatchEvent
it('should allow Enter key when maxlength is not met', () => {
component.textareaValue = 'abc';
fixture.detectChanges();
element.dispatchEvent(new Event('keypress', {keyCode: 'enter'}))
expect(event.preventDefault).not.toHaveBeenCalled();
});注意："keypress“已被弃用。但是你可以使用任何你想要的事件类型。
Stack Overflow用户
发布于 2020-09-10 23:15:12
感谢您的回复。我试着这样做：
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，但在这种情况下它失败了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63813287
复制相关文章
相似问题
腾讯云开发者
