我正在使用 NgbModal 打开用 <ng-template>
描述的模态窗口指示。它似乎工作得很好。但是我不知道如何测试我的模式的内容。
我是这方面的新手,所以请随时指出您在我的方法中可能遇到的任何其他问题。我认为问题在于 <ng-template>
在实际显示模式之前不会输出内容。所以我之前尝试在切换按钮上调用 click(),但这似乎还不够。
例如,我的内容中有一个表单,因此我的测试可能如下所示:
it("toggle button should work", () => {
const button = fixture.nativeElement.querySelector("button");
expect(button).toBeTruthy();
button.click();
fixture.detectChanges();
const formDe = fixture.debugElement.query(By.css("div"));
expect(formDe).toBeTruthy();
});
这是我的组件:
import { Component } from "@angular/core";
import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
@Component({
selector: "app-login",
template: `
<ng-template #content>
<div class="modal-body"></div>
</ng-template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">
Launch demo modal
</button>
`,
styleUrls: ["./login.component.css"]
})
export class LoginComponent {
constructor(private modalService: NgbModal) {}
open(modal) {
this.modalService.open(modal);
}
}
我希望能够以某种方式获取模态内容。目前,我得到 Error: Expected null to be truthy.
关于div
元素。
最佳答案
感谢@JB Nizet 链接。我使用以下方法使其工作:
it("login button should work", () => {
const button = fixture.nativeElement.querySelector("button");
const contentBeforeClick = document.querySelector(".modal-content");
expect(contentBeforeClick).toBeFalsy();
button.click();
const contentAfterClick = document.querySelector(".modal-content");
expect(contentAfterClick).toBeTruthy();
});
关于angular - 使用 NgbModal 服务时如何测试模态内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58471747/