Angular 2:如何测试页面上是否有NgBootstrap组件(和内容)?

Question

这个问题在我的测试中不断出现，我试图测试NgBootstrap组件(如模态)中元素的内容。似乎测试甚至无法判断该组件是否存在，即使 Karma 浏览器页面显示该组件很好。

例如，我正在使用 NgbModal; 它包装在<ng-template>中并通过调用 NgModal 的open方法进行渲染，该方法通过模板引用变量传递模态的内容，根据文档，当它在屏幕上呈现时，标记如下所示：

<ngb-modal-window role="dialog" style="display: block;" tabindex="-1" class="modal fade show">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div _ngcontent-c0="" id="save-modal">
<div _ngcontent-c0="" class="modal-header">
<h4 _ngcontent-c0="" class="modal-title">Confirm changes</h4>
<button _ngcontent-c0="" class="close" aria-label="Close" type="button">
<span _ngcontent-c0="" class="ng-tns-c0-0" aria-hidden="true" title="Close">×</span>
</button>
</div>
<div _ngcontent-c0="" class="modal-body">
<p>Save changes?</p>
</div>
<div _ngcontent-c0="" class="modal-footer">
<div _ngcontent-c0="" class="flex">
<button _ngcontent-c0="" class="btn btn-link mr3" aria-label="Close" type="button">
<span _ngcontent-c0="" class="ng-tns-c0-0" aria-hidden="true" title="Cancel">Cancel</span>
</button>
<button _ngcontent-c0="" class="btn btn-primary btn-raised" title="Save the update">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</ngb-modal-window>

然而，如果在测试中我尝试fixture.debugElement.query(By.css('ngb-modal-window'))或By.css('#save-modal')(模态中的 DIV)都不返回 HTML 元素。是的，我正在使用fixture.detectChanges().我只是不知道测试是否仍然没有"看到"组件(以及如何处理)，或者By.css是否无法搜索非标准 HTML 元素，或者什么。

新信息：当我使用 VS Code 时，我可以调试测试并在断言上有一个断点：

tick(); //desperately trying anything, even though nothing async is going on
fixture.detectChanges();
let modalEl = fixture.debugElement.query(By.css('ngb-modal-window'));
expect(modalEl).toBeDefined('defined'); //<===breakpoint here

查看 Karma 浏览器页面时，模态尚未打开;只有当我继续代码时，模态才会弹出。那么，当我已经调用 detectChanges() 时，我还需要做什么来更新视图呢？

Answer 1

模态不是组件的子级。它包含在文档的正文中。因此，您可以使用文档来查找您的模态：

document.querySelector('ngb-modal-window');

或

document.querySelector('.modal-content');

您可以使用ng-bootstrap测试作为灵感：