Test creating silences

assets/static/silence.test.js

@@ -1,13 +1,120 @@
 const $ = window.jQuery = require("jquery");
+const moment = require("moment");
 const templatesMock = require("./__mocks__/templatesMock");
 const ajaxMock = require("./__mocks__/ajaxMock");
 
-test("silence setupSilenceForm()", () => {
-    var body = templatesMock.loadTemplates();
+jest.useFakeTimers();
+
+test("silence form", () => {
+    let body = templatesMock.loadTemplates();
+    body.push(
+        "<div class='modal' id='silenceModal' role='dialog'>" +
+        "  <div class='modal-dialog' role='document'>" +
+        "    <div class='modal-content'>" +
+        "      <div class='modal-body'></div>" +
+        "    </div>" +
+        "  </div>" +
+        "</div>" +
+        "<span type='button' id='silenceButton'" +
+        "      data-labels='@state=active,foo=bar'" +
+        "      data-alertmanagers='mock'" +
+        "      data-alertname='fakeAlert'" +
+        "      data-toggle='modal'" +
+        "      data-target='#silenceModal'>" +
+        "</span>"
+    );
     document.body.innerHTML = body;
 
+    const templates = require("./templates");
+    templates.init();
+
+    const config = require("./config");
+    config.init({
+        CopySelector: "#copy-settings-with-filter",
+        SaveSelector: "#save-default-filter",
+        ResetSelector: "#reset-settings"
+    });
+
     const silence = require("./silence");
     silence.setupSilenceForm();
+
+    require("bootstrap/js/tooltip.js");
+    require("bootstrap/js/modal.js");
+
+    // rendering silence form requires AJAX call to pull data
+    // first check failed request
+    let ajaxServer = ajaxMock.createServer(500, {
+        "status": "error",
+        "errorType": "server_error",
+        "error": "request failed"
+    });
+    ajaxServer.start();
+    // click on the button, modal should show and render via ajax call
+    $("#silenceButton").click();
+    jest.runOnlyPendingTimers();
+    let silenceModal = $("#silenceModal").html().trim();
+    expect(silenceModal).toMatchSnapshot();
+    ajaxServer.stop();
+
+    // hide the form
+    $("#silenceModal").modal("hide");
+
+    // next try successful request
+    ajaxServer = ajaxMock.createServer(200, {
+        "groups": [ {
+            "receiver": "default",
+            "labels": {"alertname": "fakeAlert"},
+            "alerts": [ {
+                "annotations": {},
+                "labels": {
+                    "alertname": "fakeAlert",
+                    "cluster": "prod",
+                    "foo": "bar"
+                },
+                "startsAt": "2017-07-22T01:07:54.32189391Z",
+                "endsAt": "0001-01-01T00:00:00Z",
+                "state": "active",
+                "alertmanager": [ {
+                    "name": "mock",
+                    "uri": "http://localhost",
+                    "state": "active",
+                    "startsAt": "2017-07-22T01:07:54.32189391Z",
+                    "endsAt": "0001-01-01T00:00:00Z",
+                    "source": "localhost/prometheus",
+                    "silences": {}
+                } ],
+                "receiver": "default",
+                "links": {}
+            } ],
+            "id": "12345",
+            "hash": "abcdef",
+            "stateCount": {"active": 1, "suppressed": 0, "unprocessed": 0}
+        } ]
+    });
+    ajaxServer.start();
+    // click on the button, modal should show and render via ajax call
+    $("#silenceButton").click();
+    jest.runOnlyPendingTimers();
+    // default times are relative to current time, use fixed values
+    let startsAt = moment("2050-01-01T01:00:00.000Z").utc();
+    let endsAt = moment("2050-01-01T02:00:00.000Z").utc();
+    $("#endsAt").data("DateTimePicker").date(endsAt);
+    $("#startsAt").data("DateTimePicker").date(startsAt);
+    // compare html to a snapshot
+    silenceModal = $("#silenceModal").html().trim();
+    expect(silenceModal).toMatchSnapshot();
+    ajaxServer.stop();
+
+    // submit silence
+    ajaxServer = ajaxMock.createServer(200, {
+        "status": "success",
+        "data": {"silenceId": "abcdef"}
+    });
+    ajaxServer.start();
+    $("#newSilenceForm").submit();
+    ajaxServer.stop();
+    silenceModal = $("#silenceModal").html().trim();
+    expect(silenceModal).toMatchSnapshot();
 });
 
 test("successful sendSilencePOST()", () => {