如何解决为什么在Angular 10单元测试中未将FormControl标记为脏?
以下测试在Angular 9上通过,但是在Angular 10上失败。为什么?
upgrade-test.component.html:
<input [formControl]="formControl" />
upgrade-test.component.ts
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-upgrade-test',templateUrl: './upgrade-test.component.html'
})
export class UpgradeTestComponent {
formControl: FormControl = new FormControl(0);
}
upgrade-test.component.spec.ts:
import { TestBed } from '@angular/core/testing';
import { UpgradeTestComponent } from './upgrade-test.component';
import { ReactiveFormsModule } from '@angular/forms';
describe('Test',() => {
TestBed.configureTestingModule({
declarations: [UpgradeTestComponent],imports: [ReactiveFormsModule],});
it('should pass',() => {
const fixture = TestBed.createComponent(UpgradeTestComponent);
const component = fixture.componentInstance;
fixture.detectChanges();
expect(component.formControl.dirty).toBeFalsy();
component.formControl.patchValue(1);
const inputElem: HTMLInputElement = fixture.nativeElement.querySelector('input');
inputElem.dispatchEvent(new Event('change'));
fixture.detectChanges();
expect(component.formControl.dirty).toBeTruthy();
});
});
测试结果:
Test ✗ should pass Expected false to be truthy. at UserContext. (http://localhost:9876/_karma_webpack_/src/app/components/upgrade-test/upgrade-test.component.spec.ts:21:41) at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:364:1) at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:292:1) at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:363:1)
解决方法
因为 patchValue()
或 setValue()
方法不会改变控件或表单的 dirty
状态。
如果用户更改了 UI 中的值,则控件是脏的。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。