Closed
Description
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'));
});