Integration test failing

[brancusi]

Hi,

When using this component as part of another component, the integration for the parent component is failing.

Error: ember-wormhole failed to render content because the
destinationElementId was set to an undefined or falsy value.

Any ideas on how to get around this?

Maybe related to: https://github.com/yapplabs/ember-wormhole/issues/25

[alexander-alvarez]

I made a helper to facilitate this which I call in beforeEach, and pass this to

/**
 *  Helper to initialize ember-modal-dialog correctly for tests
 *
 * @param self: `this` in a component integration test that uses ember modal dialog
 * @param divId: string representing HTML element ID
 */
export default function(self, divId){
  let modalDialogService = self.container.lookup('service:modal-dialog');
  modalDialogService.destinationElementId = divId || 'ember-testing'; // maybe 'ember-testing-container' is better?
}

~~I'm still having issues with event delegation not being correct even after the adjustments in https://github.com/yapplabs/ember-tether#acceptance-testing So any actions within the modal aren't picked up by ember correctly~~ EDIT: Got around it by extending the TetherDialog component just for the sole purpose of adding these lines and using my wrapped version in my hbs everywhere.

[scottmessinger]

From what I can tell, ember-tether doesn't have a dependency on ember-wormhole anymore, so setting the destinationElementId won't work. I did find something that worked, though. Tether will move an element if any of the element's parents have a position property not equal to static: https://github.com/HubSpot/tether/blob/4f80b7407b40c08e2ee892b43e996870381bdaaf/src/js/tether.js#L748-L764. Using jQuery, I set the element's ancestors to have a position of static:

// Before tether is activated on the element. E.g if you're using tether for a popover
// run this line before the popover is shown:
this.$('.classname-of-your-tethered-element').parents().css('position', 'static')

// then show the tethered element. In my case, it's something like:
// this.$('.tethered-element-anchor').click()