Angular 元素仍然被定义，即使*ngIf是false Jasmine单元测试

我对单元测试是完全陌生的，所以我可能在这里做的每件事都是错的。我正在使用*ngIf在GET请求完成后显示来自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"); 
  })
});

从“/applications.component”导入{ApplicationsComponent}；
从“@angular/core/testing”导入{ComponentFixture，async，TestBed}；
从“@angular/router/testing”导入{RouterTestingModule}”；
从“@angular/common/http/testing”导入{HttpClientTestingModule}”；
从“devextreme angular”导入{DxDataGridModule}；
从“@angular/core”导入{DebugElement}；
从“@angular/platform browser”导入{By}”；
从“@angular/common”导入{CommonModule}；
描述（“ApplicationPocComponent”，（）=>{
let组件：应用程序组件；
let夹具：组件夹具；
设el:DebugElement；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[ApplicationComponent]，
导入：[RouterTestingModule，HttpClientTestingModule，DxDataGridModule，CommonModule]，
})
.compileComponents（）
.然后（（）=>{
fixture=TestBed.createComponent（ApplicationComponent）；
组件=fixture.componentInstance；
el=夹具。调试元件；
});
}));
它（“应该创建应用程序组件”，（）=>{
expect（component.toBeTruthy（）；
});
它（“应该显示数据网格”，（）=>{
组件加载=真；
fixture.detectChanges（）；
const dataGrid=el.queryAll（By.css（“#grid”）；
expect（dataGrid）.toBeTruthy（“dataGrid未创建”）；
expect（dataGrid）.toBeNull（“dataGrid已创建”）；
})
});

---

我的第一个断言，

expect（dataGrid）.toBeTruthy（）

成功，而断言

.toBeNull（）

失败。这与我的预期相反，我在这里遗漏了什么？

您的

queryAll

正在选择HTML中id为grid的元素，我打赌这些元素不存在

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

只查找第一个匹配项和一个元素。

您的

queryAll

正在选择HTML中id为grid的元素，我打赌这些元素不存在

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

只查找第一个匹配项和一个元素。

该方法返回一个包含内部信息的数组

如果你希望没有这样的元素，你可以

expect（thing）.toHaveLength（0）

当定义不存在这样的元素时，您还可以（将返回第一个匹配项，并期望为null）该方法返回一个包含内部信息的数组

如果你希望没有这样的元素，你可以

expect（thing）.toHaveLength（0）

---

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

null在JS中不是真实的，这是错误的。您能详细说明一下您期望发生什么吗？您想知道datagrid是否可见吗？还有，toBeTruthy（）中使用的参数）未使用，通常最好不要传递它。@Bonatti，我希望Tobetruty（）失败，toBeNull（）通过。情况正好相反。如果方法返回的数组为空（长度==0），则应该查询是否没有元素null在JS中不是真实的，它是错误的。你能详细说明一下你预期会发生什么吗？你想知道datagrid是否可见吗？另外，toBeTruthy（）中使用的参数没有使用，通常最好不要通过它。@Bonatti，我希望toBeTruthy（）失败，toBeTruthy（）失败相反的情况发生了。您应该查询是否没有元素，方法返回的数组是否为空（长度==0）