Add toHaveMargin, toHavePadding, toHaveBorderWith and toHaveBorderdCo…

…lor.
winston · May 14, 2012 · 9bc9804 · 9bc9804
1 parent b9f5d69
commit 9bc9804
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 2 deletions.
diff --git a/spec/javascripts/cactusSpec.js b/spec/javascripts/cactusSpec.js
@@ -60,6 +60,41 @@ describe("Cactus", function() {
       });
     });
 
+    describe("allSidedTests", function() {
+      it("works for toHavePadding", function() {
+        $(".jasmine_reporter").css("padding", "10px");
+
+        var result = Cactus.expect(".jasmine_reporter").toHavePadding("10px");
+        expect(result).toBe(true);
+      });
+
+      it("works for toHaveMargin", function() {
+        $(".jasmine_reporter").css("margin", "10px 20px");
+
+        var result = Cactus.expect(".jasmine_reporter").toHaveMargin("10px 20px");
+        expect(result).toBe(true);
+      });
+
+      describe("border", function() {
+        beforeEach(function() {
+          $(".jasmine_reporter").css("border-top"   , "1px solid red");
+          $(".jasmine_reporter").css("border-right" , "2px solid red");
+          $(".jasmine_reporter").css("border-bottom", "3px solid red");
+          $(".jasmine_reporter").css("border-left"  , "4px solid red");
+        });
+
+        it("works for toHaveBorderWidth", function() {
+          var result = Cactus.expect(".jasmine_reporter").toHaveBorderWidth("1px 2px 3px 4px");
+          expect(result).toBe(true);
+        });
+
+        it("works for toHaveBorderColor", function() {
+          var result = Cactus.expect(".jasmine_reporter").toHaveBorderColor("#FF0000");
+          expect(result).toBe(true);
+        });
+      });
+    });
+
     describe("toHaveColor", function() {
       it("returns true when result is true for all matched elements (case insensitive)", function() {
         var result = Cactus.expect("label", "color").toHaveColor("#330033");

diff --git a/vendor/assets/javascripts/cactus.js b/vendor/assets/javascripts/cactus.js
@@ -22,8 +22,10 @@ Cactus = (function() {
   // Expectations
   _cactus.expect = function(elem, attr) {
     tag_name  = elem;
-    property  = attr;
-    styles    = $.map( $(tag_name), function(elem, i) { return $(elem).css(property);  } );
+    if (attr !== undefined) {
+      property = attr;
+      styles   = $.map( $(tag_name), function(elem, i) { return $(elem).css(property);  } );
+    }
 
     return this;
   };
@@ -50,6 +52,32 @@ Cactus = (function() {
     return _cactus.toEqual(expected_style.toLowerCase());
   };
 
+  _cactus.toHaveMargin = function(expected_style) {
+    var style_name = function(side) { return "margin-" + side };
+    return allSidedTests(style_name, expected_style);
+  };
+
+  _cactus.toHavePadding = function(expected_style) {
+    var style_name = function(side) { return "padding-" + side };
+    return allSidedTests(style_name, expected_style);
+  };
+
+  _cactus.toHaveBorderWidth = function(expected_style) {
+    var style_name = function(side) { return "border-" + side + "-width" };
+    return allSidedTests(style_name, expected_style);
+  };
+
+  _cactus.toHaveBorderColor = function(expected_style) {
+    var result   = true;
+    var longhand = shorthand2longhand(expected_style);
+
+    $.each(["top", "right", "bottom", "left"], function(index, side) {
+      result = result && _cactus.expect(tag_name, "border-" + side + "-color").toHaveColor(longhand[index]);
+    });
+
+    return result;
+  };
+
   // Private Methods
 
   function selector(index) {
@@ -84,6 +112,38 @@ Cactus = (function() {
     return result;
   }
 
+  function shorthand2longhand(style) {
+    var shorthand = style.split(/\s/), longhand;
+
+    switch(shorthand.length) {
+      case 1:
+        longhand = [shorthand[0], shorthand[0], shorthand[0], shorthand[0]];
+        break;
+      case 2:
+        longhand = [shorthand[0], shorthand[1], shorthand[0], shorthand[1]];
+        break;
+      case 3:
+        longhand = [shorthand[0], shorthand[1], shorthand[2], shorthand[1]];
+        break;
+      case 4:
+        longhand = [shorthand[0], shorthand[1], shorthand[2], shorthand[3]];
+        break;
+    }
+
+    return longhand;
+  }
+
+  function allSidedTests(style_name, expected_style) {
+    var result   = true;
+    var longhand = shorthand2longhand(expected_style);
+
+    $.each(["top", "right", "bottom", "left"], function(index, side) {
+      result = result && _cactus.expect(tag_name, style_name(side)).toEqual(longhand[index]);
+    });
+
+    return result;
+  }
+
   // Return Accessor
   return _cactus;