Question

我正在编写一些单元测试，但对此我陷入了困境。我的组件将创建新组件并将其附加到主体。如何引用新组件？

<dx-drop-down-box ...some_props >

    <div *dxTemplate="let data of 'content'">
        <dx-tree-view ...some_other_props >
        </dx-tree-view>
    </div>
</dx-drop-down-box>

当下拉列表打开时，dxTemplate div实际上会附加到正文中。不幸的是，由于这个原因，无法使用fixture.debugElement.query(By.css('dx-tree-view'))选择树视图，也无法通过document.querySelector访问本机元素。我什至尝试使用TestBed注入的ApplicationRef，但没有结果。不过，这可能是因为我并不真正知道如何使用它。谢谢您的帮助！

Answer 1

因此，我已经找到了如何绕过此问题的方法...当下拉框打开并再次关闭时，它会将下拉内容附加在自身内部（直到再次打开之前，它会停留在此位置）。结构如下：

<dx-drop-down-box>
   ...some inside structure, divs and so on
   <div class="dx-dropdowneditor-overlay dx-state-invisible ...">
      <div class="dx-overlay-content ...">
         <div class="dx-popup-content">
            ACTUAL CONTENT OF THE DROPDOWN
         </div>
      </div>
   </div>
</dx-dropdown-box>

因此，我打开了它，然后将其关闭，保存了对dx-popup-content div的引用，即使在整个div周围移动时也可以使用它。但是，这对于我检查内部的DebugElement所需的dx-tree-view不起作用。我通过创建dx-tree-view的模拟并通过自定义服务对其进行控制来解决此问题。不知道是否有更好的解决方案。

角度测试-附加到主体的组件

1 个答案: