[英]Angular How to test @HostListener
我有以下指令。 当应用于输入元素时,它会检查字符并在字符被禁止时调用 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();
}
}
工作正常,但我不知道如何测试它。 到目前为止,我有以下几点:
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 { }
});
虽然它不起作用。 不会触发按键事件。 知道如何测试这个指令吗?
我找到了解决方案。 我没有检查值(永远不会改变),而是检查事件的 defaultPrevented 属性。
我也错过了两件事:
夹具.detectChanges(); 在之前的每个
事件应该是可以取消的
这是完整的测试:
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.