How to synchronous test animation in AngularJS 1.3.15?

While trying to put the test to work I realized that I could only:

• use addClass and removeClass from $animate to add/remove ng-hide class; use "ng-show" directly didn't worked. When using those methods I realized that the method "removeClass" from the object registered as the animation was never called, the ones that were called were: "beforeAddClass" and "beforeRemoveClass", so I changed that. When I google about it I found an issue somewhat related: $animate.removeClass() doesn't work if addClass animation incomplete.
• use rootScope instead of scope (I could not understand why)

After search a little more I found this comment on an issue; it seems there are some bugs with animations; the comment suggests to use differente versions of angular and angular-animate as there are "a few bugfixes for animate in the pipeline". So I give it a try and use the update versions (v1.4.0-build.4010+sha.213c2a7) and now it seems to work better... Using the ng-show directive now works. (but still only beforeAddClass and beforeRemoveClass are called and could not get scope to works...).

I'm not suggesting you to upgrade (even because v.1.4.0 is not yet released) just pointing that there are issues and bugs around this subject...)Here is the code (with suggested versions v1.4.0-build.4010):

describe('animate', function() {  var scope, $animate, $rootElement, $compile, $rootscope;  describe('Synchronous testing of animations', function() {    var animatedShow = false;    var animatedHide = false;    beforeEach(module('cookbook', function( $animateProvider ) {      animatedShow = false;      animatedHide = false;      $animateProvider.register('.slide-down', function() {        return {          beforeAddClass: function( element, className, done ) {            animatedHide = true;            done();          },          beforeRemoveClass: function( element, className, done ) {            animatedShow = true;            done();          }        };      });    }));    beforeEach(inject(function( _$injector_, _$animate_, _$compile_ ) {      $compile = _$compile_;      $animate = _$animate_;      $rootscope = _$injector_.get('$rootScope');      scope = _$injector_.get('$rootScope').$new();      $rootElement = _$injector_.get('$rootElement');    }));    it('should animate to hide', function() {      $rootscope.hint = true;      var el = $compile('<div class="slide-down" ng-show="hint"></div>')($rootscope);      $rootElement.append(el);      angular.element(document.body).append($rootElement);      $rootscope.$digest();      $rootscope.hint = false;      $rootscope.$digest();      expect(animatedHide).toBeTruthy();    });    it('should animate to show', function() {      $rootscope.hint = false;      var el = $compile('<div class="slide-down" ng-show="hint"></div>')($rootscope);      $rootElement.append(el);      angular.element(document.body).append($rootElement);      $rootscope.$digest();      $rootscope.hint = true;      $rootscope.$digest();      expect(animatedShow).toBeTruthy();    });  });});

I also agree that this test is not testing the real animation code; maybe an e2e test should be better.

Here is the code using angular and angular-animate v1.3.15 and using addClass and removeClass directly:

    //...the rest of code is identical    it('should animate to hide', function() {      var el = $compile('<div class="slide-down"></div>')($rootscope);      $rootElement.append(el);      angular.element(document.body).append($rootElement);      $rootscope.$digest();      $animate.addClass(el, 'ng-hide');      $rootscope.$digest();      expect(animatedHide).toBeTruthy();    });    it('should animate to show', function() {      var el = $compile('<div class="slide-down ng-hide"></div>')($rootscope);      $rootElement.append(el);      angular.element(document.body).append($rootElement);      $rootscope.$digest();      $animate.removeClass(el, 'ng-hide');      $rootscope.$digest();      expect(animatedShow).toBeTruthy();    });    //...

I hope this helps... Thanks.