feat(tests): add GroupFoote snapshot test

2026-05-09 03:36:44 +00:00 · 2018-09-01 21:23:48 +01:00
parent 2dbbef2f3e
commit 1e37a2f130
2 changed files with 133 additions and 0 deletions
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/snapshots/index.test.js.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/snapshots/index.test.js.snap
@@ -0,0 +1,79 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<GroupFooter /> matches snapshot 1`] = `
+"
+<div class=\\"card-footer px-2 py-1\\">
+  <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\\">
+        summary:
+      </span>
+      <span class=\\"Linkify\\">
+        This is summary
+      </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=\\"components-label components-label-with-hover text-nowrap text-truncate badge badge-warning mw-100\\">
+    label1: foo
+  </span>
+  <span class=\\"components-label components-label-with-hover text-nowrap text-truncate badge badge-warning mw-100\\">
+    label2: bar
+  </span>
+  <span class=\\"components-label components-label-with-hover text-nowrap text-truncate badge badge-warning mw-100\\">
+    @alertmanager: default
+  </span>
+  <span class=\\"components-label components-label-with-hover text-nowrap text-truncate badge badge-warning mw-100\\">
+    @receiver: by-name
+  </span>
+  <a href=\\"http://link.example.com\\"
+     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>
+</div>
+"
+`;
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.js
@@ -0,0 +1,54 @@
+import React from "react";
+
+import { Provider } from "mobx-react";
+
+import { mount } from "enzyme";
+
+import toDiffableHtml from "diffable-html";
+
+import { MockAlertGroup, MockAnnotation } from "__mocks__/Alerts.js";
+import { AlertStore } from "Stores/AlertStore";
+import { GroupFooter } from ".";
+
+let group;
+let alertStore;
+
+const MockGroup = () => {
+  const group = MockAlertGroup(
+    { alertname: "Fake Alert" },
+    [],
+    [
+      MockAnnotation("summary", "This is summary", true, false),
+      MockAnnotation("hidden", "This is hidden annotation", false, false),
+      MockAnnotation("link", "http://link.example.com", true, true)
+    ],
+    { label1: "foo", label2: "bar" }
+  );
+  return group;
+};
+
+const MockAfterUpdate = jest.fn();
+
+beforeEach(() => {
+  alertStore = new AlertStore([]);
+  group = MockGroup();
+});
+
+const MountedGroupFooter = () => {
+  return mount(
+    <Provider alertStore={alertStore}>
+      <GroupFooter
+        group={group}
+        alertmanagers={["default"]}
+        afterUpdate={MockAfterUpdate}
+      />
+    </Provider>
+  );
+};
+
+describe("<GroupFooter />", () => {
+  it("matches snapshot", () => {
+    const tree = MountedGroupFooter().find("GroupFooter");
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+  });
+});