From f22959f5d8a0dc3c70bbf8d9c783013cf6103844 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Thu, 20 Jul 2017 22:16:29 -0700 Subject: [PATCH] Rewrite colors.js as CommonJS, add tests --- assets/static/colors.js | 103 ++++++++++++++++++----------------- assets/static/colors.test.js | 65 ++++++++++++++++++++++ 2 files changed, 117 insertions(+), 51 deletions(-) create mode 100644 assets/static/colors.test.js diff --git a/assets/static/colors.js b/assets/static/colors.js index 24a6ebb0a..2a11ef33f 100644 --- a/assets/static/colors.js +++ b/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; diff --git a/assets/static/colors.test.js b/assets/static/colors.test.js new file mode 100644 index 000000000..a7b94768a --- /dev/null +++ b/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); " + ); +});