diff --git a/ui/Makefile b/ui/Makefile index aa6dd948c..143d38374 100644 --- a/ui/Makefile +++ b/ui/Makefile @@ -15,7 +15,7 @@ build: build/index.html .PHONY: test-js test-js: node_modules/jest/bin/jest.js - CI=true npm test -- --coverage + CI=true NODE_OPTIONS="--unhandled-rejections=strict" npm test -- --coverage .PHONY: test-percy test-percy: node_modules/@storybook/react/bin/build.js diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.test.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.test.js index b78dc2b9d..87126bdee 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.test.js +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.test.js @@ -1,4 +1,5 @@ import React from "react"; +import { act } from "react-dom/test-utils"; import { mount } from "enzyme"; @@ -58,14 +59,17 @@ describe("", () => { expect(tree.instance().collapse.value).toBe(true); }); - it("clicking toggle sets collapse value to 'false'", () => { + it("clicking toggle sets collapse value to 'false'", async () => { + const promise = Promise.resolve(); const tree = MountedAlertMenu(group); const toggle = tree.find(".cursor-pointer"); toggle.simulate("click"); expect(tree.instance().collapse.value).toBe(false); + await act(() => promise); }); - it("handleClickOutside() call sets collapse value to 'true'", () => { + it("handleClickOutside() call sets collapse value to 'true'", async () => { + const promise = Promise.resolve(); const tree = MountedAlertMenu(group); const toggle = tree.find(".cursor-pointer"); toggle.simulate("click"); @@ -74,6 +78,7 @@ describe("", () => { tree.instance().handleClickOutside(); expect(tree.instance().collapse.value).toBe(true); + await act(() => promise); }); }); diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.test.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.test.js index 109f56813..abd9bef3e 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.test.js +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.test.js @@ -1,4 +1,5 @@ import React from "react"; +import { act } from "react-dom/test-utils"; import { mount } from "enzyme"; @@ -57,25 +58,29 @@ describe("", () => { expect(tree.instance().collapse.value).toBe(true); }); - it("clicking toggle sets collapse value to 'false'", () => { + it("clicking toggle sets collapse value to 'false'", async () => { + const promise = Promise.resolve(); const group = MockAlertGroup({ alertname: "Fake Alert" }, [], [], {}, {}); const tree = MountedGroupMenu(group, true); const toggle = tree.find(".cursor-pointer"); toggle.simulate("click"); expect(tree.instance().collapse.value).toBe(false); + await act(() => promise); }); - it("handleClickOutside() call sets collapse value to 'true'", () => { + it("handleClickOutside() call sets collapse value to 'true'", async () => { + const promise = Promise.resolve(); const group = MockAlertGroup({ alertname: "Fake Alert" }, [], [], {}, {}); const tree = MountedGroupMenu(group, true); - const toggle = tree.find(".cursor-pointer"); + toggle.simulate("click"); expect(tree.instance().collapse.value).toBe(false); tree.instance().handleClickOutside(); expect(tree.instance().collapse.value).toBe(true); + await act(() => promise); }); }); diff --git a/ui/src/Components/NavBar/FilterInput/History.test.js b/ui/src/Components/NavBar/FilterInput/History.test.js index f87bc4d6f..d8fa646d1 100644 --- a/ui/src/Components/NavBar/FilterInput/History.test.js +++ b/ui/src/Components/NavBar/FilterInput/History.test.js @@ -1,4 +1,5 @@ import React from "react"; +import { act } from "react-dom/test-utils"; import { mount, shallow } from "enzyme"; @@ -82,24 +83,29 @@ describe("", () => { // Due to https://github.com/FezVrasta/popper.js/issues/478 we can't test // rendered dropdown content, only the fact that toggle value is updated - it("renders dropdown button when menu is visible", () => { + it("renders dropdown button when menu is visible", async () => { + const promise = Promise.resolve(); const tree = MountedHistory(); const toggle = tree.find("button"); expect(tree.instance().collapse.value).toBe(true); toggle.simulate("click"); expect(tree.instance().collapse.value).toBe(false); + await act(() => promise); }); - it("hides when handleClickOutside() is called", () => { + it("hides when handleClickOutside() is called", async () => { + const promise = Promise.resolve(); const tree = MountedHistory(); const instance = tree.instance(); instance.collapse.value = false; instance.handleClickOutside(); expect(tree.instance().collapse.value).toBe(true); + await act(() => promise); }); - it("saves only applied filters to history", () => { + it("saves only applied filters to history", async () => { + const promise = Promise.resolve(); alertStore.filters.values = [ AppliedFilter("foo", "=", "bar"), NewUnappliedFilter("foo=unapplied"), @@ -114,6 +120,7 @@ describe("", () => { ReduceFilter(AppliedFilter("baz", "!=", "bar")), ]) ); + await act(() => promise); }); });