Component testing involving CSS transitions

1

I’m using ember-semantic-ui, and I have a component that uses that library’s dropdown component. I want to test that if the user clicks on an icon, the menu opens properly. And this is done by checking if “.ui.dropdown > .menu.visible” exists. However, the problem is, Semantic UI does a 200ms fade-in transition before the .visible class gets added. So I need my testing to wait for that transition to finish. This is the way I’m doing it now, which works fine:

this.$('.ui.dropdown > .text').click();
Ember.run.later(this, function() {}, 500);
// Wait for Ember.run.later to finish, and then test
return wait().then(() => {
  assert.equal(this.$('.ui.dropdown .menu.visible').length, 1);
});

So my question is, would the above be the recommended way of doing this, or is there a better, more Ember-ish way?