Issue
I am writing some unit tests and I got stuck on this. My component creates a new component and appends it to body. How can I reference the new component?
<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>
The dxTemplate
div actually gets appended to body when the dropdown is open. Unfortunately, due to this, the tree-view can not be selected using fixture.debugElement.query(By.css('dx-tree-view'))
, nor can the native element be accessed via document.querySelector
. I have even tried to use ApplicationRef injected by TestBed, but with no result. This may be because I did not really know how to use it, though. Thank you for your help!
Solution
So I have found out how to bypass this problem... When the dropdown box opens and closes again, it appends the dropdown content inside itself (where it stays until opened again). The structure looks like this:
<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>
So I opened it, closed it, saved the reference to the dx-popup-content
div and was able to use it even when the div was moved all around. This didn't work with a DebugElement
I needed in order to inspect the dx-tree-view
which was inside, though. I solved this by creating a mock of the dx-tree-view
and controlling it via a custom service. Don't know whether there is a better solution.
Answered By - Filip Ježek
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.