Question

我正在尝试测试这样声明的输入：

<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);
});

我已通过nativeElement.value上的console.log确认值已更改，但是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。

ngModel输入上的角度测试检查是否很脏

编辑

0 个答案: