angular - 使用 NgbModal 服务时如何测试模态内容

Question

我正在使用 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元素。

Answer 1

感谢@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();
  });