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?

• javascript
• angular
• unit-testing

3 Answers 3

Calling 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