fix(jqLite): properly toggle multiple classes

Fixes angular#4467
pkozlowski-opensource · Feb 25, 2014 · 0cba12d · 0cba12d
1 parent 1b1413a
commit 0cba12d
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 3 deletions.
diff --git a/src/jqLite.js b/src/jqLite.js
@@ -840,10 +840,15 @@ forEach({
   removeClass: jqLiteRemoveClass,
 
   toggleClass: function(element, selector, condition) {
-    if (isUndefined(condition)) {
-      condition = !jqLiteHasClass(element, selector);
+    if (selector) {
+      forEach(selector.split(' '), function(className){
+        var classCondition = condition;
+        if (isUndefined(classCondition)) {
+          classCondition = !jqLiteHasClass(element, className);
+        }
+        (classCondition ? jqLiteAddClass : jqLiteRemoveClass)(element, className);
+      });
     }
-    (condition ? jqLiteAddClass : jqLiteRemoveClass)(element, selector);
   },
 
   parent: function(element) {

diff --git a/test/jqLiteSpec.js b/test/jqLiteSpec.js
@@ -666,6 +666,55 @@ describe('jqLite', function() {
         expect(jqLite(b).hasClass('abc')).toEqual(false);
 
       });
+
+      it('should allow toggling multiple classes without a condition', function () {
+        var selector = jqLite([a, b]);
+        expect(selector.toggleClass('abc cde')).toEqual(selector);
+        expect(jqLite(a).hasClass('abc')).toEqual(true);
+        expect(jqLite(a).hasClass('cde')).toEqual(true);
+        expect(jqLite(b).hasClass('abc')).toEqual(true);
+        expect(jqLite(b).hasClass('cde')).toEqual(true);
+
+        expect(selector.toggleClass('abc cde')).toEqual(selector);
+        expect(jqLite(a).hasClass('abc')).toEqual(false);
+        expect(jqLite(a).hasClass('cde')).toEqual(false);
+        expect(jqLite(b).hasClass('abc')).toEqual(false);
+        expect(jqLite(b).hasClass('cde')).toEqual(false);
+
+        expect(selector.toggleClass('abc')).toEqual(selector);
+        expect(selector.toggleClass('abc cde')).toEqual(selector);
+        expect(jqLite(a).hasClass('abc')).toEqual(false);
+        expect(jqLite(a).hasClass('cde')).toEqual(true);
+        expect(jqLite(b).hasClass('abc')).toEqual(false);
+        expect(jqLite(b).hasClass('cde')).toEqual(true);
+
+        expect(selector.toggleClass('abc cde')).toEqual(selector);
+        expect(jqLite(a).hasClass('abc')).toEqual(true);
+        expect(jqLite(a).hasClass('cde')).toEqual(false);
+        expect(jqLite(b).hasClass('abc')).toEqual(true);
+        expect(jqLite(b).hasClass('cde')).toEqual(false);
+      });
+
+      it('should allow toggling multiple classes with a condition', function () {
+        var selector = jqLite([a, b]);
+        expect(selector.toggleClass('abc cde', true)).toEqual(selector);
+        expect(jqLite(a).hasClass('abc')).toEqual(true);
+        expect(jqLite(a).hasClass('cde')).toEqual(true);
+        expect(jqLite(b).hasClass('abc')).toEqual(true);
+        expect(jqLite(b).hasClass('cde')).toEqual(true);
+
+        expect(selector.toggleClass('abc cde', false)).toEqual(selector);
+        expect(jqLite(a).hasClass('abc')).toEqual(false);
+        expect(jqLite(a).hasClass('cde')).toEqual(false);
+        expect(jqLite(b).hasClass('abc')).toEqual(false);
+        expect(jqLite(b).hasClass('cde')).toEqual(false);
+      });
+
+      it('should not break for null / undefined selectors', function () {
+        var selector = jqLite([a, b]);
+        expect(selector.toggleClass(null)).toEqual(selector);
+        expect(selector.toggleClass(undefined)).toEqual(selector);
+      });
     });