Я пытаюсь проверить вход, который объявлен так:
<input
#monthElement
maxlength="2"
type="text"
name="month"
ngModel
#month="ngModel"
placeholder="MM"
/>
В некоторых функциях, которые запускаются для проверки правильности введенного месяца, я делаю такую проверку (это просто заглушено):
isValid(input) {
return input && this.isValidMonth(input.value) && input.isDirty
}
Эта функция isValid
вызывается из шаблона, и в нее передается переменная month
. Все работает как положено.
В моих модульных тестах я хочу протестировать эту функцию isValid
, но она не работает, потому что input.isDirty
не определено. Это моя тестовая функция:
it('should declare the month input value to be valid if the value is 01', async () => {
const monthInputElement: DebugElement = fixture.debugElement.query(By.css('input[name="month"]'));
monthInputElement.nativeElement.value = '01';
monthInputElement.nativeElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
console.log('monthInputElement.nativeElement.value: ', monthInputElement.nativeElement.value);
console.log('isDirty: ', monthInputElement.nativeElement.dirty);
const isValid = component.isMonthValid(monthInputElement.nativeElement.value);
expect(isValid).toBe(true);
});
Я подтвердил этот файл console.log на nativeElement.value
, что значение изменилось, но nativeElement.isDirty
не определено. Как я могу проверить этот компонент и функцию, чтобы у меня был тот же элемент для теста, который шаблон передает функции?
Редактировать
Я также пытался заставить isDirty
работать над полем ввода с реактивными формами:
// my.component.ts
public testFormGroup: FormGroup = new FormGroup({
testField: new FormControl(),
});
<!-- my.component.html -->
<form [formGroup]="testFormGroup">
<input type="text" formControlName="testField" />
</form>
// my.component.spec.ts
component.testFormGroup.controls.testField.setValue('01');
console.log('testField Value', component.testFormGroup.controls.testField.value);
console.log('testField isDirty', component.testFormGroup.controls.testField.dirty);
fixture.detectChanges();
fixture.whenStable().then(() => {
console.log('testField isDirty', component.testFormGroup.controls.testField.dirty);
expect(component.testFormGroup.controls.testField.dirty).toBe(true);
});
Единственная разница с реактивной формой состоит в том, что .dirty
составляет false
, а не undefined
.