-
-
-"
+
`;
diff --git a/ui/src/Components/AlertHistory/index.test.tsx b/ui/src/Components/AlertHistory/index.test.tsx
index 742dc24da..38af5e90f 100644
--- a/ui/src/Components/AlertHistory/index.test.tsx
+++ b/ui/src/Components/AlertHistory/index.test.tsx
@@ -1,13 +1,11 @@
import { act } from "react-dom/test-utils";
-import { mount } from "enzyme";
+import { render } from "@testing-library/react";
import fetchMock from "fetch-mock";
import { useInView } from "react-intersection-observer";
-import toDiffableHtml from "diffable-html";
-
import { MockAlertGroup, MockAlert } from "__fixtures__/Alerts";
import {
EmptyHistoryResponse,
@@ -97,7 +95,9 @@ describe("
", () => {
grid.labelName = "";
grid.labelValue = "";
MockAlerts(3);
- const tree = mount(
);
+ const { unmount } = render(
+
,
+ );
await act(async () => {
await fetchMock.flush(true);
});
@@ -111,7 +111,7 @@ describe("
", () => {
labels: { alertname: "Fake Alert", groupName: "fakeGroup" },
}),
);
- tree.unmount();
+ unmount();
});
it("send a correct payload with non-empty grid", async () => {
@@ -128,7 +128,9 @@ describe("
", () => {
);
MockAlerts(3);
- const tree = mount(
);
+ const { unmount } = render(
+
,
+ );
await act(async () => {
await fetchMock.flush(true);
});
@@ -142,7 +144,7 @@ describe("
", () => {
labels: { alertname: "Fake Alert", groupName: "fakeGroup", foo: "bar" },
}),
);
- tree.unmount();
+ unmount();
});
it("send a correct payload with @cluster grid", async () => {
@@ -161,7 +163,9 @@ describe("
", () => {
grid.labelName = "@cluster";
grid.labelValue = "prod";
MockAlerts(3);
- const tree = mount(
);
+ const { unmount } = render(
+
,
+ );
await act(async () => {
await fetchMock.flush(true);
});
@@ -175,7 +179,7 @@ describe("
", () => {
labels: { alertname: "Fake Alert", groupName: "fakeGroup" },
}),
);
- tree.unmount();
+ unmount();
});
it("send a correct payload with shared labels", async () => {
@@ -196,7 +200,9 @@ describe("
", () => {
{ name: "shared1", value: "value1" },
{ name: "shared2", value: "value2" },
]);
- const tree = mount(
);
+ const { unmount } = render(
+
,
+ );
await act(async () => {
await fetchMock.flush(true);
});
@@ -216,7 +222,7 @@ describe("
", () => {
},
}),
);
- tree.unmount();
+ unmount();
});
it("matches snapshot with empty response", async () => {
@@ -233,13 +239,15 @@ describe("
", () => {
);
MockAlerts(3);
- const tree = mount(
);
+ const { unmount, asFragment } = render(
+
,
+ );
await act(async () => {
await fetchMock.flush(true);
});
expect(fetchMock.calls()).toHaveLength(1);
- expect(toDiffableHtml(tree.html())).toMatchSnapshot();
- tree.unmount();
+ expect(asFragment()).toMatchSnapshot();
+ unmount();
});
it("matches snapshot with rainbow response", async () => {
@@ -256,13 +264,15 @@ describe("
", () => {
);
MockAlerts(3);
- const tree = mount(
);
+ const { unmount, asFragment } = render(
+
,
+ );
await act(async () => {
await fetchMock.flush(true);
});
expect(fetchMock.calls()).toHaveLength(1);
- expect(toDiffableHtml(tree.html())).toMatchSnapshot();
- tree.unmount();
+ expect(asFragment()).toMatchSnapshot();
+ unmount();
});
it("doesn't fetch when not in view", async () => {
@@ -284,11 +294,13 @@ describe("
", () => {
] as any);
MockAlerts(3);
- const tree = mount(
);
+ const { unmount } = render(
+
,
+ );
await act(async () => {
await fetchMock.flush(true);
});
- tree.unmount();
+ unmount();
expect(fetchMock.calls()).toHaveLength(0);
});
@@ -313,7 +325,9 @@ describe("
", () => {
] as any);
MockAlerts(3);
- const tree = mount(
);
+ const { unmount } = render(
+
,
+ );
await act(async () => {
await fetchMock.flush(true);
});
@@ -331,7 +345,7 @@ describe("
", () => {
});
expect(fetchMock.calls()).toHaveLength(2);
- tree.unmount();
+ unmount();
});
it("handles reponses with errors", async () => {
@@ -348,13 +362,15 @@ describe("
", () => {
);
MockAlerts(3);
- const tree = mount(
);
+ const { unmount, asFragment } = render(
+
,
+ );
await act(async () => {
await fetchMock.flush(true);
});
expect(fetchMock.calls()).toHaveLength(1);
- expect(toDiffableHtml(tree.html())).toMatchSnapshot();
- tree.unmount();
+ expect(asFragment()).toMatchSnapshot();
+ unmount();
});
it("handles fetch errors", async () => {
@@ -371,13 +387,15 @@ describe("
", () => {
);
MockAlerts(3);
- const tree = mount(
);
+ const { unmount, asFragment } = render(
+
,
+ );
await act(async () => {
await fetchMock.flush(true);
});
expect(fetchMock.calls()).toHaveLength(1);
- expect(toDiffableHtml(tree.html())).toMatchSnapshot();
- tree.unmount();
+ expect(asFragment()).toMatchSnapshot();
+ unmount();
});
interface testCasesT {
@@ -518,15 +536,18 @@ describe("
", () => {
},
);
- const tree = mount(
);
+ const { container, unmount } = render(
+
,
+ );
await act(async () => {
await fetchMock.flush(true);
});
- tree.update();
- const rects = tree.find("rect").map((r) => r.props().className);
+ const rects = Array.from(container.querySelectorAll("rect")).map(
+ (r) => r.className.baseVal,
+ );
expect(rects).toStrictEqual(testCase.values);
- tree.unmount();
+ unmount();
});
}
});
diff --git a/ui/src/Components/CenteredMessage/__snapshots__/index.test.tsx.snap b/ui/src/Components/CenteredMessage/__snapshots__/index.test.tsx.snap
index 7c0dba7df..9f2c0f324 100644
--- a/ui/src/Components/CenteredMessage/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/CenteredMessage/__snapshots__/index.test.tsx.snap
@@ -1,11 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`
matches snapshot 1`] = `
-"
-
-
- Foo
-
-
-"
+
+
+
+ Foo
+
+
+
`;
diff --git a/ui/src/Components/CenteredMessage/index.test.tsx b/ui/src/Components/CenteredMessage/index.test.tsx
index 49ee2a056..8e279798a 100644
--- a/ui/src/Components/CenteredMessage/index.test.tsx
+++ b/ui/src/Components/CenteredMessage/index.test.tsx
@@ -1,46 +1,48 @@
-import React from "react";
-
-import { shallow } from "enzyme";
-
-import toDiffableHtml from "diffable-html";
+import { render, screen } from "@testing-library/react";
import { MockThemeContext } from "__fixtures__/Theme";
+import { ThemeContext } from "Components/Theme";
import { CenteredMessage } from ".";
-beforeEach(() => {
- jest.spyOn(React, "useContext").mockImplementation(() => MockThemeContext);
-});
+const renderWithTheme = (ui: React.ReactElement) =>
+ render(
+
+ {ui}
+ ,
+ );
describe("
", () => {
const Message = () =>
Foo
;
it("matches snapshot", () => {
- const tree = shallow(
+ const { asFragment } = renderWithTheme(
,
);
- expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+ expect(asFragment()).toMatchSnapshot();
});
it("uses 'display-1 text-placeholder' className by default", () => {
- const tree = shallow(
+ renderWithTheme(
,
);
- expect(toDiffableHtml(tree.html())).toMatch(/display-1 text-placeholder/);
+ expect(screen.getByRole("heading")).toHaveClass(
+ "display-1",
+ "text-placeholder",
+ );
});
it("uses custom className if passed", () => {
- const tree = shallow(
+ renderWithTheme(
,
);
- expect(toDiffableHtml(tree.html())).toMatch(/bar-class/);
- expect(toDiffableHtml(tree.html())).not.toMatch(
- /display-1 text-placeholder/,
- );
+ const heading = screen.getByRole("heading");
+ expect(heading).toHaveClass("bar-class");
+ expect(heading).not.toHaveClass("display-1", "text-placeholder");
});
});
diff --git a/ui/src/Components/DateFromNow/index.test.tsx b/ui/src/Components/DateFromNow/index.test.tsx
index 8c2b3a8eb..9e4c0e924 100644
--- a/ui/src/Components/DateFromNow/index.test.tsx
+++ b/ui/src/Components/DateFromNow/index.test.tsx
@@ -1,4 +1,4 @@
-import { mount } from "enzyme";
+import { render, screen } from "@testing-library/react";
import { addSeconds } from "date-fns/addSeconds";
import { subSeconds } from "date-fns/subSeconds";
@@ -7,35 +7,35 @@ import { DateFromNow } from ".";
describe("
", () => {
it("renders 'just now' for now", () => {
- const tree = mount(
);
- expect(tree.text()).toBe("just now");
+ render(
);
+ expect(screen.getByText("just now")).toBeInTheDocument();
});
it("renders 'a few seconds ago' for 35 seconds old timestamp", () => {
- const tree = mount(
+ render(
,
);
- expect(tree.text()).toBe("a few seconds ago");
+ expect(screen.getByText("a few seconds ago")).toBeInTheDocument();
});
it("renders 'in a few seconds' for a timestamp 35 seconds away", () => {
- const tree = mount(
+ render(
,
);
- expect(tree.text()).toBe("in a few seconds");
+ expect(screen.getByText("in a few seconds")).toBeInTheDocument();
});
it("renders '1 minute ago' for 65 seconds old timestamp", () => {
- const tree = mount(
+ render(
,
);
- expect(tree.text()).toBe("1 minute ago");
+ expect(screen.getByText("1 minute ago")).toBeInTheDocument();
});
it("renders 'in 1 minute' for a timestamp 65 seconds away", () => {
- const tree = mount(
+ render(
,
);
- expect(tree.text()).toBe("in 1 minute");
+ expect(screen.getByText("in 1 minute")).toBeInTheDocument();
});
});
diff --git a/ui/src/Components/FaviconBadge/index.test.tsx b/ui/src/Components/FaviconBadge/index.test.tsx
index aae0f6ddd..16ce0a3f5 100644
--- a/ui/src/Components/FaviconBadge/index.test.tsx
+++ b/ui/src/Components/FaviconBadge/index.test.tsx
@@ -1,4 +1,4 @@
-import { mount } from "enzyme";
+import { render } from "@testing-library/react";
import Favico from "favico.js";
@@ -12,21 +12,21 @@ beforeEach(() => {
Favico.badge.mockClear();
});
-const MountedFaviconBadge = () => {
- return mount(
);
+const renderFaviconBadge = () => {
+ return render(
);
};
describe("
", () => {
it("badge is updated on mount", () => {
alertStore.info.setTotalAlerts(99);
- MountedFaviconBadge();
+ renderFaviconBadge();
expect(Favico.badge).toHaveBeenCalledTimes(1);
expect(Favico.badge).toHaveBeenCalledWith(99);
});
it("badge is updated when alertStore.info.totalAlerts changes", () => {
alertStore.info.setTotalAlerts(99);
- MountedFaviconBadge();
+ renderFaviconBadge();
expect(Favico.badge).toHaveBeenCalledTimes(1);
expect(Favico.badge).toHaveBeenCalledWith(99);
@@ -37,7 +37,7 @@ describe("
", () => {
it("badge is updated when alertStore.status.error changes", () => {
alertStore.status.setError("foo");
- MountedFaviconBadge();
+ renderFaviconBadge();
expect(Favico.badge).toHaveBeenCalledTimes(1);
expect(Favico.badge).toHaveBeenCalledWith("?");
});
@@ -61,7 +61,7 @@ describe("
", () => {
},
],
});
- MountedFaviconBadge();
+ renderFaviconBadge();
expect(Favico.badge).toHaveBeenCalledWith("!");
});
});
diff --git a/ui/src/Components/FetchPauser/index.test.tsx b/ui/src/Components/FetchPauser/index.test.tsx
index 64fc09a07..dfca7a9f2 100644
--- a/ui/src/Components/FetchPauser/index.test.tsx
+++ b/ui/src/Components/FetchPauser/index.test.tsx
@@ -1,6 +1,6 @@
import { act } from "react-dom/test-utils";
-import { mount } from "enzyme";
+import { render } from "@testing-library/react";
import { AlertStore } from "Stores/AlertStore";
import { FetchPauser } from ".";
@@ -11,8 +11,8 @@ beforeEach(() => {
alertStore = new AlertStore([]);
});
-const MountedFetchPauser = () => {
- return mount(
+const renderFetchPauser = () => {
+ return render(
,
@@ -21,14 +21,14 @@ const MountedFetchPauser = () => {
describe("
", () => {
it("mounting FetchPauser pauses alertStore", () => {
- MountedFetchPauser();
+ renderFetchPauser();
expect(alertStore.status.paused).toBe(true);
});
it("unmounting FetchPauser resumes alertStore", () => {
- const tree = MountedFetchPauser();
+ const { unmount } = renderFetchPauser();
act(() => {
- tree.unmount();
+ unmount();
});
expect(alertStore.status.paused).toBe(false);
});
diff --git a/ui/src/Components/Fetcher/__snapshots__/index.test.tsx.snap b/ui/src/Components/Fetcher/__snapshots__/index.test.tsx.snap
index 0492ddb6e..ea0996a3b 100644
--- a/ui/src/Components/Fetcher/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/Fetcher/__snapshots__/index.test.tsx.snap
@@ -1,26 +1,37 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`
matches snapshot 1`] = `
-"
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-"
+
`;
diff --git a/ui/src/Components/Fetcher/index.test.tsx b/ui/src/Components/Fetcher/index.test.tsx
index 0b6df5d7c..7cf9888ee 100644
--- a/ui/src/Components/Fetcher/index.test.tsx
+++ b/ui/src/Components/Fetcher/index.test.tsx
@@ -1,11 +1,9 @@
import { act } from "react-dom/test-utils";
-import { mount } from "enzyme";
+import { render, fireEvent } from "@testing-library/react";
import fetchMock from "fetch-mock";
-import toDiffableHtml from "diffable-html";
-
import { EmptyAPIResponse } from "__fixtures__/Fetch";
import { AlertStore } from "Stores/AlertStore";
@@ -66,7 +64,7 @@ const MockEmptyAPIResponseWithoutFilters = () => {
describe("
", () => {
it("changing interval changes how often fetch is called", () => {
settingsStore.fetchConfig.setInterval(1);
- mount(
);
+ render(
);
expect(fetchSpy).toHaveBeenCalledTimes(1);
jest.setSystemTime(
@@ -114,23 +112,23 @@ describe("
", () => {
it("calls alertStore.fetchWithThrottle on mount", () => {
const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle");
- mount(
);
+ render(
);
expect(fetchSpy).toHaveBeenCalledTimes(1);
});
it("calls alertStore.fetchWithThrottle again after filter change", () => {
MockEmptyAPIResponseWithoutFilters();
const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle");
- const tree = mount(
+ const { rerender } = render(
,
);
alertStore.filters.setFilterValues([]);
- tree.setProps({});
+ rerender(
);
expect(fetchSpy).toHaveBeenCalledTimes(2);
});
it("keeps calling alertStore.fetchWithThrottle every minute", () => {
- mount(
);
+ render(
);
expect(fetchSpy).toHaveBeenCalledTimes(1);
jest.setSystemTime(
@@ -162,7 +160,7 @@ describe("
", () => {
MockEmptyAPIResponseWithoutFilters();
const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle");
settingsStore.gridConfig.setSortOrder("default");
- mount(
);
+ render(
);
expect(fetchSpy).toHaveBeenCalledWith("", false, "", "", false, {}, 5, {});
});
@@ -171,7 +169,7 @@ describe("
", () => {
const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle");
settingsStore.gridConfig.setSortOrder("disabled");
settingsStore.gridConfig.setSortReverse(false);
- mount(
);
+ render(
);
expect(fetchSpy).toHaveBeenCalledWith(
"",
false,
@@ -189,7 +187,7 @@ describe("
", () => {
const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle");
settingsStore.gridConfig.setSortOrder("disabled");
settingsStore.gridConfig.setSortReverse(true);
- mount(
);
+ render(
);
expect(fetchSpy).toHaveBeenCalledWith(
"",
false,
@@ -207,7 +205,7 @@ describe("
", () => {
const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle");
settingsStore.gridConfig.setSortOrder("startsAt");
settingsStore.gridConfig.setSortReverse(false);
- mount(
);
+ render(
);
expect(fetchSpy).toHaveBeenCalledWith(
"",
false,
@@ -225,7 +223,7 @@ describe("
", () => {
const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle");
settingsStore.gridConfig.setSortOrder("startsAt");
settingsStore.gridConfig.setSortReverse(true);
- mount(
);
+ render(
);
expect(fetchSpy).toHaveBeenCalledWith(
"",
false,
@@ -244,7 +242,7 @@ describe("
", () => {
settingsStore.gridConfig.setSortOrder("label");
settingsStore.gridConfig.setSortLabel("cluster");
settingsStore.gridConfig.setSortReverse(false);
- mount(
);
+ render(
);
expect(fetchSpy).toHaveBeenCalledWith(
"",
false,
@@ -263,7 +261,7 @@ describe("
", () => {
settingsStore.gridConfig.setSortOrder("label");
settingsStore.gridConfig.setSortLabel("job");
settingsStore.gridConfig.setSortReverse(true);
- mount(
);
+ render(
);
expect(fetchSpy).toHaveBeenCalledWith(
"",
false,
@@ -282,7 +280,7 @@ describe("
", () => {
settingsStore.gridConfig.setSortOrder("label");
settingsStore.gridConfig.setSortLabel("instance");
settingsStore.gridConfig.setSortReverse(null);
- mount(
);
+ render(
);
expect(fetchSpy).toHaveBeenCalledWith(
"",
false,
@@ -301,7 +299,7 @@ describe("
", () => {
settingsStore.gridConfig.setSortOrder("default");
settingsStore.multiGridConfig.setGridLabel("cluster");
settingsStore.multiGridConfig.setGridSortReverse(false);
- mount(
);
+ render(
);
expect(fetchSpy).toHaveBeenCalledWith(
"cluster",
false,
@@ -320,7 +318,7 @@ describe("
", () => {
settingsStore.gridConfig.setSortOrder("default");
settingsStore.multiGridConfig.setGridLabel("cluster");
settingsStore.multiGridConfig.setGridSortReverse(true);
- mount(
);
+ render(
);
expect(fetchSpy).toHaveBeenCalledWith(
"cluster",
true,
@@ -339,7 +337,7 @@ describe("
", () => {
settingsStore.gridConfig.setSortOrder("default");
settingsStore.multiGridConfig.setGridLabel("");
settingsStore.multiGridConfig.setGridSortReverse(true);
- mount(
);
+ render(
);
expect(fetchSpy).toHaveBeenCalledWith("", true, "", "", false, {}, 5, {});
});
@@ -351,7 +349,7 @@ describe("
", () => {
settingsStore.multiGridConfig.setGridSortReverse(false);
alertStore.ui.setGridGroupLimit("old", "bar", 10);
alertStore.ui.setGridGroupLimit("foo", "bar", 5);
- mount(
);
+ render(
);
expect(fetchSpy).toHaveBeenCalledWith(
"",
false,
@@ -365,13 +363,13 @@ describe("
", () => {
});
it("internal timer is null after unmount", () => {
- const tree = mount(
+ const { unmount } = render(
,
);
expect(fetchSpy).toHaveBeenCalledTimes(1);
act(() => {
- tree.unmount();
+ unmount();
});
expect(fetchSpy).toHaveBeenCalledTimes(1);
@@ -389,13 +387,13 @@ describe("
", () => {
it("doesn't fetch on mount when paused", () => {
alertStore.status.pause();
- mount(
);
+ render(
);
expect(fetchSpy).toHaveBeenCalledTimes(0);
});
it("doesn't fetch on update when paused", () => {
alertStore.status.pause();
- mount(
);
+ render(
);
settingsStore.gridConfig.setSortReverse(
!settingsStore.gridConfig.config.reverseSort,
);
@@ -404,7 +402,7 @@ describe("
", () => {
it("fetches on update when resumed", () => {
alertStore.status.pause();
- mount(
);
+ render(
);
alertStore.status.resume();
settingsStore.gridConfig.setSortReverse(
!settingsStore.gridConfig.config.reverseSort,
@@ -417,7 +415,7 @@ describe("
", () => {
it("fetches on resume", () => {
alertStore.status.pause();
- mount(
);
+ render(
);
alertStore.status.resume();
jest.setSystemTime(
new Date(Date.UTC(2000, 1, 1, 0, 0, 0)).getTime() + 2 * 1000,
@@ -431,91 +429,105 @@ describe("
", () => {
describe("
children", () => {
it("renders Dots when countdown is in progress", () => {
- const tree = mount(
+ const { container } = render(
,
);
- expect(tree.find("div.components-fetcher")).toHaveLength(1);
+ expect(container.querySelectorAll("div.components-fetcher")).toHaveLength(
+ 1,
+ );
});
it("doesn't render any children when upgrade is needed", () => {
act(() => {
alertStore.info.setUpgradeNeeded(true);
});
- const tree = mount(
+ const { container } = render(
,
);
- expect(tree.find("div.navbar-brand").children()).toHaveLength(0);
+ expect(container.querySelector("div.navbar-brand")?.children).toHaveLength(
+ 0,
+ );
});
it("renders PauseButton when paused", () => {
- const tree = mount(
+ const { container } = render(
,
);
act(() => {
alertStore.status.pause();
});
- expect(toDiffableHtml(tree.html())).toMatch(/fa-pause/);
+ expect(container.innerHTML).toMatch(/fa-pause/);
});
it("renders PauseButton when paused and hovered", () => {
- const tree = mount(
+ const { container } = render(
,
);
act(() => {
alertStore.status.pause();
});
- tree.find(".navbar-brand").simulate("mouseenter");
- tree.update();
- expect(toDiffableHtml(tree.html())).toMatch(/fa-pause/);
+ const navbarBrand = container.querySelector(".navbar-brand");
+ fireEvent.mouseEnter(navbarBrand!);
+ expect(container.innerHTML).toMatch(/fa-pause/);
- tree.find(".navbar-brand").simulate("mouseleave");
- tree.update();
- expect(toDiffableHtml(tree.html())).toMatch(/fa-pause/);
+ fireEvent.mouseLeave(navbarBrand!);
+ expect(container.innerHTML).toMatch(/fa-pause/);
});
it("renders PlayButton when hovered", () => {
- const tree = mount(
+ const { container } = render(
,
);
- tree.find(".navbar-brand").simulate("mouseenter");
- tree.update();
- expect(toDiffableHtml(tree.html())).toMatch(/fa-play/);
+ const navbarBrand = container.querySelector(".navbar-brand");
+ fireEvent.mouseEnter(navbarBrand!);
+ expect(container.innerHTML).toMatch(/fa-play/);
- tree.find(".navbar-brand").simulate("mouseleave");
- tree.update();
- expect(tree.find("div.components-fetcher")).toHaveLength(1);
+ fireEvent.mouseLeave(navbarBrand!);
+ expect(container.querySelectorAll("div.components-fetcher")).toHaveLength(
+ 1,
+ );
});
});
describe("
", () => {
it("matches snapshot", () => {
- const tree = mount(
);
- expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+ const { asFragment } = render(
);
+ expect(asFragment()).toMatchSnapshot();
});
it("adds 'fetching' class when fetching data", () => {
act(() => {
alertStore.status.setFetching();
});
- const tree = mount(
);
- expect(tree.find("div.components-fetcher").hasClass("fetching")).toBe(true);
+ const { container } = render(
);
+ expect(
+ container
+ .querySelector("div.components-fetcher")
+ ?.classList.contains("fetching"),
+ ).toBe(true);
});
it("adds 'processing' class when processing fetched data", () => {
act(() => {
alertStore.status.setProcessing();
});
- const tree = mount(
);
- expect(tree.find("div.components-fetcher").hasClass("processing")).toBe(
- true,
- );
+ const { container } = render(
);
+ expect(
+ container
+ .querySelector("div.components-fetcher")
+ ?.classList.contains("processing"),
+ ).toBe(true);
});
it("adds 'retrying' class when fetch needs a retry", () => {
act(() => {
alertStore.info.setIsRetrying();
});
- const tree = mount(
);
- expect(tree.find("div.components-fetcher").hasClass("retrying")).toBe(true);
+ const { container } = render(
);
+ expect(
+ container
+ .querySelector("div.components-fetcher")
+ ?.classList.contains("retrying"),
+ ).toBe(true);
});
});
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.test.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.test.tsx
index d43486e10..57e2bba2c 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.test.tsx
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.test.tsx
@@ -1,6 +1,6 @@
import { act } from "react-dom/test-utils";
-import { mount } from "enzyme";
+import { render, fireEvent } from "@testing-library/react";
import copy from "copy-to-clipboard";
@@ -100,8 +100,8 @@ beforeEach(() => {
alertStore.data.setUpstreams(generateUpstreams());
});
-const MountedAlertMenu = (group: APIAlertGroupT) => {
- return mount(
+const renderAlertMenu = (group: APIAlertGroupT) => {
+ return render(
{
describe("", () => {
it("menu content is hidden by default", () => {
- const tree = MountedAlertMenu(group);
- expect(tree.find("div.dropdown-menu")).toHaveLength(0);
+ const { container } = renderAlertMenu(group);
+ expect(container.querySelector("div.dropdown-menu")).toBeNull();
expect(MockSetIsMenuOpen).not.toHaveBeenCalled();
});
it("clicking toggle renders menu content", async () => {
const promise = Promise.resolve();
- const tree = MountedAlertMenu(group);
- const toggle = tree.find("span.cursor-pointer");
- toggle.simulate("click");
+ const { container } = renderAlertMenu(group);
+ const toggle = container.querySelector("span.cursor-pointer");
+ fireEvent.click(toggle!);
expect(MockSetIsMenuOpen).toHaveBeenCalledTimes(1);
- expect(tree.find("div.dropdown-menu")).toHaveLength(1);
+ expect(container.querySelector("div.dropdown-menu")).toBeInTheDocument();
await act(() => promise);
});
it("clicking toggle twice hides menu content", async () => {
const promise = Promise.resolve();
- const tree = MountedAlertMenu(group);
- const toggle = tree.find("span.cursor-pointer");
+ const { container } = renderAlertMenu(group);
+ const toggle = container.querySelector("span.cursor-pointer");
- toggle.simulate("click");
+ fireEvent.click(toggle!);
act(() => {
jest.runOnlyPendingTimers();
});
expect(MockSetIsMenuOpen).toHaveBeenCalledTimes(1);
- expect(tree.find("div.dropdown-menu")).toHaveLength(1);
+ expect(container.querySelector("div.dropdown-menu")).toBeInTheDocument();
- toggle.simulate("click");
+ fireEvent.click(toggle!);
act(() => {
jest.runOnlyPendingTimers();
});
- tree.update();
expect(MockSetIsMenuOpen).toHaveBeenCalledTimes(2);
- expect(tree.find("div.dropdown-menu")).toHaveLength(0);
+ expect(container.querySelector("div.dropdown-menu")).toBeNull();
await act(() => promise);
});
it("clicking menu item hides menu content", async () => {
const promise = Promise.resolve();
- const tree = MountedAlertMenu(group);
- const toggle = tree.find("span.cursor-pointer");
+ const { container } = renderAlertMenu(group);
+ const toggle = container.querySelector("span.cursor-pointer");
- toggle.simulate("click");
+ fireEvent.click(toggle!);
expect(MockSetIsMenuOpen).toHaveBeenCalledTimes(1);
- expect(tree.find("div.dropdown-menu")).toHaveLength(1);
+ expect(container.querySelector("div.dropdown-menu")).toBeInTheDocument();
- tree.find("a.dropdown-item").at(0).simulate("click");
+ const menuItem = container.querySelector("a.dropdown-item");
+ fireEvent.click(menuItem!);
act(() => {
jest.runOnlyPendingTimers();
});
- tree.update();
expect(MockSetIsMenuOpen).toHaveBeenCalledTimes(2);
- expect(tree.find("div.dropdown-menu")).toHaveLength(0);
+ expect(container.querySelector("div.dropdown-menu")).toBeNull();
await act(() => promise);
});
});
-const MountedMenuContent = (group: APIAlertGroupT) => {
- return mount(
+const renderMenuContent = (group: APIAlertGroupT) => {
+ return render(
{
describe("", () => {
it("clicking on 'Silence' icon opens the silence form modal", () => {
group.alertmanagerCount = { am1: 1, ro: 1 };
- const tree = MountedMenuContent(group);
- const button = tree.find(".dropdown-item").at(2);
- button.simulate("click");
+ const { container } = renderMenuContent(group);
+ const buttons = container.querySelectorAll(".dropdown-item");
+ fireEvent.click(buttons[2]);
expect(silenceFormStore.toggle.visible).toBe(true);
expect(silenceFormStore.data.alertmanagers).toMatchObject([
{ label: "am1", value: ["am1"] },
@@ -205,17 +204,19 @@ describe("", () => {
upstreams.instances[0].readonly = true;
upstreams.instances[2].readonly = true;
alertStore.data.setUpstreams(upstreams);
- const tree = MountedMenuContent(group);
- const button = tree.find(".dropdown-item").at(2);
- expect(button.hasClass("disabled")).toBe(true);
- button.simulate("click");
+ const { container } = renderMenuContent(group);
+ const buttons = container.querySelectorAll(".dropdown-item");
+ expect(buttons[2].classList.contains("disabled")).toBe(true);
+ fireEvent.click(buttons[2]);
expect(silenceFormStore.toggle.visible).toBe(false);
});
it("source link points at alert source", () => {
- const tree = MountedMenuContent(group);
- const link = tree.find("a.dropdown-item[href='localhost/graph']");
- expect(link.text()).toBe("default");
+ const { container } = renderMenuContent(group);
+ const link = container.querySelector(
+ "a.dropdown-item[href='localhost/graph']",
+ );
+ expect(link?.textContent).toBe("default");
});
it("renders action annotations when present", () => {
@@ -276,34 +277,30 @@ describe("", () => {
{},
);
- const tree = MountedMenuContent(group);
- expect(tree.find("a.dropdown-item")).toHaveLength(3);
+ const { container } = renderMenuContent(group);
+ expect(container.querySelectorAll("a.dropdown-item")).toHaveLength(3);
- const link1 = tree.find("a.dropdown-item[href='linkAction']");
- expect(link1.text()).toBe("linkAction");
+ const link1 = container.querySelector("a.dropdown-item[href='linkAction']");
+ expect(link1?.textContent).toBe("linkAction");
- const link2 = tree.find("a.dropdown-item[href='linkActionShared']");
- expect(link2.text()).toBe("linkActionShared");
-
- expect(tree.find("a.dropdown-item[href='nonLinkNonAction']")).toHaveLength(
- 0,
- );
- expect(tree.find("a.dropdown-item[href='nonLinkNonAction']")).toHaveLength(
- 0,
+ const link2 = container.querySelector(
+ "a.dropdown-item[href='linkActionShared']",
);
+ expect(link2?.textContent).toBe("linkActionShared");
+
expect(
- tree.find("a.dropdown-item[href='nonLinkNonActionShared']"),
- ).toHaveLength(0);
+ container.querySelector("a.dropdown-item[href='nonLinkNonAction']"),
+ ).toBeNull();
expect(
- tree.find("a.dropdown-item[href='nonLinkNonActionShared']"),
- ).toHaveLength(0);
+ container.querySelector("a.dropdown-item[href='nonLinkNonActionShared']"),
+ ).toBeNull();
});
it("clicking on 'Copy' icon copies alert data to clipboard", async () => {
group.alertmanagerCount = { am1: 1, ro: 1 };
- const tree = MountedMenuContent(group);
- const button = tree.find(".dropdown-item").at(1);
- button.simulate("click");
+ const { container } = renderMenuContent(group);
+ const buttons = container.querySelectorAll(".dropdown-item");
+ fireEvent.click(buttons[1]);
expect(copy).toBeCalledWith(JSON.stringify(alertToJSON(group, alert)));
});
});
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.tsx.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.tsx.snap
index d19433a9c..b304fc65f 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.tsx.snap
@@ -1,261 +1,324 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[` matches snapshot when inhibited 1`] = `
-"
-
-