Add toHaveColor matcher.

winston · Mar 16, 2012 · de46ba5 · de46ba5
1 parent 88dfac2
commit de46ba5
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 11 deletions.
diff --git a/spec/javascripts/cactusSpec.js b/spec/javascripts/cactusSpec.js
@@ -29,13 +29,32 @@ describe("cactus", function() {
         expect(result).toBeTruthy();
       });
 
-      it("is equal", function() {
+      it("is not equal", function() {
         var expectation = cactus.expect("div", "display");
         var result = expectation.toEqual("none");
 
         expect(result).toBeFalsy();
       });
     });
+
+    describe("toHaveColor", function() {
+      it("is equal", function() {
+        var expectation = cactus.expect(".banner", "background-color");
+        var result = expectation.toHaveColor("#ffeeff");
+
+        expect(result).toBeTruthy();
+      });
+
+      it("is not equal", function() {
+        var expectation = cactus.expect(".banner", "background-color");
+        var result = expectation.toHaveColor("#000000");
+
+        expect(result).toBeFalsy();
+      });
+    });
+
+
+
   });
 
 });
diff --git a/vendor/assets/javascripts/cactus.js b/vendor/assets/javascripts/cactus.js
@@ -4,10 +4,6 @@ var cactus = (function() {
   var css_attribute  = null;
   var computed_style = null;
 
-  function debug() {
-    return { target_element: target_element, css_attribute: css_attribute, computed_style: computed_style };
-  }
-
   function expect(elem, attr) {
     target_element = elem;
     css_attribute  = attr
@@ -16,18 +12,44 @@ var cactus = (function() {
     return this;
   }
 
-  function toEqual(expected) {
-    if(computed_style !== expected) {
-      console.log("Expected " + target_element + ":" + css_attribute + " to equal " + expected + ", got " + computed_style + " instead." );
+  function debug() {
+    return { target_element: target_element, css_attribute: css_attribute, computed_style: computed_style };
+  }
+
+  function expectationResult(computed, expected) {
+    if(computed !== expected) {
+      console.log("Expected " + target_element + ":" + css_attribute + " to equal " + expected + ", got " + computed + " instead." );
+      return false;
     } else {
       return true;
     }
   }
 
+  function toEqual(expected_style) {
+    return expectationResult(computed_style, expected_style)
+  }
+
+  function toHaveColor(expected_style) {
+
+    // Source: http://stackoverflow.com/questions/1740700/get-hex-value-rather-than-rgb-value-using-jquery
+    function rgb2hex(rgb) {
+      rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
+
+      function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); }
+      return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
+    }
+
+    computed = rgb2hex(computed_style).toLowerCase();
+    expected = expected_style.toLowerCase();
+
+    return expectationResult(computed, expected);
+  }
+
   return {
-    debug  : debug,
-    expect : expect,
-    toEqual: toEqual
+    expect      : expect,
+    debug       : debug,
+    toEqual     : toEqual,
+    toHaveColor : toHaveColor
   };
 
 })();