即使 *ngIf 为 false,元素仍然定义 Jasmine 单元测试 Angular
Element still defined even though *ngIf is false Jasmine unit testing Angular
我对单元测试完全陌生,所以我可能只是在这里做错了所有事情。我正在使用 *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");
})
});
我的第一个断言 expect(dataGrid).toBeTruthy()
成功,而断言 .toBeNull()
失败。这与我的预期相反,我在这里错过了什么?
您的 queryAll
正在选择 HTML 中 id 为 grid 的元素,我敢打赌这些元素不存在。 queryAll
将整个 DOM 和 returns 元素作为一个数组进行查询,returns 如果没有找到则返回一个空数组。 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
只找到第一个匹配项和一个元素。
方法return是一个包含信息的数组。
如果您希望没有这样的元素,您可以expect(thing).toHaveLength(0)
当定义不存在这样的元素时,您还可以 query()(这将 return 第一个匹配项,并期望它为 null
我对单元测试完全陌生,所以我可能只是在这里做错了所有事情。我正在使用 *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");
})
});
我的第一个断言 expect(dataGrid).toBeTruthy()
成功,而断言 .toBeNull()
失败。这与我的预期相反,我在这里错过了什么?
您的 queryAll
正在选择 HTML 中 id 为 grid 的元素,我敢打赌这些元素不存在。 queryAll
将整个 DOM 和 returns 元素作为一个数组进行查询,returns 如果没有找到则返回一个空数组。 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)
当定义不存在这样的元素时,您还可以 query()(这将 return 第一个匹配项,并期望它为 null