Colorpicker refactor, tests

gero3 · Feb 24, 2012 · 24e515e · 24e515e
1 parent c4a5033
commit 24e515e
Show file tree

Hide file tree

Showing 3 changed files with 152 additions and 20 deletions.
diff --git a/client/ext/colorpicker/colorpicker.js b/client/ext/colorpicker/colorpicker.js
@@ -15,21 +15,10 @@ var Range = require("ace/range").Range;
 
 var origArrowTop;
 var Colors = {};
+
+var Regexes = require("ext/colorpicker/colorpicker_regex");
+
 var namedColors = apf.color.colorshex;
-var namedPart = Object.keys(namedColors).join("|");
-var ColorMatches = {
-    rgb: "rgba?\\(\\s*\\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\\b\\s*,\\s*\\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\\b\\s*,\\s*\\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\\b\\s*(:?\\s*,\\s*(?:1|0|0?\\.[0-9]{1,2})\\s*)?\\)",
-    rgb_alt: "rgba?\\(\\s*\\b(\\d{1,2}|100)%\\s*,\\s*\\b(\\d{1,2}|100)%\\s*,\\s*\\b(\\d{1,2}|100)%\\s*(:?\\s*,\\s*(?:1|0|0?\\.[0-9]{1,2})\\s*)?\\)",    
-    hsl: "hsla?\\(\\s*\\b([1-2][0-9][0-9]|360|3[0-5][0-9]|[1-9][0-9]|[0-9])\\b\\s*,\\s*\\b(\\d{1,2}|100)%\\s*,\\s*\\b(\\d{1,2}|100)%\\s*(:?\\s*,\\s*(?:1|0|0?\\.[0-9]{1,2})\\s*)?\\)"
-};
-var colorsRe = new RegExp("(#([0-9A-Fa-f]{3,6})\\b)"
-    + "|\\b(" + namedPart + ")\\b"
-    + "|(" + ColorMatches.rgb + ")"
-    + "|(" + ColorMatches.rgb_alt + ")"
-    + "|(" + ColorMatches.hsl + ")", "gi");
-var RGBRe = new RegExp("(?:" + ColorMatches.rgb + ")"
-    + "|(?:" + ColorMatches.rgb_alt + ")");
-var HSLRe = new RegExp(ColorMatches.hsl);
 
 var css = require("text!ext/colorpicker/colorpicker.css");
 var markup = require("text!ext/colorpicker/colorpicker.xml");
@@ -171,7 +160,7 @@ module.exports = ext.register("ext/colorpicker/colorpicker", {
 
         // detect and return a list of colors found on a line from an ACE document.
         function detectColors(pos, line) {
-            var colors = line.match(colorsRe);
+            var colors = line.match(Regexes.isColor);
             if (!colors || !colors.length)
                 return [];
             var start, end;
@@ -329,8 +318,8 @@ module.exports = ext.register("ext/colorpicker/colorpicker", {
 
         if (typeof namedColors[color] != "undefined")
             color = apf.color.fixHex(namedColors[color].toString(16));
-        var rgb = color.match(RGBRe);
-        var hsb = color.match(HSLRe);
+        var rgb = color.match(Regexes.isRgb);
+        var hsb = color.match(Regexes.isHsl);
         if (rgb && rgb.length >= 3) {
             ret.rgb = apf.color.fixRGB({
                 r: rgb[1], 
@@ -472,7 +461,7 @@ module.exports = ext.register("ext/colorpicker/colorpicker", {
         var m;
         var colors = [];
         for (var i = 0, l = lines.length; i < l; ++i) {
-            if (!(m = lines[i].match(colorsRe)))
+            if (!(m = lines[i].match(Regexes.isColor)))
                 continue;
             colors = colors.concat(m);
         }
@@ -525,7 +514,7 @@ module.exports = ext.register("ext/colorpicker/colorpicker", {
             newColor = "#" + color;
         }
         else if (a.color.type == "rgb") {
-            var m = a.current.match(RGBRe);
+            var m = a.current.match(Regexes.isRgb);
             var regex = new RegExp("(rgba?)\\(\\s*" + m[1] + "\\s*,\\s*" + m[2] 
                 + "\\s*,\\s*" + m[3] + "(\\s*,\\s*(?:1|0|0?\\.[0-9]{1,2})\\s*)?\\)", "i");
             if (!line.match(regex))
@@ -536,7 +525,7 @@ module.exports = ext.register("ext/colorpicker/colorpicker", {
             });
         }
         else if (a.color.type == "hsb") {
-            var m = a.current.match(HSLRe);
+            var m = a.current.match(Regexes.isHsl);
             var regex = new RegExp("hsl\\(\\s*" + m[1] + "\\s*,\\s*" + m[2] 
                 + "\\s*,\\s*" + m[3] + "\\s*\\)", "i");
             if (!line.match(regex))

diff --git a/client/ext/colorpicker/colorpicker_regex.js b/client/ext/colorpicker/colorpicker_regex.js
@@ -0,0 +1,28 @@
+define(function(require, exports, module) {
+    // use the apf one, when apf is avaialble. Otherwise use some mocked one
+    var namedColors = typeof apf !== "undefined" ? apf.color.colorshex : { "black":0, "white":16777215 };
+    var namedPart = Object.keys(namedColors).join("|");
+
+    var patterns = {
+        rgb: "rgba?\\(\\s*\\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\\b\\s*,\\s*\\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\\b\\s*,\\s*\\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\\b\\s*(:?\\s*,\\s*(?:1|0|0?\\.[0-9]{1,2})\\s*)?\\)",
+        rgb_alt: "rgba?\\(\\s*\\b(\\d{1,2}|100)%\\s*,\\s*\\b(\\d{1,2}|100)%\\s*,\\s*\\b(\\d{1,2}|100)%\\s*(:?\\s*,\\s*(?:1|0|0?\\.[0-9]{1,2})\\s*)?\\)",    
+        hsl: "hsla?\\(\\s*\\b([1-2][0-9][0-9]|360|3[0-5][0-9]|[1-9][0-9]|[0-9])\\b\\s*,\\s*\\b(\\d{1,2}|100)%\\s*,\\s*\\b(\\d{1,2}|100)%\\s*(:?\\s*,\\s*(?:1|0|0?\\.[0-9]{1,2})\\s*)?\\)"
+    };
+
+    var isColor = new RegExp("(#([0-9A-Fa-f]{3,6})\\b)"
+        + "|\\b(" + namedPart + ")\\b"
+        + "|(" + patterns.rgb + ")"
+        + "|(" + patterns.rgb_alt + ")"
+        + "|(" + patterns.hsl + ")", "gi");
+
+    var isRgb = new RegExp("(?:" + patterns.rgb + ")"
+        + "|(?:" + patterns.rgb_alt + ")");
+
+    var isHsl = new RegExp(patterns.hsl);
+
+    exports = module.exports = {
+        isColor: isColor,
+        isRgb: isRgb,
+        isHsl: isHsl
+    };
+});
diff --git a/client/ext/colorpicker/colorpicker_test.js b/client/ext/colorpicker/colorpicker_test.js
@@ -0,0 +1,115 @@
+if (typeof process !== "undefined") {
+    require("amd-loader");
+}
+
+
+if (typeof process !== "undefined") {
+    require("../../../support/paths");
+    require.paths.unshift(__dirname + "/../..");
+}
+
+var regex = require("./colorpicker_regex");
+
+define(function(require, exports, module) {
+    var assert = require("assert");
+
+    module.exports = {
+        "test simple rgb": function(next) {
+            var res = regex.isRgb("rgb(14, 235, 19)");
+
+            assert.equal(!!res, true);
+            assert.equal(res[1], "14");
+            assert.equal(res[2], "235");
+            assert.equal(res[3], "19");
+            assert.equal(res[4], undefined);
+
+            next();
+        },
+        "test simple rgba": function(next) {
+            var res = regex.isRgb("rgba(14, 235, 19, .9)");
+
+            assert.equal(!!res, true);
+            assert.equal(res[1], "14");
+            assert.equal(res[2], "235");
+            assert.equal(res[3], "19");
+            assert.equal(res[4], ", .9");
+
+            next();
+        },
+        "test rgba with transparancy over 1": function(next) {
+            var res = regex.isRgb("rgba(14, 235, 19, 1.9)");
+
+            assert.equal(!!res, false);
+
+            next();
+        },
+        "test rgb with values over 255": function(next) {
+            var res = regex.isRgb("rgb(256, 19, 32)");
+
+            assert.equal(!!res, false);
+
+            next();
+        },
+        "test hsl": function(next) {
+            var res = regex.isHsl("hsl(14, 99%, 33%)");
+
+            assert.equal(!!res, true);
+            assert.equal(res[1], "14");
+            assert.equal(res[2], "99");
+            assert.equal(res[3], "33");
+            assert.equal(res[4], undefined);
+
+            next();
+        },
+        "test hsla": function(next) {
+            var res = regex.isHsl("hsla(14, 99%, 33%, .7)");
+
+            assert.equal(!!res, true);
+            assert.equal(res[1], "14");
+            assert.equal(res[2], "99");
+            assert.equal(res[3], "33");
+            assert.equal(res[4], ", .7");
+
+            next();
+        },
+        "test hsla positive transparancy": function(next) {
+            var res = regex.isHsl("hsla(14, 99%, 33%, 3.7)");
+
+            assert.equal(!!res, false);
+
+            next();
+        },
+        "test hsla values too high": function(next) {
+            var res = regex.isHsl("hsla(201, 101%, 00000411%, 0.7)");
+
+            assert.equal(!!res, false);
+
+            next();
+        },
+        "test hsla bullocks values": function(next) {
+            var res = regex.isHsl("hsla(abc, def, geh, .9)");
+
+            assert.equal(!!res, false);
+
+            next();
+        },
+        "test text colors": function(next) {
+            var res = regex.isColor("white");
+
+            assert.equal(!!res, true);
+
+            next();
+        },
+        "test text any string": function(next) {
+            var res = regex.isColor("jan is cool");
+
+            assert.equal(!!res, false);
+
+            next();
+        },  
+    };
+});
+
+if (typeof module !== "undefined" && module === require.main) {
+    require("asyncjs").test.testcase(module.exports).exec();
+}