How do I unit test if an element is visible when the *ngIf directive is used using Jasmine in Angular

Question

I have an Angular 6 app and writing some unit tests trying to determine if an element is visible or not based solely on the boolean result of an *ngIf directive

Answer 1

When testing if a component is being shown or not using ngIf I try to get the element (in this case you use, i.e., debugElement.query(By.css('.header')).nativeElement) and if it should be shown I expect it to be truthy, otherwise falsy.

Something like this:

it('should hide contents if show is false', () => {
    // should be rendered initially
    expect(debugElement.query(By.css('.header')).nativeElement).toBeTruthy();
    //trigger change
    const button = debugElement.query(By.css('button')).nativeElement;
    button.click();   // this will change show to false
    fixture.detectChanges();
    // should not be rendered
    expect(debugElement.query(By.css('.header')).nativeElement).toBeFalsy();
});

Also, bear in mind that sometimes you need to use ComponentFixture#whenStable to detect when the fixture is stable like this:

  it('should hide contents if show is false', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.whenStable().then(() => {
      // same test code here
    });
  });

See this working test for a component which resembles this scenario.

See [GitHub repository]