fix(ngClass): ensure ngClass doesn't fire addClass or removeClass with an empty string

If ngClass fires off an add- or removeClass whilst the opposite animation is going on then
the animation will be skipped. The default behavior of ngClass was executing remoteClass
with an empty string while addClass had just fired. This commit fixes that bug.

2 files changed, 51 insertions, 2 deletions

diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js
index a5b2acb6..0c4d23f0 100644
--- a/src/ng/directive/ngClass.js
+++ b/src/ng/directive/ngClass.js
@@ -42,12 +42,18 @@ function classDirective(name, selector) {
 
 
         function removeClass(classVal) {
-          $animate.removeClass(element, flattenClasses(classVal));
+          classVal = flattenClasses(classVal);
+          if(classVal && classVal.length > 0) {
+            $animate.removeClass(element, classVal);
+          }
         }
 
 
         function addClass(classVal) {
-          $animate.addClass(element, flattenClasses(classVal));
+          classVal = flattenClasses(classVal);
+          if(classVal && classVal.length > 0) {
+            $animate.addClass(element, classVal);
+          }
         }
 
         function flattenClasses(classVal) {
diff --git a/test/ng/directive/ngClassSpec.js b/test/ng/directive/ngClassSpec.js
index e73713d8..b038c971 100644
--- a/test/ng/directive/ngClassSpec.js
+++ b/test/ng/directive/ngClassSpec.js
@@ -304,3 +304,46 @@ describe('ngClass', function() {
     expect(e2.hasClass('odd')).toBeFalsy();
   }));
 });
+
+describe('ngClass animations', function() {
+  var body, element, $rootElement;
+
+  beforeEach(module('mock.animate'));
+
+  it("should avoid calling addClass accidentally when removeClass is going on",
+    inject(function($compile, $rootScope, $animate, $timeout) {
+
+    var element = angular.element('<div ng-class="val"></div>');
+    var body = jqLite(document.body);
+    body.append(element);
+    $compile(element)($rootScope);
+
+    expect($animate.queue.length).toBe(0);
+
+    $rootScope.val = 'one';
+    $rootScope.$digest();
+    $animate.process('addClass');
+    $animate.process('addClass');
+    $timeout.flush();
+    expect($animate.queue.length).toBe(0);
+
+    $rootScope.val = '';
+    $rootScope.$digest();
+    $animate.process('removeClass'); //only removeClass is called
+    expect($animate.queue.length).toBe(0);
+    $timeout.flush();
+
+    $rootScope.val = 'one';
+    $rootScope.$digest();
+    $animate.process('addClass');
+    $timeout.flush();
+    expect($animate.queue.length).toBe(0);
+
+    $rootScope.val = 'two';
+    $rootScope.$digest();
+    $animate.process('removeClass');
+    $animate.process('addClass');
+    $timeout.flush();
+    expect($animate.queue.length).toBe(0);
+  }));
+});