waitFor not picking up DOM changes from pipeline with debounceTime

[sjbuysse]

Hi,

I made this simple example component, to demonstrate the issue:

@Component({
  selector: 'mwf-test-timing',
  template: '<ng-container *ngIf="resultSet$ | async as resultSet"> <span data-testid="yes">{{resultSet}}</span> </ng-container> <button (click)="handleClick()">CLICK ME</button>',
  styleUrls: ['./test-timing.component.scss']
})
export class TestTimingComponent implements OnInit {
  click$ = new Subject();
  resultSet$ = this.click$.pipe(
    debounceTime(300),
    tap(() => console.log('button was clicked')),
    map(() => 'this is a result')
  );

  constructor() {
  }

  ngOnInit() {
  }

  handleClick() {
    this.click$.next();
  }
}

In my test I use the waitFor function to see if a result shows up, but it does not.
The console.log in the pipeline is triggered though. But it's as if the re-rendering does not happen.
This test passes if I leave out the debounceTime pipe.

  it('should show results', async () => {
    const {component} = await setup();
    const {getByText, getByTestId} = component;
    const button = getByText('CLICK ME');
    component.click(button);
    await waitFor(() => getByTestId('yes'));
  });

[timdeschryver]

Hi, thanks for bringing this up @sjbuysse - I forgot to add this.

[timdeschryver]

🎉 This issue has been resolved in version 9.2.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[sjbuysse]

Thanks @timdeschryver !