Element still defined even though *ngIf is false Jasmine unit testing Angular

Question

I'm completely new to unit testing, so I may just be doing everything wrong here. I'm using *ngIf to display a data grid from DevExpress once my GET request completes, and I'm trying to verify with the Jasmine test that it only is displayed once my *ngIf condition is set to true.

A truncated version of my grid:


    <dx-data-grid #grid *ngIf="!loading">
        ...
    </dx-data-grid>

and my .spec file:

import { ApplicationsComponent } from "./applications.component";
import { ComponentFixture, async, TestBed } from "@angular/core/testing";
import { RouterTestingModule } from "@angular/router/testing";
import { HttpClientTestingModule } from "@angular/common/http/testing";
import { DxDataGridModule } from "devextreme-angular";
import { DebugElement } from "@angular/core";
import { By } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';

describe("ApplicationPocComponent", () => {
  let component: ApplicationsComponent;
  let fixture: ComponentFixture<ApplicationsComponent>;
  let el: DebugElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ApplicationsComponent],
      imports: [RouterTestingModule, HttpClientTestingModule, DxDataGridModule, CommonModule ],
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(ApplicationsComponent);
        component = fixture.componentInstance;
        el = fixture.debugElement; 
      });
  }));

  it("should create applications component", () => {
    expect(component).toBeTruthy();
  });

  it("should display the data grid", () => { 
    component.loading = true; 
    fixture.detectChanges(); 
    const dataGrid = el.queryAll(By.css("#grid")); 
    expect(dataGrid).toBeTruthy("Datagrid not created"); 
    expect(dataGrid).toBeNull("Datagrid is created"); 
  })
});

My first assertion, expect(dataGrid).toBeTruthy() succeeds, whereas the assertion .toBeNull() fails. This is the opposite of what I expected, what am I missing here?

null is not truthy in JS, its falsy. Can you please elaborate what you expected to happen? Do you want to know if the datagrid is visible? Also, the parameter used in toBeTruthy() is not used, and usually better to not pass it. — Bonatti, Jul 22 '20 at 19:30
@Bonatti, I expected toBeTruthy() to fail and toBeNull() to pass. The opposite happened. — CaldJoy, Jul 22 '20 at 19:44
You should query if there are no elements, if the array returned by the method is empty (length === 0) — Bonatti, Jul 22 '20 at 19:52

score 0 · Accepted Answer · answered Jul 22 '20 at 19:51

Your queryAll is selecting elements that have an id of grid in the HTML and I bet that this elements do not exist. queryAll queries the whole DOM and returns the elements as an array and returns an empty array if it finds nothing. An empty array in JavaScript is truthy;

 it("should display the data grid", () => { 
    component.loading = true; 
    fixture.detectChanges(); 
    const dataGrid = el.queryAll(By.css("#grid")); 
    console.log(dataGrid); // See if you see [] here.
    expect(dataGrid).toBeTruthy("Datagrid not created"); 
    expect(dataGrid).toBeNull("Datagrid is created"); 
  });

To fix it, you can use query but if you want to use queryAll, check the length of the returned array.

 it("should NOT display the data grid when loading", () => { 
    component.loading = true; 
    fixture.detectChanges(); 
    const dataGrid = el.queryAll(By.css("dx-data-grid")); // change to dx-data-grid here
    console.log(dataGrid); // See if you see [] here, should still see [] here
    expect(dataGrid.length).toBe(0);
  });

What I would do:

 it("should NOT display the data grid when loading", () => { 
    component.loading = true; 
    fixture.detectChanges(); 
    const dataGrid = el.query(By.css("dx-data-grid")); // change to dx-data-grid here and query
    expect(dataGrid).toBeNull();
  });

query finds the first match and one element only.

score 0 · Answer 2 · answered Jul 22 '20 at 19:56

The method queryAll() returns an array with the information inside.

If you expect to have no such elements, you can expect(thing).toHaveLength(0)

When defining that no such element will exist, you can also query() (that will return the first match, and expect that to be null

Element still defined even though *ngIf is false Jasmine unit testing Angular

2 Answers2