diff options
Diffstat (limited to 'test/ng/directive')
| -rwxr-xr-x | test/ng/directive/ngIfSpec.js | 86 | ||||
| -rw-r--r-- | test/ng/directive/ngIncludeSpec.js | 98 | ||||
| -rw-r--r-- | test/ng/directive/ngRepeatSpec.js | 216 | ||||
| -rw-r--r-- | test/ng/directive/ngShowHideSpec.js | 159 | ||||
| -rw-r--r-- | test/ng/directive/ngSwitchSpec.js | 112 | 
5 files changed, 160 insertions, 511 deletions
| diff --git a/test/ng/directive/ngIfSpec.js b/test/ng/directive/ngIfSpec.js index 0cca57d5..8f2cb793 100755 --- a/test/ng/directive/ngIfSpec.js +++ b/test/ng/directive/ngIfSpec.js @@ -75,8 +75,7 @@ describe('ngIf', function () {  }); -describe('ngIf ngAnimate', function () { -  var vendorPrefix, window; +describe('ngIf animations', function () {    var body, element, $rootElement;    function html(html) { @@ -85,6 +84,8 @@ describe('ngIf ngAnimate', function () {      return element;    } +  beforeEach(module('mock.animate')); +    beforeEach(module(function() {      // we need to run animation on attached elements;      return function(_$rootElement_) { @@ -99,97 +100,52 @@ describe('ngIf 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); +  beforeEach(module(function($animateProvider, $provide) { +    return function($animate) { +      $animate.enabled(true);      };    })); -  it('should fire off the enter animation + add and remove the css 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>' + -          '<div ng-if="value" style="' + style + '" ng-animate="{enter: \'custom-enter\', leave: \'custom-leave\'}"><div>Hi</div></div>' + +          '<div ng-if="value"><div>Hi</div></div>' +          '</div>'        ))($scope);        $rootScope.$digest();        $scope.$apply('value = true'); +      item = $animate.process('enter').element; +      expect(item.text()).toBe('Hi');        expect(element.children().length).toBe(1); -      var first = element.children()[0]; - -      if ($sniffer.transitions) { -        expect(first.className).toContain('custom-enter'); -        window.setTimeout.expect(1).process(); -        expect(first.className).toContain('custom-enter-active'); -        window.setTimeout.expect(1000).process(); -      } else { -        expect(window.setTimeout.queue).toEqual([]); -      } - -      expect(first.className).not.toContain('custom-enter'); -      expect(first.className).not.toContain('custom-enter-active');    })); -  it('should fire off the leave animation + add and remove the css 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>' + -          '<div ng-if="value" style="' + style + '" ng-animate="{enter: \'custom-enter\', leave: \'custom-leave\'}"><div>Hi</div></div>' + +          '<div ng-if="value"><div>Hi</div></div>' +          '</div>'        ))($scope);        $scope.$apply('value = true'); -      expect(element.children().length).toBe(1); -      var first = element.children()[0]; - -      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('Hi');        $scope.$apply('value = false'); -      expect(element.children().length).toBe($sniffer.transitions ? 1 : 0); +      expect(element.children().length).toBe(1); -      if ($sniffer.transitions) { -        expect(first.className).toContain('custom-leave'); -        window.setTimeout.expect(1).process(); -        expect(first.className).toContain('custom-leave-active'); -        window.setTimeout.expect(1000).process(); -      } else { -        expect(window.setTimeout.queue).toEqual([]); -      } +      item = $animate.process('leave').element; +      expect(item.text()).toBe('Hi');        expect(element.children().length).toBe(0);    })); -  it('should catch and use the correct duration for animation', -    inject(function ($compile, $rootScope, $sniffer) { -      var $scope = $rootScope.$new(); -      var style = vendorPrefix + 'transition: 0.5s linear all'; -      element = $compile(html( -        '<div>' + -          '<div ng-if="value" style="' + style + '" ng-animate="{enter: \'custom-enter\', leave: \'custom-leave\'}"><div>Hi</div></div>' + -        '</div>' -      ))($scope); -      $scope.$apply('value = true'); - -      if ($sniffer.transitions) { -        window.setTimeout.expect(1).process(); -        window.setTimeout.expect(500).process(); -      } else { -        expect(window.setTimeout.queue).toEqual([]); -      } -  })); -  }); diff --git a/test/ng/directive/ngIncludeSpec.js b/test/ng/directive/ngIncludeSpec.js index 6cb78755..286ee5af 100644 --- a/test/ng/directive/ngIncludeSpec.js +++ b/test/ng/directive/ngIncludeSpec.js @@ -341,8 +341,7 @@ describe('ngInclude', function() {    });  }); -describe('ngInclude ngAnimate', function() { -  var vendorPrefix, window; +describe('ngInclude animations', function() {    var body, element, $rootElement;    function html(html) { @@ -351,11 +350,6 @@ describe('ngInclude ngAnimate', function() {      return element;    } -  function applyCSS(element, cssProp, cssValue) { -    element.css(cssProp, cssValue); -    element.css(vendorPrefix + cssProp, cssValue); -  } -    beforeEach(module(function() {      // we need to run animation on attached elements;      return function(_$rootElement_) { @@ -370,107 +364,51 @@ describe('ngInclude 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); -    }; -  })); +  beforeEach(module('mock.animate'));    afterEach(function(){      dealoc(element);    }); -  it('should fire off the enter animation + add and remove the css classes', -    inject(function($compile, $rootScope, $templateCache, $sniffer) { +  it('should fire off the enter animation', +    inject(function($compile, $rootScope, $templateCache, $animate) { +      var item;        $templateCache.put('enter', [200, '<div>data</div>', {}]);        $rootScope.tpl = 'enter';        element = $compile(html(          '<div ' + -          'ng-include="tpl" ' + -          'ng-animate="{enter: \'custom-enter\'}">' + +          'ng-include="tpl">' +          '</div>'        ))($rootScope);        $rootScope.$digest(); -      //if we add the custom css stuff here then it will get picked up before the animation takes place -      var child = jqLite(element.children()[0]); -      applyCSS(child, 'transition', '1s linear all'); - -      if ($sniffer.transitions) { -        expect(child.attr('class')).toContain('custom-enter'); -        window.setTimeout.expect(1).process(); - -        expect(child.attr('class')).toContain('custom-enter-active'); -        window.setTimeout.expect(1000).process(); -      } else { -       expect(window.setTimeout.queue).toEqual([]); -      } - -      expect(child.attr('class')).not.toContain('custom-enter'); -      expect(child.attr('class')).not.toContain('custom-enter-active'); +      item = $animate.process('leave').element; +      item = $animate.process('enter').element; +      expect(item.text()).toBe('data');    })); -  it('should fire off the leave animation + add and remove the css classes', -    inject(function($compile, $rootScope, $templateCache, $sniffer) { +  it('should fire off the leave animation', +    inject(function($compile, $rootScope, $templateCache, $animate) { +      var item;        $templateCache.put('enter', [200, '<div>data</div>', {}]);        $rootScope.tpl = 'enter';        element = $compile(html(          '<div ' + -          'ng-include="tpl" ' + -          'ng-animate="{leave: \'custom-leave\'}">' + +          'ng-include="tpl">' +          '</div>'        ))($rootScope);        $rootScope.$digest(); -      //if we add the custom css stuff here then it will get picked up before the animation takes place -      var child = jqLite(element.children()[0]); -      applyCSS(child, 'transition', '1s linear all'); +      item = $animate.process('leave').element; +      item = $animate.process('enter').element; +      expect(item.text()).toBe('data');        $rootScope.tpl = '';        $rootScope.$digest(); -      if ($sniffer.transitions) { -        expect(child.attr('class')).toContain('custom-leave'); -        window.setTimeout.expect(1).process(); - -        expect(child.attr('class')).toContain('custom-leave-active'); -        window.setTimeout.expect(1000).process(); -      } else { -       expect(window.setTimeout.queue).toEqual([]); -      } - -      expect(child.attr('class')).not.toContain('custom-leave'); -      expect(child.attr('class')).not.toContain('custom-leave-active'); -  })); - -  it('should catch and use the correct duration for animation', -    inject(function($compile, $rootScope, $templateCache, $sniffer) { -      $templateCache.put('enter', [200, '<div>data</div>', {}]); -      $rootScope.tpl = 'enter'; -      element = $compile(html( -        '<div ' + -          'ng-include="tpl" ' + -          'ng-animate="{enter: \'custom-enter\'}">' + -        '</div>' -      ))($rootScope); -      $rootScope.$digest(); - -      //if we add the custom css stuff here then it will get picked up before the animation takes place -      var child = jqLite(element.children()[0]); -      applyCSS(child, 'transition', '0.5s linear all'); - -      $rootScope.tpl = 'enter'; -      $rootScope.$digest(); - -      if ($sniffer.transitions) { -        window.setTimeout.expect(1).process(); -        window.setTimeout.expect(500).process(); -      } else { -        expect(window.setTimeout.queue).toEqual([]); -      } +      item = $animate.process('leave').element; +      expect(item.text()).toBe('data');    }));  }); diff --git a/test/ng/directive/ngRepeatSpec.js b/test/ng/directive/ngRepeatSpec.js index 26562f4e..a85fd5ab 100644 --- a/test/ng/directive/ngRepeatSpec.js +++ b/test/ng/directive/ngRepeatSpec.js @@ -822,10 +822,30 @@ describe('ngRepeat', function() {        expect(newLis[2]).toEqual(lis[1]);      });    }); + +  it('should grow multi-node repeater', inject(function($compile, $rootScope) { +    $rootScope.show = false; +    $rootScope.books = [ +      {title:'T1', description: 'D1'}, +      {title:'T2', description: 'D2'} +    ]; +    element = $compile( +        '<div>' + +            '<dt ng-repeat-start="book in books">{{book.title}}:</dt>' + +            '<dd ng-repeat-end>{{book.description}};</dd>' + +        '</div>')($rootScope); + +    $rootScope.$digest(); +    expect(element.text()).toEqual('T1:D1;T2:D2;'); +    $rootScope.books.push({title:'T3', description: 'D3'}); +    $rootScope.$digest(); +    expect(element.text()).toEqual('T1:D1;T2:D2;T3:D3;'); +  })); + +  }); -describe('ngRepeat ngAnimate', function() { -  var vendorPrefix, window; +describe('ngRepeat animations', function() {    var body, element, $rootElement;    function html(html) { @@ -834,10 +854,7 @@ describe('ngRepeat ngAnimate', function() {      return element;    } -  function applyCSS(element, cssProp, cssValue) { -    element.css(cssProp, cssValue); -    element.css(vendorPrefix + cssProp, cssValue); -  } +  beforeEach(module('mock.animate'));    beforeEach(module(function() {      // we need to run animation on attached elements; @@ -853,21 +870,14 @@ describe('ngRepeat 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', +    inject(function($compile, $rootScope, $animate) { -  it('should fire off the enter animation + add and remove the css classes', -    inject(function($compile, $rootScope, $sniffer) { +    var item;      element = $compile(html(        '<div><div ' + -        'ng-repeat="item in items" ' + -        'ng-animate="{enter: \'custom-enter\'}">' + +        'ng-repeat="item in items">' +          '{{ item }}' +        '</div></div>'      ))($rootScope); @@ -877,40 +887,24 @@ describe('ngRepeat ngAnimate', function() {      $rootScope.items = ['1','2','3'];      $rootScope.$digest(); -    //if we add the custom css stuff here then it will get picked up before the animation takes place -    var kids = element.children(); -    for(var i=0;i<kids.length;i++) { -      kids[i] = jqLite(kids[i]); -      applyCSS(kids[i], 'transition', '1s linear all'); -    } - -    if ($sniffer.transitions) { -      angular.forEach(kids, function(kid) { -        expect(kid.attr('class')).toContain('custom-enter'); -        window.setTimeout.expect(1).process(); -      }); +    item = $animate.process('enter').element; +    expect(item.text()).toBe('1'); -      angular.forEach(kids, function(kid) { -        expect(kid.attr('class')).toContain('custom-enter-active'); -        window.setTimeout.expect(1000).process(); -      }); -    } else { -      expect(window.setTimeout.queue).toEqual([]); -    } +    item = $animate.process('enter').element; +    expect(item.text()).toBe('2'); -    angular.forEach(kids, function(kid) { -      expect(kid.attr('class')).not.toContain('custom-enter'); -      expect(kid.attr('class')).not.toContain('custom-enter-active'); -    }); +    item = $animate.process('enter').element; +    expect(item.text()).toBe('3');    })); -  it('should fire off the leave animation + add and remove the css classes', -    inject(function($compile, $rootScope, $sniffer) { +  it('should fire off the leave animation', +    inject(function($compile, $rootScope, $animate) { + +    var item;      element = $compile(html(        '<div><div ' + -        'ng-repeat="item in items" ' + -        'ng-animate="{leave: \'custom-leave\'}">' + +        'ng-repeat="item in items">' +          '{{ item }}' +        '</div></div>'      ))($rootScope); @@ -918,36 +912,30 @@ describe('ngRepeat ngAnimate', function() {      $rootScope.items = ['1','2','3'];      $rootScope.$digest(); -    //if we add the custom css stuff here then it will get picked up before the animation takes place -    var kids = element.children(); -    for(var i=0;i<kids.length;i++) { -      kids[i] = jqLite(kids[i]); -      applyCSS(kids[i], 'transition', '1s linear all'); -    } +    item = $animate.process('enter').element; +    expect(item.text()).toBe('1'); + +    item = $animate.process('enter').element; +    expect(item.text()).toBe('2'); + +    item = $animate.process('enter').element; +    expect(item.text()).toBe('3');      $rootScope.items = ['1','3'];      $rootScope.$digest(); -    //the last element gets pushed down when it animates -    var kid = jqLite(element.children()[1]); -    if ($sniffer.transitions) { -      expect(kid.attr('class')).toContain('custom-leave'); -      window.setTimeout.expect(1).process(); -      expect(kid.attr('class')).toContain('custom-leave-active'); -      window.setTimeout.expect(1000).process(); -    } else { -      expect(window.setTimeout.queue).toEqual([]); -    } - -    expect(kid.attr('class')).not.toContain('custom-leave'); -    expect(kid.attr('class')).not.toContain('custom-leave-active'); +    item = $animate.process('leave').element; +    expect(item.text()).toBe('2');    })); -  it('should fire off the move animation + add and remove the css classes', -    inject(function($compile, $rootScope, $sniffer) { +  it('should fire off the move animation', +    inject(function($compile, $rootScope, $animate) { + +      var item; +        element = $compile(html(          '<div>' + -          '<div ng-repeat="item in items" ng-animate="{move: \'custom-move\'}">' + +          '<div ng-repeat="item in items">' +              '{{ item }}' +            '</div>' +          '</div>' @@ -956,97 +944,23 @@ describe('ngRepeat ngAnimate', function() {        $rootScope.items = ['1','2','3'];        $rootScope.$digest(); -      //if we add the custom css stuff here then it will get picked up before the animation takes place -      var kids = element.children(); -      for(var i=0;i<kids.length;i++) { -        kids[i] = jqLite(kids[i]); -        applyCSS(kids[i], 'transition', '1s linear all'); -      } +      item = $animate.process('enter').element; +      expect(item.text()).toBe('1'); -      $rootScope.items = ['2','3','1']; -      $rootScope.$digest(); - -      //the last element gets pushed down when it animates -      kids  = element.children(); -      var first = jqLite(kids[0]); -      var left  = jqLite(kids[1]); -      var right = jqLite(kids[2]); - -      if ($sniffer.transitions) { -        expect(first.attr('class')).toContain('custom-move'); -        window.setTimeout.expect(1).process(); -        expect(left.attr('class')).toContain('custom-move'); -        window.setTimeout.expect(1).process(); - -        expect(first.attr('class')).toContain('custom-move-active'); -        window.setTimeout.expect(1000).process(); -        expect(left.attr('class')).toContain('custom-move-active'); -        window.setTimeout.expect(1000).process(); -      } else { -        expect(window.setTimeout.queue).toEqual([]); -      } - -      expect(first.attr('class')).not.toContain('custom-move'); -      expect(first.attr('class')).not.toContain('custom-move-active'); -      expect(left.attr('class')).not.toContain('custom-move'); -      expect(left.attr('class')).not.toContain('custom-move-active'); -      expect(right.attr('class')).not.toContain('custom-move'); -      expect(right.attr('class')).not.toContain('custom-move-active'); -  })); +      item = $animate.process('enter').element; +      expect(item.text()).toBe('2'); -  it('should catch and use the correct duration for animation', -    inject(function($compile, $rootScope, $sniffer) { +      item = $animate.process('enter').element; +      expect(item.text()).toBe('3'); -      element = $compile(html( -        '<div><div ' + -          'ng-repeat="item in items" ' + -          'ng-animate="{enter: \'custom-enter\'}">' + -          '{{ item }}' + -        '</div></div>' -      ))($rootScope); - -      $rootScope.$digest(); // re-enable the animations; - -      $rootScope.items = ['a','b']; +      $rootScope.items = ['2','3','1'];        $rootScope.$digest(); -      //if we add the custom css stuff here then it will get picked up before the animation takes place -      var kids = element.children(); -      var first = jqLite(kids[0]); -      var second = jqLite(kids[1]); -      var cssProp = 'transition'; -      var cssValue = '0.5s linear all'; -      applyCSS(first, cssProp, cssValue); -      applyCSS(second, cssProp, cssValue); - -      if ($sniffer.transitions) { -        window.setTimeout.expect(1).process(); -        window.setTimeout.expect(1).process(); -        window.setTimeout.expect(500).process(); -        window.setTimeout.expect(500).process(); -      } else { -        expect(window.setTimeout.queue).toEqual([]); -      } -  })); +      item = $animate.process('move').element; +      expect(item.text()).toBe('2'); -  it('should grow multi-node repeater', inject(function($compile, $rootScope) { -    $rootScope.show = false; -    $rootScope.books = [ -      {title:'T1', description: 'D1'}, -      {title:'T2', description: 'D2'} -    ]; -    element = $compile( -        '<div>' + -            '<dt ng-repeat-start="book in books">{{book.title}}:</dt>' + -            '<dd ng-repeat-end>{{book.description}};</dd>' + -        '</div>')($rootScope); - -    $rootScope.$digest(); -    expect(element.text()).toEqual('T1:D1;T2:D2;'); -    $rootScope.books.push({title:'T3', description: 'D3'}); -    $rootScope.$digest(); -    expect(element.text()).toEqual('T1:D1;T2:D2;T3:D3;'); +      item = $animate.process('move').element; +      expect(item.text()).toBe('1');    })); -  }); diff --git a/test/ng/directive/ngShowHideSpec.js b/test/ng/directive/ngShowHideSpec.js index 9b95440d..f8193a12 100644 --- a/test/ng/directive/ngShowHideSpec.js +++ b/test/ng/directive/ngShowHideSpec.js @@ -13,20 +13,20 @@ describe('ngShow / ngHide', function() {        element = jqLite('<div ng-show="exp"></div>');        element = $compile(element)($rootScope);        $rootScope.$digest(); -      expect(isCssVisible(element)).toEqual(false); +      expect(element).toBeHidden();        $rootScope.exp = true;        $rootScope.$digest(); -      expect(isCssVisible(element)).toEqual(true); +      expect(element).toBeShown();      }));      it('should make hidden element visible', inject(function($rootScope, $compile) { -      element = jqLite('<div style="display: none" ng-show="exp"></div>'); +      element = jqLite('<div class="ng-hide" ng-show="exp"></div>');        element = $compile(element)($rootScope); -      expect(isCssVisible(element)).toBe(false); +      expect(element).toBeHidden();        $rootScope.exp = true;        $rootScope.$digest(); -      expect(isCssVisible(element)).toBe(true); +      expect(element).toBeShown();      }));    }); @@ -34,17 +34,15 @@ describe('ngShow / ngHide', function() {      it('should hide an element', inject(function($rootScope, $compile) {        element = jqLite('<div ng-hide="exp"></div>');        element = $compile(element)($rootScope); -      expect(isCssVisible(element)).toBe(true); +      expect(element).toBeShown();        $rootScope.exp = true;        $rootScope.$digest(); -      expect(isCssVisible(element)).toBe(false); +      expect(element).toBeHidden();      }));    });  }); -describe('ngShow / ngHide - ngAnimate', function() { -  var window; -  var vendorPrefix; +describe('ngShow / ngHide animations', function() {    var body, element, $rootElement;    function html(html) { @@ -65,152 +63,57 @@ describe('ngShow / ngHide - ngAnimate', function() {      body.removeAttr('ng-animation-running');    }); -  beforeEach(module(function($animationProvider, $provide) { -    $provide.value('$window', window = angular.mock.createMockWindow()); -    return function($sniffer, _$rootElement_, $animator) { -      vendorPrefix = '-' + $sniffer.vendorPrefix + '-'; +  beforeEach(module('mock.animate')); + +  beforeEach(module(function($animateProvider, $provide) { +    return function(_$rootElement_) {        $rootElement = _$rootElement_; -      $animator.enabled(true);      };    }));    describe('ngShow', function() { -    it('should fire off the animator.show and animator.hide animation', inject(function($compile, $rootScope, $sniffer) { +    it('should fire off the $animate.show and $animate.hide animation', inject(function($compile, $rootScope, $animate) { +      var item;        var $scope = $rootScope.$new();        $scope.on = true;        element = $compile(html( -        '<div ' + -          'style="'+vendorPrefix+'transition: 1s linear all"' + -          'ng-show="on" ' + -          'ng-animate="{show: \'custom-show\', hide: \'custom-hide\', animateFirst: true}">' + -        '</div>' +        '<div ng-show="on">data</div>'        ))($scope);        $scope.$digest(); -      if ($sniffer.transitions) { -        expect(element.attr('class')).toContain('custom-show'); -        window.setTimeout.expect(1).process(); - -        expect(element.attr('class')).toContain('custom-show-active'); -        window.setTimeout.expect(1000).process(); -      } else { -        expect(window.setTimeout.queue).toEqual([]); -      } - -      expect(element.attr('class')).not.toContain('custom-show-active'); -      expect(element.attr('class')).not.toContain('custom-show'); +      item = $animate.process('show').element; +      expect(item.text()).toBe('data'); +      expect(item).toBeShown();        $scope.on = false;        $scope.$digest(); -      if ($sniffer.transitions) { -        expect(element.attr('class')).toContain('custom-hide'); -        window.setTimeout.expect(1).process(); -        expect(element.attr('class')).toContain('custom-hide-active'); -        window.setTimeout.expect(1000).process(); -      } else { -        expect(window.setTimeout.queue).toEqual([]); -      } - -      expect(element.attr('class')).not.toContain('custom-hide-active'); -      expect(element.attr('class')).not.toContain('custom-hide'); -    })); -    it('should skip animation if parent animation running', function() { -      var fired = false; -      inject(function($animator, $compile, $rootScope, $sniffer) { -        $animator.enabled(true); -        $rootScope.$digest(); -        $rootScope.val = true; -        var element = $compile(html('<div ng-show="val" ng-animate="\'animation\'">123</div>'))($rootScope); -        $rootElement.controller('ngAnimate').running = true; -        element.css('display','none'); -        expect(element.css('display')).toBe('none'); - -        $rootScope.$digest(); -        expect(element[0].style.display).toBe(''); -        expect(fired).toBe(false); - -        $rootElement.controller('ngAnimate').running = false; -        $rootScope.val = false; -        $rootScope.$digest(); -        if ($sniffer.transitions) { -          window.setTimeout.expect(1).process(); -          window.setTimeout.expect(0).process(); -        } else { -          expect(window.setTimeout.queue).toEqual([]); -        } -        expect(element[0].style.display).toBe('none'); -      }); -    }); +      item = $animate.process('hide').element; +      expect(item.text()).toBe('data'); +      expect(item).toBeHidden(); +    }));    });    describe('ngHide', function() { -    it('should fire off the animator.show and animator.hide animation', inject(function($compile, $rootScope, $sniffer) { +    it('should fire off the $animate.show and $animate.hide animation', inject(function($compile, $rootScope, $animate) { +      var item;        var $scope = $rootScope.$new();        $scope.off = true;        element = $compile(html( -          '<div ' + -              'style="'+vendorPrefix+'transition: 1s linear all"' + -              'ng-hide="off" ' + -              'ng-animate="{show: \'custom-show\', hide: \'custom-hide\', animateFirst: true}">' + -          '</div>' +          '<div ng-hide="off">datum</div>'        ))($scope);        $scope.$digest(); -      if ($sniffer.transitions) { -        expect(element.attr('class')).toContain('custom-hide'); -        window.setTimeout.expect(1).process(); - -        expect(element.attr('class')).toContain('custom-hide-active'); -        window.setTimeout.expect(1000).process(); -      } else { -        expect(window.setTimeout.queue).toEqual([]); -      } - -      expect(element.attr('class')).not.toContain('custom-hide-active'); -      expect(element.attr('class')).not.toContain('custom-hide'); +      item = $animate.process('hide').element; +      expect(item.text()).toBe('datum'); +      expect(item).toBeHidden();        $scope.off = false;        $scope.$digest(); -      if ($sniffer.transitions) { -        expect(element.attr('class')).toContain('custom-show'); -        window.setTimeout.expect(1).process(); -        expect(element.attr('class')).toContain('custom-show-active'); -        window.setTimeout.expect(1000).process(); -      } else { -        expect(window.setTimeout.queue).toEqual([]); -      } - -      expect(element.attr('class')).not.toContain('custom-show-active'); -      expect(element.attr('class')).not.toContain('custom-show'); +      item = $animate.process('show').element; +      expect(item.text()).toBe('datum'); +      expect(item).toBeShown();      })); - -    it('should disable animation when parent animation is running', function() { -      var fired = false; -      module(function($animationProvider) { -        $animationProvider.register('destructive-animation', function() { -          return { -            setup : function() {}, -            start : function(element, done) { -              fired = true; -            } -          }; -        }); -      }); -      inject(function($compile, $rootScope) { -        $rootScope.val = false; -        var element = $compile(html('<div ng-hide="val" ng-animate="{ hide:\'destructive-animation\' }">123</div>'))($rootScope); -        $rootElement.controller('ngAnimate').running = true; -        element.css('display','block'); -        expect(element.css('display')).toBe('block'); - -        $rootScope.val = true; -        $rootScope.$digest(); - -        expect(element.css('display')).toBe('none'); -        expect(fired).toBe(false); -      }); -    });    });  }); 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');    }));  }); | 
