I'm writing a unit test for an Angular 7 reactive form that has its input values pre-filled with server data on 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() {
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 ponent: UserListItemComponent;
let fixture: ComponentFixture<UserListItemComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
MaterialModule,
ReactiveFormsModule,
FormsModule,
],
declarations: [
UserListItemComponent,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
pileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UserListItemComponent);
ponent = fixtureponentInstance;
fixture.detectChanges();
});
it('should create', () => {
ponent.userForm.setValue({
id: 123,
first_name: "john",
last_name: "smith",
});
expect(ponent).toBeTruthy();
});
});
However, the Karma test runner still says it's undefined for id. Is it because it's not pre-filling the data with setValue
?
I'm writing a unit test for an Angular 7 reactive form that has its input values pre-filled with server data on 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() {
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 ponent: UserListItemComponent;
let fixture: ComponentFixture<UserListItemComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
MaterialModule,
ReactiveFormsModule,
FormsModule,
],
declarations: [
UserListItemComponent,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
.pileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UserListItemComponent);
ponent = fixture.ponentInstance;
fixture.detectChanges();
});
it('should create', () => {
ponent.userForm.setValue({
id: 123,
first_name: "john",
last_name: "smith",
});
expect(ponent).toBeTruthy();
});
});
However, the Karma test runner still says it's undefined for id. Is it because it's not pre-filling the data with setValue
?
3 Answers
Reset to default 4Calling fixture.detectChanges();
will call ngOnInit()
, but the user
property is undefined. You can change your code like this:
fixture = TestBed.createComponent(UserListItemComponent);
ponent = fixture.ponentInstance;
const user = {
//your properties here
};
ponent.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) {
ponent.userForm.controls['id'].setValue(id);
ponent.userForm.controls['first_name'].setValue(first_name);
ponent.userForm.controls['last_name'].setValue(last_name);
}
In the test case:
it('should create form', () => {
updateForm('1','john','smith');
expect(ponent).toBeTruthy();
expect(ponent.userForm.value).toBeTruthy();
});
Or you can pass the user
object to ponent using:
`ponent.user = mockUser;`
And the form values will be set onInit.
Most likely the error you have because of undefined user
property on ponent.
you can make:
ponent.ngOnInit();
ponent.form.setValue({
status : StatusEnum.AKTIV_ABSCHLUSSVERMITTLER,
name : "name",
vorname : "vorname",
betreuernummer: "23213",
geschaeftspartnernummer: "321313"
});
ponent.getColorForTabel();
need call ponent.ngOnInit(); before setValue