CODEWITHSUNDEEP
angularunit-testingautomated-tests
Filip Ježek
Filip Ježek

Reputation: 111

Angular testing - component appended to body

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!

Upvotes: 4

Views: 891

Answers (2)

Ralf Hannuschka
Ralf Hannuschka

Reputation: 76

In run in the same problem now, good hint it is rendererd below of the drop-down-component but i found a different solution for this now, 4 years later for you but maybe it is helpful for someone.

Angular 12, DevExtreme (do not know the version now):

The solution is quite simple, i render the overlay into a new place now:

@Component({
   selector: 'testcomponent',
   template: `
     <my-component-with-selectbox-i-want-to-test>
     </my-component-with-selectbox-i-want-to-test>
     <div id="mockedOverlayContainer">
     </div>
   `
})

describe(() => {
   
   function openSelectBox() {
      const selectBox = fixture.query(
         By.css('selector-dx-select-box')
      ).componentInstance as DxSelectBox;

      // this is the key
     selectBox.dropDownOptions = { container: '#mockedOverlayContainer' };
     
      // open select box now and the options are rendered 
      // inside the mockedOverlayContainer
      ...
   }

   beforeEach(() = ...)
})

Upvotes: 1

Filip Ježek
Filip Ježek

Reputation: 111

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.

Upvotes: 1

Related Questions