Angular 角度2：如何测试NgBootstrap组件（和内容）是否在页面上？

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

例如，我正在使用NgbModal；它被包装在

中，并通过调用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>

---

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

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

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

或

---

您可以使用作为灵感：

我不认为

By.css（）

搜索儿童，它不只是在调用它的

debugElement

中查找谓词吗？在任何情况下，在该断点处，无论是使用

document.querySelector

还是

By.css

，

modalEl

设置为HTML元素；它不是空的或未定义的，只是空的。不，这也不起作用。document.querySelectAll（'div'）未找到与ngb面板关联的div之外的任何div。

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

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