mirror of
https://github.com/prymitive/karma
synced 2026-05-23 04:42:58 +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();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user