From 1351ba2632b5011ad6eaddf004a7f0411bea8453 Mon Sep 17 00:00:00 2001
From: Matias Niemelä
Date: Tue, 9 Apr 2013 18:33:16 -0400
Subject: fix(ngAnimate): skip animation on first render

---
 test/ng/directive/ngShowHideSpec.js | 87 ++++++++++++++++++++++++++++++++-----
 1 file changed, 75 insertions(+), 12 deletions(-)

(limited to 'test/ng/directive/ngShowHideSpec.js')

diff --git a/test/ng/directive/ngShowHideSpec.js b/test/ng/directive/ngShowHideSpec.js
index d1d314e7..17c47255 100644
--- a/test/ng/directive/ngShowHideSpec.js
+++ b/test/ng/directive/ngShowHideSpec.js
@@ -43,8 +43,25 @@ describe('ngShow / ngHide', function() {
 });
 
 describe('ngShow / ngHide - ngAnimate', function() {
-  var element, window;
+  var window;
   var vendorPrefix;
+  var body, element;
+
+  function html(html) {
+    body.html(html);
+    element = body.children().eq(0);
+    return element;
+  }
+
+  beforeEach(function() {
+    // we need to run animation on attached elements;
+    body = jqLite(document.body);
+  });
+
+  afterEach(function(){
+    dealoc(body);
+    dealoc(element);
+  });
 
   beforeEach(module(function($animationProvider, $provide) {
     $provide.value('$window', window = angular.mock.createMockWindow());
@@ -53,21 +70,17 @@ describe('ngShow / ngHide - ngAnimate', function() {
     };
   }));
 
-  afterEach(function() {
-    dealoc(element);
-  });
-
   describe('ngShow', function() {
     it('should fire off the animator.show and animator.hide animation', inject(function($compile, $rootScope, $sniffer) {
       var $scope = $rootScope.$new();
       $scope.on = true;
-      element = $compile(
+      element = $compile(html(
         '<div ' +
           'style="'+vendorPrefix+'transition: 1s linear all"' +
           'ng-show="on" ' +
-          'ng-animate="{show: \'custom-show\', hide: \'custom-hide\'}">' +
+          'ng-animate="{show: \'custom-show\', hide: \'custom-hide\', animateFirst: true}">' +
         '</div>'
-      )($scope);
+      ))($scope);
       $scope.$digest();
 
       if ($sniffer.supportsTransitions) {
@@ -97,19 +110,43 @@ describe('ngShow / ngHide - ngAnimate', function() {
       expect(element.attr('class')).not.toContain('custom-hide-start');
       expect(element.attr('class')).not.toContain('custom-hide-setup');
     }));
+
+    it('should skip the initial show state on the first digest', function() {
+      var fired = false;
+      inject(function($compile, $rootScope, $sniffer) {
+        $rootScope.val = true;
+        var element = $compile(html('<div ng-show="val" ng-animate="\'animation\'">123</div>'))($rootScope);
+        element.css('display','none');
+        expect(element.css('display')).toBe('none');
+
+        $rootScope.$digest();
+        expect(element[0].style.display).toBe('');
+        expect(fired).toBe(false);
+
+        $rootScope.val = false;
+        $rootScope.$digest();
+        if ($sniffer.supportsTransitions) {
+          window.setTimeout.expect(1).process();
+          window.setTimeout.expect(0).process();
+        } else {
+          expect(window.setTimeout.queue).toEqual([]);
+        }
+        expect(element[0].style.display).toBe('none');
+      });
+    });
   });
 
   describe('ngHide', function() {
     it('should fire off the animator.show and animator.hide animation', inject(function($compile, $rootScope, $sniffer) {
       var $scope = $rootScope.$new();
       $scope.off = true;
-      element = $compile(
+      element = $compile(html(
           '<div ' +
               'style="'+vendorPrefix+'transition: 1s linear all"' +
               'ng-hide="off" ' +
-              'ng-animate="{show: \'custom-show\', hide: \'custom-hide\'}">' +
-              '</div>'
-      )($scope);
+              'ng-animate="{show: \'custom-show\', hide: \'custom-hide\', animateFirst: true}">' +
+          '</div>'
+      ))($scope);
       $scope.$digest();
 
       if ($sniffer.supportsTransitions) {
@@ -140,5 +177,31 @@ describe('ngShow / ngHide - ngAnimate', function() {
       expect(element.attr('class')).not.toContain('custom-show-start');
       expect(element.attr('class')).not.toContain('custom-show-setup');
     }));
+
+    it('should skip the initial hide state on the first digest', 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);
+        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);
+      });
+    });
   });
 });
-- 
cgit v1.2.3