即使 *ngIf 为假，元素仍被定义 Jasmine 单元测试 Angular答案

【问题标题】：Element still defined even though *ngIf is false Jasmine unit testing Angular即使 *ngIf 为假，元素仍被定义 Jasmine 单元测试 Angular
【发布时间】：2020-11-12 10:34:01
【问题描述】：

我对单元测试完全陌生，所以我可能只是在这里做错了一切。一旦我的 GET 请求完成，我正在使用 *ngIf 显示来自 DevExpress 的数据网格，并且我正在尝试使用 Jasmine 测试验证它仅在我的 *ngIf 条件设置为 true 时显示。

我的网格的截断版本：


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

还有我的 .spec 文件：

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"); 
  })
});

我的第一个断言 expect(dataGrid).toBeTruthy() 成功，而断言 .toBeNull() 失败。这与我的预期相反，我在这里缺少什么？

【问题讨论】：

null 在 JS 中不是真的，它是假的。你能详细说明你预期会发生什么吗？您想知道数据网格是否可见吗？另外，toBeTruthy() 中使用的参数没有被使用，通常最好不要传递它。
@Bonatti，我预计 toBeTruthy() 会失败，而 toBeNull() 会通过。相反的事情发生了。
你应该查询是否没有元素，如果方法返回的数组为空（长度=== 0）

标签： angular jasmine angular-ng-if

【解决方案1】：

您的queryAll 正在选择 HTML 中具有网格 ID 的元素，我敢打赌这些元素不存在。 queryAll 查询整个 DOM 并将元素作为数组返回，如果没有找到则返回一个空数组。 JavaScript 中的空数组是真实的；

 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"); 
  });

要修复它，您可以使用query，但如果您想使用queryAll，请检查返回数组的长度。

 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);
  });

我会做什么：

 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 只找到第一个匹配项和一个元素。

【讨论】：

【解决方案2】：

方法queryAll()返回一个数组，里面有信息。

如果你不希望有这样的元素，你可以expect(thing).toHaveLength(0)

当定义不存在这样的元素时，您还可以query()（将返回第一个匹配项，并期望为空

【讨论】：