diff options
| author | Matias Niemelä | 2013-06-18 13:59:57 -0400 | 
|---|---|---|
| committer | Misko Hevery | 2013-07-26 23:49:54 -0700 | 
| commit | 81923f1e41560327f7de6e8fddfda0d2612658f3 (patch) | |
| tree | bbf8151bddf4d026f8f5fa3196b84a45ecd9c858 /test/ng/directive/ngSwitchSpec.js | |
| parent | 11521a4cde689c2bd6aaa227b1f45cb3fb53725b (diff) | |
| download | angular.js-81923f1e41560327f7de6e8fddfda0d2612658f3.tar.bz2 | |
feat(ngAnimate): complete rewrite of animations
- ngAnimate directive is gone and was replaced with class based animations/transitions
- support for triggering animations on css class additions and removals
- done callback was added to all animation apis
- $animation and $animator where merged into a single $animate service with api:
  - $animate.enter(element, parent, after, done);
  - $animate.leave(element, done);
  - $animate.move(element, parent, after, done);
  - $animate.addClass(element, className, done);
  - $animate.removeClass(element, className, done);
BREAKING CHANGE: too many things changed, we'll write up a separate doc with migration instructions
Diffstat (limited to 'test/ng/directive/ngSwitchSpec.js')
| -rw-r--r-- | test/ng/directive/ngSwitchSpec.js | 112 | 
1 files changed, 25 insertions, 87 deletions
| diff --git a/test/ng/directive/ngSwitchSpec.js b/test/ng/directive/ngSwitchSpec.js index ab231ec2..8750b187 100644 --- a/test/ng/directive/ngSwitchSpec.js +++ b/test/ng/directive/ngSwitchSpec.js @@ -214,8 +214,7 @@ describe('ngSwitch', function() {    }));  }); -describe('ngSwitch ngAnimate', function() { -  var vendorPrefix, window; +describe('ngSwitch animations', function() {    var body, element, $rootElement;    function html(html) { @@ -224,6 +223,8 @@ describe('ngSwitch ngAnimate', function() {      return element;    } +  beforeEach(module('mock.animate')); +    beforeEach(module(function() {      // we need to run animation on attached elements;      return function(_$rootElement_) { @@ -238,23 +239,15 @@ describe('ngSwitch ngAnimate', function() {      dealoc(element);    }); -  beforeEach(module(function($animationProvider, $provide) { -    $provide.value('$window', window = angular.mock.createMockWindow()); -    return function($sniffer, $animator) { -      vendorPrefix = '-' + $sniffer.vendorPrefix + '-'; -      $animator.enabled(true); -    }; -  })); - -  it('should fire off the enter animation + set and remove the classes', -    inject(function($compile, $rootScope, $sniffer) { +  it('should fire off the enter animation', +    inject(function($compile, $rootScope, $animate) { +      var item;        var $scope = $rootScope.$new(); -      var style = vendorPrefix + 'transition: 1s linear all';        element = $compile(html( -        '<div ng-switch on="val" ng-animate="{enter: \'cool-enter\', leave: \'cool-leave\'}">' + -          '<div ng-switch-when="one" style="' + style + '">one</div>' + -          '<div ng-switch-when="two" style="' + style + '">two</div>' + -          '<div ng-switch-when="three" style="' + style + '">three</div>' + +        '<div ng-switch on="val">' + +          '<div ng-switch-when="one">one</div>' + +          '<div ng-switch-when="two">two</div>' + +          '<div ng-switch-when="three">three</div>' +          '</div>'        ))($scope); @@ -262,33 +255,20 @@ describe('ngSwitch ngAnimate', function() {        $scope.val = 'one';        $scope.$digest(); -      expect(element.children().length).toBe(1); -      var first = element.children()[0]; - -      if ($sniffer.transitions) { -        expect(first.className).toContain('cool-enter'); -        window.setTimeout.expect(1).process(); - -        expect(first.className).toContain('cool-enter-active'); -        window.setTimeout.expect(1000).process(); -      } else { -        expect(window.setTimeout.queue).toEqual([]); -      } - -      expect(first.className).not.toContain('cool-enter'); -      expect(first.className).not.toContain('cool-enter-active'); +      item = $animate.process('enter').element; +      expect(item.text()).toBe('one');    })); -  it('should fire off the leave animation + set and remove the classes', -    inject(function($compile, $rootScope, $sniffer) { +  it('should fire off the leave animation', +    inject(function($compile, $rootScope, $animate) { +      var item;        var $scope = $rootScope.$new(); -      var style = vendorPrefix + 'transition: 1s linear all';        element = $compile(html( -        '<div ng-switch on="val" ng-animate="{enter: \'cool-enter\', leave: \'cool-leave\'}">' + -          '<div ng-switch-when="one" style="' + style + '">one</div>' + -          '<div ng-switch-when="two" style="' + style + '">two</div>' + -          '<div ng-switch-when="three" style="' + style + '">three</div>' + +        '<div ng-switch on="val">' + +          '<div ng-switch-when="one">one</div>' + +          '<div ng-switch-when="two">two</div>' + +          '<div ng-switch-when="three">three</div>' +          '</div>'        ))($scope); @@ -296,59 +276,17 @@ describe('ngSwitch ngAnimate', function() {        $scope.val = 'two';        $scope.$digest(); -      if ($sniffer.transitions) { -        window.setTimeout.expect(1).process(); -        window.setTimeout.expect(1000).process(); -      } else { -        expect(window.setTimeout.queue).toEqual([]); -      } +      item = $animate.process('enter').element; +      expect(item.text()).toBe('two');        $scope.val = 'three';        $scope.$digest(); -      expect(element.children().length).toBe($sniffer.transitions ? 2 : 1); -      var first = element.children()[0]; - - -      if ($sniffer.transitions) { -        expect(first.className).toContain('cool-leave'); -        window.setTimeout.expect(1).process(); -        window.setTimeout.expect(1).process(); -      } else { -        expect(window.setTimeout.queue).toEqual([]); -      } +      item = $animate.process('leave').element; +      expect(item.text()).toBe('two'); - -      if ($sniffer.transitions) { -        expect(first.className).toContain('cool-leave-active'); -        window.setTimeout.expect(1000).process(); -        window.setTimeout.expect(1000).process(); -      } else { -        expect(window.setTimeout.queue).toEqual([]); -      } - -      expect(first.className).not.toContain('cool-leave'); -      expect(first.className).not.toContain('cool-leave-active'); -  })); - -  it('should catch and use the correct duration for animation', -    inject(function($compile, $rootScope, $sniffer) { -      element = $compile(html( -        '<div ng-switch on="val" ng-animate="{enter: \'cool-enter\', leave: \'cool-leave\'}">' + -          '<div ng-switch-when="one" style="' + vendorPrefix + 'transition: 0.5s linear all">one</div>' + -        '</div>' -      ))($rootScope); - -      $rootScope.$digest(); // re-enable the animations; -      $rootScope.val = 'one'; -      $rootScope.$digest(); - -      if ($sniffer.transitions) { -        window.setTimeout.expect(1).process(); -        window.setTimeout.expect(500).process(); -      } else { -       expect(window.setTimeout.queue).toEqual([]); -      } +      item = $animate.process('enter').element; +      expect(item.text()).toBe('three');    }));  }); | 
