Add CactusReport and tests. Refactoring of prints.

spec/javascripts/cactusReportSpec.js

@@ -0,0 +1,85 @@
+describe("CactusReport", function() {
+
+  describe("displays Cactus feedback in div#cactus", function() {
+    beforeEach(function() {
+      $("#cactus").remove();
+    });
+    afterEach(function() {
+      $("#cactus").remove();
+    });
+
+    describe("all tests passed", function() {
+      beforeEach(function() {
+        CactusReport.render(true, "test 1 passed");
+      });
+
+      it("hides toggle for failures", function() {
+        expect($(".cactus_toggle_pass").is(":visible")).toBeTruthy();
+        expect($(".cactus_toggle_fail").is(":visible")).toBeFalsy();
+      });
+    });
+
+    describe("all tests failed", function() {
+      beforeEach(function() {
+        CactusReport.render(false, "test 1 failed");
+      });
+
+      it("hides toggle for passes", function() {
+        expect($(".cactus_toggle_pass").is(":visible")).toBeFalsy();
+        expect($(".cactus_toggle_fail").is(":visible")).toBeTruthy();
+      });
+    });
+
+    describe("some tests passed, some tests failed", function() {
+      beforeEach(function() {
+        CactusReport.render(true , "test 1 passed");
+        CactusReport.render(false, "test 2 failed");
+      });
+
+      it("displays div#cactus", function() {
+        expect($("#cactus").is(":visible")).toBeTruthy();
+      });
+
+      it("contains 1 pass and 1 failure", function() {
+        expect($("#cactus .cactus_pass").length).toEqual(1);
+        expect($("#cactus .cactus_fail").length).toEqual(1);
+      });
+
+      it("shows toggles for passes and failures", function() {
+        expect($(".cactus_toggle_pass").is(":visible")).toBeTruthy();
+        expect($(".cactus_toggle_fail").is(":visible")).toBeTruthy();
+      });
+    });
+
+    describe("passes are hidden by default", function() {
+      beforeEach(function() {
+        CactusReport.render(true , "test 1 passed");
+      });
+
+      it("is hidden", function() {
+        expect($("#cactus .cactus_pass").is(":visible")).toBeFalsy();
+      });
+
+      it("is shown when clicked on 'Show Passes'", function() {
+        $(".cactus_toggle_pass").click();
+        expect($("#cactus .cactus_pass").is(":visible")).toBeTruthy();
+      })
+    });
+
+    describe("failures are shown by default", function() {
+      beforeEach(function() {
+        CactusReport.render(false, "test 1 failed");
+      });
+
+      it("is shown", function() {
+        expect($("#cactus .cactus_fail").is(":visible")).toBeTruthy();
+      });
+
+      it("is shown when clicked on 'Show Passes'", function() {
+        $(".cactus_toggle_fail").click();
+        expect($("#cactus .cactus_fail").is(":visible")).toBeFalsy();
+      })
+    });
+  });
+
+});

spec/javascripts/cactusSpec.js

@@ -21,6 +21,10 @@ describe("Cactus", function() {
     });
 
     describe("matchers", function() {
+      beforeEach(function() {
+        spyOn(CactusReport, "render");
+      });
+
       describe("toEqual", function() {
         beforeEach(function() {
           expectation = Cactus.expect(".banner", "display");
@@ -90,6 +94,10 @@ describe("Cactus", function() {
     });
 
     describe("matchers", function() {
+      beforeEach(function() {
+        spyOn(CactusReport, "render");
+      });
+
       describe("toEqual", function() {
         beforeEach(function() {
           expectation = Cactus.expectEvery("label", "text-align");

vendor/assets/javascripts/cactus.js

@@ -8,7 +8,6 @@ var Cactus = (function() {
   var property = null;
   var styles   = null;
 
-
   // Debug
   _cactus.debug = function() {
     return {
@@ -37,11 +36,11 @@ var Cactus = (function() {
 
   // Matchers
   _cactus.toEqual = function(expected_style) {
-    return expectationResult(styles, expected_style);
+    return compare(styles, expected_style, function(x, y) { return x === y; });
   };
 
   _cactus.toContain = function(expected_style) {
-    return expectationResult(styles, expected_style, function(x, y) { return x.match(y); });
+    return compare(styles, expected_style, function(x, y) { return x.match(y); });
   };
 
   _cactus.toHaveColor = function(expected_style) {
@@ -52,30 +51,117 @@ var Cactus = (function() {
       rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
       return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
     }
+    styles = $.map( styles, function(style, i) { return rgb2hex(style); } );
 
-    computed = $.map( styles, function(style, i) { return rgb2hex(style).toLowerCase(); } );
-    expected = expected_style.toLowerCase();
-
-    return expectationResult(computed, expected);
+    return _cactus.toEqual(expected_style.toLowerCase());
   };
 
-  function expectationResult(computed, expected, comparator) {
-    // Defaults to equality comparator
-    if (comparator === undefined) { comparator = function(x, y) { return x === y; }; }
+  // Private Methods
 
+  function compare(computed, expected, comparator) {
     var result = true;
+
     $.each(computed, function(index, style) {
-      if (!comparator(style, expected)) {
-        jq_selector = "$('" + tag_name + "')" + "[" + index + "]";
-        console.log("Cactus expected " + jq_selector + " " + property + " to equal " + expected + ", but got " + style + " instead.");
-        result = result && false;
-      }
+      var status  = comparator(style, expected);
+      var message = "Expected" + " $('" + tag_name + "')" + "[" + index + "] " + property + " to equal " + expected + ". Got " + style + ".";
+
+      result = result && status;
+
+      // Print result on page
+      CactusReport.render(status, message);
     });
 
     return result;
-  };
+  }
 
   // Return Accessor
   return _cactus;
 
 })();
+
+var CactusReport = (function() {
+
+  // Public Accessor
+  var _cactus_report = {};
+
+  _cactus_report.render = function(status, message) {
+    var $html = init_or_retrieve_report_container();
+
+    var $row = $(
+      "<div />",
+      {
+        html: message,
+        css : { "padding": "5px 10px", "border-bottom": "1px solid #d3d3d3" }
+      }
+    );
+    if(status) {
+      $row.addClass("cactus_pass");
+      $row.css( { "display": "none", "background": "#93cd67" } );
+    } else {
+      $row.addClass("cactus_fail");
+      $row.css( { "background": "#f6704d" } );
+    }
+
+    $html.append($row);
+
+    // Show toggles
+    if ($(".cactus_pass").length > 0) { $(".cactus_toggle_pass").show(); }
+    if ($(".cactus_fail").length > 0) { $(".cactus_toggle_fail").show(); }
+  };
+
+  // Private Methods
+
+  function init_or_retrieve_report_container() {
+    var $html = $("#cactus");
+
+    if ($html.length == 0) {
+      // Create a new div#cactus
+      $html = $("<div id='cactus'><div class='cactus_header'><div class='cactus_banner'>Cactus</div><div class='cactus_option'><a href='#' class='cactus_toggle_pass' style='display: none;'>Show Passes</a> | <a href='#' class='cactus_toggle_fail' style='display: none;'>Hide Failures</a></div></div></div>");
+
+      // Setup CSS stylings
+      $html.css( { "position": "absolute", "width": "100%", "bottom": 0, "left": 0, "font-size": "12px" } );
+      $html.find(".cactus_header").css( { "display": "block", "margin": "4px 0", "padding": "5px 10px", "background": "#faebd7", "overflow": "hidden" } );
+      $html.find(".cactus_banner").css( { "display": "block", "float": "left" , "font-size": "28px", "font-weight": "bold" } );
+      $html.find(".cactus_option").css( { "display": "block", "float": "right", "font-size": "12px", "font-weight": "bold" } );
+
+      // Append to body
+      $("body").append($html);
+
+      // Setup options
+      show_and_hide_pass();
+      show_and_hide_fail();
+    }
+
+    return $html;
+  }
+
+  function show_and_hide_pass() {
+    $(".cactus_toggle_pass").toggle(
+      function() {
+        $(this).html("Hide Passes");
+        $(".cactus_pass").show();
+      },
+      function() {
+        $(this).html("Show Passes");
+        $(".cactus_pass").hide();
+      }
+    );
+  }
+
+  function show_and_hide_fail() {
+    $(".cactus_toggle_fail").toggle(
+      function() {
+        $(this).html("Show Failures");
+        $(".cactus_fail").hide();
+      },
+      function() {
+        $(this).html("Hide Failures");
+        $(".cactus_fail").show();
+      }
+    );
+  }
+
+  // Return Accessor
+  return _cactus_report;
+
+})();