Angular 2 : How to test that an NgBootstrap component (and contents) are on the page?

Question

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

例如，我正在使用 NgbModal；它包裹在 <ng-template> 中并通过调用 NgModal 的 open 进行渲染方法，根据 documentation 通过模板引用变量传递模式的内容，当它呈现在屏幕上时，标记如下:

<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() 时，我还需要做什么来更新 View ？

Answer 1

模态不是您组件的子组件。它包含在文档的正文中。所以你可以只使用文档来找到你的模态:

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

或

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

您可以使用 ng-bootstrap tests作为灵感: