How to assert run loop DOM changes inside an Ember test - testing

Question

I am writing test for Ember app written in Ember 1.6.
Inside a controller I have a function executed upon promise success:
var me = this;
function onSuccess(result) {
printSuccessMessage();
Ember.RSVP.all(promises).then(function(value) {
Ember.run.later(this, function() {
clearMessages();
}, 5000);
});
}
Then, inside the test, I am trying to assert that the success message appears:
fillIn('#MyInputField', 'Some text');
click('#MyButton');
andThen(function() {
strictEqual(find('[data-output="info-message"]').text().trim().indexOf('Done!') >= 0, true, 'Expected success message!');
});
But the problem is, that after the click, andThen is waiting for a run loop to finish. So after this click, andThen waits 5 seconds and then executes assertions.
In that moment clearMessages() is already executed, the message div is cleared, and the test fails.
Any idea how to assert that this message has certain text?

Answer 1

If you are willing to have a condition in your code, that checks whether or not Ember is in testing mode, you can toggle the Ember.testing value in your test, and then clear or not clear the message in your controller, based on that value. Your tests can then assert that the message is cleared in one instance, and showing in the other.
In the controller's onSuccess call, observe the Ember.testing condition:
onSuccess(message) {
this.printSuccessMessage(message);
if (Ember.testing) { // <-- HERE
// during testing
return; // don't clear the message and assert that it's there
} else {
// during dev, live in production, or Ember.testing === false
this.clearMessages(); // clear the message, and assert that it's gone
}
},
In the acceptance test for setting the message, since Ember.testing is true by default, the controller will not clear the message, and the following test will succeed:
test('setting the message', function(assert) {
visit('/messages');
fillIn('input.text-input', 'Some text');
click('button.clicker');
// while Ember.testing is `true` (default), do not remove message
andThen(() => {
assert.equal(find('div.info-message').text(),
'Done!',
'The message was set properly.');
});
});
In the test that follows, observe the toggling of false for Ember.testing, which will "emulate" live dev or production conditions for the controller. The controller will clear the message, as normal, and this test will also succeed:
test('clearing the message', function(assert) {
visit('/messages');
fillIn('input.text-input', 'Some text');
andThen(() => {
Ember.testing = false;
});
click('button.clicker');
// while Ember.testing is `false`, remove message, as normal, as in dev or prod
andThen(() => {
assert.equal(find('div.info-message').text(),
'',
'The message has been cleared.');
});
// reset Ember.testing to its default
andThen(() => {
Ember.testing = true;
});
});
Please note, Ember.testing is reset to its default value of true as soon as the false condition is no longer needed. This is important because Ember run loop behavior is different during testing by design.
In this solution, some code has been refactored, to isolate concerns and make it easier to unit test. Here's an Ember Twiddle to demonstrate, which was inspired, in part, by this article on Medium.