assert that transitions are running

Brocfile.js

@@ -8,9 +8,16 @@ var velocity = pickFiles('node_modules/velocity-animate', {
   destDir: 'velocity'
 });
 
+var sinon = pickFiles('node_modules/sinon/pkg', {
+  srcDir: '/',
+  destDir: 'sinon',
+  files: ['sinon.js']
+});
+
+
 var appTree = mergeTrees(['app-addon', 'app'], { overwrite: true });
 var templateTree = mergeTrees(['app-addon/templates', 'app/templates'], { overwrite: true });
-var vendorTree = mergeTrees([velocity, 'vendor-addon', 'vendor']);
+var vendorTree = mergeTrees([velocity, sinon, 'vendor-addon', 'vendor']);
 
 var app = new EmberApp({
   trees: {
@@ -24,6 +31,7 @@ var app = new EmberApp({
 app.import("vendor/velocity/jquery.velocity.js");
 app.import("vendor/moment/moment.js");
 app.import("vendor/liquid-fire/liquid-fire.css");
+app.import('vendor/sinon/sinon.js', { type: 'test' });
 
 var fonts = pickFiles('vendor/bootstrap-sass-official/assets/fonts', {
   srcDir:'/',

package.json

@@ -51,6 +51,7 @@
     "glob": "^4.0.4",
     "ncp": "^0.6.0",
     "originate": "0.1.5",
-    "rsvp": "^3.0.13"
+    "rsvp": "^3.0.13",
+    "sinon": "^1.10.3"
   }
 }

tests/acceptance/demos-test.js

@@ -1,11 +1,35 @@
+/* global sinon, ranTransition, noTransitionsYet */
+
 import Ember from 'ember';
 import startApp from '../helpers/start-app';
 
+function transitionMap(app) {
+  return app.__container__.lookup('transitions:map');
+}
+
+Ember.Test.registerHelper('ranTransition',
+  function(app, name) {
+    ok(transitionMap(app).lookup.calledWith(name), 'ran transition ' + name);
+  }
+);
+
+Ember.Test.registerHelper('noTransitionsYet',
+  function(app, name) {
+    equal(transitionMap(app).lookup.callCount, 0, 'expected no transitions');
+  }
+);
+
 var App;
 
 module('Acceptance: Demos', {
   setup: function() {
     App = startApp();
+    // Conceptually, integration tests shouldn't be digging around in
+    // the container. But animations are slippery, and it's easier to
+    // just spy on them to make sure they're being run than to try to
+    // observe their behavior more directly.
+    var tmap = App.__container__.lookup('transitions:map');
+    sinon.spy(tmap, 'lookup');
   },
   teardown: function() {
     Ember.run(App, 'destroy');
@@ -45,32 +69,37 @@ test('liquid outlet demo', function() {
   andThen(function(){
     equal(currentRouteName(), 'helpers-documentation.liquid-outlet.index');
     equal(find('.demo-container a').text(), 'Click me!');
+    noTransitionsYet();
   });
   click('.demo-container a');
   andThen(function(){
     equal(currentRouteName(), 'helpers-documentation.liquid-outlet.other');
     equal(find('.demo-container a').text(), 'Go back!');
+    ranTransition('toLeft');
   });
   click('.demo-container a');
   andThen(function(){
     equal(currentRouteName(), 'helpers-documentation.liquid-outlet.index');
     equal(find('.demo-container a').text(), 'Click me!');
+    ranTransition('toRight');
   });
 });
 
 test('liquid with demo', function() {
   visit('/helpers/liquid-with');
   andThen(function(){
     ok(/\b1\b/.test(find('.demo-container').text()), 'Has 1');
+    noTransitionsYet();
   });
   click('.demo-container button');
   andThen(function(){
+    ranTransition('rotateBelow');
     ok(/\b2\b/.test(find('.demo-container').text()), 'Has 2');
   });
 });
 
 test('liquid bind demo', function() {
-  var first, second;
+  var first, second, self = this;
   function clock() {
     var m = /(\d\d)\s*:\s*(\d\d)\s*:\s*(\d\d)/.exec($('#liquid-bind-demo').text());
     ok(m, "Read the clock");
@@ -85,30 +114,39 @@ test('liquid bind demo', function() {
   andThen(function(){
     second = clock();
     notEqual(first, second, "clock readings differ, " + first + ", " + second);
+    ranTransition('toUp');
   });
 });
 
 test('liquid if demo', function() {
   visit('/helpers/liquid-if');
   andThen(function(){
+    noTransitionsYet();
     equal(find('#liquid-box-demo input[type=checkbox]').length, 1, "found checkbox");
     equal(find('#liquid-box-demo input[type=text]').length, 0, "no text input");
     find('select').val('car').trigger('change');
   });
   andThen(function(){
+    ranTransition('toLeft');
     equal(find('#liquid-box-demo input[type=checkbox]').length, 0, "no more checkbox");
     equal(find('#liquid-box-demo input[type=text]').length, 1, "has text input");
+    find('select').val('bike').trigger('change');
+  });
+  andThen(function(){
+    ranTransition('crossFade');
   });
 });
 
 
 test('interruption demo, normal transition', function() {
   visit('/transitions/primitives');
   andThen(function(){
+    noTransitionsYet();
     classFound('one');
     clickWithoutWaiting('#interrupted-fade-demo a', 'Two');
   });
   andThen(function(){
+    ranTransition('fade');
     classFound('two');
   });
 });