it('runs coalesced change detection', fakeAsync(() => {
  let ranAfterRenderHook = false;

  @Component({ standalone: true, selector: 'app-inner' })
  class InnerComponent {
    constructor() {
      // this is an inner component so that we can register this hook _after_
      // dispatching an event
      afterRender(() => {
        ranAfterRenderHook = true;
      });
    }
  }

  @Component({
    standalone: true,
    imports: [InnerComponent],
    template: `
      <div class="clickable" (click)="noop()"></div>
      @if (showInner) {
        <app-inner />
      }
    `,
  })
  class OuterComponent {
    showInner = false;
    noop = () => {};
  }

  TestBed.configureTestingModule({
    // change this to `false` and the test passes
    providers: [provideZoneChangeDetection({ eventCoalescing: true })],
  });
  const fixture = TestBed.createComponent(OuterComponent);

  document.querySelector('.clickable')!.dispatchEvent(new MouseEvent('click'));
  tick(); // you'd think this would flush the pending CD task, but it doesn't

  fixture.componentInstance.showInner = true;
  fixture.detectChanges();
  tick(); // If afterRender is delayed, surely this should trigger it? Alas, no!

  expect(ranAfterRenderHook).toBe(true);
}));