diff --git a/assets/static/summary.js b/assets/static/summary.js
index 5f6627341..6497a24aa 100644
--- a/assets/static/summary.js
+++ b/assets/static/summary.js
@@ -1,84 +1,81 @@
-/* globals Colors, Templates */
+const $ = require("jquery");
 
-/* exported Summary */
-var Summary = (function() {
+const colors = require("./colors");
+const templates = require("./templates");
 
-    var summary;
+var summary = {};
 
-    var render = function() {
-        var topTags = [];
-        $.each(summary, function(k, v) {
-            topTags.push({
-                name: k,
-                val: v
-            });
+function render() {
+    var topTags = [];
+    $.each(summary, function(k, v) {
+        topTags.push({
+            name: k,
+            val: v
         });
-        topTags.sort(function(a, b) {
-            if (a.val > b.val) return 1;
-            if (a.val < b.val) return -1;
-            if (a.name > b.name) return -1;
-            if (a.name < b.name) return 1;
-            return 0;
-        }).reverse();
+    });
+    topTags.sort(function(a, b) {
+        if (a.val > b.val) return 1;
+        if (a.val < b.val) return -1;
+        if (a.name > b.name) return -1;
+        if (a.name < b.name) return 1;
+        return 0;
+    }).reverse();
 
-        var tags = [];
-        $.each(topTags.slice(0, 10), function(i, tag) {
-            var labelKey = tag.name.split(": ")[0];
-            var labelVal = tag.name.split(": ")[1];
-            tag.style = Colors.Get(labelKey, labelVal);
-            tag.cls = Colors.GetClass(labelKey, labelVal);
-            tags.push(tag);
-        });
+    var tags = [];
+    $.each(topTags.slice(0, 10), function(i, tag) {
+        var labelKey = tag.name.split(": ")[0];
+        var labelVal = tag.name.split(": ")[1];
+        tag.style = colors.getStyle(labelKey, labelVal);
+        tag.cls = colors.getClass(labelKey, labelVal);
+        tags.push(tag);
+    });
 
-        return Templates.Render("breakdownContent", {tags: tags});
-    };
+    return templates.renderTemplate("breakdownContent", {tags: tags});
+}
 
-    var init = function() {
-        summary = {};
-        $(".navbar-header").popover({
-            trigger: "hover",
-            delay: {
-                "show": 500,
-                "hide": 100
-            },
-            container: "body",
-            html: true,
-            placement: "bottom",
-            title: "Top labels",
-            content: render,
-            template: Templates.Render("breakdown", {})
-        });
-    };
+function init() {
+    summary = {};
+    $(".navbar-header").popover({
+        trigger: "hover",
+        delay: {
+            "show": 500,
+            "hide": 100
+        },
+        container: "body",
+        html: true,
+        placement: "bottom",
+        title: "Top labels",
+        content: render,
+        template: templates.renderTemplate("breakdown", {})
+    });
+}
 
-    var update = function(data) {
-        summary = data;
-    };
+function update(data) {
+    summary = data;
+}
 
-    var reset = function() {
-        summary = {};
-        render();
-    };
+function reset() {
+    summary = {};
+    render();
+}
 
-    var push = function(labelKey, labelVal) {
-        var l = labelKey + ": " + labelVal;
-        if (summary[l] === undefined) {
-            summary[l] = 1;
-        } else {
-            summary[l]++;
-        }
-    };
+function push(labelKey, labelVal) {
+    var l = labelKey + ": " + labelVal;
+    if (summary[l] === undefined) {
+        summary[l] = 1;
+    } else {
+        summary[l]++;
+    }
+}
 
-    var getCount = function(labelKey, labelVal) {
-        var l = labelKey + ": " + labelVal;
-        return summary[l];
-    };
+function getCount(labelKey, labelVal) {
+    var l = labelKey + ": " + labelVal;
+    return summary[l];
+}
 
-    return {
-        Init: init,
-        Update: update,
-        Reset: reset,
-        Push: push,
-        Get: getCount
-    };
-
-}());
+exports.init = init;
+exports.update = update;
+exports.reset = reset;
+exports.push = push;
+exports.getCount = getCount;
+exports.render = render;
diff --git a/assets/static/summary.test.js b/assets/static/summary.test.js
new file mode 100644
index 000000000..0da2a2d7c
--- /dev/null
+++ b/assets/static/summary.test.js
@@ -0,0 +1,52 @@
+const $ = require("jquery");
+
+const summary = require("./summary");
+const templates = require("./templates");
+
+test("summary", () => {
+    // mock templates
+    var elems = [];
+    $.each(templates.getConfig(), function(name, selector) {
+        elems.push(
+            "<script type='application/json' id='" + selector.slice(1) + "'>" +
+            "<% _.each(tags, function(tag) { %>" +
+            "name=<%= tag.name %> val=<%= tag.val %> " +
+            "<% }) %>" +
+            "</script>"
+        );
+    });
+    document.body.innerHTML = elems.join("\n");
+    templates.init();
+
+    // load bootstrap, but first set global jQuery object it needs
+    global.jQuery = $;
+    require("bootstrap");
+
+    summary.init();
+
+    // should be empty with no data
+    expect(summary.render()).toBe("");
+
+    // update data and re-test
+    summary.update({"foo": 1});
+    expect(summary.render()).toBe("name=foo val=1 ");
+
+    summary.update({"foo": 1, "bar": 22});
+    expect(summary.render()).toBe("name=bar val=22 name=foo val=1 ");
+
+    // try pushing individual values
+    expect(summary.getCount("xx", "y")).toBeUndefined();
+    summary.push("xx", "y");
+    expect(summary.getCount("xx", "y")).toBe(1);
+    summary.push("xx", "y");
+    expect(summary.getCount("xx", "y")).toBe(2);
+    summary.push("xx", "y");
+    expect(summary.getCount("xx", "y")).toBe(3);
+
+    expect(summary.render()).toBe("name=bar val=22 name=xx: y val=3 name=foo val=1 ");
+
+    // reset values
+    summary.reset();
+    expect(summary.getCount("xx", "y")).toBeUndefined();
+    expect(summary.render()).toBe("");
+});