dispatchEvent won't call FormGroup.valueChanges in test

[adorogensky]

Which @angular/* package(s) are the source of the bug?

forms

Is this a regression?

Yes

Description

Full description is at https://github.com/adorogensky/ngtest/tree/a01

Please provide a link to a minimal reproduction of the bug

https://github.com/adorogensky/ngtest/tree/a01

Please provide the exception or error you saw

1) should call formGroup.valueChanges when 'input' event is dispatched
     AppComponent
     Expected undefined to equal 'ba'.
    at <Jasmine>
    at UserContext.apply (src/app/app.component.spec.ts:38:29)

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 14.2.13
Node: 16.15.0
Package Manager: npm 8.5.5 
OS: darwin arm64

Angular: 14.3.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.13
@angular-devkit/build-angular   14.2.13
@angular-devkit/core            14.2.13
@angular-devkit/schematics      14.2.13
@angular/cli                    14.2.13
@schematics/angular             14.2.13
rxjs                            7.5.7
typescript                      4.7.4

Anything else?

No response

[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();

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}