feat(tests): add tests for SilenceSubmitProgress

ui/src/Components/SilenceModal/SilenceSubmitProgress.test.js

@@ -0,0 +1,88 @@
+import React from "react";
+
+import { mount } from "enzyme";
+
+import { SilenceSubmitProgress } from "./SilenceSubmitProgress";
+
+const MountedSilenceSubmitProgress = () => {
+  return mount(
+    <SilenceSubmitProgress
+      name="mockAlertmanager"
+      uri="http://localhost/mock"
+      payload={{ foo: "bar" }}
+    />
+  );
+};
+
+describe("<SilenceSubmitProgress />", () => {
+  it("sends a request on mount", () => {
+    MountedSilenceSubmitProgress();
+    expect(fetch.mock.calls).toHaveLength(1);
+  });
+
+  it("appends /api/v1/silences to the passed URI", () => {
+    MountedSilenceSubmitProgress();
+    const uri = fetch.mock.calls[0][0];
+    expect(uri).toBe("http://localhost/mock/api/v1/silences");
+  });
+
+  it("sends correct JSON payload", () => {
+    MountedSilenceSubmitProgress();
+    const payload = fetch.mock.calls[0][1];
+    expect(payload).toMatchObject({
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ foo: "bar" })
+    });
+  });
+
+  it("renders returned silence ID on successful fetch", async () => {
+    fetch.mockResponseOnce(
+      JSON.stringify({ status: "success", data: { silenceId: "123456789" } })
+    );
+    const tree = MountedSilenceSubmitProgress();
+    await expect(tree.instance().submitState.fetch).resolves.toBe("success");
+    // force re-render
+    tree.update();
+    const silenceLink = tree.find("a");
+    expect(silenceLink).toHaveLength(1);
+    expect(silenceLink.text()).toBe("123456789");
+  });
+
+  it("renders returned error message on failed fetch", async () => {
+    fetch.mockRejectOnce(new Error("mock error message"));
+    const tree = MountedSilenceSubmitProgress();
+    await expect(tree.instance().submitState.fetch).resolves.toBeUndefined();
+    expect(tree.text()).toBe("mockAlertmanagermock error message");
+  });
+
+  it("renders success icon on successful fetch", async () => {
+    fetch.mockResponseOnce(
+      JSON.stringify({ status: "success", data: { silenceId: "123" } })
+    );
+    const tree = MountedSilenceSubmitProgress();
+    await expect(tree.instance().submitState.fetch).resolves.toBe("success");
+    tree.update();
+    expect(tree.find("FontAwesomeIcon.text-success")).toHaveLength(1);
+    expect(tree.find("FontAwesomeIcon.text-danger")).toHaveLength(0);
+  });
+
+  it("renders error icon on failed fetch", async () => {
+    fetch.mockResponseOnce(JSON.stringify({ status: "error" }));
+    const tree = MountedSilenceSubmitProgress();
+    await expect(tree.instance().submitState.fetch).resolves.toBe("error");
+    tree.update();
+    expect(tree.find("FontAwesomeIcon.text-success")).toHaveLength(0);
+    expect(tree.find("FontAwesomeIcon.text-danger")).toHaveLength(1);
+  });
+
+  it("renders unhandled 'status' values in the response as error", async () => {
+    fetch.mockResponseOnce(JSON.stringify({ status: "unhandled" }));
+    const tree = MountedSilenceSubmitProgress();
+    await expect(tree.instance().submitState.fetch).resolves.toBe("unhandled");
+    tree.update();
+    expect(tree.find("FontAwesomeIcon.text-success")).toHaveLength(0);
+    expect(tree.find("FontAwesomeIcon.text-danger")).toHaveLength(1);
+    expect(tree.text()).toBe('mockAlertmanager{"status":"unhandled"}');
+  });
+});