Test CSS Animations in Ember with Mocha & Chai

css-animation-specs.js

// TODO:
// * work with all browser prefixes for event names
// * make error message more helpful

it('tests that a CSS animation ran correctly', function (done) { // <-- notice the done param

  // Visit whatever route we are going to test
  visit('/unique_testing_route')
  .then(function () {

    // CSS Animations do not run unless they are visible (presumably a
    // performance thing) so we must make the app visible before running
    // this test
    showEmber();

    // Find the element that the animation will be applied to
    var el = find('.item .label')[0];

    // Create a listener that will check that the correct animation ran
    // and also call done() to let mocha know that the test is finished
    var listener = function (e) {
      if (e.animationName === 'your-awesome-animation-name' {
        done(); // <-- calling done() to tell Mocha we are finished
      } else {
        throw new Error('Animation had wrong name'); // Explosion!
      }
    };

    // Add our listener to the element
    el.addEventListener('webkitAnimationStart', listener, false);
  })
  .click('.item:first .btn.correct-answer') // trigger the thing that will start the animation
  .then(function () {
    // Clean up by hiding the ember app again. This could also be done in an afterEach()
    hideEmber();
  });
});


// spec/helpers.js
function showEmber() {
  $('#ember-root').css('display', 'block');
}

function hideEmber() {
  $('#ember-root').css('display', 'none');
}