Actions not firing in acceptance test

[brancusi]

Hi,

This only happens during a test.

Basically, it seems that when I have an interactive element mounted into something via wormhole, i.e. a popup menu with some menu buttons. clicking never triggers the action.

I am trying to trigger a menu open, and then a click button.

Any ideas?

Thanks

[lukemelia]

See discussion here: #25

[Leooo]

@brancusi, having the same issue on acceptance tests, which is different than #25 (which is about integration tests).
I can transition to a ember-wormhole popup (using jquery, not the standard qunit's click()), but then I can not click anything on the mounted wormhole (even using jquery).

Did you manage to solve the issue?

Thanks

[lolmaus]

We're covering modals rendered via ember-wormhole with acceptance tests and clicks work correctly.

Is this issue specific to integration tests?

[Leooo]

@lolmaus we have the issue in acceptance tests, refactoring to ember-elsewhere now for this reason.

Not able to give more precise details, but wondering if this because the wormhole destination id sits outside the {{content-for 'body}}' maybe??

[lolmaus]

@Leooo Try targeting the modal with jQuery in browser console.

[Leooo]

@lolmaus did that and it helped to detect presence of modal. Problem is when clicking a button inside the created modal, which is supposed to transition. Then nothing happens (even when using jQuery).

[lolmaus]

@Leooo So:

1. You can target the modal with jQuery from the console.
2. You can target the button within the modal with jQuery from the console.
3. When you click the button manually, it works.
4. When you click the button via $('selector').click() in the console, it doesn't work?

Please double check item 2.

[Leooo]

1. yes
2. yes, I can test for presence of the button inside the modal using jQuery
3. yes, outside the tests (the app works)
4. $('button:contains("Yes, cancel")').click(); works locally and transitions (outside my test), but nothing happens when clicking it inside my test

[lolmaus]

@Leooo

1. Are you using the same selector as in tests?
2. Can you confirm that the jQuery object you're clicking on in test does contain the button element?

[Leooo]

Yes:

    andThen(() => {
      assert.equal(
        currentRouteName(),
        'authenticated.smart-meter-booking.service-order.edit.cancel.index',
        'the customer is redirected to the cancel book-appointment page'
      );
      // don't use "find" as outside the main container (in destination)
      assert.ok(
        Ember.$('button:contains("Yes, cancel")').length,
        ' we can see the cancel appointment button'
      );
      assert.ok(
        Ember.$('button:contains("No, keep")').length,
        ' we can see the keep appointment button'
      );
      assert.ok(
        Ember.$('button:contains("Change")').length,
        ' we can see the change appointment button'
      );
      Ember.$('button:contains("Yes, cancel")').click();
      //not working
    });

[lolmaus]

@Leooo Sounds like a legit issue. Can you make a reproduction twiddle?

[Leooo]

(and that's when I usually disappear..)

[sirahd]

@Leooo I also faced this issue. It turns out any element rendered outside #ember-testing will not trigger action in test environment.

#25 (comment) This one seems to be a working solution to the problem you have by inserting the target wormhole in test instead of the default one you have in your application code.