isaacplmann
Unit test for rendering dynamic menu fails
Description: I've been struggling with a unit test for a dynamic implementation of a context menu for an app.
I use my own interfaces, called Button and DropDown respectively, to represent a regular menu item and drop down within the context menu itself. I then created a ContextMenuWrapper component, which essentially defines the context menu, and accepts a (Button | DropDown)[] as an input.
I wrote a unit test which essentially tests if an implementation of this ContextMenuWrapper component can render a context menu correctly provided a predefined (Button | DropDown)[]. All seems to go well, except something weird happens...
The expected amount of menu items is always returning 0 when accessing:
document.querySelectorAll('.dropdown-item')
After further investigation, after the menuItems Input on my ContextMenuWrapper component is changed, it seems the ContextMenu is reinitialized, but it's own subscription to the ContextMenuService.show Subject fires twice, upon which on the second time it clears the visibleMenuItems array internally.
What would be the ideal way of testing this, if any?
Stackblitz link: https://stackblitz.com/edit/angular-9xlrt2
Kind regards! :)
