How should i unit-test the context menu

[saulide]

Currenlty for sake of simplicity, i packed the context-menu with its templates in one component

Since its a button area for context menu, i get this with treeItemButton = fixture.debugElement.query(By.css('button'));

Then i trigger left click

treeItemButton.triggerEventHandler('click', {button: 0}); // make left click

Finally i want to trigger click event on the context menu

fixture.debugElement.query(By.css('.context-menu-delete'));

which should find this ng-template inside context-menu:

<ng-template contextMenuItem (execute)="delete({object_id: item?.sequence_element})"> <div class="context-menu-delete">Delete</div> </ng-template>

The problem is, that the div could not be found... Any hints, ideas?

[isaacplmann]

The context menu is attached in a .cdk-overlay-pane just above the </body> tag, so it may not be inside the debugElement. Let me do a little research on how to get a reference to that element.

[isaacplmann]

The material team gets a reference to the .cdk-overlay-container (which contains all the .cdk-overlay-panes) like this:

expect(document.querySelector('.cdk-overlay-container'))

Reference

That should get you what you need.