带有 angular 2 cli 的 Jasmine 预览站点

Question

我对使用 Angular 2 CLI 进行 jasmine 测试非常陌生，并按照 angular.io 上的测试指南编写了我的第一个测试。

当我查看 plunker 上的实时示例时，所有测试结果在 index.html 中都显示得非常好，但是当我使用我的 angular CLI 应用程序运行测试时，浏览器正在打开 Karma，我可以从中单击调试按钮。为此，我的下一步是单击 F12 进入开发者工具控制台。

在这里我可以看到我所有测试的结果以及控制台日志，它并没有给我一个非常清晰的概述，特别是当我很快将运行大量测试时。

我确定我错过了一些关于此的信息，但我无法找到更多关于它的信息。

我发现的所有指南都进行了一些测试并在控制台中运行它们，但是如果我必须测试一个大型应用程序，则必须有另一种方法来获得一个很好的概览，而无需其他控制台信息。

我错过了什么？

Answer 1

当您在组件上运行测试时，例如创建组件模板的测试。

它使您能够单击按钮或检查 *ngFor 指令中有多少元素。

您可以通过以下方式获取元素：

let myComponentElement = fixture.nativeElement

您可以使用 element 来测试您的元素，例如：

按钮：

<button id="my-test-button" (click)="myTestFunction()>ClickMe</button>

按钮测试：

it("click on my_test_button should call myTestFunction() ", ()=> {
  spyOn(componentInstance.myTestFunction);
  let my_test_button = myComponentElement.querySelector("my-test-button")
  my_test_button.click();
  fixture.detectChanges();
  expect(componentInstance.myTestFunction).toHaveBeenCall();
})

最后一件事，您实际上可以通过将“dubugger”放在您的测试中并单击 chrome 上的“f12”来查看您的测试模板。

例如：

 it("click on my_test_button should call myTestFunction() ", ()=> {
      spyOn(componentInstance.myTestFunction);
      let my_test_button = myComponentElement.querySelector("my-test-button")
      **debugger;**
      my_test_button.click();
      fixture.detectChanges();
      expect(componentInstance.myTestFunction).toHaveBeenCall();
    })

你应该在调试时看到你的组件模板。

祝你好运！！！