Action bubbling in popovers not working correctly no acceptance tests

[juanazam]

Hi,

First of all, thanks for all the hard work put on this addon, it's great!

This issue is somehow related to #141.
I've built a dummy app using the latest version of the addon with just one component:

app/components/my-component.js

import Component from 'ember-component';

export default Component.extend({
  actions: {
    showLabel() {
      this.set("showLabel", true);
    }
  }
});

app/templates/components/my-component.hbs

<p>I'm a component</p>
{{#popover-on-component lazyRenderingEnabled=false event='click'}}
  <button id="my-button" {{action 'showLabel'}}>Click me!</button>
{{/popover-on-component}}

{{#if showLabel}}
  <span>I'm visible</span>
{{/if}}

The dummy component has an action that can will be called once the button within the popover is clicked. When running the app on development mode it works, yay!

The problem arises when I create a very simple acceptance test:

tests/acceptance/reproduce-bug-test

import { test } from 'qunit';
import moduleForAcceptance from 'ember-tooltips-bug/tests/helpers/module-for-acceptance';

moduleForAcceptance('Acceptance | reproduce bug');

test('Reproduce bug', function(assert) {
  visit('/');

  andThen(function() {
    find('p').click();
    find('#my-button', 'body').click();

    assert.ok(find('span').length > 0);
  });
});

Actual result

The test fails. After investigating this issue for quite a while I'm sure that the click event on the button is not been bubbled to the parent component. I have paused the test and clicked on the button within the popover myself without any results.

The expected result

The test works.

[juanazam]

More information on this: The tooltip is rendered as child of the body tag and and the rootElement of the testing apps is '#ember-testing'. So the tooltip is not a child of the rootElement which prevents events from working.

[juanazam]

Finally solved the issue, related to #196

I installed the addon and ember-tether dependency was not being installed correctly because of the issue above. I ran ember install ember-tether and got 0.3.1 which doesn't allow configuration of the bodyElementId option for ember-tether, hence event bubbling was not working.

I proceeded to install ember-tether manually on version 0.4.0 and everything works as expected.