dispatchEvent won't call FormGroup.valueChanges in test about angular

[jnizet]

Your test doesn't call fixture.detectChanges() before starting to interact with the component. So its lifecycle is never started (ngOnInit isn't called).

[JeanMeche]

Per above.

[adorogensky]

Your test doesn't call fixture.detectChanges() before starting to interact with the component. So its lifecycle is never started (ngOnInit isn't called).

ok.. it does work when I move the change detection above dispatchEvent. But why? Below is an example from angular.io

it('should convert hero name to Title Case', () => {
  // get the name's input and display elements from the DOM
  const hostElement: HTMLElement = harness.routeNativeElement!;
  const nameInput: HTMLInputElement = hostElement.querySelector('input')!;
  const nameDisplay: HTMLElement = hostElement.querySelector('span')!;

  // simulate user entering a new name into the input box
  nameInput.value = 'quick BROWN  fOx';

  // Dispatch a DOM event so that Angular learns of input value change.
  nameInput.dispatchEvent(new Event('input'));

  // Tell Angular to update the display binding through the title pipe
  harness.detectChanges();

  expect(nameDisplay.textContent).toBe('Quick Brown  Fox');
});

[JeanMeche]

detectChanges is responsible for invoking the lifecycle hooks (ngOnInit) in your case.
If you fire the event before the subscription starts, you won't have any changes reported.

I agree the doc isn't great, as it doesn't show that the test file actually invokes detectChanges when creating the component.

angular/adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts

Lines 270 to 277 in 1872fcd

	harness = await RouterTestingHarness.create();
	component = await harness.navigateByUrl(`/heroes/${id}`, HeroDetailComponent);
	page = new Page();
	const request = TestBed.inject(HttpTestingController).expectOne(`api/heroes/?id=${id}`);
	const hero = getTestHeroes().find((h) => h.id === Number(id));
	request.flush(hero ? [hero] : []);
	harness.detectChanges();