github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-08-23 11:56:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): resolve lint errors

Browse Source
This commit is contained in:
Łukasz Mierzwa
2021-12-15 17:02:38 +00:00
committed by Łukasz Mierzwa
parent 15ae62e9c0
commit f9aa757101
24 changed files with 650 additions and 1160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/package-lock.json
Generated
+250 -751
View File
File diff suppressed because it is too large Load Diff
ui/package.json
-1
View File
@@ -85,7 +85,6 @@
"eslint-plugin-prettier": "4.0.0",
"fetch-mock": "9.11.0",
"jest-canvas-mock": "2.3.1",
"jest-date-mock": "1.0.8",
"prettier": "2.5.1",
"purgecss": "4.1.3",
"react-scripts": "5.0.0",
ui/src/Components/AlertAck/index.test.tsx
+3 -5
View File
@@ -4,8 +4,6 @@ import { mount } from "enzyme";
import toDiffableHtml from "diffable-html";
import { advanceTo, clear } from "jest-date-mock";
import fetchMock from "fetch-mock";
import { MockAlertGroup, MockAlert } from "__fixtures__/Alerts";
@@ -20,8 +18,8 @@ let alerts: APIAlertT[];
let group: APIAlertGroupT;
beforeEach(() => {
jest.useFakeTimers();
advanceTo(new Date(Date.UTC(2000, 1, 1, 0, 0, 0)));
jest.useFakeTimers("modern");
jest.setSystemTime(new Date(Date.UTC(2000, 1, 1, 0, 0, 0)));
alertStore = new AlertStore([]);
silenceFormStore = new SilenceFormStore();
@@ -92,7 +90,7 @@ afterEach(() => {
jest.clearAllTimers();
jest.clearAllMocks();
jest.restoreAllMocks();
clear();
jest.useRealTimers();
});
const MountedAlertAck = () => {
ui/src/Components/AlertHistory/index.test.tsx
+4 -7
View File
@@ -4,8 +4,6 @@ import { mount } from "enzyme";
import fetchMock from "fetch-mock";
import { advanceTo, advanceBy, clear } from "jest-date-mock";
import { useInView } from "react-intersection-observer";
import toDiffableHtml from "diffable-html";
@@ -59,8 +57,9 @@ const MockAlerts = (alertCount: number) => {
};
beforeEach(() => {
jest.useFakeTimers();
advanceTo(new Date(Date.UTC(2000, 1, 1, 0, 0, 0)));
jest.useFakeTimers("modern");
jest.setSystemTime(new Date(Date.UTC(2000, 1, 1, 0, 0, 0)));
group = MockGroup("fakeGroup");
grid = {
labelName: "foo",
@@ -78,7 +77,7 @@ beforeEach(() => {
afterEach(() => {
fetchMock.resetHistory();
fetchMock.reset();
clear();
jest.useRealTimers();
});
describe("<AlertHistory />", () => {
@@ -321,14 +320,12 @@ describe("<AlertHistory />", () => {
expect(fetchMock.calls()).toHaveLength(1);
await act(async () => {
advanceBy(1000 * 299);
jest.advanceTimersByTime(1000 * 299);
await fetchMock.flush(true);
});
expect(fetchMock.calls()).toHaveLength(1);
await act(async () => {
advanceBy(1000 * 2);
jest.advanceTimersByTime(1000 * 2);
await fetchMock.flush(true);
});
ui/src/Components/Fetcher/index.test.tsx
+30 -14
View File
@@ -6,8 +6,6 @@ import fetchMock from "fetch-mock";
import toDiffableHtml from "diffable-html";
import { advanceTo, advanceBy, clear } from "jest-date-mock";
import { EmptyAPIResponse } from "__fixtures__/Fetch";
import { AlertStore } from "Stores/AlertStore";
@@ -21,8 +19,8 @@ let fetchSpy: any;
let requestAnimationFrameSpy: any;
beforeEach(() => {
jest.useFakeTimers();
advanceTo(new Date(Date.UTC(2000, 1, 1, 0, 0, 0)));
jest.useFakeTimers("modern");
jest.setSystemTime(new Date(Date.UTC(2000, 1, 1, 0, 0, 0)));
alertStore = new AlertStore(["label=value"]);
fetchSpy = jest
@@ -51,7 +49,7 @@ afterEach(() => {
jest.clearAllTimers();
jest.clearAllMocks();
jest.restoreAllMocks();
clear();
jest.useRealTimers();
fetchMock.reset();
});
@@ -71,7 +69,9 @@ describe("<Fetcher />", () => {
mount(<Fetcher alertStore={alertStore} settingsStore={settingsStore} />);
expect(fetchSpy).toHaveBeenCalledTimes(1);
advanceBy(3 * 1000);
jest.setSystemTime(
new Date(Date.UTC(2000, 1, 1, 0, 0, 0)).getTime() + 3 * 1000
);
act(() => {
jest.runOnlyPendingTimers();
});
@@ -79,25 +79,33 @@ describe("<Fetcher />", () => {
settingsStore.fetchConfig.setInterval(600);
advanceBy(3 * 1000);
jest.setSystemTime(
new Date(Date.UTC(2000, 1, 1, 0, 0, 0)).getTime() + 6 * 1000
);
act(() => {
jest.runOnlyPendingTimers();
});
expect(fetchSpy).toHaveBeenCalledTimes(2);
advanceBy(32 * 1000);
jest.setSystemTime(
new Date(Date.UTC(2000, 1, 1, 0, 0, 0)).getTime() + 38 * 1000
);
act(() => {
jest.runOnlyPendingTimers();
});
expect(fetchSpy).toHaveBeenCalledTimes(2);
advanceBy(62 * 1000);
jest.setSystemTime(
new Date(Date.UTC(2000, 1, 1, 0, 0, 0)).getTime() + 100 * 1000
);
act(() => {
jest.runOnlyPendingTimers();
});
expect(fetchSpy).toHaveBeenCalledTimes(2);
advanceBy(602 * 1000);
jest.setSystemTime(
new Date(Date.UTC(2000, 1, 1, 0, 0, 0)).getTime() + 702 * 1000
);
act(() => {
jest.runOnlyPendingTimers();
});
@@ -125,19 +133,25 @@ describe("<Fetcher />", () => {
mount(<Fetcher alertStore={alertStore} settingsStore={settingsStore} />);
expect(fetchSpy).toHaveBeenCalledTimes(1);
advanceBy(62 * 1000);
jest.setSystemTime(
new Date(Date.UTC(2000, 1, 1, 0, 0, 0)).getTime() + 62 * 1000
);
act(() => {
jest.runOnlyPendingTimers();
});
expect(fetchSpy).toHaveBeenCalledTimes(2);
advanceBy(62 * 1000);
jest.setSystemTime(
new Date(Date.UTC(2000, 1, 1, 0, 0, 0)).getTime() + 124 * 1000
);
act(() => {
jest.runOnlyPendingTimers();
});
expect(fetchSpy).toHaveBeenCalledTimes(3);
advanceBy(62 * 1000);
jest.setSystemTime(
new Date(Date.UTC(2000, 1, 1, 0, 0, 0)).getTime() + 186 * 1000
);
act(() => {
jest.runOnlyPendingTimers();
});
@@ -405,7 +419,9 @@ describe("<Fetcher />", () => {
alertStore.status.pause();
mount(<Fetcher alertStore={alertStore} settingsStore={settingsStore} />);
alertStore.status.resume();
advanceBy(2 * 1000);
jest.setSystemTime(
new Date(Date.UTC(2000, 1, 1, 0, 0, 0)).getTime() + 2 * 1000
);
act(() => {
jest.runOnlyPendingTimers();
});
ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.tsx
+9 -11
View File
@@ -2,8 +2,6 @@ import { act } from "react-dom/test-utils";
import { mount } from "enzyme";
import { advanceTo, clear } from "jest-date-mock";
import toDiffableHtml from "diffable-html";
import {
@@ -25,7 +23,8 @@ let silenceFormStore: SilenceFormStore;
let grid: APIGridT;
beforeEach(() => {
advanceTo(new Date(Date.UTC(2018, 7, 15, 20, 40, 0)));
jest.useFakeTimers("modern");
jest.setSystemTime(new Date(Date.UTC(2018, 7, 15, 20, 40, 0)));
alertStore = new AlertStore([]);
silenceFormStore = new SilenceFormStore();
@@ -43,8 +42,7 @@ beforeEach(() => {
});
afterEach(() => {
// reset Date() to current time
clear();
jest.useRealTimers();
jest.restoreAllMocks();
});
@@ -380,7 +378,7 @@ describe("<Alert />", () => {
it("alert timestamp is updated every minute", () => {
jest.useFakeTimers();
advanceTo(new Date(Date.UTC(2018, 7, 14, 17, 36, 41)));
jest.setSystemTime(new Date(Date.UTC(2018, 7, 14, 17, 36, 41)));
const alert = MockedAlert();
const group = MockAlertGroup([], [alert], [], [], {});
@@ -392,7 +390,7 @@ describe("<Alert />", () => {
.text()
).toBe("just now");
advanceTo(new Date(Date.UTC(2018, 7, 14, 17, 36, 42)));
jest.setSystemTime(new Date(Date.UTC(2018, 7, 14, 17, 36, 42)));
act(() => {
jest.advanceTimersByTime(31 * 1000);
});
@@ -403,7 +401,7 @@ describe("<Alert />", () => {
.text()
).toBe("a few seconds ago");
advanceTo(new Date(Date.UTC(2018, 7, 14, 17, 37, 41)));
jest.setSystemTime(new Date(Date.UTC(2018, 7, 14, 17, 37, 41)));
act(() => {
jest.advanceTimersByTime(31 * 1000);
});
@@ -414,7 +412,7 @@ describe("<Alert />", () => {
.text()
).toBe("1 minute ago");
advanceTo(new Date(Date.UTC(2018, 7, 14, 18, 36, 41)));
jest.setSystemTime(new Date(Date.UTC(2018, 7, 14, 18, 36, 41)));
act(() => {
jest.advanceTimersByTime(31 * 1000);
});
@@ -425,7 +423,7 @@ describe("<Alert />", () => {
.text()
).toBe("1 hour ago");
advanceTo(new Date(Date.UTC(2018, 7, 14, 19, 36, 41)));
jest.setSystemTime(new Date(Date.UTC(2018, 7, 14, 19, 36, 41)));
act(() => {
jest.advanceTimersByTime(31 * 1000);
});
@@ -436,7 +434,7 @@ describe("<Alert />", () => {
.text()
).toBe("2 hours ago");
advanceTo(new Date(Date.UTC(2018, 7, 16, 19, 36, 41)));
jest.setSystemTime(new Date(Date.UTC(2018, 7, 16, 19, 36, 41)));
act(() => {
jest.advanceTimersByTime(31 * 1000);
});
ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.tsx
+4 -5
View File
@@ -2,8 +2,6 @@ import { mount } from "enzyme";
import toDiffableHtml from "diffable-html";
import { advanceTo, clear } from "jest-date-mock";
import {
MockAlertGroup,
MockAnnotation,
@@ -55,15 +53,16 @@ beforeEach(() => {
alertStore = new AlertStore([]);
silenceFormStore = new SilenceFormStore();
group = MockGroup();
advanceTo(new Date(Date.UTC(2000, 0, 1, 15, 0, 0)));
jest.useFakeTimers("modern");
jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 15, 0, 0)));
alertStore.data.setReceivers(["by-cluster-service", "by-name"]);
});
afterEach(() => {
jest.restoreAllMocks();
// reset Date() to current time
clear();
jest.useRealTimers();
});
const MountedGroupFooter = () => {
ui/src/Components/Grid/AlertGrid/AlertGroup/Silences.test.tsx
+3 -4
View File
@@ -2,8 +2,6 @@ import { mount } from "enzyme";
import toDiffableHtml from "diffable-html";
import { advanceTo, clear } from "jest-date-mock";
import { MockSilence } from "__fixtures__/Alerts";
import { AlertStore } from "Stores/AlertStore";
import { SilenceFormStore } from "Stores/SilenceFormStore";
@@ -17,11 +15,12 @@ describe("<RenderSilence />", () => {
alertStore = new AlertStore([]);
silenceFormStore = new SilenceFormStore();
advanceTo(new Date(Date.UTC(2000, 1, 1, 0, 0, 0)));
jest.useFakeTimers("modern");
jest.setSystemTime(new Date(Date.UTC(2000, 1, 1, 0, 0, 0)));
});
afterEach(() => {
clear();
jest.useRealTimers();
});
it("renders fallback text if silence is not present in AlertStore", () => {
ui/src/Components/Grid/AlertGrid/index.test.tsx
+5 -5
View File
@@ -3,8 +3,6 @@ import { act } from "react-dom/test-utils";
import { shallow, mount } from "enzyme";
import { advanceBy, clear } from "jest-date-mock";
import { MockAlert, MockAlertGroup } from "__fixtures__/Alerts";
import { mockMatchMedia } from "__fixtures__/matchMedia";
import {
@@ -61,7 +59,7 @@ afterEach(() => {
jest.clearAllTimers();
jest.clearAllMocks();
jest.restoreAllMocks();
clear();
jest.useRealTimers();
});
const MountedAlertGrid = () => {
@@ -451,11 +449,13 @@ describe("<Grid />", () => {
});
it("doesn't throw errors after FontFaceObserver timeout", () => {
jest.useFakeTimers();
jest.useFakeTimers("modern");
jest.setSystemTime(new Date(Date.UTC(2000, 1, 1, 0, 0, 0)));
MockGroupList(1, 1);
MountedGrid();
// skip a minute to trigger FontFaceObserver timeout handler
advanceBy(60 * 1000);
jest.setSystemTime(new Date(Date.UTC(2000, 1, 1, 0, 1, 0)));
act(() => {
jest.runOnlyPendingTimers();
});
ui/src/Components/Labels/FilteringCounterBadge/index.test.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { mount, render } from "enzyme";
import { mount } from "enzyme";
import { AlertStore, NewUnappliedFilter } from "Stores/AlertStore";
import { QueryOperators } from "Common/Query";
@@ -100,7 +100,7 @@ describe("<FilteringCounterBadge />", () => {
});
it("counter badge should have correct children based on the counter prop value", () => {
const tree = render(
const tree = mount(
<FilteringCounterBadge
alertStore={alertStore}
name="@state"
ui/src/Components/ManagedSilence/DeleteSilence.test.tsx
+4 -6
View File
@@ -2,8 +2,6 @@ import { act } from "react-dom/test-utils";
import { mount } from "enzyme";
import { advanceTo, clear } from "jest-date-mock";
import { MockSilence } from "__fixtures__/Alerts";
import { PressKey } from "__fixtures__/PressKey";
import { useFetchDelete } from "Hooks/useFetchDelete";
@@ -39,8 +37,8 @@ const generateUpstreams = (): APIAlertsResponseUpstreamsT => ({
});
beforeEach(() => {
advanceTo(new Date(Date.UTC(2000, 0, 1, 0, 30, 0)));
jest.useFakeTimers();
jest.useFakeTimers("modern");
jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 0, 30, 0)));
alertStore = new AlertStore([]);
silenceFormStore = new SilenceFormStore();
@@ -54,7 +52,7 @@ afterEach(() => {
(useFetchDelete as jest.MockedFunction<typeof useFetchDelete>).mockClear();
jest.restoreAllMocks();
clear();
jest.useRealTimers();
document.body.className = "";
});
@@ -329,7 +327,7 @@ describe("<DeleteSilenceModalContent />", () => {
tree.find(".btn-danger").simulate("click");
expect(useFetchDelete).toHaveBeenCalledTimes(1);
advanceTo(new Date(Date.UTC(2000, 0, 1, 0, 30, 1)));
jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 0, 30, 1)));
tree.find(".btn-danger").simulate("click");
expect(useFetchDelete).toHaveBeenCalledTimes(2);
});
ui/src/Components/ManagedSilence/SilenceComment.test.tsx
+3 -4
View File
@@ -1,7 +1,5 @@
import { mount } from "enzyme";
import { advanceTo, clear } from "jest-date-mock";
import toDiffableHtml from "diffable-html";
import { MockSilence } from "__fixtures__/Alerts";
@@ -13,7 +11,8 @@ let silence: APISilenceT;
let alertStore: AlertStore;
beforeEach(() => {
advanceTo(new Date(Date.UTC(2000, 0, 1, 0, 30, 0)));
jest.useFakeTimers("modern");
jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 0, 30, 0)));
silence = MockSilence();
alertStore = new AlertStore([]);
@@ -21,7 +20,7 @@ beforeEach(() => {
afterEach(() => {
jest.restoreAllMocks();
clear();
jest.useRealTimers();
});
const CollapseMock = jest.fn();
ui/src/Components/ManagedSilence/SilenceDetails.test.tsx
+4 -6
View File
@@ -4,8 +4,6 @@ import toDiffableHtml from "diffable-html";
import copy from "copy-to-clipboard";
import { advanceTo, clear } from "jest-date-mock";
import { MockSilence } from "__fixtures__/Alerts";
import type { APIAlertsResponseUpstreamsT, APISilenceT } from "Models/APITypes";
import { AlertStore } from "Stores/AlertStore";
@@ -47,12 +45,12 @@ beforeEach(() => {
alertStore.data.setUpstreams(generateUpstreams());
jest.restoreAllMocks();
jest.useFakeTimers("modern");
});
afterEach(() => {
jest.restoreAllMocks();
// reset Date() to current time
clear();
jest.useRealTimers();
});
const MountedSilenceDetails = () => {
@@ -69,14 +67,14 @@ const MountedSilenceDetails = () => {
describe("<SilenceDetails />", () => {
it("unexpired silence endsAt label doesn't use 'danger' class", () => {
advanceTo(new Date(Date.UTC(2000, 0, 1, 0, 30, 0)));
jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 0, 30, 0)));
const tree = MountedSilenceDetails();
const endsAt = tree.find("span.badge").at(1);
expect(toDiffableHtml(endsAt.html())).not.toMatch(/text-danger/);
});
it("expired silence endsAt label uses 'danger' class", () => {
advanceTo(new Date(Date.UTC(2000, 0, 1, 23, 0, 0)));
jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 23, 0, 0)));
const tree = MountedSilenceDetails();
const endsAt = tree.find("span.badge").at(1);
expect(toDiffableHtml(endsAt.html())).toMatch(/text-danger/);
ui/src/Components/ManagedSilence/SilenceProgress.test.tsx
+9 -11
View File
@@ -4,8 +4,6 @@ import { mount } from "enzyme";
import toDiffableHtml from "diffable-html";
import { advanceTo, clear } from "jest-date-mock";
import { MockSilence } from "__fixtures__/Alerts";
import type { APISilenceT } from "Models/APITypes";
import { SilenceProgress } from "./SilenceProgress";
@@ -16,13 +14,13 @@ beforeEach(() => {
silence = MockSilence();
jest.restoreAllMocks();
jest.useFakeTimers();
jest.useFakeTimers("modern");
});
afterEach(() => {
jest.restoreAllMocks();
// reset Date() to current time
clear();
jest.useRealTimers();
});
const MountedSilenceProgress = () => {
@@ -31,42 +29,42 @@ const MountedSilenceProgress = () => {
describe("<SilenceProgress />", () => {
it("renders with class 'danger' and no progressbar when expired", () => {
advanceTo(new Date(Date.UTC(2001, 0, 1, 23, 0, 0)));
jest.setSystemTime(new Date(Date.UTC(2001, 0, 1, 23, 0, 0)));
const tree = MountedSilenceProgress();
expect(toDiffableHtml(tree.html())).toMatch(/bg-danger/);
expect(tree.text()).toMatch(/Expired 1 year ago/);
});
it("progressbar uses class 'danger' when > 90%", () => {
advanceTo(new Date(Date.UTC(2000, 0, 1, 0, 55, 0)));
jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 0, 55, 0)));
const tree = MountedSilenceProgress();
expect(toDiffableHtml(tree.html())).toMatch(/progress-bar bg-danger/);
});
it("progressbar uses class 'danger' when > 75%", () => {
advanceTo(new Date(Date.UTC(2000, 0, 1, 0, 50, 0)));
jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 0, 50, 0)));
const tree = MountedSilenceProgress();
expect(toDiffableHtml(tree.html())).toMatch(/progress-bar bg-warning/);
});
it("progressbar uses class 'success' when <= 75%", () => {
advanceTo(new Date(Date.UTC(2000, 0, 1, 0, 30, 0)));
jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 0, 30, 0)));
const tree = MountedSilenceProgress();
expect(toDiffableHtml(tree.html())).toMatch(/progress-bar bg-success/);
});
it("progressbar is updated every 30 seconds", () => {
advanceTo(new Date(Date.UTC(2000, 0, 1, 0, 30, 0)));
jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 0, 30, 0)));
const tree = MountedSilenceProgress();
expect(toDiffableHtml(tree.html())).toMatch(/progress-bar bg-success/);
advanceTo(new Date(Date.UTC(2000, 0, 1, 0, 50, 0)));
jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 0, 50, 0)));
act(() => {
jest.runOnlyPendingTimers();
});
expect(toDiffableHtml(tree.html())).toMatch(/progress-bar bg-warning/);
advanceTo(new Date(Date.UTC(2000, 0, 1, 0, 55, 0)));
jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 0, 55, 0)));
act(() => {
jest.runOnlyPendingTimers();
});
ui/src/Components/ManagedSilence/index.test.tsx
+4 -5
View File
@@ -2,8 +2,6 @@ import { mount } from "enzyme";
import toDiffableHtml from "diffable-html";
import { advanceTo, clear } from "jest-date-mock";
import { MockSilence } from "__fixtures__/Alerts";
import { MockThemeContext } from "__fixtures__/Theme";
import type { APISilenceT } from "Models/APITypes";
@@ -18,7 +16,8 @@ let cluster: string;
let silence: APISilenceT;
beforeEach(() => {
advanceTo(new Date(Date.UTC(2000, 0, 1, 0, 30, 0)));
jest.useFakeTimers("modern");
jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 0, 30, 0)));
alertStore = new AlertStore([]);
silenceFormStore = new SilenceFormStore();
@@ -49,7 +48,7 @@ beforeEach(() => {
afterEach(() => {
jest.restoreAllMocks();
clear();
jest.useRealTimers();
});
const MountedManagedSilence = (onDidUpdate?: () => void) => {
@@ -169,7 +168,7 @@ describe("<ManagedSilence />", () => {
});
it("shows Recreate button on expired silence", () => {
advanceTo(new Date(Date.UTC(2000, 0, 1, 23, 30, 0)));
jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 23, 30, 0)));
const tree = MountedManagedSilence();
tree.find("svg.text-muted.cursor-pointer").simulate("click");
ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.tsx.snap
+216 -206
View File
@@ -2,228 +2,238 @@
exports[`<FilterInput /> matches snapshot with no filters 1`] = `
"
<div class=\\"input-group w-100 me-2 components-filterinput-outer bg-transparent\\">
<div class=\\"form-control components-filterinput border-0 rounded-0 bg-inherit\\">
<div
class=\\"autosuggest d-inline-block mw-100\\"
role=\\"combobox\\"
aria-haspopup=\\"listbox\\"
aria-owns=\\"downshift-0-menu\\"
aria-expanded=\\"false\\"
>
<span class=\\"input-group-text text-muted d-inline-block me-2 border-0 bg-inherit px-1\\">
<form
class=\\"flex-grow-1 flex-shrink-1 mr-auto\\"
style=\\"min-width: 0px;\\"
>
<div class=\\"input-group w-100 me-2 components-filterinput-outer bg-focused\\">
<div class=\\"form-control components-filterinput border-0 rounded-0 bg-inherit\\">
<div
class=\\"autosuggest d-inline-block mw-100\\"
role=\\"combobox\\"
aria-haspopup=\\"listbox\\"
aria-owns=\\"downshift-0-menu\\"
aria-expanded=\\"false\\"
>
<span class=\\"input-group-text text-muted d-inline-block me-2 border-0 bg-inherit px-1\\">
<svg
aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search\\"
class=\\"svg-inline--fa fa-search fa-w-16 \\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
<path
fill=\\"currentColor\\"
d=\\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\\"
>
</path>
</svg>
</span>
<input
class=\\"components-filterinput-wrapper text-white mw-100\\"
size=\\"1\\"
id=\\"downshift-0-input\\"
aria-autocomplete=\\"list\\"
aria-controls=\\"downshift-0-menu\\"
aria-labelledby=\\"downshift-0-label\\"
autocomplete=\\"off\\"
value
>
</div>
<span
class=\\"dropdown\\"
id=\\"downshift-0-menu\\"
role=\\"listbox\\"
aria-labelledby=\\"downshift-0-label\\"
>
</span>
</div>
<span class=\\"input-group-text border-0 rounded-0 bg-inherit px-0\\">
<button
class=\\"btn border-0 rounded-0 bg-inherit cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon\\"
type=\\"button\\"
data-toggle=\\"dropdown\\"
aria-haspopup=\\"true\\"
aria-expanded=\\"true\\"
>
<svg
aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search\\"
class=\\"svg-inline--fa fa-search fa-w-16 \\"
data-icon=\\"caret-down\\"
class=\\"svg-inline--fa fa-caret-down fa-w-10 \\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 320 512\\"
>
<path
fill=\\"currentColor\\"
d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
>
</path>
</svg>
</button>
</span>
</div>
</form>
"
`;
exports[`<FilterInput /> matches snapshot with some filters 1`] = `
"
<form
class=\\"flex-grow-1 flex-shrink-1 mr-auto\\"
style=\\"min-width: 0px;\\"
>
<div class=\\"input-group w-100 me-2 components-filterinput-outer bg-focused\\">
<div class=\\"form-control components-filterinput border-0 rounded-0 bg-inherit\\">
<button
type=\\"button\\"
class=\\"btn-secondary btn-sm components-filteredinputlabel components-label btn d-inline-flex flex-row align-items-center\\"
>
<svg
aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"spinner\\"
class=\\"svg-inline--fa fa-spinner fa-w-16 fa-spin \\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
<path
fill=\\"currentColor\\"
d=\\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\\"
d=\\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\\"
>
</path>
</svg>
<div class=\\"components-filteredinputlabel-text flex-grow-1 flex-shrink-1 ms-1 tooltip-trigger\\">
<span
tabindex=\\"0\\"
class=\\"cursor-text px-1\\"
>
foo=bar
</span>
</div>
<svg
aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"times\\"
class=\\"svg-inline--fa fa-times fa-w-11 cursor-pointer text-reset ms-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 352 512\\"
>
<path
fill=\\"currentColor\\"
d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"
>
</path>
</svg>
</button>
<button
type=\\"button\\"
class=\\"btn-secondary btn-sm components-filteredinputlabel components-label btn d-inline-flex flex-row align-items-center\\"
>
<svg
aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"spinner\\"
class=\\"svg-inline--fa fa-spinner fa-w-16 fa-spin \\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
<path
fill=\\"currentColor\\"
d=\\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\\"
>
</path>
</svg>
<div class=\\"components-filteredinputlabel-text flex-grow-1 flex-shrink-1 ms-1 tooltip-trigger\\">
<span
tabindex=\\"0\\"
class=\\"cursor-text px-1\\"
>
baz!=bar
</span>
</div>
<svg
aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"times\\"
class=\\"svg-inline--fa fa-times fa-w-11 cursor-pointer text-reset ms-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 352 512\\"
>
<path
fill=\\"currentColor\\"
d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"
>
</path>
</svg>
</button>
<div
class=\\"autosuggest d-inline-block mw-100\\"
role=\\"combobox\\"
aria-haspopup=\\"listbox\\"
aria-owns=\\"downshift-2-menu\\"
aria-expanded=\\"false\\"
>
<input
class=\\"components-filterinput-wrapper text-white mw-100\\"
size=\\"1\\"
id=\\"downshift-2-input\\"
aria-autocomplete=\\"list\\"
aria-controls=\\"downshift-2-menu\\"
aria-labelledby=\\"downshift-2-label\\"
autocomplete=\\"off\\"
value
>
</div>
<span
class=\\"dropdown\\"
id=\\"downshift-2-menu\\"
role=\\"listbox\\"
aria-labelledby=\\"downshift-2-label\\"
>
</span>
<input
class=\\"components-filterinput-wrapper text-white mw-100\\"
size=\\"1\\"
id=\\"downshift-0-input\\"
aria-autocomplete=\\"list\\"
aria-controls=\\"downshift-0-menu\\"
aria-labelledby=\\"downshift-0-label\\"
autocomplete=\\"off\\"
value
>
</div>
<span
class=\\"dropdown\\"
id=\\"downshift-0-menu\\"
role=\\"listbox\\"
aria-labelledby=\\"downshift-0-label\\"
>
<span class=\\"input-group-text border-0 rounded-0 bg-inherit px-0\\">
<button
class=\\"btn border-0 rounded-0 bg-inherit cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon\\"
type=\\"button\\"
data-toggle=\\"dropdown\\"
aria-haspopup=\\"true\\"
aria-expanded=\\"true\\"
>
<svg
aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"caret-down\\"
class=\\"svg-inline--fa fa-caret-down fa-w-10 \\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 320 512\\"
>
<path
fill=\\"currentColor\\"
d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
>
</path>
</svg>
</button>
</span>
</div>
<span class=\\"input-group-text border-0 rounded-0 bg-inherit px-0\\">
<button
class=\\"btn border-0 rounded-0 bg-inherit cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon\\"
type=\\"button\\"
data-toggle=\\"dropdown\\"
aria-haspopup=\\"true\\"
aria-expanded=\\"true\\"
>
<svg
aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"caret-down\\"
class=\\"svg-inline--fa fa-caret-down fa-w-10 \\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 320 512\\"
>
<path
fill=\\"currentColor\\"
d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
>
</path>
</svg>
</button>
</span>
</div>
"
`;
exports[`<FilterInput /> matches snapshot with some filters 1`] = `
"
<div class=\\"input-group w-100 me-2 components-filterinput-outer bg-transparent\\">
<div class=\\"form-control components-filterinput border-0 rounded-0 bg-inherit\\">
<button
type=\\"button\\"
class=\\"btn-secondary btn-sm components-filteredinputlabel components-label btn d-inline-flex flex-row align-items-center\\"
>
<svg
aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"spinner\\"
class=\\"svg-inline--fa fa-spinner fa-w-16 fa-spin \\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
<path
fill=\\"currentColor\\"
d=\\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\\"
>
</path>
</svg>
<div class=\\"components-filteredinputlabel-text flex-grow-1 flex-shrink-1 ms-1 tooltip-trigger\\">
<span
tabindex=\\"0\\"
class=\\"cursor-text px-1\\"
>
foo=bar
</span>
</div>
<svg
aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"times\\"
class=\\"svg-inline--fa fa-times fa-w-11 cursor-pointer text-reset ms-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 352 512\\"
>
<path
fill=\\"currentColor\\"
d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"
>
</path>
</svg>
</button>
<button
type=\\"button\\"
class=\\"btn-secondary btn-sm components-filteredinputlabel components-label btn d-inline-flex flex-row align-items-center\\"
>
<svg
aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"spinner\\"
class=\\"svg-inline--fa fa-spinner fa-w-16 fa-spin \\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
<path
fill=\\"currentColor\\"
d=\\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\\"
>
</path>
</svg>
<div class=\\"components-filteredinputlabel-text flex-grow-1 flex-shrink-1 ms-1 tooltip-trigger\\">
<span
tabindex=\\"0\\"
class=\\"cursor-text px-1\\"
>
baz!=bar
</span>
</div>
<svg
aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"times\\"
class=\\"svg-inline--fa fa-times fa-w-11 cursor-pointer text-reset ms-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 352 512\\"
>
<path
fill=\\"currentColor\\"
d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"
>
</path>
</svg>
</button>
<div
class=\\"autosuggest d-inline-block mw-100\\"
role=\\"combobox\\"
aria-haspopup=\\"listbox\\"
aria-owns=\\"downshift-1-menu\\"
aria-expanded=\\"false\\"
>
<input
class=\\"components-filterinput-wrapper text-white mw-100\\"
size=\\"1\\"
id=\\"downshift-1-input\\"
aria-autocomplete=\\"list\\"
aria-controls=\\"downshift-1-menu\\"
aria-labelledby=\\"downshift-1-label\\"
autocomplete=\\"off\\"
value
>
</div>
<span
class=\\"dropdown\\"
id=\\"downshift-1-menu\\"
role=\\"listbox\\"
aria-labelledby=\\"downshift-1-label\\"
>
</span>
</div>
<span class=\\"input-group-text border-0 rounded-0 bg-inherit px-0\\">
<button
class=\\"btn border-0 rounded-0 bg-inherit cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon\\"
type=\\"button\\"
data-toggle=\\"dropdown\\"
aria-haspopup=\\"true\\"
aria-expanded=\\"true\\"
>
<svg
aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"caret-down\\"
class=\\"svg-inline--fa fa-caret-down fa-w-10 \\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 320 512\\"
>
<path
fill=\\"currentColor\\"
d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
>
</path>
</svg>
</button>
</span>
</div>
</form>
"
`;
ui/src/Components/NavBar/FilterInput/index.test.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import { act } from "react-dom/test-utils";
import { mount, render } from "enzyme";
import { mount } from "enzyme";
import toDiffableHtml from "diffable-html";
@@ -39,7 +39,7 @@ const MountedInput = () => {
describe("<FilterInput />", () => {
it("matches snapshot with no filters", () => {
const tree = render(
const tree = mount(
<FilterInput alertStore={alertStore} settingsStore={settingsStore} />
);
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
@@ -51,7 +51,7 @@ describe("<FilterInput />", () => {
NewUnappliedFilter("foo=bar"),
NewUnappliedFilter("baz!=bar"),
]);
const tree = render(
const tree = mount(
<FilterInput alertStore={alertStore} settingsStore={settingsStore} />
);
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
ui/src/Components/PaginatedAlertList/index.test.tsx
+3 -5
View File
@@ -1,7 +1,5 @@
import { mount } from "enzyme";
import { advanceTo, clear } from "jest-date-mock";
import { useFetchGetMock } from "__fixtures__/useFetchGet";
import { AlertStore } from "Stores/AlertStore";
import { useFetchGet } from "Hooks/useFetchGet";
@@ -10,8 +8,8 @@ import { PaginatedAlertList } from ".";
let alertStore: AlertStore;
beforeEach(() => {
advanceTo(new Date(Date.UTC(2000, 0, 1, 0, 30, 0)));
jest.useFakeTimers();
jest.useFakeTimers("modern");
jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 0, 30, 0)));
alertStore = new AlertStore([]);
@@ -37,7 +35,7 @@ beforeEach(() => {
afterEach(() => {
jest.restoreAllMocks();
clear();
jest.useRealTimers();
document.body.className = "";
});
ui/src/Components/SilenceModal/Browser/index.test.tsx
+7 -9
View File
@@ -4,8 +4,6 @@ import { mount } from "enzyme";
import toDiffableHtml from "diffable-html";
import { advanceTo, clear } from "jest-date-mock";
import { useFetchGetMock } from "__fixtures__/useFetchGet";
import { MockSilence } from "__fixtures__/Alerts";
import { PressKey } from "__fixtures__/PressKey";
@@ -26,8 +24,8 @@ let silence: APISilenceT;
declare let global: any;
beforeEach(() => {
advanceTo(new Date(Date.UTC(2000, 0, 1, 0, 30, 0)));
jest.useFakeTimers();
jest.useFakeTimers("modern");
jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 0, 30, 0)));
alertStore = new AlertStore([]);
silenceFormStore = new SilenceFormStore();
@@ -60,7 +58,7 @@ beforeEach(() => {
afterEach(() => {
jest.restoreAllMocks();
jest.clearAllTimers();
clear();
jest.useRealTimers();
localStorage.setItem("fetchConfig.interval", "");
global.window.innerWidth = 1024;
@@ -107,17 +105,17 @@ describe("<Browser />", () => {
settingsStore.fetchConfig.setInterval(1);
MountedBrowser();
advanceTo(new Date(Date.UTC(2000, 0, 1, 0, 30, 2)));
jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 0, 30, 2)));
act(() => {
jest.runOnlyPendingTimers();
});
advanceTo(new Date(Date.UTC(2000, 0, 1, 0, 30, 4)));
jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 0, 30, 4)));
act(() => {
jest.runOnlyPendingTimers();
});
advanceTo(new Date(Date.UTC(2000, 0, 1, 0, 30, 6)));
jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 0, 30, 6)));
act(() => {
jest.runOnlyPendingTimers();
});
@@ -408,7 +406,7 @@ describe("<Browser />", () => {
tree.unmount();
act(() => {
advanceTo(new Date(Date.UTC(2000, 0, 1, 0, 30, 59)));
jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 0, 30, 59)));
jest.runOnlyPendingTimers();
});
ui/src/Components/SilenceModal/DateTimeSelect/index.test.tsx
+8 -8
View File
@@ -2,8 +2,6 @@ import { act } from "react-dom/test-utils";
import { mount, shallow } from "enzyme";
import { advanceTo, clear } from "jest-date-mock";
import toDiffableHtml from "diffable-html";
import addMinutes from "date-fns/addMinutes";
@@ -21,13 +19,15 @@ import {
let silenceFormStore: SilenceFormStore;
beforeEach(() => {
jest.useFakeTimers("modern");
silenceFormStore = new SilenceFormStore();
silenceFormStore.data.setStart(new Date(2060, 1, 1, 0, 0, 0));
silenceFormStore.data.setEnd(new Date(2061, 1, 1, 0, 0, 0));
});
afterEach(() => {
clear();
jest.useRealTimers();
});
const ShallowDateTimeSelect = () => {
@@ -56,7 +56,7 @@ describe("<DateTimeSelect />", () => {
});
it("'Duration' tab matches snapshot", () => {
advanceTo(new Date(2060, 1, 1, 0, 0, 0));
jest.setSystemTime(new Date(2060, 1, 1, 0, 0, 0));
const tree = MountedDateTimeSelect();
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
});
@@ -75,7 +75,7 @@ describe("<DateTimeSelect />", () => {
});
it("'Starts' tab matches snapshot", () => {
advanceTo(new Date(2060, 1, 1, 0, 0, 0));
jest.setSystemTime(new Date(2060, 1, 1, 0, 0, 0));
const tree = MountedDateTimeSelect();
tree.find(".nav-link").at(0).simulate("click");
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
@@ -96,7 +96,7 @@ describe("<DateTimeSelect />", () => {
});
it("'Ends' tab matches snapshot", () => {
advanceTo(new Date(2060, 1, 1, 0, 0, 0));
jest.setSystemTime(new Date(2060, 1, 1, 0, 0, 0));
const tree = MountedDateTimeSelect();
tree.find(".nav-link").at(1).simulate("click");
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
@@ -121,14 +121,14 @@ describe("<DateTimeSelect />", () => {
it("'Ends' tab offset badge is updated after 1 minute", () => {
jest.useFakeTimers();
advanceTo(new Date(2060, 1, 1, 12, 0, 0));
jest.setSystemTime(new Date(2060, 1, 1, 12, 0, 0));
silenceFormStore.data.setStart(new Date(2060, 1, 1, 12, 0, 0));
silenceFormStore.data.setEnd(new Date(2060, 1, 1, 13, 0, 0));
const tree = MountedDateTimeSelect();
expect(tree.find(".nav-link").at(1).text()).toBe("Endsin 1h ");
advanceTo(new Date(2060, 1, 1, 12, 1, 0));
jest.setSystemTime(new Date(2060, 1, 1, 12, 1, 0));
act(() => {
jest.runOnlyPendingTimers();
});
ui/src/Components/SilenceModal/PayloadPreview/__snapshots__/index.test.tsx.snap
+71 -69
View File
@@ -2,79 +2,81 @@
exports[`<PayloadPreview /> matches snapshot 1`] = `
"
<pre
class=\\"rounded p-1\\"
style=\\"line-height:1.3;color:#66d9ef;background:#272822;overflow:auto;\\"
>
{
<div>
<pre
class=\\"rounded p-1\\"
style=\\"line-height:1.3;color:#66d9ef;background:#272822;overflow:auto;\\"
>
{
\\"
<span
class=\\"__json-key__\\"
style=\\"color:#f92672;\\"
>
matchers
</span>
\\": [],
<span
class=\\"__json-key__\\"
style=\\"color:#f92672;\\"
>
matchers
</span>
\\": [],
\\"
<span
class=\\"__json-key__\\"
style=\\"color:#f92672;\\"
>
startsAt
</span>
\\":
<span
class=\\"__json-string__\\"
style=\\"color:#fd971f;\\"
>
\\"2000-02-01T00:00:00.000Z\\"
</span>
,
<span
class=\\"__json-key__\\"
style=\\"color:#f92672;\\"
>
startsAt
</span>
\\":
<span
class=\\"__json-string__\\"
style=\\"color:#fd971f;\\"
>
\\"2000-02-01T00:00:00.000Z\\"
</span>
,
\\"
<span
class=\\"__json-key__\\"
style=\\"color:#f92672;\\"
>
endsAt
</span>
\\":
<span
class=\\"__json-string__\\"
style=\\"color:#fd971f;\\"
>
\\"2000-02-01T01:00:00.000Z\\"
</span>
,
<span
class=\\"__json-key__\\"
style=\\"color:#f92672;\\"
>
endsAt
</span>
\\":
<span
class=\\"__json-string__\\"
style=\\"color:#fd971f;\\"
>
\\"2000-02-01T01:00:00.000Z\\"
</span>
,
\\"
<span
class=\\"__json-key__\\"
style=\\"color:#f92672;\\"
>
createdBy
</span>
\\":
<span
class=\\"__json-string__\\"
style=\\"color:#fd971f;\\"
>
\\"me@example.com\\"
</span>
,
<span
class=\\"__json-key__\\"
style=\\"color:#f92672;\\"
>
createdBy
</span>
\\":
<span
class=\\"__json-string__\\"
style=\\"color:#fd971f;\\"
>
\\"me@example.com\\"
</span>
,
\\"
<span
class=\\"__json-key__\\"
style=\\"color:#f92672;\\"
>
comment
</span>
\\":
<span
class=\\"__json-string__\\"
style=\\"color:#fd971f;\\"
>
\\"PayloadPreview test\\"
</span>
}
</pre>
<span
class=\\"__json-key__\\"
style=\\"color:#f92672;\\"
>
comment
</span>
\\":
<span
class=\\"__json-string__\\"
style=\\"color:#fd971f;\\"
>
\\"PayloadPreview test\\"
</span>
}
</pre>
</div>
"
`;
ui/src/Components/SilenceModal/PayloadPreview/index.test.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { render } from "enzyme";
import { mount } from "enzyme";
import toDiffableHtml from "diffable-html";
@@ -13,7 +13,7 @@ describe("<PayloadPreview />", () => {
silenceFormStore.data.setAuthor("me@example.com");
silenceFormStore.data.setComment("PayloadPreview test");
const tree = render(<PayloadPreview silenceFormStore={silenceFormStore} />);
const tree = mount(<PayloadPreview silenceFormStore={silenceFormStore} />);
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
});
});
ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitProgress.test.tsx
+6 -18
View File
@@ -259,9 +259,7 @@ describe("<SilenceSubmitProgress />", () => {
/>
);
await act(async () => {
await act(async () => {
await fetchMock.flush(true);
});
await fetchMock.flush(true);
});
tree.update();
expect(fetchMock.calls()).toHaveLength(2);
@@ -313,9 +311,7 @@ describe("<SilenceSubmitProgress />", () => {
/>
);
await act(async () => {
await act(async () => {
await fetchMock.flush(true);
});
await fetchMock.flush(true);
});
expect(fetchMock.calls()[0][0]).toBe(
"http://am1.example.com/api/v2/silences"
@@ -352,9 +348,7 @@ describe("<SilenceSubmitProgress />", () => {
/>
);
await act(async () => {
await act(async () => {
await fetchMock.flush(true);
});
await fetchMock.flush(true);
});
expect(fetchMock.calls()).toHaveLength(0);
expect(consoleSpy).toHaveBeenCalledTimes(2);
@@ -418,9 +412,7 @@ describe("<SilenceSubmitProgress />", () => {
/>
);
await act(async () => {
await act(async () => {
await fetchMock.flush(true);
});
await fetchMock.flush(true);
});
expect(fetchMock.calls()).toHaveLength(1);
expect(fetchMock.calls()[0][0]).toBe(
@@ -498,9 +490,7 @@ describe("<SilenceSubmitProgress />", () => {
it("renders silence link on successful fetch", async () => {
const tree = MountedSilenceSubmitProgress();
await act(async () => {
await act(async () => {
await fetchMock.flush(true);
});
await fetchMock.flush(true);
});
tree.update();
expect(
@@ -521,9 +511,7 @@ describe("<SilenceSubmitProgress />", () => {
});
const tree = MountedSilenceSubmitProgress();
await act(async () => {
await act(async () => {
await fetchMock.flush(true);
});
await fetchMock.flush(true);
});
tree.update();
expect(
ui/src/setupTests.ts
-3
View File
@@ -32,9 +32,6 @@ Enzyme.configure({ adapter: new Adapter() });
// favico.js needs canvas
require("jest-canvas-mock");
// used to mock current time since we render moment.fromNow() in some places
require("jest-date-mock");
// https://reactjs.org/blog/2019/08/08/react-v16.9.0.html#new-deprecations
const reactDeprecationWarning =
/.*has been renamed, and is not recommended for use.*/;