Proper behaviour tests for ui.js

Checks whenever code does what it suppose to, not only if it runs

assets/static/alerts.js

@@ -30,7 +30,9 @@ AlertGroup.prototype.Render = function() {
 
 // called after group was rendered for the first time
 AlertGroup.prototype.Added = function() {
-    ui.setupAlertGroupUI($("#" + this.id));
+    var elem = $("#" + this.id);
+    ui.setupGroupTooltips(elem);
+    ui.setupGroupLinkHover(elem);
 };
 
 AlertGroup.prototype.Update = function() {

assets/static/templates.js

@@ -52,14 +52,18 @@ function getConfig() {
     return config;
 }
 
+function loadTemplate(name, selector) {
+    try {
+        templates[name] = _.template($(selector).html());
+    } catch (err) {
+        console.error("Failed to parse template " + name + " " + selector);
+        console.error(err);
+    }
+}
+
 function init() {
     $.each(config, function(name, selector) {
-        try {
-            templates[name] = _.template($(selector).html());
-        } catch (err) {
-            console.error("Failed to parse template " + name + " " + selector);
-            console.error(err);
-        }
+        loadTemplate(name, selector);
     });
 }
 
@@ -82,4 +86,5 @@ function renderTemplate(name, context) {
 
 exports.init = init;
 exports.getConfig = getConfig;
+exports.loadTemplate = loadTemplate;
 exports.renderTemplate = renderTemplate;

assets/static/ui.js

@@ -75,15 +75,6 @@ function setupGroupTooltips(groupElem) {
     });
 }
 
-function setupAlertGroupUI(elem) {
-    setupGroupLinkHover(elem);
-    setupGroupTooltips(elem);
-}
-
-function init() {
-    setupModal();
-}
-
-exports.init = init;
-exports.setupAlertGroupUI = setupAlertGroupUI;
+exports.setupModal = setupModal;
 exports.setupGroupTooltips = setupGroupTooltips;
+exports.setupGroupLinkHover = setupGroupLinkHover;

assets/static/ui.test.js

@@ -1,28 +1,101 @@
 const $ = window.$ = window.jQuery = require("jquery");
 
-test("ui init()", () => {
+jest.useFakeTimers();
+
+test("ui setupModal()", () => {
+    document.body.innerHTML =
+        "<script type='application/json' id='modal-title'>title</script>" +
+        "<script type='application/json' id='modal-body'><%- hints %></script>" +
+        "<div class='modal' id='labelModal' tabindex='-1' role='dialog'>" +
+        "  <div class='modal-dialog' role='document'>" +
+        "    <div class='modal-content'>" +
+        "      <div class='modal-header text-center'>" +
+        "        <div class='modal-title'></div>" +
+        "      </div>" +
+        "    <div class='modal-body'></div>" +
+        "  </div>" +
+        "</div>" +
+        "<div id='label' type='button'" +
+        "     data-label-type='filter'" +
+        "     data-label-key='foo'" +
+        "     data-label-val='bar'" +
+        "     data-toggle='modal'" +
+        "     data-target='#labelModal'>" +
+        "</div>";
+    // mock modal templates
+    const templates = require("./templates");
+    templates.loadTemplate("modalTitle", "#modal-title");
+    templates.loadTemplate("modalBody", "#modal-body");
+
+    require("bootstrap/js/modal.js");
     const ui = require("./ui");
-    ui.init();
+    ui.setupModal();
+    // modal shouldn't be visible (no in class)
+    expect($("#labelModal").hasClass("in")).toBe(false);
+
+    // trigger modal show
+    $("#label").click();
+    jest.runAllTimers();
+    // modal should be visible (with in class)
+    expect($("#labelModal").hasClass("in")).toBe(true);
+    // we should have hints in the body
+    expect($(".modal-body").text()).toBe("foo=bar,foo!=bar");
 });
 
-test("ui setupAlertGroupUI()", () => {
+test("ui setupGroupLinkHover()", () => {
+    document.body.innerHTML =
+        "<div id='links'>" +
+        "  <span class='alert-group-link'>" +
+        "    <a href='#'>link</a>" +
+        "  </span>" +
+        "</div>";
     const ui = require("./ui");
-    ui.setupAlertGroupUI($("<div></div>"));
+    ui.setupGroupLinkHover($("#links"));
+
+    // trigger hover, link should be visible
+    $("#links").trigger("mouseenter");
+    jest.runAllTimers();
+    expect($("a").attr("style")).toBe("opacity: 100;");
+
+    // disable hover, , link should be invisible (fully transparent)
+    $("#links").trigger("mouseleave");
+    jest.runAllTimers();
+    expect($("a").attr("style")).toBe("opacity: 0;");
 });
 
 test("ui setupGroupTooltips()", () => {
     document.body.innerHTML =
         "<div id='groupTest'>" +
-        "  <span id='foo' title='foo' data-toggle='tooltip'></span>" +
-        "  <span id='bar' data-ts-title='bar' data-toggle='tooltip'></span>" +
+        "  <div id='foo' title='foo' data-toggle='tooltip'>foo</div>" +
+        "  <div id='bar' data-ts-title='bar' data-toggle='tooltip'>bar</div>" +
         "</div>";
     require("bootstrap/js/tooltip.js");
     const ui = require("./ui");
     ui.setupGroupTooltips($("#groupTest"));
+
     // check if bootstrap tooltip was applied, it will empty tooltip attr if set
     // and save it under data-original-title
     expect($("#foo").attr("title")).toBe("");
     expect($("#foo").data("original-title")).toBe("foo");
     expect($("#bar").attr("title")).toBe("");
     expect($("#bar").data("original-title")).toBe("");
+
+    // trigger hover events for foo
+    $("#foo").trigger("mouseenter");
+    // fast forward all timers since there's a delay for tooltip show
+    jest.runAllTimers();
+    // check if tooltip was added to the DOM with the right text
+    expect($(".tooltip-inner").text()).toBe("foo");
+
+    // hide foo tooltip and check if it's gone
+    $("#foo").trigger("mouseleave");
+    jest.runAllTimers();
+    expect($(".tooltip-inner").length).toBe(0);
+
+    // repeat for bar
+    $("#bar").trigger("mouseenter");
+    // fast forward all timers since there's a delay for tooltip show
+    jest.runAllTimers();
+    // check if tooltip was added to the DOM with the right text
+    expect($(".tooltip-inner").text()).toBe("bar");
 });

assets/static/unsee.js

@@ -354,7 +354,7 @@ $(document).ready(function() {
 
         colors.init($("#alerts").data("static-color-labels").split(" "));
         templates.init();
-        ui.init();
+        ui.setupModal();
         silence.setupSilenceForm();
         unsilence.init();
         init();