测试 FormBuilder 是否调用了 NgOnInit() 上的方法组

Question

I am new to angular and angular testing and I have gone through many articles on jasmine testing the formBuilder but did not get much help.
Assume I have the following code

ngOnInit(): void {
  this.someForm = this.formBuilder.group({
    formField1: [null, Validators.required],
    formField2: [null, Validators.required],
    formField3: [null, Validators.required]
  });
}

Now I want to test if group method on formBuilder is called or not. How can I do it in Jasmine angular? I have tried the below code but it is not working:

beforeEach(() => {
  fixture = TestBed.createComponent(ChangePasswordComponent);
  formBuilder = TestBed.inject(FormBuilder);
  component = fixture.componentInstance;
  fixture.detectChanges();
});


it('on ngOnit_ FormBuilder object should call group method', () => {
  fixture.detectChanges();
  const spyObject =  spyOn(formBuilder, 'group');
  fixture.detectChanges();
  expect(spyObject).toHaveBeenCalled();
});

Answer 1

The ngOnInit is called when fixture.detectChanges was first invoked after component creation (in beforeEach here)!

So as you are spying on the form builder service after angular life cycle hooks are called there was no call to form builder's group method.

Solution: As ngOnInit is just a method called by angular, you can invoke it again yourself and assert.

const spyObject = spyOn(formBuilder, 'group');
component.ngOnInit();
fixture.detectChanges();
expect(spyObject).toHaveBeenCalled();