[英]Setting initial values to Angular form group for testing
I'm writing a unit test for an Angular 7 reactive form that has its input values pre-filled with server data on ngInit. 我正在为Angular 7反应形式编写单元测试,其输入值已预先用ngInit上的服务器数据填充。 How can I set the values of this form so that it doesn't five me a "value undefined" error during testing? 如何设置此表单的值,以便在测试过程中不会给我五个“未定义值”错误?
This is my form being pre-filled on ngOnInit: 这是我在ngOnInit上预先填写的表单:
ngOnInit() {
this.userForm = this.formBuilder.group({
id: [ this.user.id ],
first_name: [this.user.first_name, Validators.required],
last_name: [this.user.last_name, Validators.required],
});
This is the current (barebones) test code for the form: 这是表单的当前(准系统)测试代码:
//import modules
describe('UserListItemComponent', () => {
let component: UserListItemComponent;
let fixture: ComponentFixture<UserListItemComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
MaterialModule,
ReactiveFormsModule,
FormsModule,
],
declarations: [
UserListItemComponent,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UserListItemComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
component.userForm.setValue({
id: 123,
first_name: "john",
last_name: "smith",
});
expect(component).toBeTruthy();
});
});
However, the Karma test runner still says it's undefined for id. 但是,业力测试运行程序仍然说它是id的未定义。 Is it because it's not pre-filling the data with setValue
? 是因为它没有用setValue
预先填充数据吗?
Calling fixture.detectChanges();
调用fixture.detectChanges();
will call ngOnInit()
, but the user
property is undefined. 将调用ngOnInit()
,但user
属性未定义。 You can change your code like this: 您可以这样更改代码:
fixture = TestBed.createComponent(UserListItemComponent);
component = fixture.componentInstance;
const user = {
//your properties here
};
component.user = user;
fixture.detectChanges();
You can have a function to update the form values, when testing: 测试时,您可以具有更新表单值的功能:
function updateForm(id: string, first_name: string, last_name: string) {
component.userForm.controls['id'].setValue(id);
component.userForm.controls['first_name'].setValue(first_name);
component.userForm.controls['last_name'].setValue(last_name);
}
In the test case: 在测试用例中:
it('should create form', () => {
updateForm('1','john','smith');
expect(component).toBeTruthy();
expect(component.userForm.value).toBeTruthy();
});
Or you can pass the user
object to component using: 或者,您可以使用以下方法将user
对象传递给组件:
`component.user = mockUser;`
And the form values will be set onInit. 并将表单值设置为onInit。
Most likely the error you have because of undefined user
property on component. 您最有可能是由于组件上的未定义user
属性而导致的错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.