diff --git a/ui/package-lock.json b/ui/package-lock.json index 16832a383..b30ea2132 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -4546,36 +4546,6 @@ "semver": "^5.7.0" }, "dependencies": { - "react-test-renderer": { - "version": "17.0.1", - "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-17.0.1.tgz", - "integrity": "sha512-/dRae3mj6aObwkjCcxZPlxDFh73XZLgvwhhyON2haZGUEhiaY5EjfAdw+d/rQmlcFwdTpMXCSGVk374QbCTlrA==", - "dev": true, - "requires": { - "object-assign": "^4.1.1", - "react-is": "^17.0.1", - "react-shallow-renderer": "^16.13.1", - "scheduler": "^0.20.1" - }, - "dependencies": { - "react-is": { - "version": "17.0.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz", - "integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==", - "dev": true - } - } - }, - "scheduler": { - "version": "0.20.1", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.1.tgz", - "integrity": "sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==", - "dev": true, - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - } - }, "semver": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", @@ -6725,9 +6695,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001156", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001156.tgz", - "integrity": "sha512-z7qztybA2eFZTB6Z3yvaQBIoJpQtsewRD74adw2UbRWwsRq3jIPvgrQGawBMbfafekQaD21FWuXNcywtTDGGCw==" + "version": "1.0.30001157", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001157.tgz", + "integrity": "sha512-gOerH9Wz2IRZ2ZPdMfBvyOi3cjaz4O4dgNwPGzx8EhqAs4+2IL/O+fJsbt+znSigujoZG8bVcIAUM/I/E5K3MA==" }, "capture-exit": { "version": "2.0.0", @@ -7510,9 +7480,9 @@ "dev": true }, "yargs-parser": { - "version": "20.2.3", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.3.tgz", - "integrity": "sha512-emOFRT9WVHw03QSvN5qor9QQT9+sw5vwxfYweivSMHTcAXPefwVae2FjO7JJjj8hCE4CzPOPeFM83VwT29HCww==", + "version": "20.2.4", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz", + "integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==", "dev": true } } @@ -7562,16 +7532,16 @@ } }, "core-js": { - "version": "3.6.5", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz", - "integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==" + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.7.0.tgz", + "integrity": "sha512-NwS7fI5M5B85EwpWuIwJN4i/fbisQUwLwiSNUWeXlkAZ0sbBjLEvLvFLf1uzAUV66PcEPt4xCGCmOZSxVf3xzA==" }, "core-js-compat": { - "version": "3.6.5", - "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.6.5.tgz", - "integrity": "sha512-7ItTKOhOZbznhXAQ2g/slGg1PJV5zDO/WdkTwi7UEOJmkvsE32PWvx6mKtDjiMpjnR2CNf6BAD6sSxIlv7ptng==", + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.7.0.tgz", + "integrity": "sha512-V8yBI3+ZLDVomoWICO6kq/CD28Y4r1M7CWeO4AGpMdMfseu8bkSubBmUPySMGKRTS+su4XQ07zUkAsiu9FCWTg==", "requires": { - "browserslist": "^4.8.5", + "browserslist": "^4.14.6", "semver": "7.0.0" }, "dependencies": { @@ -7583,9 +7553,9 @@ } }, "core-js-pure": { - "version": "3.6.5", - "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.6.5.tgz", - "integrity": "sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA==" + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.7.0.tgz", + "integrity": "sha512-EZD2ckZysv8MMt4J6HSvS9K2GdtlZtdBncKAmF9lr2n0c9dJUaUN88PSTjvgwCgQPWKTkERXITgS6JJRAnljtg==" }, "core-util-is": { "version": "1.0.2", @@ -8746,9 +8716,9 @@ } }, "electron-to-chromium": { - "version": "1.3.589", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.589.tgz", - "integrity": "sha512-rQItBTFnol20HaaLm26UgSUduX7iGerwW7pEYX17MB1tI6LzFajiLV7iZ7LVcUcsN/7HrZUoCLrBauChy/IqEg==" + "version": "1.3.591", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.591.tgz", + "integrity": "sha512-ol/0WzjL4NS4Kqy9VD6xXQON91xIihDT36sYCew/G/bnd1v0/4D+kahp26JauQhgFUjrdva3kRSo7URcUmQ+qw==" }, "element-resize-detector": { "version": "1.2.1", @@ -8956,11 +8926,12 @@ "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==" }, "es-get-iterator": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.0.tgz", - "integrity": "sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.1.tgz", + "integrity": "sha512-qorBw8Y7B15DVLaJWy6WdEV/ZkieBcu6QCq/xzWzGOKJqgG1j754vXRfZ3NY7HSShneqU43mPB4OkQBTkvHhFw==", "requires": { - "es-abstract": "^1.17.4", + "call-bind": "^1.0.0", + "get-intrinsic": "^1.0.1", "has-symbols": "^1.0.1", "is-arguments": "^1.0.4", "is-map": "^2.0.1", @@ -8969,24 +8940,6 @@ "isarray": "^2.0.5" }, "dependencies": { - "es-abstract": { - "version": "1.17.7", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.7.tgz", - "integrity": "sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==", - "requires": { - "es-to-primitive": "^1.2.1", - "function-bind": "^1.1.1", - "has": "^1.0.3", - "has-symbols": "^1.0.1", - "is-callable": "^1.2.2", - "is-regex": "^1.1.1", - "object-inspect": "^1.8.0", - "object-keys": "^1.1.1", - "object.assign": "^4.1.1", - "string.prototype.trimend": "^1.0.1", - "string.prototype.trimstart": "^1.0.1" - } - }, "isarray": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz", @@ -11040,9 +10993,9 @@ "dev": true }, "yargs-parser": { - "version": "20.2.3", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.3.tgz", - "integrity": "sha512-emOFRT9WVHw03QSvN5qor9QQT9+sw5vwxfYweivSMHTcAXPefwVae2FjO7JJjj8hCE4CzPOPeFM83VwT29HCww==", + "version": "20.2.4", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz", + "integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==", "dev": true } } @@ -15429,9 +15382,9 @@ } }, "node-releases": { - "version": "1.1.65", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.65.tgz", - "integrity": "sha512-YpzJOe2WFIW0V4ZkJQd/DGR/zdVwc/pI4Nl1CZrBO19FdRcSTmsuhdttw9rsTzzJLrNcSloLiBbEYx1C4f6gpA==" + "version": "1.1.66", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.66.tgz", + "integrity": "sha512-JHEQ1iWPGK+38VLB2H9ef2otU4l8s3yAMt9Xf934r6+ojCYDMHPMqvCc9TnzfeFSP1QEOeU6YZEd3+De0LTCgg==" }, "node-sass": { "version": "4.14.1", @@ -17705,9 +17658,9 @@ } }, "ws": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/ws/-/ws-7.3.1.tgz", - "integrity": "sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA==", + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.0.tgz", + "integrity": "sha512-kyFwXuV/5ymf+IXhS6f0+eAFvydbaBW3zjpT6hUdAh/hbVjTIB5EHBGi0bPoCLSK2wcuz3BrEkB9LrYv1Nm4NQ==", "dev": true } } @@ -21322,15 +21275,15 @@ } }, "tar-fs": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.0.tgz", - "integrity": "sha512-9uW5iDvrIMCVpvasdFHW0wJPez0K4JnMZtsuIeDI7HyMGJNxmDZDOCQROr7lXyS+iL/QMpj07qcjGYTSdRFXUg==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz", + "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==", "dev": true, "requires": { "chownr": "^1.1.1", "mkdirp-classic": "^0.5.2", "pump": "^3.0.0", - "tar-stream": "^2.0.0" + "tar-stream": "^2.1.4" }, "dependencies": { "chownr": { diff --git a/ui/src/Components/FetchPauser/index.test.tsx b/ui/src/Components/FetchPauser/index.test.tsx index af8beb598..2358fa88c 100644 --- a/ui/src/Components/FetchPauser/index.test.tsx +++ b/ui/src/Components/FetchPauser/index.test.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { act } from "react-dom/test-utils"; import { mount } from "enzyme"; @@ -27,7 +28,9 @@ describe("", () => { it("unmounting FetchPauser resumes alertStore", () => { const tree = MountedFetchPauser(); - tree.unmount(); + act(() => { + tree.unmount(); + }); expect(alertStore.status.paused).toBe(false); }); }); diff --git a/ui/src/Components/Fetcher/index.test.tsx b/ui/src/Components/Fetcher/index.test.tsx index 02ccbd8cf..e43e49c66 100644 --- a/ui/src/Components/Fetcher/index.test.tsx +++ b/ui/src/Components/Fetcher/index.test.tsx @@ -69,16 +69,10 @@ const MockEmptyAPIResponseWithoutFilters = () => { }); }; -const MountedFetcher = () => { - return mount( - - ); -}; - describe("", () => { it("changing interval changes how often fetch is called", () => { settingsStore.fetchConfig.setInterval(1); - MountedFetcher(); + mount(); expect(fetchSpy).toHaveBeenCalledTimes(1); advanceBy(3 * 1000); @@ -116,21 +110,23 @@ describe("", () => { it("calls alertStore.fetchWithThrottle on mount", () => { const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle"); - MountedFetcher(); + mount(); expect(fetchSpy).toHaveBeenCalledTimes(1); }); it("calls alertStore.fetchWithThrottle again after filter change", () => { MockEmptyAPIResponseWithoutFilters(); const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle"); - const tree = MountedFetcher(); + const tree = mount( + + ); alertStore.filters.setFilterValues([]); tree.setProps({}); expect(fetchSpy).toHaveBeenCalledTimes(2); }); it("keeps calling alertStore.fetchWithThrottle every minute", () => { - MountedFetcher(); + mount(); expect(fetchSpy).toHaveBeenCalledTimes(1); advanceBy(62 * 1000); @@ -156,7 +152,7 @@ describe("", () => { MockEmptyAPIResponseWithoutFilters(); const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle"); settingsStore.gridConfig.setSortOrder("default"); - MountedFetcher(); + mount(); expect(fetchSpy).toHaveBeenCalledWith("", false, "", "", ""); }); @@ -165,7 +161,7 @@ describe("", () => { const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle"); settingsStore.gridConfig.setSortOrder("disabled"); settingsStore.gridConfig.setSortReverse(false); - MountedFetcher(); + mount(); expect(fetchSpy).toHaveBeenCalledWith("", false, "disabled", "", ""); }); @@ -174,7 +170,7 @@ describe("", () => { const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle"); settingsStore.gridConfig.setSortOrder("disabled"); settingsStore.gridConfig.setSortReverse(true); - MountedFetcher(); + mount(); expect(fetchSpy).toHaveBeenCalledWith("", false, "disabled", "", ""); }); @@ -183,7 +179,7 @@ describe("", () => { const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle"); settingsStore.gridConfig.setSortOrder("startsAt"); settingsStore.gridConfig.setSortReverse(false); - MountedFetcher(); + mount(); expect(fetchSpy).toHaveBeenCalledWith("", false, "startsAt", "", "0"); }); @@ -192,7 +188,7 @@ describe("", () => { const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle"); settingsStore.gridConfig.setSortOrder("startsAt"); settingsStore.gridConfig.setSortReverse(true); - MountedFetcher(); + mount(); expect(fetchSpy).toHaveBeenCalledWith("", false, "startsAt", "", "1"); }); @@ -202,7 +198,7 @@ describe("", () => { settingsStore.gridConfig.setSortOrder("label"); settingsStore.gridConfig.setSortLabel("cluster"); settingsStore.gridConfig.setSortReverse(false); - MountedFetcher(); + mount(); expect(fetchSpy).toHaveBeenCalledWith("", false, "label", "cluster", "0"); }); @@ -212,7 +208,7 @@ describe("", () => { settingsStore.gridConfig.setSortOrder("label"); settingsStore.gridConfig.setSortLabel("job"); settingsStore.gridConfig.setSortReverse(true); - MountedFetcher(); + mount(); expect(fetchSpy).toHaveBeenCalledWith("", false, "label", "job", "1"); }); @@ -222,7 +218,7 @@ describe("", () => { settingsStore.gridConfig.setSortOrder("label"); settingsStore.gridConfig.setSortLabel("instance"); settingsStore.gridConfig.setSortReverse(null); - MountedFetcher(); + mount(); expect(fetchSpy).toHaveBeenCalledWith("", false, "label", "instance", ""); }); @@ -232,7 +228,7 @@ describe("", () => { settingsStore.gridConfig.setSortOrder("default"); settingsStore.multiGridConfig.setGridLabel("cluster"); settingsStore.multiGridConfig.setGridSortReverse(false); - MountedFetcher(); + mount(); expect(fetchSpy).toHaveBeenCalledWith("cluster", false, "", "", ""); }); @@ -242,7 +238,7 @@ describe("", () => { settingsStore.gridConfig.setSortOrder("default"); settingsStore.multiGridConfig.setGridLabel("cluster"); settingsStore.multiGridConfig.setGridSortReverse(true); - MountedFetcher(); + mount(); expect(fetchSpy).toHaveBeenCalledWith("cluster", true, "", "", ""); }); @@ -252,21 +248,27 @@ describe("", () => { settingsStore.gridConfig.setSortOrder("default"); settingsStore.multiGridConfig.setGridLabel(""); settingsStore.multiGridConfig.setGridSortReverse(true); - MountedFetcher(); + mount(); expect(fetchSpy).toHaveBeenCalledWith("", true, "", "", ""); }); it("internal timer is null after unmount", () => { - const tree = MountedFetcher(); - expect(fetchSpy).toHaveBeenCalledTimes(1); - - tree.unmount(); - expect(fetchSpy).toHaveBeenCalledTimes(1); - - settingsStore.gridConfig.setSortReverse( - !settingsStore.gridConfig.config.reverseSort + const tree = mount( + ); expect(fetchSpy).toHaveBeenCalledTimes(1); + + act(() => { + tree.unmount(); + }); + expect(fetchSpy).toHaveBeenCalledTimes(1); + + act(() => { + settingsStore.gridConfig.setSortReverse( + !settingsStore.gridConfig.config.reverseSort + ); + }); + expect(fetchSpy).toHaveBeenCalledTimes(1); act(() => { jest.runOnlyPendingTimers(); }); @@ -275,13 +277,13 @@ describe("", () => { it("doesn't fetch on mount when paused", () => { alertStore.status.pause(); - MountedFetcher(); + mount(); expect(fetchSpy).toHaveBeenCalledTimes(0); }); it("doesn't fetch on update when paused", () => { alertStore.status.pause(); - MountedFetcher(); + mount(); settingsStore.gridConfig.setSortReverse( !settingsStore.gridConfig.config.reverseSort ); @@ -290,7 +292,7 @@ describe("", () => { it("fetches on update when resumed", () => { alertStore.status.pause(); - MountedFetcher(); + mount(); alertStore.status.resume(); settingsStore.gridConfig.setSortReverse( !settingsStore.gridConfig.config.reverseSort @@ -303,7 +305,7 @@ describe("", () => { it("fetches on resume", () => { alertStore.status.pause(); - MountedFetcher(); + mount(); alertStore.status.resume(); advanceBy(2 * 1000); act(() => { @@ -315,7 +317,9 @@ describe("", () => { describe(" children", () => { it("renders Dots when countdown is in progress", () => { - const tree = MountedFetcher(); + const tree = mount( + + ); expect(tree.find("div.components-fetcher")).toHaveLength(1); }); @@ -323,12 +327,16 @@ describe(" children", () => { act(() => { alertStore.info.upgradeNeeded = true; }); - const tree = MountedFetcher(); + const tree = mount( + + ); expect(tree.find("div.navbar-brand").children()).toHaveLength(0); }); it("renders PauseButton when paused", () => { - const tree = MountedFetcher(); + const tree = mount( + + ); act(() => { alertStore.status.pause(); }); @@ -336,7 +344,9 @@ describe(" children", () => { }); it("renders PauseButton when paused and hovered", () => { - const tree = MountedFetcher(); + const tree = mount( + + ); act(() => { alertStore.status.pause(); }); @@ -350,7 +360,9 @@ describe(" children", () => { }); it("renders PlayButton when hovered", () => { - const tree = MountedFetcher(); + const tree = mount( + + ); tree.find(".navbar-brand").simulate("mouseenter"); tree.update(); expect(toDiffableHtml(tree.html())).toMatch(/fa-play/); diff --git a/ui/src/Components/Grid/ReloadNeeded/index.test.tsx b/ui/src/Components/Grid/ReloadNeeded/index.test.tsx index 8eb1e9d60..0d58368d6 100644 --- a/ui/src/Components/Grid/ReloadNeeded/index.test.tsx +++ b/ui/src/Components/Grid/ReloadNeeded/index.test.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { act } from "react-dom/test-utils"; import { mount, shallow } from "enzyme"; @@ -28,8 +29,12 @@ describe("", () => { const reloadSpy = jest .spyOn(global.window.location, "reload") .mockImplementation(() => {}); + mount(); - jest.runOnlyPendingTimers(); + + act(() => { + jest.runOnlyPendingTimers(); + }); expect(reloadSpy).toBeCalled(); }); @@ -37,9 +42,16 @@ describe("", () => { const reloadSpy = jest .spyOn(global.window.location, "reload") .mockImplementation(() => {}); + const tree = mount(); - tree.unmount(); - jest.runOnlyPendingTimers(); + expect(reloadSpy).not.toBeCalled(); + + act(() => { + tree.unmount(); + }); + act(() => { + jest.runOnlyPendingTimers(); + }); expect(reloadSpy).not.toBeCalled(); }); }); diff --git a/ui/src/Components/Grid/UpgradeNeeded/index.test.tsx b/ui/src/Components/Grid/UpgradeNeeded/index.test.tsx index fe39640bc..4fd7ba68d 100644 --- a/ui/src/Components/Grid/UpgradeNeeded/index.test.tsx +++ b/ui/src/Components/Grid/UpgradeNeeded/index.test.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { act } from "react-dom/test-utils"; import { mount, shallow } from "enzyme"; @@ -30,8 +31,12 @@ describe("", () => { const reloadSpy = jest .spyOn(global.window.location, "reload") .mockImplementation(() => {}); + mount(); - jest.runOnlyPendingTimers(); + + act(() => { + jest.runOnlyPendingTimers(); + }); expect(reloadSpy).toBeCalled(); }); @@ -39,11 +44,19 @@ describe("", () => { const reloadSpy = jest .spyOn(global.window.location, "reload") .mockImplementation(() => {}); + const tree = mount( ); - tree.unmount(); - jest.runOnlyPendingTimers(); + expect(reloadSpy).not.toBeCalled(); + + act(() => { + tree.unmount(); + }); + + act(() => { + jest.runOnlyPendingTimers(); + }); expect(reloadSpy).not.toBeCalled(); }); }); diff --git a/ui/src/Components/InhibitedByModal/index.test.tsx b/ui/src/Components/InhibitedByModal/index.test.tsx index 0832a7f40..3facf4bfd 100644 --- a/ui/src/Components/InhibitedByModal/index.test.tsx +++ b/ui/src/Components/InhibitedByModal/index.test.tsx @@ -8,11 +8,9 @@ import { InhibitedByModal } from "."; let alertStore: AlertStore; -beforeAll(() => { - jest.useFakeTimers(); -}); - beforeEach(() => { + jest.useFakeTimers(); + alertStore = new AlertStore([]); }); @@ -107,9 +105,13 @@ describe("", () => { const tree = mount( ); + const toggle = tree.find("span.badge.badge-light"); toggle.simulate("click"); - tree.unmount(); + + act(() => { + tree.unmount(); + }); expect(document.body.className.split(" ")).not.toContain("modal-open"); }); }); diff --git a/ui/src/Components/ManagedSilence/DeleteSilence.test.tsx b/ui/src/Components/ManagedSilence/DeleteSilence.test.tsx index 67265de66..70f97dc21 100644 --- a/ui/src/Components/ManagedSilence/DeleteSilence.test.tsx +++ b/ui/src/Components/ManagedSilence/DeleteSilence.test.tsx @@ -59,17 +59,6 @@ afterEach(() => { const MockOnHide = jest.fn(); -const MountedDeleteSilence = () => { - return mount( - - ); -}; - const MountedDeleteSilenceModalContent = () => { return mount( { describe("", () => { it("label is 'Delete' by default", () => { - const tree = MountedDeleteSilence(); + const tree = mount( + + ); expect(tree.text()).toBe("Delete"); }); it("opens modal on click", () => { - const tree = MountedDeleteSilence(); + const tree = mount( + + ); tree.find("button.btn-danger").simulate("click"); expect(tree.find(".modal-body")).toHaveLength(1); }); it("closes modal on close button click", () => { - const tree = MountedDeleteSilence(); + const tree = mount( + + ); tree.find("button.btn-danger").simulate("click"); expect(tree.find(".modal-body")).toHaveLength(1); @@ -108,7 +118,14 @@ describe("", () => { }); it("closes modal on esc button press", () => { - const tree = MountedDeleteSilence(); + const tree = mount( + + ); tree.find("button.btn-danger").simulate("click"); expect(tree.find(".modal-body")).toHaveLength(1); @@ -122,7 +139,14 @@ describe("", () => { it("button is disabled when all alertmanager instances are read-only", () => { alertStore.data.upstreams.instances[0].readonly = true; - const tree = MountedDeleteSilence(); + const tree = mount( + + ); expect(tree.find("button").prop("disabled")).toBe(true); tree.find("button").at(0).simulate("click"); @@ -140,7 +164,9 @@ describe("", () => { it("unblurs silence form on unmount", () => { const tree = MountedDeleteSilenceModalContent(); expect(silenceFormStore.toggle.blurred).toBe(true); - tree.unmount(); + act(() => { + tree.unmount(); + }); expect(silenceFormStore.toggle.blurred).toBe(false); }); diff --git a/ui/src/Components/Modal/index.test.tsx b/ui/src/Components/Modal/index.test.tsx index adf9be845..c873ab05f 100644 --- a/ui/src/Components/Modal/index.test.tsx +++ b/ui/src/Components/Modal/index.test.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { act } from "react-dom/test-utils"; import { mount } from "enzyme"; @@ -61,7 +62,9 @@ describe("", () => { it("'modal-open' class is removed from body node after modal is unmounted", () => { const tree = MountedModal(true); - tree.unmount(); + act(() => { + tree.unmount(); + }); expect(document.body.className.split(" ")).not.toContain("modal-open"); }); @@ -88,7 +91,9 @@ describe("", () => { const tree = MountedModal(true, true); expect(document.body.className.split(" ")).toContain("modal-open"); - tree.unmount(); + act(() => { + tree.unmount(); + }); expect(document.body.className.split(" ")).toContain("modal-open"); }); diff --git a/ui/src/Hooks/useFetchAny.test.tsx b/ui/src/Hooks/useFetchAny.test.tsx index 343190f86..7eaa87386 100644 --- a/ui/src/Hooks/useFetchAny.test.tsx +++ b/ui/src/Hooks/useFetchAny.test.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { act } from "react-dom/test-utils"; import { renderHook } from "@testing-library/react-hooks"; @@ -176,7 +177,7 @@ describe("useFetchAny", () => { const upstreams = [{ uri: "http://localhost/slow/ok", options: {} }]; const Component = () => { - const { response, error, inProgress } = useFetchAny(upstreams); + const { response, error, inProgress } = useFetchAny(upstreams); return ( {response} @@ -201,7 +202,7 @@ describe("useFetchAny", () => { const upstreams = [{ uri: "http://localhost/slow/500", options: {} }]; const Component = () => { - const { response, error, inProgress } = useFetchAny(upstreams); + const { response, error, inProgress } = useFetchAny(upstreams); return ( {response} @@ -211,8 +212,10 @@ describe("useFetchAny", () => { ); }; - const tree = mount(); - tree.unmount(); + act(() => { + const tree = mount(); + tree.unmount(); + }); await fetchMock.flush(true); }); @@ -225,7 +228,7 @@ describe("useFetchAny", () => { const upstreams = [{ uri: "http://localhost/slow/error", options: {} }]; const Component = () => { - const { response, error, inProgress } = useFetchAny(upstreams); + const { response, error, inProgress } = useFetchAny(upstreams); return ( {response} @@ -235,8 +238,10 @@ describe("useFetchAny", () => { ); }; - const tree = mount(); - tree.unmount(); + act(() => { + const tree = mount(); + tree.unmount(); + }); await fetchMock.flush(true); }); @@ -332,7 +337,9 @@ describe("useFetchAny", () => { get: () => "text/plain", }, text: async () => { - tree.unmount(); + act(() => { + tree.unmount(); + }); return "ok"; }, }) @@ -340,7 +347,7 @@ describe("useFetchAny", () => { const upstreams = [{ uri: "http://localhost/slow/body", options: {} }]; const Component = () => { - const { response, error, inProgress } = useFetchAny(upstreams, { + const { response, error, inProgress } = useFetchAny(upstreams, { fetcher: fetcher, }); return ( @@ -352,6 +359,8 @@ describe("useFetchAny", () => { ); }; - tree = mount(); + act(() => { + tree = mount(); + }); }); }); diff --git a/ui/src/Hooks/useFetchDelete.test.tsx b/ui/src/Hooks/useFetchDelete.test.tsx index cdf2074c9..10ba12fba 100644 --- a/ui/src/Hooks/useFetchDelete.test.tsx +++ b/ui/src/Hooks/useFetchDelete.test.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { act } from "react-dom/test-utils"; import { renderHook } from "@testing-library/react-hooks"; @@ -155,8 +156,10 @@ describe("useFetchDelete", () => { ); }; - const tree = mount(); - tree.unmount(); + act(() => { + const tree = mount(); + tree.unmount(); + }); await fetchMock.flush(true); }); @@ -181,8 +184,10 @@ describe("useFetchDelete", () => { ); }; - const tree = mount(); - tree.unmount(); + act(() => { + const tree = mount(); + tree.unmount(); + }); await fetchMock.flush(true); }); diff --git a/ui/src/Hooks/useFetchGet.test.tsx b/ui/src/Hooks/useFetchGet.test.tsx index 62ea95f03..d444f70ce 100644 --- a/ui/src/Hooks/useFetchGet.test.tsx +++ b/ui/src/Hooks/useFetchGet.test.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { act as actReact } from "react-dom/test-utils"; import { renderHook, act } from "@testing-library/react-hooks"; @@ -252,8 +253,10 @@ describe("useFetchGet", () => { ); }; - const tree = mount(); - tree.unmount(); + actReact(() => { + const tree = mount(); + tree.unmount(); + }); for (let i = 0; i <= FetchRetryConfig.retries; i++) { jest.runOnlyPendingTimers(); @@ -281,8 +284,10 @@ describe("useFetchGet", () => { ); }; - const tree = mount(); - tree.unmount(); + actReact(() => { + const tree = mount(); + tree.unmount(); + }); for (let i = 0; i <= FetchRetryConfig.retries; i++) { jest.runOnlyPendingTimers(); @@ -309,8 +314,10 @@ describe("useFetchGet", () => { ); }; - const tree = mount(); - tree.unmount(); + actReact(() => { + const tree = mount(); + tree.unmount(); + }); for (let i = 0; i <= FetchRetryConfig.retries; i++) { jest.runOnlyPendingTimers(); @@ -338,8 +345,10 @@ describe("useFetchGet", () => { ); }; - const tree = mount(); - tree.unmount(); + actReact(() => { + const tree = mount(); + tree.unmount(); + }); jest.runOnlyPendingTimers(); await fetchMock.flush(true); @@ -364,8 +373,10 @@ describe("useFetchGet", () => { ); }; - const tree = mount(); - tree.unmount(); + actReact(() => { + const tree = mount(); + tree.unmount(); + }); jest.runOnlyPendingTimers(); await fetchMock.flush(true); @@ -381,7 +392,9 @@ describe("useFetchGet", () => { get: () => "text/plain", }, text: async () => { - tree.unmount(); + actReact(() => { + tree.unmount(); + }); return "ok"; }, } as any); @@ -401,6 +414,8 @@ describe("useFetchGet", () => { ); }; - tree = mount(); + actReact(() => { + tree = mount(); + }); }); });