Проверка углового контроля isDirty на входе ngModel - PullRequest
0 голосов
/ 07 марта 2019

Я пытаюсь проверить вход, который объявлен так:

<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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...