mirror of
https://github.com/prymitive/karma
synced 2026-05-19 04:26:41 +00:00
fix(tests): get rid of enzyme
This commit is contained in:
Lukasz Mierzwa
committed by
Łukasz Mierzwa
Łukasz Mierzwa
parent
a45a28d439
commit
aa0e3dd68e
@@ -1,6 +1,4 @@
|
||||
import { mount } from "enzyme";
|
||||
|
||||
import toDiffableHtml from "diffable-html";
|
||||
import { render, fireEvent, waitFor } from "@testing-library/react";
|
||||
|
||||
import { MockThemeContext } from "__fixtures__/Theme";
|
||||
import { Settings } from "Stores/Settings";
|
||||
@@ -13,61 +11,57 @@ beforeEach(() => {
|
||||
settingsStore = new Settings(null);
|
||||
});
|
||||
|
||||
const FakeConfiguration = () => {
|
||||
return mount(
|
||||
<AlertGroupCollapseConfiguration settingsStore={settingsStore} />,
|
||||
{
|
||||
wrappingComponent: ThemeContext.Provider,
|
||||
wrappingComponentProps: { value: MockThemeContext },
|
||||
},
|
||||
const renderConfiguration = () => {
|
||||
return render(
|
||||
<ThemeContext.Provider value={MockThemeContext}>
|
||||
<AlertGroupCollapseConfiguration settingsStore={settingsStore} />
|
||||
</ThemeContext.Provider>,
|
||||
);
|
||||
};
|
||||
|
||||
describe("<AlertGroupCollapseConfiguration />", () => {
|
||||
it("matches snapshot with default values", () => {
|
||||
const tree = FakeConfiguration();
|
||||
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
|
||||
const { asFragment } = renderConfiguration();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("resets stored config to defaults if it is invalid", (done) => {
|
||||
it("resets stored config to defaults if it is invalid", async () => {
|
||||
settingsStore.alertGroupConfig.setDefaultCollapseState("foo" as any);
|
||||
const tree = FakeConfiguration();
|
||||
const select = tree.find("div.react-select__value-container");
|
||||
expect(select.text()).toBe(
|
||||
const { container } = renderConfiguration();
|
||||
const select = container.querySelector("div.react-select__value-container");
|
||||
expect(select?.textContent).toBe(
|
||||
settingsStore.alertGroupConfig.options.collapsedOnMobile.label,
|
||||
);
|
||||
setTimeout(() => {
|
||||
await waitFor(() => {
|
||||
expect(settingsStore.alertGroupConfig.config.defaultCollapseState).toBe(
|
||||
settingsStore.alertGroupConfig.options.collapsedOnMobile.value,
|
||||
);
|
||||
done();
|
||||
}, 200);
|
||||
});
|
||||
});
|
||||
|
||||
it("rendered correct default value", (done) => {
|
||||
it("rendered correct default value", async () => {
|
||||
settingsStore.alertGroupConfig.setDefaultCollapseState("expanded");
|
||||
const tree = FakeConfiguration();
|
||||
const select = tree.find("div.react-select__value-container");
|
||||
setTimeout(() => {
|
||||
expect(select.text()).toBe(
|
||||
const { container } = renderConfiguration();
|
||||
const select = container.querySelector("div.react-select__value-container");
|
||||
await waitFor(() => {
|
||||
expect(select?.textContent).toBe(
|
||||
settingsStore.alertGroupConfig.options.expanded.label,
|
||||
);
|
||||
done();
|
||||
}, 200);
|
||||
});
|
||||
});
|
||||
|
||||
it("clicking on a label option updates settingsStore", (done) => {
|
||||
const tree = FakeConfiguration();
|
||||
tree
|
||||
.find("input#react-select-configuration-collapse-input")
|
||||
.simulate("change", { target: { value: " " } });
|
||||
const options = tree.find("div.react-select__option");
|
||||
options.at(1).simulate("click");
|
||||
setTimeout(() => {
|
||||
it("clicking on a label option updates settingsStore", async () => {
|
||||
const { container } = renderConfiguration();
|
||||
const input = container.querySelector(
|
||||
"input#react-select-configuration-collapse-input",
|
||||
);
|
||||
fireEvent.change(input!, { target: { value: " " } });
|
||||
const options = container.querySelectorAll("div.react-select__option");
|
||||
fireEvent.click(options[1]);
|
||||
await waitFor(() => {
|
||||
expect(settingsStore.alertGroupConfig.config.defaultCollapseState).toBe(
|
||||
settingsStore.alertGroupConfig.options.collapsed.value,
|
||||
);
|
||||
done();
|
||||
}, 200);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
import { mount } from "enzyme";
|
||||
|
||||
import toDiffableHtml from "diffable-html";
|
||||
import { render, fireEvent } from "@testing-library/react";
|
||||
|
||||
import { Settings } from "Stores/Settings";
|
||||
import { AlertGroupConfiguration } from "./AlertGroupConfiguration";
|
||||
@@ -11,38 +9,39 @@ beforeEach(() => {
|
||||
settingsStore = new Settings(null);
|
||||
});
|
||||
|
||||
const FakeConfiguration = () => {
|
||||
return mount(<AlertGroupConfiguration settingsStore={settingsStore} />);
|
||||
const renderConfiguration = () => {
|
||||
return render(<AlertGroupConfiguration settingsStore={settingsStore} />);
|
||||
};
|
||||
|
||||
describe("<AlertGroupConfiguration />", () => {
|
||||
it("matches snapshot with default values", () => {
|
||||
const tree = FakeConfiguration();
|
||||
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
|
||||
const { asFragment } = renderConfiguration();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("settings are updated on completed change", () => {
|
||||
const tree = FakeConfiguration();
|
||||
const { container } = renderConfiguration();
|
||||
expect(settingsStore.alertGroupConfig.config.defaultRenderCount).toBe(5);
|
||||
|
||||
const slider = tree.find(`div.input-range-thumb`).first();
|
||||
slider.simulate("click");
|
||||
const slider = container.querySelector("div.input-range-thumb");
|
||||
fireEvent.click(slider!);
|
||||
|
||||
slider.simulate("keyDown", { key: "ArrowLeft", keyCode: 37 });
|
||||
slider.simulate("keyUp", { key: "ArrowLeft", keyCode: 37 });
|
||||
fireEvent.keyDown(slider!, { key: "ArrowLeft", keyCode: 37 });
|
||||
fireEvent.keyUp(slider!, { key: "ArrowLeft", keyCode: 37 });
|
||||
|
||||
expect(settingsStore.alertGroupConfig.config.defaultRenderCount).toBe(4);
|
||||
|
||||
slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 });
|
||||
slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 });
|
||||
slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 });
|
||||
slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 });
|
||||
fireEvent.keyDown(slider!, { key: "ArrowRight", keyCode: 39 });
|
||||
fireEvent.keyUp(slider!, { key: "ArrowRight", keyCode: 39 });
|
||||
fireEvent.keyDown(slider!, { key: "ArrowRight", keyCode: 39 });
|
||||
fireEvent.keyUp(slider!, { key: "ArrowRight", keyCode: 39 });
|
||||
expect(settingsStore.alertGroupConfig.config.defaultRenderCount).toBe(6);
|
||||
});
|
||||
|
||||
it("custom interval value is rendered correctly", () => {
|
||||
settingsStore.alertGroupConfig.setDefaultRenderCount(4);
|
||||
const component = FakeConfiguration();
|
||||
expect(component.find("Range").props().values).toContain(4);
|
||||
const { container } = renderConfiguration();
|
||||
const thumb = container.querySelector(".input-range-thumb");
|
||||
expect(thumb).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
import { mount } from "enzyme";
|
||||
|
||||
import toDiffableHtml from "diffable-html";
|
||||
import { render, fireEvent } from "@testing-library/react";
|
||||
|
||||
import { MockThemeContext } from "__fixtures__/Theme";
|
||||
import { useFetchGetMock } from "__fixtures__/useFetchGet";
|
||||
@@ -18,33 +16,35 @@ afterEach(() => {
|
||||
jest.restoreAllMocks();
|
||||
});
|
||||
|
||||
const FakeConfiguration = () => {
|
||||
return mount(<AlertGroupSortConfiguration settingsStore={settingsStore} />, {
|
||||
wrappingComponent: ThemeContext.Provider,
|
||||
wrappingComponentProps: { value: MockThemeContext },
|
||||
});
|
||||
const renderConfiguration = () => {
|
||||
return render(
|
||||
<ThemeContext.Provider value={MockThemeContext}>
|
||||
<AlertGroupSortConfiguration settingsStore={settingsStore} />
|
||||
</ThemeContext.Provider>,
|
||||
);
|
||||
};
|
||||
|
||||
const ExpandSortLabelSuggestions = () => {
|
||||
const expandSortLabelSuggestions = () => {
|
||||
settingsStore.gridConfig.setSortOrder("label");
|
||||
const tree = FakeConfiguration();
|
||||
const view = renderConfiguration();
|
||||
|
||||
tree
|
||||
.find("input#react-select-configuration-sort-label-input")
|
||||
.simulate("change", { target: { value: "a" } });
|
||||
const input = view.container.querySelector(
|
||||
"input#react-select-configuration-sort-label-input",
|
||||
);
|
||||
fireEvent.change(input!, { target: { value: "c" } });
|
||||
|
||||
return tree;
|
||||
return view;
|
||||
};
|
||||
|
||||
describe("<AlertGroupSortConfiguration />", () => {
|
||||
it("matches snapshot with default values", () => {
|
||||
const tree = FakeConfiguration();
|
||||
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
|
||||
const { asFragment } = renderConfiguration();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("invalid sortOrder value is reset on mount", () => {
|
||||
settingsStore.gridConfig.setSortOrder("badValue" as any);
|
||||
FakeConfiguration();
|
||||
renderConfiguration();
|
||||
expect(settingsStore.gridConfig.config.sortOrder).toBe(
|
||||
settingsStore.gridConfig.options.default.value,
|
||||
);
|
||||
@@ -65,12 +65,14 @@ describe("<AlertGroupSortConfiguration />", () => {
|
||||
expect(settingsStore.gridConfig.config.sortOrder).toBe(
|
||||
settingsStore.gridConfig.options.label.value,
|
||||
);
|
||||
const tree = FakeConfiguration();
|
||||
const { container } = renderConfiguration();
|
||||
|
||||
tree
|
||||
.find("input#react-select-configuration-sort-order-input")
|
||||
.simulate("change", { target: { value: " " } });
|
||||
tree.find("div.react-select__option").at(2).simulate("click");
|
||||
const input = container.querySelector(
|
||||
"input#react-select-configuration-sort-order-input",
|
||||
);
|
||||
fireEvent.change(input!, { target: { value: " " } });
|
||||
const options = container.querySelectorAll("div.react-select__option");
|
||||
fireEvent.click(options[2]);
|
||||
|
||||
expect(settingsStore.gridConfig.config.sortOrder).toBe(
|
||||
settingsStore.gridConfig.options.startsAt.value,
|
||||
@@ -79,53 +81,57 @@ describe("<AlertGroupSortConfiguration />", () => {
|
||||
|
||||
it("reverse checkbox is not rendered when sort order is == 'default'", () => {
|
||||
settingsStore.gridConfig.setSortOrder("default");
|
||||
const tree = FakeConfiguration();
|
||||
const labelSelect = tree.find("#configuration-sort-reverse");
|
||||
expect(labelSelect).toHaveLength(0);
|
||||
const { container } = renderConfiguration();
|
||||
const labelSelect = container.querySelector("#configuration-sort-reverse");
|
||||
expect(labelSelect).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("reverse checkbox is not rendered when sort order is == 'disabled'", () => {
|
||||
settingsStore.gridConfig.setSortOrder("disabled");
|
||||
const tree = FakeConfiguration();
|
||||
const labelSelect = tree.find("#configuration-sort-reverse");
|
||||
expect(labelSelect).toHaveLength(0);
|
||||
const { container } = renderConfiguration();
|
||||
const labelSelect = container.querySelector("#configuration-sort-reverse");
|
||||
expect(labelSelect).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("reverse checkbox is rendered when sort order is = 'startsAt'", () => {
|
||||
settingsStore.gridConfig.setSortOrder("startsAt");
|
||||
const tree = FakeConfiguration();
|
||||
const labelSelect = tree.find("#configuration-sort-reverse");
|
||||
expect(labelSelect).toHaveLength(1);
|
||||
const { container } = renderConfiguration();
|
||||
const labelSelect = container.querySelector("#configuration-sort-reverse");
|
||||
expect(labelSelect).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("reverse checkbox is rendered when sort order is = 'label'", () => {
|
||||
settingsStore.gridConfig.setSortOrder("label");
|
||||
const tree = FakeConfiguration();
|
||||
const labelSelect = tree.find("#configuration-sort-reverse");
|
||||
expect(labelSelect).toHaveLength(1);
|
||||
const { container } = renderConfiguration();
|
||||
const labelSelect = container.querySelector("#configuration-sort-reverse");
|
||||
expect(labelSelect).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("label select is not rendered when sort order is != 'label'", () => {
|
||||
settingsStore.gridConfig.setSortOrder("disabled");
|
||||
const tree = FakeConfiguration();
|
||||
const labelSelect = tree.find("SortLabelName");
|
||||
expect(labelSelect).toHaveLength(0);
|
||||
const { container } = renderConfiguration();
|
||||
const labelSelect = container.querySelector(
|
||||
"input#react-select-configuration-sort-label-input",
|
||||
);
|
||||
expect(labelSelect).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("label select is rendered when sort order is == 'label'", () => {
|
||||
settingsStore.gridConfig.setSortOrder("label");
|
||||
const tree = FakeConfiguration();
|
||||
const labelSelect = tree.find("SortLabelName");
|
||||
expect(labelSelect).toHaveLength(1);
|
||||
const { container } = renderConfiguration();
|
||||
const labelSelect = container.querySelector(
|
||||
"input#react-select-configuration-sort-label-input",
|
||||
);
|
||||
expect(labelSelect).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("label select renders suggestions on click", () => {
|
||||
const tree = ExpandSortLabelSuggestions();
|
||||
const options = tree.find("div.react-select__option");
|
||||
const { container } = expandSortLabelSuggestions();
|
||||
const options = container.querySelectorAll("div.react-select__option");
|
||||
expect(options).toHaveLength(3);
|
||||
expect(options.at(0).text()).toBe("cluster");
|
||||
expect(options.at(1).text()).toBe("job");
|
||||
expect(options.at(2).text()).toBe("instance");
|
||||
expect(options[0].textContent).toBe("cluster");
|
||||
expect(options[1].textContent).toBe("instance");
|
||||
expect(options[2].textContent).toBe("New label: c");
|
||||
});
|
||||
|
||||
it("label select handles fetch errors", () => {
|
||||
@@ -138,27 +144,28 @@ describe("<AlertGroupSortConfiguration />", () => {
|
||||
get: jest.fn(),
|
||||
cancelGet: jest.fn(),
|
||||
});
|
||||
const tree = ExpandSortLabelSuggestions();
|
||||
const options = tree.find("div.react-select__option");
|
||||
expect(options).toHaveLength(0);
|
||||
const { container } = expandSortLabelSuggestions();
|
||||
const options = container.querySelectorAll("div.react-select__option");
|
||||
expect(options).toHaveLength(1);
|
||||
expect(options[0].textContent).toBe("New label: c");
|
||||
});
|
||||
|
||||
it("clicking on a label option updates settingsStore", () => {
|
||||
expect(settingsStore.gridConfig.config.sortLabel).toBeNull();
|
||||
const tree = ExpandSortLabelSuggestions();
|
||||
const options = tree.find("div.react-select__option");
|
||||
options.at(1).simulate("click");
|
||||
expect(settingsStore.gridConfig.config.sortLabel).toBe("job");
|
||||
const { container } = expandSortLabelSuggestions();
|
||||
const options = container.querySelectorAll("div.react-select__option");
|
||||
fireEvent.click(options[1]);
|
||||
expect(settingsStore.gridConfig.config.sortLabel).toBe("instance");
|
||||
});
|
||||
|
||||
it("clicking on the 'reverse' checkbox updates settingsStore", () => {
|
||||
settingsStore.gridConfig.setSortOrder("label");
|
||||
settingsStore.gridConfig.setSortReverse(false);
|
||||
const tree = FakeConfiguration();
|
||||
const checkbox = tree.find("#configuration-sort-reverse");
|
||||
const { container } = renderConfiguration();
|
||||
const checkbox = container.querySelector("#configuration-sort-reverse");
|
||||
|
||||
expect(settingsStore.gridConfig.config.reverseSort).toBe(false);
|
||||
checkbox.simulate("change", { target: { checked: true } });
|
||||
fireEvent.click(checkbox!);
|
||||
expect(settingsStore.gridConfig.config.reverseSort).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
import { mount } from "enzyme";
|
||||
|
||||
import toDiffableHtml from "diffable-html";
|
||||
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
|
||||
|
||||
import { Settings } from "Stores/Settings";
|
||||
import { AlertGroupTitleBarColor } from "./AlertGroupTitleBarColor";
|
||||
@@ -10,43 +8,41 @@ beforeEach(() => {
|
||||
settingsStore = new Settings(null);
|
||||
});
|
||||
|
||||
const FakeConfiguration = () => {
|
||||
return mount(<AlertGroupTitleBarColor settingsStore={settingsStore} />);
|
||||
const renderConfiguration = () => {
|
||||
return render(<AlertGroupTitleBarColor settingsStore={settingsStore} />);
|
||||
};
|
||||
|
||||
describe("<AlertGroupTitleBarColor />", () => {
|
||||
it("matches snapshot with default values", () => {
|
||||
const tree = FakeConfiguration();
|
||||
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
|
||||
const { asFragment } = renderConfiguration();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("colorTitleBar is 'false' by default", () => {
|
||||
expect(settingsStore.alertGroupConfig.config.colorTitleBar).toBe(false);
|
||||
});
|
||||
|
||||
it("unchecking the checkbox sets stored colorTitleBar value to 'false'", (done) => {
|
||||
const tree = FakeConfiguration();
|
||||
const checkbox = tree.find("#configuration-colortitlebar");
|
||||
it("unchecking the checkbox sets stored colorTitleBar value to 'false'", async () => {
|
||||
renderConfiguration();
|
||||
const checkbox = screen.getByRole("checkbox");
|
||||
|
||||
settingsStore.alertGroupConfig.setColorTitleBar(true);
|
||||
expect(settingsStore.alertGroupConfig.config.colorTitleBar).toBe(true);
|
||||
checkbox.simulate("change", { target: { checked: false } });
|
||||
setTimeout(() => {
|
||||
fireEvent.click(checkbox);
|
||||
await waitFor(() => {
|
||||
expect(settingsStore.alertGroupConfig.config.colorTitleBar).toBe(false);
|
||||
done();
|
||||
}, 200);
|
||||
});
|
||||
});
|
||||
|
||||
it("checking the checkbox sets stored colorTitleBar value to 'true'", (done) => {
|
||||
const tree = FakeConfiguration();
|
||||
const checkbox = tree.find("#configuration-colortitlebar");
|
||||
it("checking the checkbox sets stored colorTitleBar value to 'true'", async () => {
|
||||
renderConfiguration();
|
||||
const checkbox = screen.getByRole("checkbox");
|
||||
|
||||
settingsStore.alertGroupConfig.setColorTitleBar(false);
|
||||
expect(settingsStore.alertGroupConfig.config.colorTitleBar).toBe(false);
|
||||
checkbox.simulate("change", { target: { checked: true } });
|
||||
setTimeout(() => {
|
||||
fireEvent.click(checkbox);
|
||||
await waitFor(() => {
|
||||
expect(settingsStore.alertGroupConfig.config.colorTitleBar).toBe(true);
|
||||
done();
|
||||
}, 200);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
import { mount } from "enzyme";
|
||||
|
||||
import toDiffableHtml from "diffable-html";
|
||||
import { render, fireEvent } from "@testing-library/react";
|
||||
|
||||
import { Settings } from "Stores/Settings";
|
||||
import { AlertGroupWidthConfiguration } from "./AlertGroupWidthConfiguration";
|
||||
@@ -10,39 +8,40 @@ beforeEach(() => {
|
||||
settingsStore = new Settings(null);
|
||||
});
|
||||
|
||||
const FakeConfiguration = () => {
|
||||
return mount(<AlertGroupWidthConfiguration settingsStore={settingsStore} />);
|
||||
const renderConfiguration = () => {
|
||||
return render(<AlertGroupWidthConfiguration settingsStore={settingsStore} />);
|
||||
};
|
||||
|
||||
describe("<AlertGroupWidthConfiguration />", () => {
|
||||
it("matches snapshot with default values", () => {
|
||||
const tree = FakeConfiguration();
|
||||
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
|
||||
const { asFragment } = renderConfiguration();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("settings are updated on completed change", () => {
|
||||
const tree = FakeConfiguration();
|
||||
const { container } = renderConfiguration();
|
||||
expect(settingsStore.gridConfig.config.groupWidth).toBe(420);
|
||||
|
||||
const slider = tree.find(`div.input-range-thumb`).first();
|
||||
slider.simulate("click");
|
||||
const slider = container.querySelector("div.input-range-thumb");
|
||||
fireEvent.click(slider!);
|
||||
|
||||
slider.simulate("keyDown", { key: "ArrowLeft", keyCode: 37 });
|
||||
slider.simulate("keyUp", { key: "ArrowLeft", keyCode: 37 });
|
||||
fireEvent.keyDown(slider!, { key: "ArrowLeft", keyCode: 37 });
|
||||
fireEvent.keyUp(slider!, { key: "ArrowLeft", keyCode: 37 });
|
||||
|
||||
expect(settingsStore.gridConfig.config.groupWidth).toBe(410);
|
||||
|
||||
slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 });
|
||||
slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 });
|
||||
slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 });
|
||||
slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 });
|
||||
fireEvent.keyDown(slider!, { key: "ArrowRight", keyCode: 39 });
|
||||
fireEvent.keyUp(slider!, { key: "ArrowRight", keyCode: 39 });
|
||||
fireEvent.keyDown(slider!, { key: "ArrowRight", keyCode: 39 });
|
||||
fireEvent.keyUp(slider!, { key: "ArrowRight", keyCode: 39 });
|
||||
|
||||
expect(settingsStore.gridConfig.config.groupWidth).toBe(430);
|
||||
});
|
||||
|
||||
it("custom interval value is rendered correctly", () => {
|
||||
settingsStore.gridConfig.setGroupWidth(460);
|
||||
const component = FakeConfiguration();
|
||||
expect(component.find("Range").props().values).toContain(460);
|
||||
const { container } = renderConfiguration();
|
||||
const thumb = container.querySelector(".input-range-thumb");
|
||||
expect(thumb).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
import { mount } from "enzyme";
|
||||
|
||||
import toDiffableHtml from "diffable-html";
|
||||
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
|
||||
|
||||
import { Settings } from "Stores/Settings";
|
||||
import { AnimationsConfiguration } from "./AnimationsConfiguration";
|
||||
@@ -10,43 +8,41 @@ beforeEach(() => {
|
||||
settingsStore = new Settings(null);
|
||||
});
|
||||
|
||||
const FakeConfiguration = () => {
|
||||
return mount(<AnimationsConfiguration settingsStore={settingsStore} />);
|
||||
const renderConfiguration = () => {
|
||||
return render(<AnimationsConfiguration settingsStore={settingsStore} />);
|
||||
};
|
||||
|
||||
describe("<AnimationsConfiguration />", () => {
|
||||
it("matches snapshot with default values", () => {
|
||||
const tree = FakeConfiguration();
|
||||
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
|
||||
const { asFragment } = renderConfiguration();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("animations is 'true' by default", () => {
|
||||
expect(settingsStore.themeConfig.config.animations).toBe(true);
|
||||
});
|
||||
|
||||
it("unchecking the checkbox sets stored animations value to 'false'", (done) => {
|
||||
const tree = FakeConfiguration();
|
||||
const checkbox = tree.find("#configuration-animations");
|
||||
it("unchecking the checkbox sets stored animations value to 'false'", async () => {
|
||||
renderConfiguration();
|
||||
const checkbox = screen.getByRole("checkbox");
|
||||
|
||||
settingsStore.themeConfig.setAnimations(true);
|
||||
expect(settingsStore.themeConfig.config.animations).toBe(true);
|
||||
checkbox.simulate("change", { target: { checked: false } });
|
||||
setTimeout(() => {
|
||||
fireEvent.click(checkbox);
|
||||
await waitFor(() => {
|
||||
expect(settingsStore.themeConfig.config.animations).toBe(false);
|
||||
done();
|
||||
}, 200);
|
||||
});
|
||||
});
|
||||
|
||||
it("checking the checkbox sets stored animations value to 'true'", (done) => {
|
||||
const tree = FakeConfiguration();
|
||||
const checkbox = tree.find("#configuration-animations");
|
||||
it("checking the checkbox sets stored animations value to 'true'", async () => {
|
||||
renderConfiguration();
|
||||
const checkbox = screen.getByRole("checkbox");
|
||||
|
||||
settingsStore.themeConfig.setAnimations(false);
|
||||
expect(settingsStore.themeConfig.config.animations).toBe(false);
|
||||
checkbox.simulate("change", { target: { checked: true } });
|
||||
setTimeout(() => {
|
||||
fireEvent.click(checkbox);
|
||||
await waitFor(() => {
|
||||
expect(settingsStore.themeConfig.config.animations).toBe(true);
|
||||
done();
|
||||
}, 200);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
import { mount } from "enzyme";
|
||||
|
||||
import toDiffableHtml from "diffable-html";
|
||||
import { render, fireEvent } from "@testing-library/react";
|
||||
|
||||
import { Settings } from "Stores/Settings";
|
||||
import { FetchConfiguration } from "./FetchConfiguration";
|
||||
@@ -10,39 +8,40 @@ beforeEach(() => {
|
||||
settingsStore = new Settings(null);
|
||||
});
|
||||
|
||||
const FakeConfiguration = () => {
|
||||
return mount(<FetchConfiguration settingsStore={settingsStore} />);
|
||||
const renderConfiguration = () => {
|
||||
return render(<FetchConfiguration settingsStore={settingsStore} />);
|
||||
};
|
||||
|
||||
describe("<FetchConfiguration />", () => {
|
||||
it("matches snapshot with default values", () => {
|
||||
const tree = FakeConfiguration();
|
||||
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
|
||||
const { asFragment } = renderConfiguration();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("settings are updated on completed change", () => {
|
||||
const tree = FakeConfiguration();
|
||||
const { container } = renderConfiguration();
|
||||
expect(settingsStore.fetchConfig.config.interval).toBe(30);
|
||||
|
||||
const slider = tree.find(`div.input-range-thumb`).first();
|
||||
slider.simulate("click");
|
||||
const slider = container.querySelector("div.input-range-thumb");
|
||||
fireEvent.click(slider!);
|
||||
|
||||
slider.simulate("keyDown", { key: "ArrowLeft", keyCode: 37 });
|
||||
slider.simulate("keyUp", { key: "ArrowLeft", keyCode: 37 });
|
||||
fireEvent.keyDown(slider!, { key: "ArrowLeft", keyCode: 37 });
|
||||
fireEvent.keyUp(slider!, { key: "ArrowLeft", keyCode: 37 });
|
||||
|
||||
expect(settingsStore.fetchConfig.config.interval).toBe(20);
|
||||
|
||||
slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 });
|
||||
slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 });
|
||||
slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 });
|
||||
slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 });
|
||||
fireEvent.keyDown(slider!, { key: "ArrowRight", keyCode: 39 });
|
||||
fireEvent.keyUp(slider!, { key: "ArrowRight", keyCode: 39 });
|
||||
fireEvent.keyDown(slider!, { key: "ArrowRight", keyCode: 39 });
|
||||
fireEvent.keyUp(slider!, { key: "ArrowRight", keyCode: 39 });
|
||||
|
||||
expect(settingsStore.fetchConfig.config.interval).toBe(40);
|
||||
});
|
||||
|
||||
it("custom interval value is rendered correctly", () => {
|
||||
settingsStore.fetchConfig.setInterval(70);
|
||||
const component = FakeConfiguration();
|
||||
expect(component.find("Range").props().values).toContain(70);
|
||||
const { container } = renderConfiguration();
|
||||
const thumb = container.querySelector(".input-range-thumb");
|
||||
expect(thumb).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
import { mount } from "enzyme";
|
||||
|
||||
import toDiffableHtml from "diffable-html";
|
||||
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
|
||||
|
||||
import { Settings } from "Stores/Settings";
|
||||
import { FilterBarConfiguration } from "./FilterBarConfiguration";
|
||||
@@ -10,37 +8,36 @@ beforeEach(() => {
|
||||
settingsStore = new Settings(null);
|
||||
});
|
||||
|
||||
const FakeConfiguration = () => {
|
||||
return mount(<FilterBarConfiguration settingsStore={settingsStore} />);
|
||||
const renderConfiguration = () => {
|
||||
return render(<FilterBarConfiguration settingsStore={settingsStore} />);
|
||||
};
|
||||
|
||||
describe("<FilterBarConfiguration />", () => {
|
||||
it("matches snapshot with default values", () => {
|
||||
const tree = FakeConfiguration();
|
||||
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
|
||||
const { asFragment } = renderConfiguration();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("unchecking the checkbox sets stored autohide value to 'false'", (done) => {
|
||||
const tree = FakeConfiguration();
|
||||
const checkbox = tree.find("#configuration-autohide");
|
||||
it("unchecking the checkbox sets stored autohide value to 'false'", async () => {
|
||||
renderConfiguration();
|
||||
const checkbox = screen.getByRole("checkbox");
|
||||
|
||||
expect(settingsStore.filterBarConfig.config.autohide).toBe(true);
|
||||
checkbox.simulate("change", { target: { checked: false } });
|
||||
setTimeout(() => {
|
||||
fireEvent.click(checkbox);
|
||||
await waitFor(() => {
|
||||
expect(settingsStore.filterBarConfig.config.autohide).toBe(false);
|
||||
done();
|
||||
}, 200);
|
||||
});
|
||||
});
|
||||
|
||||
it("checking the checkbox sets stored autohide value to 'true'", (done) => {
|
||||
const tree = FakeConfiguration();
|
||||
const checkbox = tree.find("#configuration-autohide");
|
||||
it("checking the checkbox sets stored autohide value to 'true'", async () => {
|
||||
renderConfiguration();
|
||||
const checkbox = screen.getByRole("checkbox");
|
||||
|
||||
settingsStore.filterBarConfig.setAutohide(false);
|
||||
expect(settingsStore.filterBarConfig.config.autohide).toBe(false);
|
||||
checkbox.simulate("change", { target: { checked: true } });
|
||||
setTimeout(() => {
|
||||
fireEvent.click(checkbox);
|
||||
await waitFor(() => {
|
||||
expect(settingsStore.filterBarConfig.config.autohide).toBe(true);
|
||||
done();
|
||||
}, 200);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import { mount } from "enzyme";
|
||||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
|
||||
import fetchMock from "fetch-mock";
|
||||
|
||||
import toDiffableHtml from "diffable-html";
|
||||
|
||||
import { MockThemeContext } from "__fixtures__/Theme";
|
||||
import { useFetchGetMock } from "__fixtures__/useFetchGet";
|
||||
import { Settings } from "Stores/Settings";
|
||||
@@ -24,46 +22,48 @@ afterEach(() => {
|
||||
jest.restoreAllMocks();
|
||||
});
|
||||
|
||||
const FakeConfiguration = () => {
|
||||
return mount(<MultiGridConfiguration settingsStore={settingsStore} />, {
|
||||
wrappingComponent: ThemeContext.Provider,
|
||||
wrappingComponentProps: { value: MockThemeContext },
|
||||
});
|
||||
const renderConfiguration = () => {
|
||||
return render(
|
||||
<ThemeContext.Provider value={MockThemeContext}>
|
||||
<MultiGridConfiguration settingsStore={settingsStore} />
|
||||
</ThemeContext.Provider>,
|
||||
);
|
||||
};
|
||||
|
||||
const ExpandSortLabelSuggestions = () => {
|
||||
const expandSortLabelSuggestions = () => {
|
||||
settingsStore.gridConfig.setSortOrder("label");
|
||||
const tree = FakeConfiguration();
|
||||
const view = renderConfiguration();
|
||||
|
||||
tree
|
||||
.find("input#react-select-configuration-grid-label-input")
|
||||
.simulate("change", { target: { value: "a" } });
|
||||
const input = view.container.querySelector(
|
||||
"input#react-select-configuration-grid-label-input",
|
||||
);
|
||||
fireEvent.change(input!, { target: { value: " " } });
|
||||
|
||||
return tree;
|
||||
return view;
|
||||
};
|
||||
|
||||
describe("<MultiGridConfiguration />", () => {
|
||||
it("matches snapshot with default values", () => {
|
||||
const tree = FakeConfiguration();
|
||||
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
|
||||
const { asFragment } = renderConfiguration();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("correctly renders default option when multi-grid is disabled", () => {
|
||||
settingsStore.multiGridConfig.setGridLabel("");
|
||||
const tree = FakeConfiguration();
|
||||
expect(tree.find("SelectContainer").text()).toBe("Disable multi-grid");
|
||||
renderConfiguration();
|
||||
expect(screen.getByText("Disable multi-grid")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("correctly renders default option when multi-grid is set to @auto", () => {
|
||||
settingsStore.multiGridConfig.setGridLabel("@auto");
|
||||
const tree = FakeConfiguration();
|
||||
expect(tree.find("SelectContainer").text()).toBe("Automatic selection");
|
||||
renderConfiguration();
|
||||
expect(screen.getByText("Automatic selection")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("correctly renders default option when multi-grid is enabled", () => {
|
||||
settingsStore.multiGridConfig.setGridLabel("cluster");
|
||||
const tree = FakeConfiguration();
|
||||
expect(tree.find("SelectContainer").text()).toBe("cluster");
|
||||
renderConfiguration();
|
||||
expect(screen.getByText("cluster")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("label select handles fetch errors", () => {
|
||||
@@ -76,30 +76,33 @@ describe("<MultiGridConfiguration />", () => {
|
||||
get: jest.fn(),
|
||||
cancelGet: jest.fn(),
|
||||
});
|
||||
const tree = ExpandSortLabelSuggestions();
|
||||
const options = tree.find("div.react-select__option");
|
||||
expect(options).toHaveLength(5);
|
||||
expect(options.at(0).text()).toBe("Disable multi-grid");
|
||||
expect(options.at(1).text()).toBe("Automatic selection");
|
||||
expect(options.at(2).text()).toBe("@alertmanager");
|
||||
expect(options.at(3).text()).toBe("@cluster");
|
||||
expect(options.at(4).text()).toBe("@receiver");
|
||||
const { container } = expandSortLabelSuggestions();
|
||||
const options = container.querySelectorAll("div.react-select__option");
|
||||
expect(options).toHaveLength(6);
|
||||
expect(options[0].textContent).toBe("Disable multi-grid");
|
||||
expect(options[1].textContent).toBe("Automatic selection");
|
||||
expect(options[2].textContent).toBe("@alertmanager");
|
||||
expect(options[3].textContent).toBe("@cluster");
|
||||
expect(options[4].textContent).toBe("@receiver");
|
||||
expect(options[5].textContent).toBe("New label: ");
|
||||
});
|
||||
|
||||
it("clicking on a label option updates settingsStore", () => {
|
||||
const tree = ExpandSortLabelSuggestions();
|
||||
const options = tree.find("div.react-select__option");
|
||||
options.at(6).simulate("click");
|
||||
expect(settingsStore.multiGridConfig.config.gridLabel).toBe("job");
|
||||
const { container } = expandSortLabelSuggestions();
|
||||
const options = container.querySelectorAll("div.react-select__option");
|
||||
fireEvent.click(options[3]);
|
||||
expect(settingsStore.multiGridConfig.config.gridLabel).toBe("@cluster");
|
||||
});
|
||||
|
||||
it("clicking on the 'reverse' checkbox updates settingsStore", () => {
|
||||
settingsStore.gridConfig.setSortReverse(false);
|
||||
const tree = FakeConfiguration();
|
||||
const checkbox = tree.find("#configuration-multigrid-sort-reverse");
|
||||
settingsStore.multiGridConfig.setGridSortReverse(false);
|
||||
const { container } = renderConfiguration();
|
||||
const checkbox = container.querySelector(
|
||||
"#configuration-multigrid-sort-reverse",
|
||||
);
|
||||
|
||||
expect(settingsStore.gridConfig.config.reverseSort).toBe(false);
|
||||
checkbox.simulate("change", { target: { checked: true } });
|
||||
expect(settingsStore.multiGridConfig.config.gridSortReverse).toBe(false);
|
||||
fireEvent.click(checkbox!);
|
||||
expect(settingsStore.multiGridConfig.config.gridSortReverse).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
import { mount } from "enzyme";
|
||||
|
||||
import toDiffableHtml from "diffable-html";
|
||||
import { render, fireEvent, waitFor } from "@testing-library/react";
|
||||
|
||||
import { MockThemeContext } from "__fixtures__/Theme";
|
||||
import { Settings, ThemeT } from "Stores/Settings";
|
||||
@@ -13,54 +11,57 @@ beforeEach(() => {
|
||||
settingsStore = new Settings(null);
|
||||
});
|
||||
|
||||
const FakeConfiguration = () => {
|
||||
return mount(<ThemeConfiguration settingsStore={settingsStore} />, {
|
||||
wrappingComponent: ThemeContext.Provider,
|
||||
wrappingComponentProps: { value: MockThemeContext },
|
||||
});
|
||||
const renderConfiguration = () => {
|
||||
return render(
|
||||
<ThemeContext.Provider value={MockThemeContext}>
|
||||
<ThemeConfiguration settingsStore={settingsStore} />
|
||||
</ThemeContext.Provider>,
|
||||
);
|
||||
};
|
||||
|
||||
describe("<ThemeConfiguration />", () => {
|
||||
it("matches snapshot with default values", () => {
|
||||
const tree = FakeConfiguration();
|
||||
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
|
||||
const { asFragment } = renderConfiguration();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("resets stored config to defaults if it is invalid", (done) => {
|
||||
it("resets stored config to defaults if it is invalid", async () => {
|
||||
settingsStore.themeConfig.setTheme("foo" as ThemeT);
|
||||
const tree = FakeConfiguration();
|
||||
const select = tree.find("div.react-select__value-container");
|
||||
expect(select.text()).toBe(settingsStore.themeConfig.options.auto.label);
|
||||
setTimeout(() => {
|
||||
const { container } = renderConfiguration();
|
||||
const select = container.querySelector("div.react-select__value-container");
|
||||
expect(select?.textContent).toBe(
|
||||
settingsStore.themeConfig.options.auto.label,
|
||||
);
|
||||
await waitFor(() => {
|
||||
expect(settingsStore.themeConfig.config.theme).toBe(
|
||||
settingsStore.themeConfig.options.auto.value,
|
||||
);
|
||||
done();
|
||||
}, 200);
|
||||
});
|
||||
});
|
||||
|
||||
it("rendered correct default value", (done) => {
|
||||
it("rendered correct default value", async () => {
|
||||
settingsStore.themeConfig.setTheme("auto");
|
||||
const tree = FakeConfiguration();
|
||||
const select = tree.find("div.react-select__value-container");
|
||||
setTimeout(() => {
|
||||
expect(select.text()).toBe(settingsStore.themeConfig.options.auto.label);
|
||||
done();
|
||||
}, 200);
|
||||
const { container } = renderConfiguration();
|
||||
const select = container.querySelector("div.react-select__value-container");
|
||||
await waitFor(() => {
|
||||
expect(select?.textContent).toBe(
|
||||
settingsStore.themeConfig.options.auto.label,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
it("clicking on a label option updates settingsStore", (done) => {
|
||||
const tree = FakeConfiguration();
|
||||
tree
|
||||
.find("input#react-select-configuration-theme-input")
|
||||
.simulate("change", { target: { value: " " } });
|
||||
const options = tree.find("div.react-select__option");
|
||||
options.at(1).simulate("click");
|
||||
setTimeout(() => {
|
||||
it("clicking on a label option updates settingsStore", async () => {
|
||||
const { container } = renderConfiguration();
|
||||
const input = container.querySelector(
|
||||
"input#react-select-configuration-theme-input",
|
||||
);
|
||||
fireEvent.change(input!, { target: { value: " " } });
|
||||
const options = container.querySelectorAll("div.react-select__option");
|
||||
fireEvent.click(options[1]);
|
||||
await waitFor(() => {
|
||||
expect(settingsStore.themeConfig.config.theme).toBe(
|
||||
settingsStore.themeConfig.options.dark.value,
|
||||
);
|
||||
done();
|
||||
}, 200);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,72 +1,84 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<AlertGroupCollapseConfiguration /> matches snapshot with default values 1`] = `
|
||||
"
|
||||
<div class="mb-0">
|
||||
<div class="css-b62m3t-container">
|
||||
<span
|
||||
id="react-select-configuration-collapse-live-region"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mb-0"
|
||||
>
|
||||
<div
|
||||
class="css-b62m3t-container"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
aria-live="polite"
|
||||
aria-atomic="false"
|
||||
aria-relevant="additions text"
|
||||
role="log"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
>
|
||||
</span>
|
||||
<div class="react-select__control css-18hiu1u-control">
|
||||
<div class="react-select__value-container react-select__value-container--has-value css-1tlotun">
|
||||
<div class="react-select__single-value css-qav5hl-singleValue">
|
||||
Collapse on mobile
|
||||
</div>
|
||||
<span
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
id="react-select-configuration-collapse-live-region"
|
||||
/>
|
||||
<span
|
||||
aria-atomic="false"
|
||||
aria-live="polite"
|
||||
aria-relevant="additions text"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
role="log"
|
||||
/>
|
||||
<div
|
||||
class="react-select__control css-18hiu1u-control"
|
||||
>
|
||||
<div
|
||||
class="react-select__input-container css-6hzavh"
|
||||
data-value
|
||||
class="react-select__value-container react-select__value-container--has-value css-1tlotun"
|
||||
>
|
||||
<input
|
||||
class="react-select__input"
|
||||
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
id="react-select-configuration-collapse-input"
|
||||
spellcheck="false"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
role="combobox"
|
||||
aria-activedescendant
|
||||
value
|
||||
<div
|
||||
class="react-select__single-value css-qav5hl-singleValue"
|
||||
>
|
||||
Collapse on mobile
|
||||
</div>
|
||||
<div
|
||||
class="react-select__input-container css-6hzavh"
|
||||
data-value=""
|
||||
>
|
||||
<input
|
||||
aria-activedescendant=""
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
class="react-select__input"
|
||||
id="react-select-configuration-collapse-input"
|
||||
role="combobox"
|
||||
spellcheck="false"
|
||||
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="react-select__indicators css-mik995">
|
||||
<span class="react-select__indicator-separator css-1u9des2-indicatorSeparator">
|
||||
</span>
|
||||
<div
|
||||
class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
|
||||
aria-hidden="true"
|
||||
class="react-select__indicators css-mik995"
|
||||
>
|
||||
<svg
|
||||
height="20"
|
||||
width="20"
|
||||
viewbox="0 0 20 20"
|
||||
<span
|
||||
class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
class="css-tj5bde-Svg"
|
||||
class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
|
||||
>
|
||||
<path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z">
|
||||
</path>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path
|
||||
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
"
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
@@ -1,26 +1,28 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<AlertGroupConfiguration /> matches snapshot with default values 1`] = `
|
||||
"
|
||||
<div class="p-3 text-center">
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="input-range-track"
|
||||
style="transform: scale(1); cursor: pointer;"
|
||||
class="p-3 text-center"
|
||||
>
|
||||
<div
|
||||
class="input-range-thumb"
|
||||
style="position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);"
|
||||
tabindex="0"
|
||||
aria-valuemax="25"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="5"
|
||||
draggable="false"
|
||||
aria-label
|
||||
role="slider"
|
||||
class="input-range-track"
|
||||
style="transform: scale(1); cursor: pointer;"
|
||||
>
|
||||
5
|
||||
<div
|
||||
aria-label=""
|
||||
aria-valuemax="25"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="5"
|
||||
class="input-range-thumb"
|
||||
draggable="false"
|
||||
role="slider"
|
||||
style="position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);"
|
||||
tabindex="0"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
"
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
@@ -1,76 +1,92 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<AlertGroupSortConfiguration /> matches snapshot with default values 1`] = `
|
||||
"
|
||||
<div class="mb-0">
|
||||
<div class="d-flex flex-fill flex-lg-row flex-column justify-content-between">
|
||||
<div class="flex-shrink-0 flex-grow-1 flex-basis-auto">
|
||||
<div class="css-b62m3t-container">
|
||||
<span
|
||||
id="react-select-configuration-sort-order-live-region"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mb-0"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-fill flex-lg-row flex-column justify-content-between"
|
||||
>
|
||||
<div
|
||||
class="flex-shrink-0 flex-grow-1 flex-basis-auto"
|
||||
>
|
||||
<div
|
||||
class="css-b62m3t-container"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
aria-live="polite"
|
||||
aria-atomic="false"
|
||||
aria-relevant="additions text"
|
||||
role="log"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
>
|
||||
</span>
|
||||
<div class="react-select__control css-18hiu1u-control">
|
||||
<div class="react-select__value-container react-select__value-container--has-value css-1tlotun">
|
||||
<div class="react-select__single-value css-qav5hl-singleValue">
|
||||
Use defaults from karma config file
|
||||
</div>
|
||||
<span
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
id="react-select-configuration-sort-order-live-region"
|
||||
/>
|
||||
<span
|
||||
aria-atomic="false"
|
||||
aria-live="polite"
|
||||
aria-relevant="additions text"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
role="log"
|
||||
/>
|
||||
<div
|
||||
class="react-select__control css-18hiu1u-control"
|
||||
>
|
||||
<div
|
||||
class="react-select__input-container css-6hzavh"
|
||||
data-value
|
||||
class="react-select__value-container react-select__value-container--has-value css-1tlotun"
|
||||
>
|
||||
<input
|
||||
class="react-select__input"
|
||||
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
id="react-select-configuration-sort-order-input"
|
||||
spellcheck="false"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
role="combobox"
|
||||
aria-activedescendant
|
||||
value
|
||||
<div
|
||||
class="react-select__single-value css-qav5hl-singleValue"
|
||||
>
|
||||
Use defaults from karma config file
|
||||
</div>
|
||||
<div
|
||||
class="react-select__input-container css-6hzavh"
|
||||
data-value=""
|
||||
>
|
||||
<input
|
||||
aria-activedescendant=""
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
class="react-select__input"
|
||||
id="react-select-configuration-sort-order-input"
|
||||
role="combobox"
|
||||
spellcheck="false"
|
||||
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="react-select__indicators css-mik995">
|
||||
<span class="react-select__indicator-separator css-1u9des2-indicatorSeparator">
|
||||
</span>
|
||||
<div
|
||||
class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
|
||||
aria-hidden="true"
|
||||
class="react-select__indicators css-mik995"
|
||||
>
|
||||
<svg
|
||||
height="20"
|
||||
width="20"
|
||||
viewbox="0 0 20 20"
|
||||
<span
|
||||
class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
class="css-tj5bde-Svg"
|
||||
class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
|
||||
>
|
||||
<path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z">
|
||||
</path>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path
|
||||
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
"
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
@@ -1,23 +1,29 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<AlertGroupTitleBarColor /> matches snapshot with default values 1`] = `
|
||||
"
|
||||
<div class="mb-0">
|
||||
<div class="form-check form-check-inline mx-0 px-0">
|
||||
<span class="form-check form-switch">
|
||||
<input
|
||||
id="configuration-colortitlebar"
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mb-0"
|
||||
>
|
||||
<div
|
||||
class="form-check form-check-inline mx-0 px-0"
|
||||
>
|
||||
<span
|
||||
class="form-check form-switch"
|
||||
>
|
||||
<label
|
||||
class="form-check-label cursor-pointer me-3"
|
||||
for="configuration-colortitlebar"
|
||||
>
|
||||
Color group titlebar
|
||||
</label>
|
||||
</span>
|
||||
<input
|
||||
class="form-check-input"
|
||||
id="configuration-colortitlebar"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label
|
||||
class="form-check-label cursor-pointer me-3"
|
||||
for="configuration-colortitlebar"
|
||||
>
|
||||
Color group titlebar
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
"
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
@@ -1,26 +1,28 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<AlertGroupWidthConfiguration /> matches snapshot with default values 1`] = `
|
||||
"
|
||||
<div class="p-3 text-center">
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="input-range-track"
|
||||
style="transform: scale(1); cursor: pointer;"
|
||||
class="p-3 text-center"
|
||||
>
|
||||
<div
|
||||
class="input-range-thumb"
|
||||
style="position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);"
|
||||
tabindex="0"
|
||||
aria-valuemax="800"
|
||||
aria-valuemin="300"
|
||||
aria-valuenow="420"
|
||||
draggable="false"
|
||||
aria-label
|
||||
role="slider"
|
||||
class="input-range-track"
|
||||
style="transform: scale(1); cursor: pointer;"
|
||||
>
|
||||
420
|
||||
<div
|
||||
aria-label=""
|
||||
aria-valuemax="800"
|
||||
aria-valuemin="300"
|
||||
aria-valuenow="420"
|
||||
class="input-range-thumb"
|
||||
draggable="false"
|
||||
role="slider"
|
||||
style="position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);"
|
||||
tabindex="0"
|
||||
>
|
||||
420
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
"
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
@@ -1,24 +1,30 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<AnimationsConfiguration /> matches snapshot with default values 1`] = `
|
||||
"
|
||||
<div class="mb-0">
|
||||
<div class="form-check form-check-inline mx-0 px-0">
|
||||
<span class="form-check form-switch">
|
||||
<input
|
||||
id="configuration-animations"
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
checked
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mb-0"
|
||||
>
|
||||
<div
|
||||
class="form-check form-check-inline mx-0 px-0"
|
||||
>
|
||||
<span
|
||||
class="form-check form-switch"
|
||||
>
|
||||
<label
|
||||
class="form-check-label cursor-pointer me-3"
|
||||
for="configuration-animations"
|
||||
>
|
||||
Enable animations
|
||||
</label>
|
||||
</span>
|
||||
<input
|
||||
checked=""
|
||||
class="form-check-input"
|
||||
id="configuration-animations"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label
|
||||
class="form-check-label cursor-pointer me-3"
|
||||
for="configuration-animations"
|
||||
>
|
||||
Enable animations
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
"
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
@@ -1,26 +1,28 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<FetchConfiguration /> matches snapshot with default values 1`] = `
|
||||
"
|
||||
<div class="p-3 text-center">
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="input-range-track"
|
||||
style="transform: scale(1); cursor: pointer;"
|
||||
class="p-3 text-center"
|
||||
>
|
||||
<div
|
||||
class="input-range-thumb"
|
||||
style="position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);"
|
||||
tabindex="0"
|
||||
aria-valuemax="120"
|
||||
aria-valuemin="10"
|
||||
aria-valuenow="30"
|
||||
draggable="false"
|
||||
aria-label
|
||||
role="slider"
|
||||
class="input-range-track"
|
||||
style="transform: scale(1); cursor: pointer;"
|
||||
>
|
||||
30s
|
||||
<div
|
||||
aria-label=""
|
||||
aria-valuemax="120"
|
||||
aria-valuemin="10"
|
||||
aria-valuenow="30"
|
||||
class="input-range-thumb"
|
||||
draggable="false"
|
||||
role="slider"
|
||||
style="position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);"
|
||||
tabindex="0"
|
||||
>
|
||||
30s
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
"
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
@@ -1,22 +1,26 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<FilterBarConfiguration /> matches snapshot with default values 1`] = `
|
||||
"
|
||||
<div class="form-check form-check-inline px-0 mx-0">
|
||||
<span class="form-check form-switch">
|
||||
<input
|
||||
id="configuration-autohide"
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
checked
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="form-check form-check-inline px-0 mx-0"
|
||||
>
|
||||
<span
|
||||
class="form-check form-switch"
|
||||
>
|
||||
<label
|
||||
class="form-check-label cursor-pointer me-3"
|
||||
for="configuration-autohide"
|
||||
>
|
||||
Hide filter bar and alert details when idle
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
"
|
||||
<input
|
||||
checked=""
|
||||
class="form-check-input"
|
||||
id="configuration-autohide"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label
|
||||
class="form-check-label cursor-pointer me-3"
|
||||
for="configuration-autohide"
|
||||
>
|
||||
Hide filter bar and alert details when idle
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
@@ -1,91 +1,111 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<MultiGridConfiguration /> matches snapshot with default values 1`] = `
|
||||
"
|
||||
<div class="mb-0">
|
||||
<div class="d-flex flex-fill flex-lg-row flex-column justify-content-between">
|
||||
<div class="flex-shrink-0 flex-grow-1 flex-basis-auto mx-0 mx-lg-1 mt-1 mt-lg-0">
|
||||
<div class="css-b62m3t-container">
|
||||
<span
|
||||
id="react-select-configuration-grid-label-live-region"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mb-0"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-fill flex-lg-row flex-column justify-content-between"
|
||||
>
|
||||
<div
|
||||
class="flex-shrink-0 flex-grow-1 flex-basis-auto mx-0 mx-lg-1 mt-1 mt-lg-0"
|
||||
>
|
||||
<div
|
||||
class="css-b62m3t-container"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
aria-live="polite"
|
||||
aria-atomic="false"
|
||||
aria-relevant="additions text"
|
||||
role="log"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
>
|
||||
</span>
|
||||
<div class="react-select__control css-18hiu1u-control">
|
||||
<div class="react-select__value-container react-select__value-container--has-value css-1tlotun">
|
||||
<div class="react-select__single-value css-qav5hl-singleValue">
|
||||
Disable multi-grid
|
||||
</div>
|
||||
<span
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
id="react-select-configuration-grid-label-live-region"
|
||||
/>
|
||||
<span
|
||||
aria-atomic="false"
|
||||
aria-live="polite"
|
||||
aria-relevant="additions text"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
role="log"
|
||||
/>
|
||||
<div
|
||||
class="react-select__control css-18hiu1u-control"
|
||||
>
|
||||
<div
|
||||
class="react-select__input-container css-6hzavh"
|
||||
data-value
|
||||
class="react-select__value-container react-select__value-container--has-value css-1tlotun"
|
||||
>
|
||||
<input
|
||||
class="react-select__input"
|
||||
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
id="react-select-configuration-grid-label-input"
|
||||
spellcheck="false"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
role="combobox"
|
||||
aria-activedescendant
|
||||
value
|
||||
<div
|
||||
class="react-select__single-value css-qav5hl-singleValue"
|
||||
>
|
||||
Disable multi-grid
|
||||
</div>
|
||||
<div
|
||||
class="react-select__input-container css-6hzavh"
|
||||
data-value=""
|
||||
>
|
||||
<input
|
||||
aria-activedescendant=""
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
class="react-select__input"
|
||||
id="react-select-configuration-grid-label-input"
|
||||
role="combobox"
|
||||
spellcheck="false"
|
||||
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="react-select__indicators css-mik995">
|
||||
<span class="react-select__indicator-separator css-1u9des2-indicatorSeparator">
|
||||
</span>
|
||||
<div
|
||||
class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
|
||||
aria-hidden="true"
|
||||
class="react-select__indicators css-mik995"
|
||||
>
|
||||
<svg
|
||||
height="20"
|
||||
width="20"
|
||||
viewbox="0 0 20 20"
|
||||
<span
|
||||
class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
class="css-tj5bde-Svg"
|
||||
class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
|
||||
>
|
||||
<path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z">
|
||||
</path>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path
|
||||
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto my-1 my-lg-auto ms-0 ms-lg-2 me-0 px-0">
|
||||
<span class="form-check form-switch">
|
||||
<input
|
||||
id="configuration-multigrid-sort-reverse"
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
<div
|
||||
class="flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto my-1 my-lg-auto ms-0 ms-lg-2 me-0 px-0"
|
||||
>
|
||||
<span
|
||||
class="form-check form-switch"
|
||||
>
|
||||
<label
|
||||
class="form-check-label cursor-pointer"
|
||||
for="configuration-multigrid-sort-reverse"
|
||||
>
|
||||
Reverse order
|
||||
</label>
|
||||
</span>
|
||||
<input
|
||||
class="form-check-input"
|
||||
id="configuration-multigrid-sort-reverse"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label
|
||||
class="form-check-label cursor-pointer"
|
||||
for="configuration-multigrid-sort-reverse"
|
||||
>
|
||||
Reverse order
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
"
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
@@ -1,72 +1,84 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<ThemeConfiguration /> matches snapshot with default values 1`] = `
|
||||
"
|
||||
<div class="mb-2">
|
||||
<div class="css-b62m3t-container">
|
||||
<span
|
||||
id="react-select-configuration-theme-live-region"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mb-2"
|
||||
>
|
||||
<div
|
||||
class="css-b62m3t-container"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
aria-live="polite"
|
||||
aria-atomic="false"
|
||||
aria-relevant="additions text"
|
||||
role="log"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
>
|
||||
</span>
|
||||
<div class="react-select__control css-18hiu1u-control">
|
||||
<div class="react-select__value-container react-select__value-container--has-value css-1tlotun">
|
||||
<div class="react-select__single-value css-qav5hl-singleValue">
|
||||
Automatic theme, follow browser preference
|
||||
</div>
|
||||
<span
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
id="react-select-configuration-theme-live-region"
|
||||
/>
|
||||
<span
|
||||
aria-atomic="false"
|
||||
aria-live="polite"
|
||||
aria-relevant="additions text"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
role="log"
|
||||
/>
|
||||
<div
|
||||
class="react-select__control css-18hiu1u-control"
|
||||
>
|
||||
<div
|
||||
class="react-select__input-container css-6hzavh"
|
||||
data-value
|
||||
class="react-select__value-container react-select__value-container--has-value css-1tlotun"
|
||||
>
|
||||
<input
|
||||
class="react-select__input"
|
||||
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
id="react-select-configuration-theme-input"
|
||||
spellcheck="false"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
role="combobox"
|
||||
aria-activedescendant
|
||||
value
|
||||
<div
|
||||
class="react-select__single-value css-qav5hl-singleValue"
|
||||
>
|
||||
Automatic theme, follow browser preference
|
||||
</div>
|
||||
<div
|
||||
class="react-select__input-container css-6hzavh"
|
||||
data-value=""
|
||||
>
|
||||
<input
|
||||
aria-activedescendant=""
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
class="react-select__input"
|
||||
id="react-select-configuration-theme-input"
|
||||
role="combobox"
|
||||
spellcheck="false"
|
||||
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="react-select__indicators css-mik995">
|
||||
<span class="react-select__indicator-separator css-1u9des2-indicatorSeparator">
|
||||
</span>
|
||||
<div
|
||||
class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
|
||||
aria-hidden="true"
|
||||
class="react-select__indicators css-mik995"
|
||||
>
|
||||
<svg
|
||||
height="20"
|
||||
width="20"
|
||||
viewbox="0 0 20 20"
|
||||
<span
|
||||
class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
class="css-tj5bde-Svg"
|
||||
class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
|
||||
>
|
||||
<path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z">
|
||||
</path>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path
|
||||
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
"
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,9 +1,7 @@
|
||||
import { mount } from "enzyme";
|
||||
import { render } from "@testing-library/react";
|
||||
|
||||
import fetchMock from "fetch-mock";
|
||||
|
||||
import toDiffableHtml from "diffable-html";
|
||||
|
||||
import { MockThemeContext } from "__fixtures__/Theme";
|
||||
import { Settings } from "Stores/Settings";
|
||||
import { ThemeContext } from "Components/Theme";
|
||||
@@ -25,11 +23,11 @@ afterEach(() => {
|
||||
describe("<Configuration />", () => {
|
||||
it("matches snapshot", () => {
|
||||
const settingsStore = new Settings(null);
|
||||
const tree = mount(
|
||||
const { asFragment } = render(
|
||||
<ThemeContext.Provider value={MockThemeContext}>
|
||||
<Configuration settingsStore={settingsStore} defaultIsOpen={true} />
|
||||
</ThemeContext.Provider>,
|
||||
);
|
||||
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
import { shallow } from "enzyme";
|
||||
|
||||
import toDiffableHtml from "diffable-html";
|
||||
import { render } from "@testing-library/react";
|
||||
|
||||
import { Help } from "./Help";
|
||||
|
||||
describe("<Help />", () => {
|
||||
it("matches snapshot", () => {
|
||||
const tree = shallow(<Help defaultIsOpen={true} />);
|
||||
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
|
||||
const { asFragment } = render(<Help defaultIsOpen={true} />);
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import { mount } from "enzyme";
|
||||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
|
||||
import fetchMock from "fetch-mock";
|
||||
|
||||
import toDiffableHtml from "diffable-html";
|
||||
|
||||
import { MockThemeContext } from "__fixtures__/Theme";
|
||||
import { AlertStore } from "Stores/AlertStore";
|
||||
import { Settings } from "Stores/Settings";
|
||||
@@ -29,83 +27,50 @@ afterEach(() => {
|
||||
fetchMock.reset();
|
||||
});
|
||||
|
||||
const Wrapped = (component: any) => (
|
||||
<ThemeContext.Provider value={MockThemeContext}>
|
||||
{component}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
|
||||
const FakeModal = () => {
|
||||
return mount(
|
||||
Wrapped(
|
||||
const renderModalContent = () => {
|
||||
return render(
|
||||
<ThemeContext.Provider value={MockThemeContext}>
|
||||
<MainModalContent
|
||||
alertStore={alertStore}
|
||||
settingsStore={settingsStore}
|
||||
onHide={onHide}
|
||||
expandAllOptions={true}
|
||||
/>,
|
||||
),
|
||||
/>
|
||||
</ThemeContext.Provider>,
|
||||
);
|
||||
};
|
||||
|
||||
const ValidateSetTab = (title: string) => {
|
||||
const component = FakeModal();
|
||||
const validateSetTab = (title: string) => {
|
||||
const { container } = renderModalContent();
|
||||
|
||||
const tab = component.find({ title: title });
|
||||
tab.simulate("click");
|
||||
expect(component.find(".nav-link.active").text()).toBe(title);
|
||||
const tab = screen.getByText(title);
|
||||
fireEvent.click(tab);
|
||||
expect(container.querySelector(".nav-link.active")?.textContent).toBe(title);
|
||||
};
|
||||
|
||||
describe("<MainModalContent />", () => {
|
||||
it("matches snapshot", () => {
|
||||
// we have multiple fragments and enzyme only renders the first one
|
||||
// in html() and text(), debug() would work but it's noisy
|
||||
// https://github.com/airbnb/enzyme/issues/1213
|
||||
const tree = mount(
|
||||
<span>
|
||||
{Wrapped(
|
||||
<MainModalContent
|
||||
alertStore={alertStore}
|
||||
settingsStore={settingsStore}
|
||||
onHide={onHide}
|
||||
expandAllOptions={true}
|
||||
/>,
|
||||
)}
|
||||
</span>,
|
||||
);
|
||||
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
|
||||
const { asFragment } = renderModalContent();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("shows 'Configuration' tab by default", () => {
|
||||
const tree = FakeModal();
|
||||
const activeTab = tree.find(".nav-link.active");
|
||||
expect(activeTab.text()).toBe("Configuration");
|
||||
const { container } = renderModalContent();
|
||||
const activeTab = container.querySelector(".nav-link.active");
|
||||
expect(activeTab?.textContent).toBe("Configuration");
|
||||
});
|
||||
|
||||
// modal makes it tricky to verify re-rendered content, so only check if we
|
||||
// update the store for now
|
||||
it("calls setTab('configuration') after clicking on the 'Configuration' tab", () => {
|
||||
ValidateSetTab("Configuration");
|
||||
validateSetTab("Configuration");
|
||||
});
|
||||
|
||||
it("calls setTab('help') after clicking on the 'Help' tab", () => {
|
||||
ValidateSetTab("Help");
|
||||
validateSetTab("Help");
|
||||
});
|
||||
|
||||
it("shows username when alertStore.info.authentication.enabled=true", () => {
|
||||
alertStore.info.setAuthentication(true, "me@example.com");
|
||||
const tree = mount(
|
||||
<span>
|
||||
{Wrapped(
|
||||
<MainModalContent
|
||||
alertStore={alertStore}
|
||||
settingsStore={settingsStore}
|
||||
onHide={onHide}
|
||||
expandAllOptions={true}
|
||||
/>,
|
||||
)}
|
||||
</span>,
|
||||
);
|
||||
expect(tree.text()).toMatch(/Username: me@example.com/);
|
||||
renderModalContent();
|
||||
expect(screen.getByText(/Username: me@example.com/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,27 +1,41 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<MainModalContent /> matches snapshot 1`] = `
|
||||
"
|
||||
<span>
|
||||
<div class="modal-header py-2">
|
||||
<nav class="nav nav-pills nav-justified w-100">
|
||||
<span class="nav-item nav-link cursor-pointer mx-1 px-2 active">
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="modal-header py-2"
|
||||
>
|
||||
<nav
|
||||
class="nav nav-pills nav-justified w-100"
|
||||
>
|
||||
<span
|
||||
class="nav-item nav-link cursor-pointer mx-1 px-2 active"
|
||||
>
|
||||
Configuration
|
||||
</span>
|
||||
<span class="nav-item nav-link cursor-pointer mx-1 px-2 components-tab-inactive">
|
||||
<span
|
||||
class="nav-item nav-link cursor-pointer mx-1 px-2 components-tab-inactive"
|
||||
>
|
||||
Help
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close my-auto"
|
||||
>
|
||||
</button>
|
||||
type="button"
|
||||
/>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="accordion">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<div
|
||||
class="modal-body"
|
||||
>
|
||||
<div
|
||||
class="accordion"
|
||||
>
|
||||
<div
|
||||
class="accordion-item"
|
||||
>
|
||||
<h2
|
||||
class="accordion-header"
|
||||
>
|
||||
<button
|
||||
class="accordion-button "
|
||||
type="button"
|
||||
@@ -29,23 +43,29 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
|
||||
Refresh interval
|
||||
</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse show">
|
||||
<div class="accordion-body">
|
||||
<div class="p-3 text-center">
|
||||
<div
|
||||
class="accordion-collapse show"
|
||||
>
|
||||
<div
|
||||
class="accordion-body"
|
||||
>
|
||||
<div
|
||||
class="p-3 text-center"
|
||||
>
|
||||
<div
|
||||
class="input-range-track"
|
||||
style="transform: scale(1); cursor: pointer;"
|
||||
>
|
||||
<div
|
||||
class="input-range-thumb"
|
||||
style="position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);"
|
||||
tabindex="0"
|
||||
aria-label=""
|
||||
aria-valuemax="120"
|
||||
aria-valuemin="10"
|
||||
aria-valuenow="30"
|
||||
class="input-range-thumb"
|
||||
draggable="false"
|
||||
aria-label
|
||||
role="slider"
|
||||
style="position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);"
|
||||
tabindex="0"
|
||||
>
|
||||
30s
|
||||
</div>
|
||||
@@ -54,8 +74,12 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<div
|
||||
class="accordion-item"
|
||||
>
|
||||
<h2
|
||||
class="accordion-header"
|
||||
>
|
||||
<button
|
||||
class="accordion-button "
|
||||
type="button"
|
||||
@@ -63,16 +87,24 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
|
||||
Filter bar configuration
|
||||
</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse show">
|
||||
<div class="accordion-body">
|
||||
<div class="form-check form-check-inline px-0 mx-0">
|
||||
<span class="form-check form-switch">
|
||||
<div
|
||||
class="accordion-collapse show"
|
||||
>
|
||||
<div
|
||||
class="accordion-body"
|
||||
>
|
||||
<div
|
||||
class="form-check form-check-inline px-0 mx-0"
|
||||
>
|
||||
<span
|
||||
class="form-check form-switch"
|
||||
>
|
||||
<input
|
||||
id="configuration-autohide"
|
||||
checked=""
|
||||
class="form-check-input"
|
||||
id="configuration-autohide"
|
||||
type="checkbox"
|
||||
checked
|
||||
>
|
||||
/>
|
||||
<label
|
||||
class="form-check-label cursor-pointer me-3"
|
||||
for="configuration-autohide"
|
||||
@@ -84,8 +116,12 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<div
|
||||
class="accordion-item"
|
||||
>
|
||||
<h2
|
||||
class="accordion-header"
|
||||
>
|
||||
<button
|
||||
class="accordion-button "
|
||||
type="button"
|
||||
@@ -93,82 +129,104 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
|
||||
Theme
|
||||
</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse show">
|
||||
<div class="accordion-body">
|
||||
<div class="mb-2">
|
||||
<div class="css-b62m3t-container">
|
||||
<div
|
||||
class="accordion-collapse show"
|
||||
>
|
||||
<div
|
||||
class="accordion-body"
|
||||
>
|
||||
<div
|
||||
class="mb-2"
|
||||
>
|
||||
<div
|
||||
class="css-b62m3t-container"
|
||||
>
|
||||
<span
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
id="react-select-configuration-theme-live-region"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
>
|
||||
</span>
|
||||
/>
|
||||
<span
|
||||
aria-live="polite"
|
||||
aria-atomic="false"
|
||||
aria-live="polite"
|
||||
aria-relevant="additions text"
|
||||
role="log"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
role="log"
|
||||
/>
|
||||
<div
|
||||
class="react-select__control css-18hiu1u-control"
|
||||
>
|
||||
</span>
|
||||
<div class="react-select__control css-18hiu1u-control">
|
||||
<div class="react-select__value-container react-select__value-container--has-value css-1tlotun">
|
||||
<div class="react-select__single-value css-qav5hl-singleValue">
|
||||
<div
|
||||
class="react-select__value-container react-select__value-container--has-value css-1tlotun"
|
||||
>
|
||||
<div
|
||||
class="react-select__single-value css-qav5hl-singleValue"
|
||||
>
|
||||
Automatic theme, follow browser preference
|
||||
</div>
|
||||
<div
|
||||
class="react-select__input-container css-6hzavh"
|
||||
data-value
|
||||
data-value=""
|
||||
>
|
||||
<input
|
||||
class="react-select__input"
|
||||
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
id="react-select-configuration-theme-input"
|
||||
spellcheck="false"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
aria-activedescendant=""
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
class="react-select__input"
|
||||
id="react-select-configuration-theme-input"
|
||||
role="combobox"
|
||||
aria-activedescendant
|
||||
value
|
||||
>
|
||||
spellcheck="false"
|
||||
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="react-select__indicators css-mik995">
|
||||
<span class="react-select__indicator-separator css-1u9des2-indicatorSeparator">
|
||||
</span>
|
||||
<div
|
||||
class="react-select__indicators css-mik995"
|
||||
>
|
||||
<span
|
||||
class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
|
||||
aria-hidden="true"
|
||||
class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
height="20"
|
||||
width="20"
|
||||
viewbox="0 0 20 20"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z">
|
||||
</path>
|
||||
<path
|
||||
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-0">
|
||||
<div class="form-check form-check-inline mx-0 px-0">
|
||||
<span class="form-check form-switch">
|
||||
<div
|
||||
class="mb-0"
|
||||
>
|
||||
<div
|
||||
class="form-check form-check-inline mx-0 px-0"
|
||||
>
|
||||
<span
|
||||
class="form-check form-switch"
|
||||
>
|
||||
<input
|
||||
id="configuration-colortitlebar"
|
||||
class="form-check-input"
|
||||
id="configuration-colortitlebar"
|
||||
type="checkbox"
|
||||
>
|
||||
/>
|
||||
<label
|
||||
class="form-check-label cursor-pointer me-3"
|
||||
for="configuration-colortitlebar"
|
||||
@@ -178,15 +236,21 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-0">
|
||||
<div class="form-check form-check-inline mx-0 px-0">
|
||||
<span class="form-check form-switch">
|
||||
<div
|
||||
class="mb-0"
|
||||
>
|
||||
<div
|
||||
class="form-check form-check-inline mx-0 px-0"
|
||||
>
|
||||
<span
|
||||
class="form-check form-switch"
|
||||
>
|
||||
<input
|
||||
id="configuration-animations"
|
||||
checked=""
|
||||
class="form-check-input"
|
||||
id="configuration-animations"
|
||||
type="checkbox"
|
||||
checked
|
||||
>
|
||||
/>
|
||||
<label
|
||||
class="form-check-label cursor-pointer me-3"
|
||||
for="configuration-animations"
|
||||
@@ -199,8 +263,12 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<div
|
||||
class="accordion-item"
|
||||
>
|
||||
<h2
|
||||
class="accordion-header"
|
||||
>
|
||||
<button
|
||||
class="accordion-button "
|
||||
type="button"
|
||||
@@ -208,23 +276,29 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
|
||||
Minimal alert group width
|
||||
</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse show">
|
||||
<div class="accordion-body">
|
||||
<div class="p-3 text-center">
|
||||
<div
|
||||
class="accordion-collapse show"
|
||||
>
|
||||
<div
|
||||
class="accordion-body"
|
||||
>
|
||||
<div
|
||||
class="p-3 text-center"
|
||||
>
|
||||
<div
|
||||
class="input-range-track"
|
||||
style="transform: scale(1); cursor: pointer;"
|
||||
>
|
||||
<div
|
||||
class="input-range-thumb"
|
||||
style="position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);"
|
||||
tabindex="0"
|
||||
aria-label=""
|
||||
aria-valuemax="800"
|
||||
aria-valuemin="300"
|
||||
aria-valuenow="420"
|
||||
class="input-range-thumb"
|
||||
draggable="false"
|
||||
aria-label
|
||||
role="slider"
|
||||
style="position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);"
|
||||
tabindex="0"
|
||||
>
|
||||
420
|
||||
</div>
|
||||
@@ -233,8 +307,12 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<div
|
||||
class="accordion-item"
|
||||
>
|
||||
<h2
|
||||
class="accordion-header"
|
||||
>
|
||||
<button
|
||||
class="accordion-button "
|
||||
type="button"
|
||||
@@ -242,23 +320,29 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
|
||||
Default number of alerts to show per group
|
||||
</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse show">
|
||||
<div class="accordion-body">
|
||||
<div class="p-3 text-center">
|
||||
<div
|
||||
class="accordion-collapse show"
|
||||
>
|
||||
<div
|
||||
class="accordion-body"
|
||||
>
|
||||
<div
|
||||
class="p-3 text-center"
|
||||
>
|
||||
<div
|
||||
class="input-range-track"
|
||||
style="transform: scale(1); cursor: pointer;"
|
||||
>
|
||||
<div
|
||||
class="input-range-thumb"
|
||||
style="position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);"
|
||||
tabindex="0"
|
||||
aria-label=""
|
||||
aria-valuemax="25"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="5"
|
||||
class="input-range-thumb"
|
||||
draggable="false"
|
||||
aria-label
|
||||
role="slider"
|
||||
style="position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);"
|
||||
tabindex="0"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
@@ -267,8 +351,12 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<div
|
||||
class="accordion-item"
|
||||
>
|
||||
<h2
|
||||
class="accordion-header"
|
||||
>
|
||||
<button
|
||||
class="accordion-button "
|
||||
type="button"
|
||||
@@ -276,68 +364,84 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
|
||||
Default alert group display
|
||||
</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse show">
|
||||
<div class="accordion-body">
|
||||
<div class="mb-0">
|
||||
<div class="css-b62m3t-container">
|
||||
<div
|
||||
class="accordion-collapse show"
|
||||
>
|
||||
<div
|
||||
class="accordion-body"
|
||||
>
|
||||
<div
|
||||
class="mb-0"
|
||||
>
|
||||
<div
|
||||
class="css-b62m3t-container"
|
||||
>
|
||||
<span
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
id="react-select-configuration-collapse-live-region"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
>
|
||||
</span>
|
||||
/>
|
||||
<span
|
||||
aria-live="polite"
|
||||
aria-atomic="false"
|
||||
aria-live="polite"
|
||||
aria-relevant="additions text"
|
||||
role="log"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
role="log"
|
||||
/>
|
||||
<div
|
||||
class="react-select__control css-18hiu1u-control"
|
||||
>
|
||||
</span>
|
||||
<div class="react-select__control css-18hiu1u-control">
|
||||
<div class="react-select__value-container react-select__value-container--has-value css-1tlotun">
|
||||
<div class="react-select__single-value css-qav5hl-singleValue">
|
||||
<div
|
||||
class="react-select__value-container react-select__value-container--has-value css-1tlotun"
|
||||
>
|
||||
<div
|
||||
class="react-select__single-value css-qav5hl-singleValue"
|
||||
>
|
||||
Collapse on mobile
|
||||
</div>
|
||||
<div
|
||||
class="react-select__input-container css-6hzavh"
|
||||
data-value
|
||||
data-value=""
|
||||
>
|
||||
<input
|
||||
class="react-select__input"
|
||||
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
id="react-select-configuration-collapse-input"
|
||||
spellcheck="false"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
aria-activedescendant=""
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
class="react-select__input"
|
||||
id="react-select-configuration-collapse-input"
|
||||
role="combobox"
|
||||
aria-activedescendant
|
||||
value
|
||||
>
|
||||
spellcheck="false"
|
||||
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="react-select__indicators css-mik995">
|
||||
<span class="react-select__indicator-separator css-1u9des2-indicatorSeparator">
|
||||
</span>
|
||||
<div
|
||||
class="react-select__indicators css-mik995"
|
||||
>
|
||||
<span
|
||||
class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
|
||||
aria-hidden="true"
|
||||
class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
height="20"
|
||||
width="20"
|
||||
viewbox="0 0 20 20"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z">
|
||||
</path>
|
||||
<path
|
||||
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
@@ -347,8 +451,12 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<div
|
||||
class="accordion-item"
|
||||
>
|
||||
<h2
|
||||
class="accordion-header"
|
||||
>
|
||||
<button
|
||||
class="accordion-button "
|
||||
type="button"
|
||||
@@ -356,70 +464,90 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
|
||||
Grid sort order
|
||||
</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse show">
|
||||
<div class="accordion-body">
|
||||
<div class="mb-0">
|
||||
<div class="d-flex flex-fill flex-lg-row flex-column justify-content-between">
|
||||
<div class="flex-shrink-0 flex-grow-1 flex-basis-auto">
|
||||
<div class="css-b62m3t-container">
|
||||
<div
|
||||
class="accordion-collapse show"
|
||||
>
|
||||
<div
|
||||
class="accordion-body"
|
||||
>
|
||||
<div
|
||||
class="mb-0"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-fill flex-lg-row flex-column justify-content-between"
|
||||
>
|
||||
<div
|
||||
class="flex-shrink-0 flex-grow-1 flex-basis-auto"
|
||||
>
|
||||
<div
|
||||
class="css-b62m3t-container"
|
||||
>
|
||||
<span
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
id="react-select-configuration-sort-order-live-region"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
>
|
||||
</span>
|
||||
/>
|
||||
<span
|
||||
aria-live="polite"
|
||||
aria-atomic="false"
|
||||
aria-live="polite"
|
||||
aria-relevant="additions text"
|
||||
role="log"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
role="log"
|
||||
/>
|
||||
<div
|
||||
class="react-select__control css-18hiu1u-control"
|
||||
>
|
||||
</span>
|
||||
<div class="react-select__control css-18hiu1u-control">
|
||||
<div class="react-select__value-container react-select__value-container--has-value css-1tlotun">
|
||||
<div class="react-select__single-value css-qav5hl-singleValue">
|
||||
<div
|
||||
class="react-select__value-container react-select__value-container--has-value css-1tlotun"
|
||||
>
|
||||
<div
|
||||
class="react-select__single-value css-qav5hl-singleValue"
|
||||
>
|
||||
Use defaults from karma config file
|
||||
</div>
|
||||
<div
|
||||
class="react-select__input-container css-6hzavh"
|
||||
data-value
|
||||
data-value=""
|
||||
>
|
||||
<input
|
||||
class="react-select__input"
|
||||
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
id="react-select-configuration-sort-order-input"
|
||||
spellcheck="false"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
aria-activedescendant=""
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
class="react-select__input"
|
||||
id="react-select-configuration-sort-order-input"
|
||||
role="combobox"
|
||||
aria-activedescendant
|
||||
value
|
||||
>
|
||||
spellcheck="false"
|
||||
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="react-select__indicators css-mik995">
|
||||
<span class="react-select__indicator-separator css-1u9des2-indicatorSeparator">
|
||||
</span>
|
||||
<div
|
||||
class="react-select__indicators css-mik995"
|
||||
>
|
||||
<span
|
||||
class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
|
||||
aria-hidden="true"
|
||||
class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
height="20"
|
||||
width="20"
|
||||
viewbox="0 0 20 20"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z">
|
||||
</path>
|
||||
<path
|
||||
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
@@ -431,8 +559,12 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<div
|
||||
class="accordion-item"
|
||||
>
|
||||
<h2
|
||||
class="accordion-header"
|
||||
>
|
||||
<button
|
||||
class="accordion-button "
|
||||
type="button"
|
||||
@@ -440,83 +572,107 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
|
||||
Multi-grid source label
|
||||
</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse show">
|
||||
<div class="accordion-body">
|
||||
<div class="mb-0">
|
||||
<div class="d-flex flex-fill flex-lg-row flex-column justify-content-between">
|
||||
<div class="flex-shrink-0 flex-grow-1 flex-basis-auto mx-0 mx-lg-1 mt-1 mt-lg-0">
|
||||
<div class="css-b62m3t-container">
|
||||
<div
|
||||
class="accordion-collapse show"
|
||||
>
|
||||
<div
|
||||
class="accordion-body"
|
||||
>
|
||||
<div
|
||||
class="mb-0"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-fill flex-lg-row flex-column justify-content-between"
|
||||
>
|
||||
<div
|
||||
class="flex-shrink-0 flex-grow-1 flex-basis-auto mx-0 mx-lg-1 mt-1 mt-lg-0"
|
||||
>
|
||||
<div
|
||||
class="css-b62m3t-container"
|
||||
>
|
||||
<span
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
id="react-select-configuration-grid-label-live-region"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
>
|
||||
</span>
|
||||
/>
|
||||
<span
|
||||
aria-live="polite"
|
||||
aria-atomic="false"
|
||||
aria-live="polite"
|
||||
aria-relevant="additions text"
|
||||
role="log"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
role="log"
|
||||
/>
|
||||
<div
|
||||
class="react-select__control css-18hiu1u-control"
|
||||
>
|
||||
</span>
|
||||
<div class="react-select__control css-18hiu1u-control">
|
||||
<div class="react-select__value-container react-select__value-container--has-value css-1tlotun">
|
||||
<div class="react-select__single-value css-qav5hl-singleValue">
|
||||
<div
|
||||
class="react-select__value-container react-select__value-container--has-value css-1tlotun"
|
||||
>
|
||||
<div
|
||||
class="react-select__single-value css-qav5hl-singleValue"
|
||||
>
|
||||
Disable multi-grid
|
||||
</div>
|
||||
<div
|
||||
class="react-select__input-container css-6hzavh"
|
||||
data-value
|
||||
data-value=""
|
||||
>
|
||||
<input
|
||||
class="react-select__input"
|
||||
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
id="react-select-configuration-grid-label-input"
|
||||
spellcheck="false"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
aria-activedescendant=""
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
class="react-select__input"
|
||||
id="react-select-configuration-grid-label-input"
|
||||
role="combobox"
|
||||
aria-activedescendant
|
||||
value
|
||||
>
|
||||
spellcheck="false"
|
||||
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="react-select__indicators css-mik995">
|
||||
<span class="react-select__indicator-separator css-1u9des2-indicatorSeparator">
|
||||
</span>
|
||||
<div
|
||||
class="react-select__indicators css-mik995"
|
||||
>
|
||||
<span
|
||||
class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
|
||||
aria-hidden="true"
|
||||
class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
height="20"
|
||||
width="20"
|
||||
viewbox="0 0 20 20"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z">
|
||||
</path>
|
||||
<path
|
||||
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto my-1 my-lg-auto ms-0 ms-lg-2 me-0 px-0">
|
||||
<span class="form-check form-switch">
|
||||
<div
|
||||
class="flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto my-1 my-lg-auto ms-0 ms-lg-2 me-0 px-0"
|
||||
>
|
||||
<span
|
||||
class="form-check form-switch"
|
||||
>
|
||||
<input
|
||||
id="configuration-multigrid-sort-reverse"
|
||||
class="form-check-input"
|
||||
id="configuration-multigrid-sort-reverse"
|
||||
type="checkbox"
|
||||
>
|
||||
/>
|
||||
<label
|
||||
class="form-check-label cursor-pointer"
|
||||
for="configuration-multigrid-sort-reverse"
|
||||
@@ -532,11 +688,14 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<span class="text-muted">
|
||||
<div
|
||||
class="modal-footer"
|
||||
>
|
||||
<span
|
||||
class="text-muted"
|
||||
>
|
||||
Version: unknown
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
"
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { act } from "react-dom/test-utils";
|
||||
|
||||
import { mount } from "enzyme";
|
||||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
|
||||
import fetchMock from "fetch-mock";
|
||||
|
||||
@@ -30,8 +30,8 @@ afterEach(() => {
|
||||
document.body.className = "";
|
||||
});
|
||||
|
||||
const MountedMainModal = () => {
|
||||
return mount(
|
||||
const renderMainModal = () => {
|
||||
return render(
|
||||
<ThemeContext.Provider value={MockThemeContext}>
|
||||
<MainModal alertStore={alertStore} settingsStore={settingsStore} />
|
||||
</ThemeContext.Provider>,
|
||||
@@ -40,78 +40,74 @@ const MountedMainModal = () => {
|
||||
|
||||
describe("<MainModal />", () => {
|
||||
it("only renders FontAwesomeIcon when modal is not shown", () => {
|
||||
const tree = MountedMainModal();
|
||||
expect(tree.find("FontAwesomeIcon")).toHaveLength(1);
|
||||
expect(tree.find("MainModalContent")).toHaveLength(0);
|
||||
const { container } = renderMainModal();
|
||||
expect(container.querySelectorAll("svg")).toHaveLength(1);
|
||||
expect(screen.queryByText("Configuration")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders a spinner placeholder while modal content is loading", () => {
|
||||
const tree = MountedMainModal();
|
||||
const toggle = tree.find(".nav-link");
|
||||
toggle.simulate("click");
|
||||
expect(tree.find("FontAwesomeIcon")).not.toHaveLength(0);
|
||||
expect(tree.find(".modal-content").find("svg.fa-spinner")).toHaveLength(1);
|
||||
expect(tree.find("MainModalContent")).toHaveLength(0);
|
||||
const { container } = renderMainModal();
|
||||
const toggle = container.querySelector(".nav-link");
|
||||
fireEvent.click(toggle!);
|
||||
expect(
|
||||
document.body.querySelector(".modal-content svg.fa-spinner"),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders modal content if fallback is not used", () => {
|
||||
const tree = MountedMainModal();
|
||||
const toggle = tree.find(".nav-link");
|
||||
toggle.simulate("click");
|
||||
expect(tree.find("FontAwesomeIcon")).not.toHaveLength(0);
|
||||
expect(tree.find(".modal-content").find("svg.fa-spinner")).toHaveLength(0);
|
||||
expect(tree.find("MainModalContent")).toHaveLength(1);
|
||||
const { container } = renderMainModal();
|
||||
const toggle = container.querySelector(".nav-link");
|
||||
fireEvent.click(toggle!);
|
||||
expect(screen.getByText("Configuration")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("hides the modal when toggle() is called twice", () => {
|
||||
const tree = MountedMainModal();
|
||||
const toggle = tree.find(".nav-link");
|
||||
const { container } = renderMainModal();
|
||||
const toggle = container.querySelector(".nav-link");
|
||||
|
||||
toggle.simulate("click");
|
||||
fireEvent.click(toggle!);
|
||||
act(() => {
|
||||
jest.runOnlyPendingTimers();
|
||||
});
|
||||
tree.update();
|
||||
expect(tree.find("MainModalContent")).toHaveLength(1);
|
||||
expect(screen.getByText("Configuration")).toBeInTheDocument();
|
||||
|
||||
toggle.simulate("click");
|
||||
fireEvent.click(toggle!);
|
||||
act(() => {
|
||||
jest.runOnlyPendingTimers();
|
||||
});
|
||||
tree.update();
|
||||
expect(tree.find("MainModalContent")).toHaveLength(0);
|
||||
expect(screen.queryByText("Configuration")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("hides the modal when button.btn-close is clicked", () => {
|
||||
const tree = MountedMainModal();
|
||||
const toggle = tree.find(".nav-link");
|
||||
const { container } = renderMainModal();
|
||||
const toggle = container.querySelector(".nav-link");
|
||||
|
||||
toggle.simulate("click");
|
||||
expect(tree.find("MainModalContent")).toHaveLength(1);
|
||||
fireEvent.click(toggle!);
|
||||
expect(screen.getByText("Configuration")).toBeInTheDocument();
|
||||
|
||||
tree.find("button.btn-close").simulate("click");
|
||||
const closeBtn = document.body.querySelector("button.btn-close");
|
||||
fireEvent.click(closeBtn!);
|
||||
act(() => {
|
||||
jest.runOnlyPendingTimers();
|
||||
});
|
||||
tree.update();
|
||||
expect(tree.find("MainModalContent")).toHaveLength(0);
|
||||
expect(screen.queryByText("Configuration")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("'modal-open' class is appended to body node when modal is visible", () => {
|
||||
const tree = MountedMainModal();
|
||||
const toggle = tree.find(".nav-link");
|
||||
toggle.simulate("click");
|
||||
const { container } = renderMainModal();
|
||||
const toggle = container.querySelector(".nav-link");
|
||||
fireEvent.click(toggle!);
|
||||
expect(document.body.className.split(" ")).toContain("modal-open");
|
||||
});
|
||||
|
||||
it("'modal-open' class is removed from body node after modal is hidden", () => {
|
||||
const tree = MountedMainModal();
|
||||
const toggle = tree.find(".nav-link");
|
||||
const { container } = renderMainModal();
|
||||
const toggle = container.querySelector(".nav-link");
|
||||
|
||||
toggle.simulate("click");
|
||||
fireEvent.click(toggle!);
|
||||
expect(document.body.className.split(" ")).toContain("modal-open");
|
||||
|
||||
toggle.simulate("click");
|
||||
fireEvent.click(toggle!);
|
||||
act(() => {
|
||||
jest.runOnlyPendingTimers();
|
||||
});
|
||||
@@ -119,10 +115,10 @@ describe("<MainModal />", () => {
|
||||
});
|
||||
|
||||
it("'modal-open' class is removed from body node after modal is unmounted", () => {
|
||||
const tree = MountedMainModal();
|
||||
const toggle = tree.find(".nav-link");
|
||||
toggle.simulate("click");
|
||||
tree.unmount();
|
||||
const { container, unmount } = renderMainModal();
|
||||
const toggle = container.querySelector(".nav-link");
|
||||
fireEvent.click(toggle!);
|
||||
unmount();
|
||||
expect(document.body.className.split(" ")).not.toContain("modal-open");
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user