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');
});
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.
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.
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.
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');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With