Question

我的测试中出现了这个问题，我试图测试NgBootstrap组件内部元素的内容（如模态）。似乎测试甚至不能告诉组件存在，即使Karma浏览器页面显示组件就好了。

例如，我使用的是NgbModal;它被<ng-template>包裹并通过调用NgModal的open方法进行渲染，该方法通过模板引用变量传递模态的内容，按照{{ 3}}，当它在屏幕上呈现时，标记就像：

<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()。我只是不知道测试是否仍然没有＆＃34;看到＆＃34;该组件（以及该怎么做）或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

模态不是组件的子项。它包含在文档正文中。所以你可以使用该文档找到你的模态：

public HashSet<T> BFS<T>(Graph<T> graph, T start, int maxDepth, Action<T> preVisit = null)
{
    var visited = new HashSet<T>();

    if (!graph.AdjacencyList.ContainsKey(start))
        return visited;

    var queue = new Queue<Tuple<T, int>>();
    // Consider the start is in the depth "0"
    queue.Enqueue(new Tuple<T, int>(start, 0)); 

    while (queue.Count > 0)
    {
        Tuple<T, int> vertexWithDepth = queue.Dequeue();
        var vertex = vertexWithDepth.Item1;

        if (visited.Contains(vertex))
            continue;

        if (preVisit != null)
            preVisit(vertex);

        visited.Add(vertex);

        // If the current vertex's level is greater or equals
        // the maximum desired level, skip adding its
        // adjacent vertexes.
        int vertexLevel = vertexWithDepth.Item2;
        if(vertexLevel >= maxDepth)
             continue;

        foreach (var neighbor in graph.AdjacencyList[vertex])
            if (!visited.Contains(neighbor))
                queue.Enqueue(new Tuple<T, int>(neighbor, vertexLevel + 1));
    }

    return visited;
}

或

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

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

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

1 个答案: