我有一个AllowOnlyNumbers适用于输入类型文本框的指令。
<input
[AllowOnlyNumbers]=true
[maxLength]= 'yearlyFieldMaxLength'
type="tel"
name="totalAnnualIncome"
formControlName="totalAnnualIncome"
[(ngModel)]="yearlyIncomeAmt"
(focus)="onFocusEnableToolTip('TotalAnnualIncome')"
(focusout)="onFocusOutDisableToolTip('TotalAnnualIncome')"
minlength="2"
autocomplete="off"/>
一个非常简单的指令限制用户仅在文本框中输入数字。
import { Directive, HostListener, Input } from '@angular/core';
@Directive({
selector: '[AllowOnlyNumbers]'
})
/**
* @method AllowOnlyNumbers
* @desc This directive restricts the keyboard entry to numbers only.
* Users can enter numbers and can use backspace, tab,enter, escape, end, home, left, right and del keys.
* Usage: <input type = "text" [AllowOnlyNumbers] = true />
*/
export class AllowOnlyNumbers {
constructor() { }
@Input() AllowOnlyNumbers: boolean;
/**
* @methodspace AllowOnlyNumbers
* @method onKeyDown
* @desc It restricts the keyboard entry to numbers only.
* @argument event
* @returns returns only digit
*
*/
@HostListener('keydown', ['$event']) onKeyDown(event) {
const e = event as KeyboardEvent;
if (this.AllowOnlyNumbers) {
// Allow: 8=Backspace, 9= Tab, 13=CR, 27=ESC, 35=END, 36=HOME, 37=Left, 39=Right, 46=DEL
if ([8, 9, 13, 27, 35, 36, 37, 39, 46].indexOf(e.keyCode) !== -1) {
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
}
}
}
现在，当使用茉莉花编写单元测试用例时，我无法将@Input() AllowOnlyNumbers属性设置为true。这始终是未定义的。以下是我的UT文件。（注意：Keydown事件正在触发）
import {ComponentFixture, TestBed} from '@angular/core/testing';
import { AllowOnlyNumbers } from './allow-only-numbers.directive';
import { Component, DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
import { By } from '@angular/platform-browser';
@Component({
template: `<input [AllowOnlyNumbers]= true type="text" name="totalAnnualIncome" />`
})
// tslint:disable-next-line:no-unnecessary-class
class TestAllowOnlyNumbersComponent {
// allowNumbers = true;
}
fdescribe('Directive: AllowOnlyNumbers', () => {
let component: TestAllowOnlyNumbersComponent;
let fixture: ComponentFixture<TestAllowOnlyNumbersComponent>;
let inputEl: DebugElement;
let linkDes;
let routerLinks;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [TestAllowOnlyNumbersComponent, AllowOnlyNumbers],
schemas: [ NO_ERRORS_SCHEMA ]
});
fixture = TestBed.createComponent(TestAllowOnlyNumbersComponent);
component = fixture.componentInstance;
inputEl = fixture.debugElement.query(By.css('input[name="totalAnnualIncome"]'));
});
it('keydown input', () => {
inputEl.triggerEventHandler('keydown', {});
fixture.detectChanges();
expect(true).toBe(true);
});
});
我正在使用此链接作为参考。我无法将该@Input() AllowOnlyNumbers属性设置为true。这始终是未定义的。
回答您的问题：
它应该是[AllowOnlyNumbers]="true"没有[AllowOnlyNumbers]= true在TestAllowOnlyNumbersComponent。
您实际上正在做的是[AllowOnlyNumbers]=不将任何值分配给指令的输入。
另外，您应该fixture.detectChanges()在triggerEventHandler触发初始值绑定之前移动，或者甚至最好将其添加到beforeEach
beforeEach(() => {
...
fixture.detectChanges();
});
it('keydown input', () => {
inputEl.triggerEventHandler('keydown', {});
expect(true).toBe(true);
});
另外，有关您的指令的其他评论：
我认为您应该在指令中替换keyCode为key，因为它似乎keyCode已弃用https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent。我认为更改应该很容易，在您的指令中，您只需读取该键字符串和基于该值的代码const code = e.key.charCodeAt()
然后，我将创建以下测试，以测试这种情况下的“ F”键之一：
it('keydown input', () => {
const event = new KeyboardEvent('keydown', { key: 'F' });
inputEl.nativeElement.dispatchEvent(event);
expect(event.defaultPrevented).toBe(true);
});
我想在指令中进行更改时可能会起作用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句