Angular 测角键指令(9)
我有一个指令,我正在尝试测试。但指令中值的长度始终未定义 我做错了什么Angular 测角键指令(9),angular,unit-testing,angularjs-directive,jasmine,keyup,Angular,Unit Testing,Angularjs Directive,Jasmine,Keyup,我有一个指令,我正在尝试测试。但指令中值的长度始终未定义 我做错了什么 @Directive({ selector: '[evAutoTab]' }) export class EvAutoTabDirective { @Input('evAutoTab') destId: string; @HostListener('keyup') onKeyup() { this.moveFocus(); } constructor(private el: Elemen
@Directive({
selector: '[evAutoTab]'
})
export class EvAutoTabDirective {
@Input('evAutoTab') destId: string;
@HostListener('keyup') onKeyup() {
this.moveFocus();
}
constructor(private el: ElementRef) {
}
private moveFocus() {
const maxLen = this.el.nativeElement.getAttribute('maxlength');
const len = this.el.nativeElement.valueOf().length;
console.log(`len ${len} maxLen ${maxLen}`);
if (len === maxLen) {
const next: HTMLElement = document.querySelector('#' + this.destId);
next.focus();
}
}
}
测试组件:
@Component({
template: `
<div>
<input evAutoTab="'AutoTab1'" id="AutoTab0" maxlength="4" value=""/>
<input evAutoTab id="AutoTab1" value=""/>
<input evAutoTab id="AutoTab2" value=""/>
</div>
<div>
<input evAutoTab id="AutoTab3" value=""/>
<input evAutoTab id="AutoTab4" value=""/>
<input evAutoTab id="AutoTab5" value=""/>
</div>
`
})
class TestComponent {
constructor() {
}
}
我也尝试过在键之前触发n input事件,但是valueof语句总是返回未定义的您能尝试指令中未注释的行而不是注释的行吗?当提供代码但不在单元测试中时,指令是否工作?这是我第一次看到
valueOf()
这就解决了我的问题。我之所以使用valueOf,是因为我认为它是一个HTMLInputElement,而这正是autocomplete提供的。
it('should move focus from first element if maxlength is reached', async () => {
const debugEl: HTMLElement = fixture.debugElement.nativeElement;
const autoTab0: HTMLInputElement = debugEl.querySelector('#AutoTab0');
// verify setup
autoTab0.focus();
expect(document.activeElement.id).toBe('AutoTab0');
// act
autoTab0.value = '1999';
autoTab0.dispatchEvent(new Event('keyup'));
fixture.detectChanges();
expect(document.activeElement.id).toBe('AutoTab1');
});
// const len = this.el.nativeElement.valueOf().length;
const len = this.el.nativeElement.value.length;