[英]Angular How to test @HostListener
I have the following directive.我有以下指令。 When applied to an input element, it checks for characters and calls preventDefault when the character is forbidden:当应用于输入元素时,它会检查字符并在字符被禁止时调用 preventDefault:
@Directive({
selector: '[cdtPreventInput]'
})
export class PreventInputDirective implements OnInit {
// the list of characters that are to be prevented
@Input() cdtPreventInput: String;
constructor() { }
ngOnInit() {
if (!this.cdtPreventInput) {
throw new Error('cdtPreventInput cannot be used without providing a
list of characters.');
}
}
@HostListener('keypress', ['$event']) onKeyPress(event) {
if (_.includes(this.cdtPreventInput.split(','), event.key)) {
event.preventDefault();
}
}
Works fine, but I can't figure out how to test it.工作正常,但我不知道如何测试它。 I have the following so far:到目前为止,我有以下几点:
describe('PreventInputDirective', () => {
let fixture;
let input: DebugElement;
beforeEach(() => {
fixture = TestBed.configureTestingModule({
declarations: [PreventInputDirective, TestComponent]
}).createComponent(TestComponent);
input = fixture.debugElement.query(By.directive(PreventInputDirective));
});
it('should create an instance', () => {
const directive = new PreventInputDirective();
expect(directive).toBeTruthy();
});
it('should prevent default keypress event', () => {
const event = new KeyboardEvent('keypress', {
'key': '.'
});
input.nativeElement.dispatchEvent(event);
expect(input.nativeElement.value).toEqual('');
});
@Component({
template: `<input cdtPreventInput="." />`
})
class TestComponent { }
});
It's not working though.虽然它不起作用。 The keypress event is not triggered.不会触发按键事件。 Any idea how to test this directive ?知道如何测试这个指令吗?
I found a solution.我找到了解决方案。 Instead of checking for value (which never changes), I just check the defaultPrevented property on the event.我没有检查值(永远不会改变),而是检查事件的 defaultPrevented 属性。
I was also missing two things :我也错过了两件事:
fixture.detectChanges();夹具.detectChanges(); in the beforeEach在之前的每个
event should be cancelable事件应该是可以取消的
Here's the full test :这是完整的测试:
describe('PreventInputDirective', () => {
let fixture;
let input: DebugElement;
beforeEach(() => {
fixture = TestBed.configureTestingModule({
declarations: [PreventInputDirective, TestComponent]
}).createComponent(TestComponent);
input = fixture.debugElement.query(By.directive(PreventInputDirective));
fixture.detectChanges();
});
it('should create an instance', () => {
const directive = new PreventInputDirective();
expect(directive).toBeTruthy();
});
it('should prevent keypress event', () => {
const event = new KeyboardEvent('keypress', {
'key': '.',
cancelable: true
});
input.nativeElement.dispatchEvent(event);
expect(event.defaultPrevented).toBeTruthy();
});
it('should not prevent keypress event', () => {
const event = new KeyboardEvent('keypress', {
'key': '5',
cancelable: true
});
input.nativeElement.dispatchEvent(event);
expect(event.defaultPrevented).toBeFalsy();
});
@Component({
template: `<input cdtPreventInput="." />`
})
class TestComponent { }
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.