Jasmine预览站点，带angular 2 cli

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

当我转到plunker上的实时示例时，所有测试结果都在index.html中显示得非常好，但是当我使用angular CLI应用程序运行测试时，浏览器正在打开Karma，我可以在其中单击debug按钮。这样做，我的下一步是单击F12 for Developer tools console

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

我确信我遗漏了一些关于这方面的信息，但我还没有找到更多关于这方面的信息

我找到的所有指南都在做一些som测试，并在控制台中运行它们，但是如果我必须测试一个大的应用程序，那么必须有另一种方法来获得一个良好的概述，而不需要其他控制台信息

---

我缺少什么？

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

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

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

let myComponentElement = fixture.nativeElement

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

按钮：

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

最后一件事，你们可以通过在你们的测试中加入“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();
    })

您可以在调试时查看组件模板

---

祝你好运

谢谢你回答YairTawil，但这不是问题所在。我的等级库文件运行良好，但我希望看到它们与此页面上的预览一样，而不是在控制台中：

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