How can I test EmberJS with third party components and callbacks?

Question

We're running integration tests on our app and running into a problem working with the Stripe JavaScript library. We have a component that wraps the library and between when it begins the token creation process to when it completes the component gets destroyed (which in turn is failing the rest of our test.) The typical "fix" for this is to wrap that method in an Ember.run but it seems to have no affect on it. Let me give an example.

actions: {
  update: function() {
    // Starting here this.get('isDestroyed') == false
    Stripe.card.createToken({
      number: "xx",
      cvc: "xx"
    }, function() {
       // Once we are here this.get('isDestroyed') == true
    })
  }
}

Because it's getting destroyed early the normal action here isn't taken. How can we get Ember to stay alive while waiting for this callback to complete?

Update 1

I posted an answer below but curious on why I wouldn't want to do this and/or why it's not part of the official documentation.

Update 2

This answer I posted below fixes the test but the actual site itself stops working (just sits there.) So while it seemed superficially to fix the problem it clearly didn't fully work.

Is your intent to actually test stripe, or prove update is called? — Kingpin2k, Jun 29 '14 at 14:59
Hmm... Can you show how you implemented `Ember.run`? My understanding is that to test async properties and methods you'll need to target the async parts specifically. If you have a nested scope where there is async within a closure (the second param for `createToken`) it may not pick that up. — Matthew Blancarte, Jun 29 '14 at 16:50
@kingpin2k - Intention is not to test stripe. It behaves the same when I mock createToken. — Nathan Palmer, Jun 29 '14 at 17:13
@MatthewBlancarte - I simply did this Ember.run(function() { /* stuff here */ }) — Nathan Palmer, Jun 29 '14 at 17:13
@NathanPalmer You should go ahead and post your update as an answer. — Matthew Blancarte, Jun 29 '14 at 17:43

score 1 · Answer 1 · edited May 23 '17 at 10:24

1

Solution

Seems if I manually start and stop a runloop it does work. But that's not what the documentation says (eventhough it makes perfect sense to do it this way.)

actions: {
  update: function() {
    Ember.run.begin()
    Stripe.card.createToken({
      number: "xx",
      cvc: "xx"
    }, function() {
       // Perform actions
       Ember.run.end()
    })
  }
}

References that advocate Ember.run ->

http://balinterdi.com/2014/05/09/ember-dot-run-dot-bind.html
http://emberjs.com/guides/understanding-ember/run-loop/#toc_how-do-i-tell-ember-to-start-a-run-loop
What is Ember RunLoop and how does it work? (states specifically that you shouldn't use begin/end because that's what run does)
https://github.com/eoinkelly/ember-get-what-from-where/blob/master/ember-run-loop.md
http://alexmatchneer.com/blog/2013/01/12/everything-you-never-wanted-to-know-about-the-ember-run-loop/ (which seems mostly the same content as the stack overflow question)

edited May 23 '17 at 10:24

Community

1
1

answered Jun 29 '14 at 18:13

Nathan Palmer

1,970
1
20
28

I found that this doesn't actually solve the problem because when running it live it doesn't work (even if the test does pass.) – Nathan Palmer Jul 10 '14 at 15:58
you ever come up with a solution? – flylib Feb 10 '15 at 22:34
@flylib, our testing library has changed a lot since this time. The solution is generally to use Ember.run. I can't say specifically on whether or not it did it for the Stripe library however. – Nathan Palmer Feb 12 '15 at 13:14

How can I test EmberJS with third party components and callbacks?

Update 1

Update 2

1 Answers1

Solution

References that advocate Ember.run ->