Question

最近很抱歉，如果它与任何问题重复。我没有找到解决问题的办法。

所以我有一个带有一个输入字段的表单。当我在onInit中获取数据时，我将该值放在该字段中并使其原始。手动更改值后，表单变脏并执行一些操作。

它可以在组件中工作，但我无法对其进行正确的测试。在输入字段中输入setValue()后，它保持原始状态（测试中）。但是我需要模拟真实的输入，并且原始形式应该变成false。

component.ts

ngOnInit() {
    this.form = this.fb.group({
        speed: this.fb.control(null)
    });

    this.service.getData().pipe(takeUntil(this.destroyed$))
        .subscribe(info => {
            this.info = info;
            this.updateForm();
        });
}


updateForm() {
    this.form.patchValue({
        speed: this.info.speed
    });
    this.form.get('speed').setValidators([
        Validators.required,
        Validators.pattern('^[0-9]*$'),
    ]);
    this.form.markAsPristine();
}

component.spec.ts

beforeEach(() => {
    fixture = TestBed.createComponent(component);
    component = fixture.componentInstance;
    fixture.detectChanges();
});

it('should create', () => {
    expect(component).toBeTruthy(); // passed
});

it('should make form dirty', () => {
    component.info = generateInfo();
    fixture.detectChanges();
    component.updateForm();
    fixture.whenStable().then(() => {
        expect(component.form.pristine).toBeTruthy();
        expect(component.form.get('speed').value).toBe(20);
        component.form.controls['speed'].setValue(10);
        expect(component.form.pristine).toBeFalsy();  //error Expected true to be falsy.
    });
});

Answer 1

尝试使用

let form = fb.group({
speed : ['']
});
form.controls.speed.setValue('10');
expect(form.pristine).toBeFalsy();

如果要检查错误，可以改写为：

expect(form.controls.speed.valid).toBe(false);

Angular 6单元测试：以反应形式更改原始数据

1 个答案: