Integration tests fail with ember-wormhole

[gpoitch]

The default generated component integration tests from ember-cli fail if you use ember-wormhole in that component, since the destination element would be elsewhere in your application.

ember-wormhole/addon/components/ember-wormhole.js

Line 91 in 0f48d27

throw new Error(`ember-wormhole failed to render into '#${this.get('destinationElementId')}' because the element is not in the DOM`);

This can be fixed by shimming the destination into those tests, but I'm wondering if changing to a warning or assert instead of throwing an error may be a better experience?

[coladarci]

Also seeing this - any advice on the easiest way to Shim?

[lukemelia]

We're open to anything we can do to improve developer ergonomics here.

[NullVoxPopuli]

is this something that is affecting the out come of tests? I just saw the error, but I'm only just starting to write tests for my app.

[adam-knights]

I got around this by doing the following:

Bring ENV into the component:

import ENV from '../../config/environment';

(Your directory structure may be different here)

In the init() method of the component call

this.set('wormholeInPlace', ENV.environment === 'test');

And then in the component template

  {{#ember-wormhole to="bottom-wormhole-area" renderInPlace=wormholeInPlace}}
    {{my-component}}
  {{/ember-wormhole}}

[iamdtang]

I ran into this error as well. My solution was to just add the element from my test and then remove it when the test is over.

test('an access module without subAccessModules cannot be selected', function(assert) {
  $('body').append('<div id="modal"></div>');
  // test
  $('#modal').remove();
});

[adhamhf]

@skaterdav85 I like your solution b/c it does not involve modify production code to detect a testing environment. @adam-knights your solution may have problems with acceptance tests. We were doing test env detection in production code to change behavior during tests and it causes acceptance tests to fail....

[vladimir-e]

Maybe my case was simpler, I just added the element to tests/index.html:

    <!-- ... -->
    <script src="assets/test-loader.js"></script>

    {{content-for 'body-footer'}}
    {{content-for 'test-body-footer'}}

    <div id="ember-wormhole"></div>

  </body>
</html>

[brancusi]

@lukemelia, thanks for pointing to this issue. Would you happen to be able to explain the last comment here? Is there more to the story to get that code snippet working?

Thanks

[lukemelia]

@brancusi the crux of the issue is that if you relocate a node outside of the rootElement of the Ember app, then Ember's event delegation doesn't work. In addition, IIRC ember-testing's test helpers scope their actions to the test container. As a result, the click helper doesn't find nodes relocated to outside the test container, and even when you do click on them, the actions don't fire because there is nothing listening. In a typical Ember app (not in the testing harness), the rootElement is body so event delegation is not a problem.

I don't think there is a one-size fits all answer to this problem. But if you understand what's going on, you can likely come up with a suitable way to address it in your test suite.

[brancusi]

Thanks @lukemelia. @vladimir-e, would you be able to share the test case? I'm still unsure on how to rig this to work.

Thank you

[knownasilya]

@lukemelia maybe ember-wormhole could warn the user when the wormhole isn't inside the rootElement? I spent probably half a day debugging my PR to ember-twiddle, which doesn't use the standard rootElement.

[lukemelia]

Good idea, @knownasilya. I'd definitely be interested in a PR along these lines.

[cibernox]

fwiw, ember-basic-dropdown/ember-power-select conditionally use the #ember-testing div as destination in testing to make this thing work smoothly in tests.

https://github.com/cibernox/ember-basic-dropdown/blob/b495a032dcaca7f4292c4c3f70aac2b0f1cf3d98/addon/components/basic-dropdown/content.js#L255-L261

[NvnTiwari]

Hi, If i use <button {{action 'search' "ab"}}> then i get error "had no action handler for search" but integration tests run fine but if i use {{action search "ab"}} then i don't get error "had no action handler for search" and works fine but again in integration tests i get error "You specified a quoteless path to the {{action}} helper which did not resolve to an action name (a string). Perhaps you meant to use a quoted actionName? "