Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ember.JS Integration Testing Issues with andThen and click helpers

I'm getting odd results with Ember's test helpers andThen and click. According to Ember's documentation:

the andThen helper will wait for all preceding asynchronous helpers to complete prior to progressing forward.

However, I'm finding this doesn't always seem to be the case. In the example below, there are 3 console.debug statements. I would expect them to be logged in the order A -> B -> C. Yet I consistently get this order: A -> C -> B. I can only get the expected ABC order when I use only 1 of the two click helpers. There are no event listeners (actions) associated with the <div> element referenced within the click helpers.

Can anyone explain this unexpected behavior? Is there an error in my usage of the helpers? Or a bug with Ember's testing framework?

andThen(function() {
    console.debug('mark A');

    click('div:first'); // with just 1 click helper, debug order is ABC
    click('div:first'); // with this second click helper, debug order is ACB

    andThen(function() {
        console.debug('mark B');
    });
});

andThen(function() {
    console.debug('mark C');
});

Edit:

Based on the answer given by Kingpin2k, I ended up pursuing the following solution to get at the testing style I was seeking.

First, I created an asynchronous test helper named next. Second, I replaced all the andThen helpers in my code with the custom next helpers. This allowed my code to run in the order I was expecting.

// test-helper.js
Ember.Test.registerAsyncHelper('next', function(app, fn) {
    fn();
});

// my-integration-test.js
next(function() {
    console.debug('mark A');

    click('div:first');
    click('div:first');

    next(function() {
        console.debug('mark B');
    });
});

next(function() {
    console.debug('mark C');
});
like image 646
jake Avatar asked Aug 27 '14 15:08

jake


People also ask

How do I run an ember integration test?

In order to integration test the Ember application, you need to run the app within your test framework. Set the root element of the application to an arbitrary element you know will exist. It is useful, as an aid to test-driven development, if the root element is visible while the tests run.

What are helpers in testing?

Testing helpers follows previous patterns shown in Testing Components, because helpers are rendered to templates just like components. Helpers are best tested with rendering tests, but can also be tested with unit tests.

How do I pause ember test?

Visit http://localhost:4200/tests in your browser. When the execution of the test come upon await pauseTest() , the test will be paused, allowing you to inspect the state of your application. You can now type resumeTest() in the console of your browser to continue the test execution.


1 Answers

andThen is just syntactical sugar for lastPromiseEmberSawCreated.then so really it looks like this:

lastPromiseEmberSawCreated.then(function(){
  console.debug('mark A');

    click('div:first'); // with just 1 click helper, debug order is ABC
    click('div:first'); // with this second click helper, debug order is ACB

  nextLastPromiseEmberSawCreated.then(function() {
        console.debug('mark B');
    });
});

// the promise won't have changed in between these two `andThen` calls 
// because Ember had no cpu time, and you didn't make any additional calls 

lastPromiseEmberSawCreated.then(function(){
    console.debug('mark C');
});
like image 106
Kingpin2k Avatar answered Oct 29 '22 08:10

Kingpin2k