Rewrite colors.js as CommonJS, add tests

assets/static/colors.js

@@ -1,61 +1,62 @@
-/* exported Colors */
-var Colors = (function() {
+const $ = require("jquery");
 
-    var colors;
+var colors = {},
+    staticColorLabels = [];
 
-    var specialLabels = {
-        "@state: unprocessed": "label-default",
-        "@state: active": "label-danger",
-        "@state: suppressed": "label-success",
-    };
+var specialLabels = {
+    "@state: unprocessed": "label-default",
+    "@state: active": "label-danger",
+    "@state: suppressed": "label-success",
+};
 
-    var update = function(colorData) {
-        colors = colorData;
-    };
+function init(staticColors) {
+    staticColorLabels = staticColors;
+}
 
-    var merge = function(colorData) {
-        $.extend(colors, colorData);
-    };
+function getStaticLabels() {
+    return staticColorLabels;
+}
 
-    var getClass = function(key, value) {
-        var label = key + ": " + value;
-        if (key == "alertname") {
-            return "label-primary";  // special case for alertname label, which is the name of alert
-        } else if (specialLabels[label] !== undefined) {
-            return specialLabels[label];
-        } else if (Colors.IsStaticLabel(key)) {
-            return "label-info";
-        } else {
-            return "label-warning";
-        }
-    };
+function isStaticLabel(key) {
+    return ($.inArray(key, getStaticLabels()) >= 0);
+}
 
-    var getStyle = function(key, value) {
-        // get color data, returned as css style string
-        var style = "";
-        if (colors[key] !== undefined && colors[key][value] !== undefined) {
-            var c = colors[key][value];
-            style = "background-color: rgba(" + [ c.background.red, c.background.green, c.background.blue, c.background.alpha ].join(", ") + "); ";
-            style += "color: rgba(" + [ c.font.red, c.font.green, c.font.blue, c.font.alpha ].join(", ") + "); ";
-        }
-        return style;
-    };
+function update(colorData) {
+    colors = colorData;
+}
 
-    var getStaticLabels = function() {
-        return $("#alerts").data("static-color-labels").split(" ");
-    };
+function merge(colorData) {
+    $.extend(colors, colorData);
+}
 
-    var isStaticLabel = function(key) {
-        return ($.inArray(key, Colors.GetStaticLabels()) >= 0);
-    };
+function getClass(key, value) {
+    var label = key + ": " + value;
+    if (key === "alertname") {
+        return "label-primary";  // special case for alertname label, which is the name of alert
+    } else if (specialLabels[label] !== undefined) {
+        return specialLabels[label];
+    } else if (isStaticLabel(key)) {
+        return "label-info";
+    } else {
+        return "label-warning";
+    }
+}
 
-    return {
-        Update: update,
-        Merge: merge,
-        Get: getStyle,
-        GetClass: getClass,
-        GetStaticLabels: getStaticLabels,
-        IsStaticLabel: isStaticLabel
-    };
+function getStyle(key, value) {
+    // get color data, returned as css style string
+    var style = "";
+    if (colors[key] !== undefined && colors[key][value] !== undefined) {
+        var c = colors[key][value];
+        style = "background-color: rgba(" + [ c.background.red, c.background.green, c.background.blue, c.background.alpha ].join(", ") + "); ";
+        style += "color: rgba(" + [ c.font.red, c.font.green, c.font.blue, c.font.alpha ].join(", ") + "); ";
+    }
+    return style;
+}
 
-})();
+exports.init = init;
+exports.update = update;
+exports.merge = merge;
+exports.getStyle = getStyle;
+exports.getClass = getClass;
+exports.getStaticLabels = getStaticLabels;
+exports.isStaticLabel = isStaticLabel;

assets/static/colors.test.js

@@ -0,0 +1,65 @@
+const colors = require("./colors");
+
+test("colors init([])", () => {
+    colors.init([]);
+    expect(colors.getStaticLabels()).toHaveLength(0);
+});
+
+test("colors init([foo, bar])", () => {
+    colors.init([ "foo", "bar" ]);
+    expect(colors.getStaticLabels()).toHaveLength(2);
+});
+
+test("colors isStaticLabel()", () => {
+    colors.init([]);
+    expect(colors.isStaticLabel("foo")).toBe(false);
+    expect(colors.isStaticLabel("bar")).toBe(false);
+    expect(colors.isStaticLabel("foobar")).toBe(false);
+    colors.init([ "foo", "bar" ]);
+    expect(colors.isStaticLabel("foo")).toBe(true);
+    expect(colors.isStaticLabel("bar")).toBe(true);
+    expect(colors.isStaticLabel("foobar")).toBe(false);
+});
+
+test("colors getClass()", () => {
+    colors.init([ "foo" ]);
+    // hardcoded value
+    expect(colors.getClass("alertname", "foo")).toBe("label-primary");
+    // special case
+    expect(colors.getClass("@state", "unprocessed")).toBe("label-default");
+    expect(colors.getClass("@state", "active")).toBe("label-danger");
+    expect(colors.getClass("@state", "suppressed")).toBe("label-success");
+    // static label passed via init()
+    expect(colors.getClass("foo", "bar")).toBe("label-info");
+    // anything else
+    expect(colors.getClass("bar", "foo")).toBe("label-warning");
+    expect(colors.getClass("key", "val")).toBe("label-warning");
+    expect(colors.getClass("", "")).toBe("label-warning");
+});
+
+test("colors getStyle()", () => {
+    colors.init([]);
+    expect(colors.getStyle("foo", "bar")).toEqual("");
+    var c = {
+        "foo": {
+            "bar": {
+                "background": {
+                    "red": 0,
+                    "green": 1,
+                    "blue": 2,
+                    "alpha": 255
+                },
+                "font": {
+                    "red": 3,
+                    "green": 4,
+                    "blue": 5,
+                    "alpha": 128
+                }
+            }
+        }
+    }
+    colors.update(c);
+    expect(colors.getStyle("foo", "bar")).toEqual(
+        "background-color: rgba(0, 1, 2, 255); color: rgba(3, 4, 5, 128); "
+    );
+});