diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.tsx
index 5c18ce90f..5f8861dd6 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.tsx
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.tsx
@@ -138,7 +138,7 @@ describe("", () => {
const group = MockAlertGroup([], [alert], [], [], {});
const tree = MountedAlert(alert, group, false, false);
const label = tree
- .find("FilteringLabel")
+ .find("Memo(FilteringLabel)")
.filterWhere((elem) => elem.props().name === "@cluster");
expect(label.text()).toBe("@cluster: default");
});
@@ -168,7 +168,7 @@ describe("", () => {
const group = MockAlertGroup([], [alert], [], [], {});
const tree = MountedAlert(alert, group, false, false);
const labels = tree
- .find("FilteringLabel")
+ .find("Memo(FilteringLabel)")
.filterWhere((elem) => elem.props().name === "@cluster");
expect(labels).toHaveLength(2);
expect(labels.at(0).text()).toBe("@cluster: default");
@@ -180,7 +180,7 @@ describe("", () => {
const group = MockAlertGroup([], [alert], [], [], {});
const tree = MountedAlert(alert, group, true, false);
const label = tree
- .find("FilteringLabel")
+ .find("Memo(FilteringLabel)")
.filterWhere((elem) => elem.props().name === "@receiver");
expect(label.text()).toBe("@receiver: by-name");
});
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.tsx
index 82a8b34b9..054ff3e41 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.tsx
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.tsx
@@ -83,7 +83,7 @@ const MountedGroupFooter = () => {
describe("", () => {
it("matches snapshot", () => {
group.shared.clusters = ["default"];
- const tree = MountedGroupFooter().find("GroupFooter");
+ const tree = MountedGroupFooter().find("Memo(GroupFooter)");
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
});
@@ -98,7 +98,7 @@ describe("", () => {
},
});
- const tree = MountedGroupFooter().find("GroupFooter");
+ const tree = MountedGroupFooter().find("Memo(GroupFooter)");
expect(tree.find("ManagedSilence")).toHaveLength(1);
});
@@ -111,7 +111,7 @@ describe("", () => {
default: {},
});
- const tree = MountedGroupFooter().find("GroupFooter");
+ const tree = MountedGroupFooter().find("Memo(GroupFooter)");
expect(tree.find("FallbackSilenceDesciption")).toHaveLength(1);
});
@@ -124,7 +124,7 @@ describe("", () => {
foo: {},
});
- const tree = MountedGroupFooter().find("GroupFooter");
+ const tree = MountedGroupFooter().find("Memo(GroupFooter)");
expect(tree.find("FallbackSilenceDesciption")).toHaveLength(1);
});
@@ -143,7 +143,7 @@ describe("", () => {
},
});
- const tree = MountedGroupFooter().find("GroupFooter");
+ const tree = MountedGroupFooter().find("Memo(GroupFooter)");
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
});
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.tsx
index d7f365119..cb59d9dd1 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.tsx
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.tsx
@@ -117,7 +117,7 @@ const ValidateCollapse = (
MockAlerts(3, 3);
const tree = MountedAlertGroup(jest.fn());
- expect(tree.find("Alert")).toHaveLength(shouldBeCollapsed ? 0 : 3);
+ expect(tree.find("Memo(Alert)")).toHaveLength(shouldBeCollapsed ? 0 : 3);
};
describe("", () => {
@@ -149,8 +149,8 @@ describe("", () => {
it("renders Alertmanager cluster labels in footer if shared", () => {
MockAlerts(2, 2);
group.shared.clusters = ["default"];
- const tree = MountedAlertGroup(jest.fn()).find("AlertGroup");
- expect(tree.find("GroupFooter").html()).toMatch(/@cluster/);
+ const tree = MountedAlertGroup(jest.fn()).find("Memo(AlertGroup)");
+ expect(tree.find("Memo(GroupFooter)").html()).toMatch(/@cluster/);
});
it("only renders one @cluster label per cluster in the footer", () => {
@@ -178,8 +178,8 @@ describe("", () => {
});
}
group.shared.clusters = ["default", "HA"];
- const tree = MountedAlertGroup(jest.fn()).find("AlertGroup");
- const labels = tree.find("GroupFooter").find("FilteringLabel");
+ const tree = MountedAlertGroup(jest.fn()).find("Memo(AlertGroup)");
+ const labels = tree.find("Memo(GroupFooter)").find("Memo(FilteringLabel)");
expect(labels).toHaveLength(3);
expect(labels.at(0).text()).toBe("@cluster: default");
expect(labels.at(1).text()).toBe("@cluster: HA");
@@ -191,8 +191,8 @@ describe("", () => {
for (let i = 0; i < group.alerts.length; i++) {
group.alerts[i].alertmanager = [];
}
- const tree = MountedAlertGroup(jest.fn()).find("AlertGroup");
- const labels = tree.find("GroupFooter").find("FilteringLabel");
+ const tree = MountedAlertGroup(jest.fn()).find("Memo(AlertGroup)");
+ const labels = tree.find("Memo(GroupFooter)").find("Memo(FilteringLabel)");
expect(labels).toHaveLength(1);
expect(labels.at(0).text()).toBe("@receiver: by-name");
});
@@ -214,7 +214,7 @@ describe("", () => {
const alerts = tree.find("ul.list-group");
expect(alerts.html()).toMatch(/@cluster/);
- const footer = tree.find("GroupFooter");
+ const footer = tree.find("Memo(GroupFooter)");
expect(footer.html()).not.toMatch(/@cluster/);
});
@@ -222,7 +222,7 @@ describe("", () => {
MockAlerts(5, 10);
const tree = MountedAlertGroup(jest.fn());
tree.find("span.badge.cursor-pointer").at(1).simulate("click");
- expect(tree.find("Alert")).toHaveLength(0);
+ expect(tree.find("Memo(Alert)")).toHaveLength(0);
expect(tree.find("ul.list-group")).toHaveLength(0);
});
@@ -230,7 +230,7 @@ describe("", () => {
MockAlerts(5, 10);
alertStore.ui.setIsIdle(true);
const tree = MountedAlertGroup(jest.fn(), MockThemeContext);
- expect(tree.find("Alert")).toHaveLength(1);
+ expect(tree.find("Memo(Alert)")).toHaveLength(1);
});
it("is collapsed by default on desktop when defaultCollapseState=collapsed", () => {
@@ -366,7 +366,7 @@ describe(" renderConfig", () => {
const tree = MountedAlertGroup(jest.fn());
tree
- .find("Alert")
+ .find("Memo(Alert)")
.at(0)
.find("span.bg-secondary.cursor-pointer")
.at(0)
@@ -407,7 +407,7 @@ describe(" card theme", () => {
settingsStore.alertGroupConfig.setColorTitleBar(false);
group.stateCount = { active: 5, suppressed: 0, unprocessed: 0 };
const tree = MountedAlertGroup(jest.fn());
- expect(tree.find("GroupHeader").prop("themedCounters")).toBe(true);
+ expect(tree.find("Memo(GroupHeader)").prop("themedCounters")).toBe(true);
});
it("renders bg-light border when colorTitleBar=true and there are multiple alert states", () => {
@@ -424,7 +424,7 @@ describe(" card theme", () => {
settingsStore.alertGroupConfig.setColorTitleBar(true);
group.stateCount = { active: 5, suppressed: 6, unprocessed: 7 };
const tree = MountedAlertGroup(jest.fn());
- expect(tree.find("GroupHeader").prop("themedCounters")).toBe(true);
+ expect(tree.find("Memo(GroupHeader)").prop("themedCounters")).toBe(true);
});
it("renders state based background when colorTitleBar=true and there's only one alert state", () => {
@@ -441,7 +441,7 @@ describe(" card theme", () => {
settingsStore.alertGroupConfig.setColorTitleBar(true);
group.stateCount = { active: 5, suppressed: 0, unprocessed: 0 };
const tree = MountedAlertGroup(jest.fn());
- expect(tree.find("GroupHeader").prop("themedCounters")).toBe(false);
+ expect(tree.find("Memo(GroupHeader)").prop("themedCounters")).toBe(false);
});
it("renders AlertHistory when enabled", async () => {
diff --git a/ui/src/Components/Grid/AlertGrid/index.test.tsx b/ui/src/Components/Grid/AlertGrid/index.test.tsx
index e84fd49cb..e100bdc55 100644
--- a/ui/src/Components/Grid/AlertGrid/index.test.tsx
+++ b/ui/src/Components/Grid/AlertGrid/index.test.tsx
@@ -226,7 +226,7 @@ describe("", () => {
it("renders all alert groups", () => {
MockGroupList(55, 5);
const tree = MountedGrid();
- const alertGroups = tree.find("AlertGroup");
+ const alertGroups = tree.find("Memo(AlertGroup)");
expect(alertGroups).toHaveLength(55);
});
@@ -297,7 +297,7 @@ describe("", () => {
settingsStore.gridConfig.setSortReverse(false);
MockGroupList(3, 1);
const tree = ShallowGrid();
- const alertGroups = tree.find("AlertGroup");
+ const alertGroups = tree.find("Memo(AlertGroup)");
expect(alertGroups.map((g) => (g.props() as any).group.id)).toEqual([
"id1",
"id2",
@@ -320,7 +320,7 @@ describe("", () => {
};
alertStore.data.setGrids([grid]);
tree.setProps({ grid: grid });
- expect(tree.find("AlertGroup")).toHaveLength(10);
+ expect(tree.find("Memo(AlertGroup)")).toHaveLength(10);
tree.find("span.cursor-pointer").at(1).simulate("click");
act(() => {
@@ -354,8 +354,8 @@ describe("", () => {
};
alertStore.data.setGrids([MockGrid(), MockGrid()]);
tree.setProps({ grid: grid });
- expect(tree.find("h5").at(0).find("FilteringLabel")).toHaveLength(1);
- expect(tree.find("h5").at(0).find("FilteringLabel").text()).toBe(
+ expect(tree.find("h5").at(0).find("Memo(FilteringLabel)")).toHaveLength(1);
+ expect(tree.find("h5").at(0).find("Memo(FilteringLabel)").text()).toBe(
"foo: bar"
);
});
@@ -373,7 +373,7 @@ describe("", () => {
};
alertStore.data.setGrids([MockGrid(), MockGrid()]);
tree.setProps({ grid: grid });
- expect(tree.find("h5").at(0).find("FilteringLabel")).toHaveLength(0);
+ expect(tree.find("h5").at(0).find("Memo(FilteringLabel)")).toHaveLength(0);
});
it("left click on a group collapse toggle only toggles clicked group", () => {
@@ -381,21 +381,23 @@ describe("", () => {
const tree = MountedGrid();
for (let i = 0; i <= 9; i++) {
- expect(tree.find("AlertGroup").at(i).find("Alert")).toHaveLength(3);
+ expect(
+ tree.find("Memo(AlertGroup)").at(i).find("Memo(Alert)")
+ ).toHaveLength(3);
}
tree
- .find("AlertGroup")
+ .find("Memo(AlertGroup)")
.at(2)
- .find("GroupHeader")
+ .find("Memo(GroupHeader)")
.find("span.cursor-pointer")
.at(1)
.simulate("click");
for (let i = 0; i <= 9; i++) {
- expect(tree.find("AlertGroup").at(i).find("Alert")).toHaveLength(
- i === 2 ? 0 : 3
- );
+ expect(
+ tree.find("Memo(AlertGroup)").at(i).find("Memo(Alert)")
+ ).toHaveLength(i === 2 ? 0 : 3);
}
});
@@ -429,22 +431,28 @@ describe("", () => {
const tree = MountedAlertGrid();
for (let i = 0; i <= 19; i++) {
- expect(tree.find("AlertGroup").at(i).find("Alert")).toHaveLength(3);
+ expect(
+ tree.find("Memo(AlertGroup)").at(i).find("Memo(Alert)")
+ ).toHaveLength(3);
}
tree
- .find("AlertGroup")
+ .find("Memo(AlertGroup)")
.at(2)
- .find("GroupHeader")
+ .find("Memo(GroupHeader)")
.find("span.cursor-pointer")
.at(1)
.simulate("click", { altKey: true });
for (let i = 0; i <= 9; i++) {
- expect(tree.find("AlertGroup").at(i).find("Alert")).toHaveLength(0);
+ expect(
+ tree.find("Memo(AlertGroup)").at(i).find("Memo(Alert)")
+ ).toHaveLength(0);
}
for (let i = 10; i <= 19; i++) {
- expect(tree.find("AlertGroup").at(i).find("Alert")).toHaveLength(3);
+ expect(
+ tree.find("Memo(AlertGroup)").at(i).find("Memo(Alert)")
+ ).toHaveLength(3);
}
});
@@ -483,15 +491,15 @@ describe("", () => {
const tree = ShallowGrid();
tree.setProps({
- gridSizesConfig: wrapper.find("Grid").prop("gridSizesConfig"),
- groupWidth: wrapper.find("Grid").prop("groupWidth"),
+ gridSizesConfig: wrapper.find("Memo(Grid)").prop("gridSizesConfig"),
+ groupWidth: wrapper.find("Memo(Grid)").prop("groupWidth"),
});
tree.update();
- expect(wrapper.find("Grid").prop("groupWidth")).toBe(
+ expect(wrapper.find("Memo(Grid)").prop("groupWidth")).toBe(
Math.floor(innerWidth / columns)
);
- expect(tree.find("AlertGroup").at(0).prop("groupWidth")).toBe(
+ expect(tree.find("Memo(AlertGroup)").at(0).prop("groupWidth")).toBe(
Math.floor(innerWidth / columns)
);
};
@@ -572,10 +580,12 @@ describe("", () => {
const tree = ShallowGrid();
tree.setProps({
- gridSizesConfig: wrapper.find("Grid").prop("gridSizesConfig"),
- groupWidth: wrapper.find("Grid").prop("groupWidth"),
+ gridSizesConfig: wrapper.find("Memo(Grid)").prop("gridSizesConfig"),
+ groupWidth: wrapper.find("Memo(Grid)").prop("groupWidth"),
});
- expect(tree.find("AlertGroup").at(0).prop("groupWidth")).toBe(1980 / 4);
+ expect(tree.find("Memo(AlertGroup)").at(0).prop("groupWidth")).toBe(
+ 1980 / 4
+ );
// then resize and verify if column count was changed
document.body.clientWidth = 1000;
@@ -585,13 +595,15 @@ describe("", () => {
resizeCallback([{ contentRect: { width: 1000, height: 1000 } }]);
});
wrapper.update();
- expect(wrapper.find("Grid").prop("groupWidth")).toBe(1000 / 2);
+ expect(wrapper.find("Memo(Grid)").prop("groupWidth")).toBe(1000 / 2);
tree.setProps({
- gridSizesConfig: wrapper.find("Grid").prop("gridSizesConfig"),
- groupWidth: wrapper.find("Grid").prop("groupWidth"),
+ gridSizesConfig: wrapper.find("Memo(Grid)").prop("gridSizesConfig"),
+ groupWidth: wrapper.find("Memo(Grid)").prop("groupWidth"),
});
- expect(tree.find("AlertGroup").at(0).prop("groupWidth")).toBe(1000 / 2);
+ expect(tree.find("Memo(AlertGroup)").at(0).prop("groupWidth")).toBe(
+ 1000 / 2
+ );
});
it("scrollbar render doesn't resize alert groups", () => {
@@ -606,10 +618,10 @@ describe("", () => {
const tree = ShallowGrid();
tree.setProps({
- gridSizesConfig: wrapper.find("Grid").prop("gridSizesConfig"),
- groupWidth: wrapper.find("Grid").prop("groupWidth"),
+ gridSizesConfig: wrapper.find("Memo(Grid)").prop("gridSizesConfig"),
+ groupWidth: wrapper.find("Memo(Grid)").prop("groupWidth"),
});
- expect(tree.find("AlertGroup").at(0).prop("groupWidth")).toBe(400);
+ expect(tree.find("Memo(AlertGroup)").at(0).prop("groupWidth")).toBe(400);
// then resize and verify if column count was changed
act(() => {
@@ -617,10 +629,10 @@ describe("", () => {
});
wrapper.update();
tree.setProps({
- gridSizesConfig: wrapper.find("Grid").prop("gridSizesConfig"),
- groupWidth: wrapper.find("Grid").prop("groupWidth"),
+ gridSizesConfig: wrapper.find("Memo(Grid)").prop("gridSizesConfig"),
+ groupWidth: wrapper.find("Memo(Grid)").prop("groupWidth"),
});
- expect(tree.find("AlertGroup").at(0).prop("groupWidth")).toBe(396);
+ expect(tree.find("Memo(AlertGroup)").at(0).prop("groupWidth")).toBe(396);
});
it("viewport resize doesn't allow loops", () => {
@@ -645,10 +657,10 @@ describe("", () => {
});
wrapper.update();
tree.setProps({
- gridSizesConfig: wrapper.find("Grid").prop("gridSizesConfig"),
- groupWidth: wrapper.find("Grid").prop("groupWidth"),
+ gridSizesConfig: wrapper.find("Memo(Grid)").prop("gridSizesConfig"),
+ groupWidth: wrapper.find("Memo(Grid)").prop("groupWidth"),
});
- results.push(tree.find("AlertGroup").at(0).prop("groupWidth"));
+ results.push(tree.find("Memo(AlertGroup)").at(0).prop("groupWidth"));
}
expect(results).toStrictEqual([
@@ -684,12 +696,12 @@ describe("", () => {
},
]);
const tree = MountedAlertGrid();
- expect(tree.find("Grid")).toHaveLength(2);
- expect(tree.find("AlertGroup")).toHaveLength(6);
+ expect(tree.find("Memo(Grid)")).toHaveLength(2);
+ expect(tree.find("Memo(AlertGroup)")).toHaveLength(6);
// toggle all grids to hide all groups
tree
- .find("Grid")
+ .find("Memo(Grid)")
.at(0)
.find("span.cursor-pointer")
.at(1)
@@ -727,7 +739,7 @@ describe("", () => {
window.innerWidth = 1000;
const tree = MountedAlertGrid();
expect(tree.find("div.components-grid")).toHaveLength(2);
- expect(tree.find("AlertGroup")).toHaveLength(20);
+ expect(tree.find("Memo(AlertGroup)")).toHaveLength(20);
expect(tree.find("div.components-grid").at(0).prop("style")).toMatchObject({
paddingLeft: "5px",
@@ -761,8 +773,8 @@ describe("", () => {
window.innerWidth = 1000;
const tree = MountedAlertGrid();
tree.update();
- expect(tree.find("Grid")).toHaveLength(1);
- expect(tree.find("AlertGroup")).toHaveLength(10);
+ expect(tree.find("Memo(Grid)")).toHaveLength(1);
+ expect(tree.find("Memo(AlertGroup)")).toHaveLength(10);
expect(tree.find("div.components-grid").at(0).prop("style")).toMatchObject({
paddingLeft: "0px",
diff --git a/ui/src/Components/Grid/index.test.tsx b/ui/src/Components/Grid/index.test.tsx
index 3947c6dff..f43b33734 100644
--- a/ui/src/Components/Grid/index.test.tsx
+++ b/ui/src/Components/Grid/index.test.tsx
@@ -36,7 +36,7 @@ const ShallowGrid = () => {
describe("", () => {
it("renders only AlertGrid when all upstreams are healthy", () => {
const tree = ShallowGrid();
- expect(tree.find("AlertGrid")).toHaveLength(1);
+ expect(tree.find("Memo(AlertGrid)")).toHaveLength(1);
});
it("renders FatalError if there's only one upstream and it's unhealthy", () => {
@@ -125,7 +125,7 @@ describe("", () => {
alertStore.info.setVersion("unknown");
alertStore.info.setTotalAlerts(0);
const tree = ShallowGrid();
- expect(tree.find("AlertGrid")).toHaveLength(1);
+ expect(tree.find("Memo(AlertGrid)")).toHaveLength(1);
});
it("renders EmptyGrid after first fetch when totalAlerts is 0", () => {
@@ -169,7 +169,7 @@ describe("", () => {
alertStore.info.setVersion("unknown");
alertStore.info.setTotalAlerts(1);
const tree = ShallowGrid();
- expect(tree.find("AlertGrid")).toHaveLength(1);
+ expect(tree.find("Memo(AlertGrid)")).toHaveLength(1);
});
it("unmounts without crashes", () => {
diff --git a/ui/src/Components/NavBar/FilterInput/History.test.tsx b/ui/src/Components/NavBar/FilterInput/History.test.tsx
index e6c3ed516..761c78b6f 100644
--- a/ui/src/Components/NavBar/FilterInput/History.test.tsx
+++ b/ui/src/Components/NavBar/FilterInput/History.test.tsx
@@ -116,7 +116,7 @@ describe("", () => {
const tree = MountedHistory();
tree.find("button.cursor-pointer").simulate("click");
expect(tree.find("button.dropdown-item")).toHaveLength(1);
- const labels = tree.find("HistoryLabel");
+ const labels = tree.find("Memo(HistoryLabel)");
expect(labels).toHaveLength(2);
expect(labels.at(0).html()).toMatch(/>foo=bar);
expect(labels.at(1).html()).toMatch(/>baz!=bar);
@@ -147,7 +147,7 @@ describe("", () => {
"Last used filtersfoo=bar1baz=~bar1Save filtersReset filtersClear history"
);
- const labels = tree.find("HistoryLabel");
+ const labels = tree.find("Memo(HistoryLabel)");
expect(labels).toHaveLength(2);
expect(labels.at(0).html()).toMatch(/>foo=bar1);
expect(labels.at(1).html()).toMatch(/>baz=~bar1);
@@ -193,13 +193,13 @@ describe("", () => {
expect(labelSets).toHaveLength(8);
// oldest pushed label should be rendered last
- const labelsLast = labelSets.last().find("HistoryLabel");
+ const labelsLast = labelSets.last().find("Memo(HistoryLabel)");
expect(labelsLast).toHaveLength(2);
expect(labelsLast.at(0).html()).toMatch(/>foo=bar9);
expect(labelsLast.at(1).html()).toMatch(/>baz=~bar9);
// most recently pushed label should be rendered fist
- const labelsFist = labelSets.first().find("HistoryLabel");
+ const labelsFist = labelSets.first().find("Memo(HistoryLabel)");
expect(labelsFist).toHaveLength(2);
expect(labelsFist.at(0).html()).toMatch(/>foo=bar16);
expect(labelsFist.at(1).html()).toMatch(/>baz=~bar16);
@@ -221,13 +221,13 @@ describe("", () => {
expect(labelSets).toHaveLength(4);
// oldest pushed label should be rendered last
- const labelsLast = labelSets.last().find("HistoryLabel");
+ const labelsLast = labelSets.last().find("Memo(HistoryLabel)");
expect(labelsLast).toHaveLength(2);
expect(labelsLast.at(0).html()).toMatch(/>foo=bar13);
expect(labelsLast.at(1).html()).toMatch(/>baz=~bar13);
// most recently pushed label should be rendered fist
- const labelsFist = labelSets.first().find("HistoryLabel");
+ const labelsFist = labelSets.first().find("Memo(HistoryLabel)");
expect(labelsFist).toHaveLength(2);
expect(labelsFist.at(0).html()).toMatch(/>foo=bar16);
expect(labelsFist.at(1).html()).toMatch(/>baz=~bar16);
diff --git a/ui/src/Components/PaginatedAlertList/index.test.tsx b/ui/src/Components/PaginatedAlertList/index.test.tsx
index cdd01baf5..158aee26b 100644
--- a/ui/src/Components/PaginatedAlertList/index.test.tsx
+++ b/ui/src/Components/PaginatedAlertList/index.test.tsx
@@ -94,7 +94,7 @@ describe("", () => {
);
expect(tree.find("LabelSetList")).toHaveLength(1);
- expect(tree.find("StaticLabel")).toHaveLength(3);
+ expect(tree.find("Memo(StaticLabel)")).toHaveLength(3);
});
it("renders empty LabelSetList with empty response", () => {
@@ -111,7 +111,7 @@ describe("", () => {
);
expect(tree.find("LabelSetList")).toHaveLength(1);
- expect(tree.find("StaticLabel")).toHaveLength(0);
+ expect(tree.find("Memo(StaticLabel)")).toHaveLength(0);
});
it("fetches affected alerts on mount", () => {
@@ -145,7 +145,7 @@ describe("", () => {
/>
);
expect(tree.text()).toMatch(/Affected alerts/);
- expect(tree.find("StaticLabel")).toHaveLength(3);
+ expect(tree.find("Memo(StaticLabel)")).toHaveLength(3);
});
it("handles empty grid response correctly", () => {
diff --git a/ui/src/Components/SilenceModal/SilenceForm.test.tsx b/ui/src/Components/SilenceModal/SilenceForm.test.tsx
index 5deb37f57..ae1ee71c4 100644
--- a/ui/src/Components/SilenceModal/SilenceForm.test.tsx
+++ b/ui/src/Components/SilenceModal/SilenceForm.test.tsx
@@ -67,7 +67,7 @@ const MountedSilenceForm = () => {
describe(" matchers", () => {
it("has an empty matcher selects on default render", () => {
const tree = MountedSilenceForm();
- const matchers = tree.find("SilenceMatch");
+ const matchers = tree.find("Memo(SilenceMatch)");
expect(matchers).toHaveLength(1);
expect(silenceFormStore.data.matchers).toHaveLength(1);
});
@@ -97,7 +97,7 @@ describe(" matchers", () => {
]);
silenceFormStore.data.setAutofillMatchers(true);
const tree = MountedSilenceForm();
- const matchers = tree.find("SilenceMatch");
+ const matchers = tree.find("Memo(SilenceMatch)");
expect(matchers).toHaveLength(12);
expect(silenceFormStore.data.matchers).toHaveLength(12);
expect(silenceFormStore.data.matchers).toEqual([
@@ -275,7 +275,7 @@ describe(" matchers", () => {
]);
silenceFormStore.data.setAutofillMatchers(true);
const tree = MountedSilenceForm();
- const matchers = tree.find("SilenceMatch");
+ const matchers = tree.find("Memo(SilenceMatch)");
expect(matchers).toHaveLength(12);
expect(silenceFormStore.data.matchers).toHaveLength(12);
expect(silenceFormStore.data.matchers).toEqual([
@@ -451,7 +451,7 @@ describe(" matchers", () => {
]);
silenceFormStore.data.setAutofillMatchers(false);
const tree = MountedSilenceForm();
- const matchers = tree.find("SilenceMatch");
+ const matchers = tree.find("Memo(SilenceMatch)");
expect(matchers).toHaveLength(1);
expect(silenceFormStore.data.matchers[0]).toMatchObject({
isRegex: false,
@@ -464,7 +464,7 @@ describe(" matchers", () => {
const tree = MountedSilenceForm();
const button = tree.find("button[type='button']");
button.simulate("click", { preventDefault: jest.fn() });
- const matchers = tree.find("SilenceMatch");
+ const matchers = tree.find("Memo(SilenceMatch)");
expect(matchers).toHaveLength(2);
expect(silenceFormStore.data.matchers).toHaveLength(2);
});
@@ -473,7 +473,7 @@ describe(" matchers", () => {
const tree = MountedSilenceForm();
expect(silenceFormStore.data.matchers).toHaveLength(1);
- const matcher = tree.find("SilenceMatch");
+ const matcher = tree.find("Memo(SilenceMatch)");
const button = matcher.find("button");
expect(button).toHaveLength(0);
});
@@ -485,7 +485,7 @@ describe(" matchers", () => {
const tree = MountedSilenceForm();
expect(silenceFormStore.data.matchers).toHaveLength(2);
- const matcher = tree.find("SilenceMatch");
+ const matcher = tree.find("Memo(SilenceMatch)");
const button = matcher.find("button");
expect(button).toHaveLength(2);
});
@@ -498,7 +498,7 @@ describe(" matchers", () => {
const tree = MountedSilenceForm();
expect(silenceFormStore.data.matchers).toHaveLength(3);
- const matchers = tree.find("SilenceMatch");
+ const matchers = tree.find("Memo(SilenceMatch)");
const toDelete = matchers.at(1);
const button = toDelete.find("button");
button.simulate("click");
@@ -509,23 +509,23 @@ describe(" matchers", () => {
describe(" preview", () => {
it("doesn't render PayloadPreview by default", () => {
const tree = MountedSilenceForm();
- expect(tree.find("PayloadPreview")).toHaveLength(0);
+ expect(tree.find("Memo(PayloadPreview)")).toHaveLength(0);
});
it("renders PayloadPreview after clicking the toggle", () => {
const tree = MountedSilenceForm();
tree.find("span.badge.cursor-pointer.text-muted").simulate("click");
- expect(tree.find("PayloadPreview")).toHaveLength(1);
+ expect(tree.find("Memo(PayloadPreview)")).toHaveLength(1);
});
it("clicking on the toggle icon toggles PayloadPreview", () => {
const tree = MountedSilenceForm();
const button = tree.find(".badge.cursor-pointer.text-muted");
- expect(tree.find("PayloadPreview")).toHaveLength(0);
+ expect(tree.find("Memo(PayloadPreview)")).toHaveLength(0);
button.simulate("click");
- expect(tree.find("PayloadPreview")).toHaveLength(1);
+ expect(tree.find("Memo(PayloadPreview)")).toHaveLength(1);
button.simulate("click");
- expect(tree.find("PayloadPreview")).toHaveLength(0);
+ expect(tree.find("Memo(PayloadPreview)")).toHaveLength(0);
});
it("clicking on the copy button copies form link to the clipboard", () => {
diff --git a/ui/src/Components/SilenceModal/SilenceModalContent.test.tsx b/ui/src/Components/SilenceModal/SilenceModalContent.test.tsx
index 9a3f4deb6..aff89558c 100644
--- a/ui/src/Components/SilenceModal/SilenceModalContent.test.tsx
+++ b/ui/src/Components/SilenceModal/SilenceModalContent.test.tsx
@@ -79,7 +79,7 @@ describe("", () => {
const tabs = tree.find("Tab");
tabs.at(1).simulate("click");
tree.update();
- const form = tree.find("Browser");
+ const form = tree.find("Memo(Browser)");
expect(form).toHaveLength(1);
});
@@ -88,7 +88,7 @@ describe("", () => {
const tree = MountedSilenceModalContent();
const tabs = tree.find("Tab");
tabs.at(0).simulate("click");
- const form = tree.find("SilenceForm");
+ const form = tree.find("Memo(SilenceForm)");
expect(form).toHaveLength(1);
});
@@ -138,7 +138,7 @@ describe(" Editor", () => {
it("renders SilenceForm when silenceFormStore.data.currentStage is 'UserInput'", () => {
silenceFormStore.data.setStage("form");
const tree = MountedSilenceModalContent();
- const form = tree.find("SilenceForm");
+ const form = tree.find("Memo(SilenceForm)");
expect(form).toHaveLength(1);
});
@@ -160,7 +160,7 @@ describe(" Browser", () => {
it("renders silence browser when tab is set to Browser", () => {
silenceFormStore.tab.setTab("browser");
const tree = MountedSilenceModalContent();
- const form = tree.find("Browser");
+ const form = tree.find("Memo(Browser)");
expect(form).toHaveLength(1);
});
});
diff --git a/ui/src/Components/SilenceModal/SilencePreview/index.test.tsx b/ui/src/Components/SilenceModal/SilencePreview/index.test.tsx
index 74814d7d6..2996f4a76 100644
--- a/ui/src/Components/SilenceModal/SilencePreview/index.test.tsx
+++ b/ui/src/Components/SilenceModal/SilencePreview/index.test.tsx
@@ -116,7 +116,7 @@ describe("", () => {
});
const tree = MountedSilencePreview();
expect(tree.text()).toMatch(/Affected alerts/);
- expect(tree.find("StaticLabel")).toHaveLength(3);
+ expect(tree.find("Memo(StaticLabel)")).toHaveLength(3);
});
it("handles empty grid response correctly", () => {
diff --git a/ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitController.test.tsx b/ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitController.test.tsx
index bf7e2d38a..ed9310514 100644
--- a/ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitController.test.tsx
+++ b/ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitController.test.tsx
@@ -70,8 +70,8 @@ describe("", () => {
silenceFormStore={silenceFormStore}
/>
);
- expect(tree.find("MultiClusterStatus")).toHaveLength(1);
- expect(tree.find("SingleClusterStatus")).toHaveLength(0);
+ expect(tree.find("Memo(MultiClusterStatus)")).toHaveLength(1);
+ expect(tree.find("Memo(SingleClusterStatus)")).toHaveLength(0);
});
it("renders SingleClusterStatus when multiple clusters are used", () => {
@@ -85,8 +85,8 @@ describe("", () => {
silenceFormStore={silenceFormStore}
/>
);
- expect(tree.find("MultiClusterStatus")).toHaveLength(0);
- expect(tree.find("SingleClusterStatus")).toHaveLength(1);
+ expect(tree.find("Memo(MultiClusterStatus)")).toHaveLength(0);
+ expect(tree.find("Memo(SingleClusterStatus)")).toHaveLength(1);
});
it("resets the form on 'Back' button click", () => {