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

使用NgbModal服务时如何测试模式内容

1 个答案: