feat(tests): add Alert tests

2026-05-07 03:26:52 +00:00 · 2018-09-01 22:58:15 +01:00
parent 7e2f1fb446
commit 9332c5e4b2
2 changed files with 165 additions and 0 deletions
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/snapshots/index.test.js.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/snapshots/index.test.js.snap
@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=false 1`] = `
+"
+<li class=\\"components-grid-alertgrid-alertgroup-alert list-group-item pl-1 pr-0 py-0 my-1 rounded-0 border-left-1 border-right-0 border-top-0 border-bottom-0 border-danger\\">
+  <div class=\\"mb-1\\">
+    <div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation\\">
+      <svg aria-hidden=\\"true\\"
+           data-prefix=\\"fas\\"
+           data-icon=\\"search-minus\\"
+           class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1\\"
+           role=\\"img\\"
+           xmlns=\\"http://www.w3.org/2000/svg\\"
+           viewbox=\\"0 0 512 512\\"
+      >
+        <path fill=\\"currentColor\\"
+              d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+        >
+        </path>
+      </svg>
+      <span class=\\"text-muted\\">
+        help:
+      </span>
+      <span class=\\"Linkify\\">
+        some long text
+      </span>
+    </div>
+    <div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation\\">
+      <svg aria-hidden=\\"true\\"
+           data-prefix=\\"fas\\"
+           data-icon=\\"search-plus\\"
+           class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
+           role=\\"img\\"
+           xmlns=\\"http://www.w3.org/2000/svg\\"
+           viewbox=\\"0 0 512 512\\"
+      >
+        <path fill=\\"currentColor\\"
+              d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+        >
+        </path>
+      </svg>
+      hidden
+    </div>
+  </div>
+  <span class=\\"text-nowrap text-truncate px-1 mr-1 badge badge-secondary\\">
+    <time datetime=\\"1534268200017\\">
+      a day ago
+    </time>
+  </span>
+  <span class=\\"components-label components-label-with-hover text-nowrap text-truncate badge badge-warning mw-100\\">
+    job: node_exporter
+  </span>
+  <span class=\\"components-label components-label-with-hover text-nowrap text-truncate badge badge-warning mw-100\\">
+    cluster: dev
+  </span>
+  <a href=\\"http://localhost\\"
+     target=\\"_blank\\"
+     rel=\\"noopener noreferrer\\"
+     class=\\"text-nowrap text-truncate badge badge-secondary mr-1\\"
+  >
+    <svg aria-hidden=\\"true\\"
+         data-prefix=\\"fas\\"
+         data-icon=\\"external-link-alt\\"
+         class=\\"svg-inline--fa fa-external-link-alt fa-w-18 \\"
+         role=\\"img\\"
+         xmlns=\\"http://www.w3.org/2000/svg\\"
+         viewbox=\\"0 0 576 512\\"
+    >
+      <path fill=\\"currentColor\\"
+            d=\\"M576 24v127.984c0 21.461-25.96 31.98-40.971 16.971l-35.707-35.709-243.523 243.523c-9.373 9.373-24.568 9.373-33.941 0l-22.627-22.627c-9.373-9.373-9.373-24.569 0-33.941L442.756 76.676l-35.703-35.705C391.982 25.9 402.656 0 424.024 0H552c13.255 0 24 10.745 24 24zM407.029 270.794l-16 16A23.999 23.999 0 0 0 384 303.765V448H64V128h264a24.003 24.003 0 0 0 16.97-7.029l16-16C376.089 89.851 365.381 64 344 64H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V287.764c0-21.382-25.852-32.09-40.971-16.97z\\"
+      >
+      </path>
+    </svg>
+    link
+  </a>
+</li>
+"
+`;
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.js
@@ -0,0 +1,87 @@
+import React from "react";
+
+import { Provider } from "mobx-react";
+
+import { mount } from "enzyme";
+
+import { advanceTo, clear } from "jest-date-mock";
+
+import toDiffableHtml from "diffable-html";
+
+import { MockAlert, MockAnnotation } from "__mocks__/Alerts.js";
+import { AlertStore } from "Stores/AlertStore";
+import { Alert } from ".";
+
+let alertStore;
+
+beforeEach(() => {
+  advanceTo(new Date(2018, 7, 15, 20, 40, 0));
+  alertStore = new AlertStore([]);
+});
+
+afterEach(() => {
+  // reset Date() to current time
+  clear();
+});
+
+const MockAfterUpdate = jest.fn();
+
+const MockedAlert = () => {
+  return MockAlert(
+    [
+      MockAnnotation("help", "some long text", true, false),
+      MockAnnotation("hidden", "some hidden text", false, false),
+      MockAnnotation("link", "http://localhost", true, true)
+    ],
+    { job: "node_exporter", cluster: "dev" },
+    "active"
+  );
+};
+
+const MountedAlert = (alert, showAlertmanagers, showReceiver) => {
+  return mount(
+    <Provider alertStore={alertStore}>
+      <Alert
+        alert={alert}
+        showAlertmanagers={showAlertmanagers}
+        showReceiver={showReceiver}
+        afterUpdate={MockAfterUpdate}
+      />
+    </Provider>
+  );
+};
+
+describe("<Alert />", () => {
+  it("matches snapshot with showAlertmanagers=false showReceiver=false", () => {
+    const alert = MockedAlert();
+    const tree = MountedAlert(alert, false, false);
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+  });
+
+  it("renders @alertmanager label with showAlertmanagers=true", () => {
+    const alert = MockedAlert();
+    const tree = MountedAlert(alert, true, false);
+    const label = tree
+      .find("FilteringLabel")
+      .filterWhere(elem => elem.props().name === "@alertmanager");
+    expect(label.text()).toBe("@alertmanager: default");
+  });
+
+  it("renders @receiver label with showReceiver=true", () => {
+    const alert = MockedAlert();
+    const tree = MountedAlert(alert, false, true);
+    const label = tree
+      .find("FilteringLabel")
+      .filterWhere(elem => elem.props().name === "@receiver");
+    expect(label.text()).toBe("@receiver: by-name");
+  });
+
+  it("renders a silence if alert is silenced", () => {
+    const alert = MockedAlert();
+    alert.alertmanager[0].silencedBy = ["silence123456789"];
+    const tree = MountedAlert(alert, false, false);
+    const silence = tree.find("Silence");
+    expect(silence).toHaveLength(1);
+    expect(silence.html()).toMatch(/silence123456789/);
+  });
+});