component does not re-render when async pipe is triggered #106
Description
Version info:
"@testing-library/angular": "^9.3.1",
"jest": "^26.0.1",
"@angular/core": "~9.1.9",
Hi,
I made a project with nothing in it except this example component, to demonstrate the issue:
import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Component({
selector: 'mwf-test-show',
template: '<button (click)="toggleShow()" data-testid="toggle">toggle</button><div *ngIf="show$ | async" data-testid="getme">Here I am</div>',
})
export class TestSelectComponent {
showSubj = new BehaviorSubject(false);
show$ = this.showSubj.asObservable().pipe(tap(show => console.log(show)));
toggleShow() {
this.showSubj.next(true);
}
}
In my test I use the waitFor function to see if the hidden div shows after toggling the Observable value to true, but it does not.
The console.log in the pipeline is triggered though. But it's as if the re-rendering does not happen.
it('should show hidden text', async () => {
const {component} = await setup();
const select = component.queryByLabelText('Switch');
const toggle = component.getByTestId('toggle');
const hiddenText = component.queryByTestId('getme');
expect(hiddenText).toBeNull();
fireEvent.click(toggle);
await waitFor(() => expect(hiddenText).not.toBeNull());
});