testing *ngIf someObservable piped to async in angular template

45 views Asked by At

How do i test using jest that the template displays/hides the expected elements when they are subscribed/unsubscribed using the *ngIf with the async pipe?


`  <ng-content *ngIf="errorStatus$ | async as status; else loading">
    <p>Min observable has a value</p>
    <my-table *ngIf="errorStatus === ErrorStatus.NoErrors"/>
    <errorStuff *ngIf="errorStatus === ErrorStatus.Error500" title="server fejl"/>
...
</ng-content>`

with this .ts implementation

  @Component({
  selector: "overview",
  templateUrl: "./overview.component.html",
  styleUrls: ["./overview.component.scss"],
  changeDetection: ChangeDetectionStrategy.OnPush,
})

export class OverviewComponent implements  OnInit {
    errorStatus$ =   this.store.pipe(select(getScreeningHasError));

    constructor(
        private store: Store<ScreeningState>,
      ) {}

    ngOnInit(): void {     
      this.store.dispatch(MyActions.myRequest());
    }
}

I have tried using async(done), fakeAsync tick()and plain synchronous.

however, my tests only pass if I move the initialisation and subscription to the ngOnInit.

0

There are 0 answers