mirror of
https://github.com/prymitive/karma
synced 2026-05-07 03:26:52 +00:00
feat(tests): add test coverage for AlertManagerInput
This commit is contained in:
Łukasz Mierzwa
110
ui/src/Components/SilenceModal/AlertManagerInput.test.js
Normal file
110
ui/src/Components/SilenceModal/AlertManagerInput.test.js
Normal file
@@ -0,0 +1,110 @@
|
||||
import React from "react";
|
||||
|
||||
import { shallow, mount } from "enzyme";
|
||||
|
||||
import { AlertStore } from "Stores/AlertStore";
|
||||
import { SilenceFormStore } from "Stores/SilenceFormStore";
|
||||
import { AlertManagerInput } from "./AlertManagerInput";
|
||||
|
||||
let alertStore;
|
||||
let silenceFormStore;
|
||||
|
||||
const AlertmanagerOption = index => ({
|
||||
label: `am${index}`,
|
||||
value: `http://am${index}.example.com`
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
alertStore = new AlertStore([]);
|
||||
alertStore.data.upstreams.instances = [
|
||||
{ name: "am1", uri: "http://am1.example.com", error: "" },
|
||||
{ name: "am2", uri: "http://am2.example.com", error: "" },
|
||||
{ name: "am3", uri: "http://am3.example.com", error: "" }
|
||||
];
|
||||
silenceFormStore = new SilenceFormStore();
|
||||
});
|
||||
|
||||
const ShallowAlertManagerInput = () => {
|
||||
return shallow(
|
||||
<AlertManagerInput
|
||||
alertStore={alertStore}
|
||||
silenceFormStore={silenceFormStore}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const MountedAlertManagerInput = () => {
|
||||
return mount(
|
||||
<AlertManagerInput
|
||||
alertStore={alertStore}
|
||||
silenceFormStore={silenceFormStore}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const ValidateSuggestions = () => {
|
||||
const tree = MountedAlertManagerInput();
|
||||
// clear all selected instances, they are selected by default
|
||||
const clear = tree.find("ClearIndicator");
|
||||
// https://github.com/JedWatson/react-select/blob/c22d296d50917e210836fb011ae3e565895e6440/src/__tests__/Select.test.js#L1873
|
||||
clear.simulate("mousedown", { button: 0 });
|
||||
// click on the react-select component doesn't seem to trigger options
|
||||
// rendering in tests, so change the input instead
|
||||
tree.find("input").simulate("change", { target: { value: "am" } });
|
||||
return tree;
|
||||
};
|
||||
|
||||
describe("<AlertManagerInput />", () => {
|
||||
it("matches snapshot", () => {
|
||||
const tree = ShallowAlertManagerInput();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("all available Alertmanager instances are selected by default", () => {
|
||||
ShallowAlertManagerInput();
|
||||
expect(silenceFormStore.data.alertmanagers).toHaveLength(3);
|
||||
for (let i = 1; i <= 3; i++) {
|
||||
expect(silenceFormStore.data.alertmanagers).toContainEqual(
|
||||
AlertmanagerOption(i)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
it("renders all 3 suggestions", () => {
|
||||
const tree = ValidateSuggestions();
|
||||
const options = tree.find("[role='option']");
|
||||
expect(options).toHaveLength(3);
|
||||
expect(options.at(0).text()).toBe("am1");
|
||||
expect(options.at(1).text()).toBe("am2");
|
||||
expect(options.at(2).text()).toBe("am3");
|
||||
});
|
||||
|
||||
it("clicking on options appends them to silenceFormStore.data.alertmanagers", () => {
|
||||
const tree = ValidateSuggestions();
|
||||
const options = tree.find("[role='option']");
|
||||
options.at(0).simulate("click");
|
||||
options.at(2).simulate("click");
|
||||
expect(silenceFormStore.data.alertmanagers).toHaveLength(2);
|
||||
expect(silenceFormStore.data.alertmanagers).toContainEqual(
|
||||
AlertmanagerOption(1)
|
||||
);
|
||||
expect(silenceFormStore.data.alertmanagers).toContainEqual(
|
||||
AlertmanagerOption(3)
|
||||
);
|
||||
});
|
||||
|
||||
it("silenceFormStore.data.alertmanagers gets updated from alertStore.data.upstreams.instances on mismatch", () => {
|
||||
const tree = ShallowAlertManagerInput();
|
||||
alertStore.data.upstreams.instances[0] = {
|
||||
name: "am1",
|
||||
uri: "http://am1.example.com/new",
|
||||
error: ""
|
||||
};
|
||||
// force update since this is where the mismatch check lives
|
||||
tree.instance().componentDidUpdate();
|
||||
expect(silenceFormStore.data.alertmanagers).toContainEqual({
|
||||
label: "am1",
|
||||
value: "http://am1.example.com/new"
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,155 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<AlertManagerInput /> matches snapshot 1`] = `
|
||||
<StateManager
|
||||
defaultInputValue=""
|
||||
defaultMenuIsOpen={false}
|
||||
defaultValue={
|
||||
Array [
|
||||
Object {
|
||||
"label": "am1",
|
||||
"value": "http://am1.example.com",
|
||||
Symbol(mobx administration): ObservableObjectAdministration$$1 {
|
||||
"defaultEnhancer": [Function],
|
||||
"keysAtom": Atom$$1 {
|
||||
"diffValue": 0,
|
||||
"isBeingObserved": false,
|
||||
"isPendingUnobservation": false,
|
||||
"lastAccessedBy": 0,
|
||||
"lowestObserverState": 2,
|
||||
"name": "Silence form store.alertmanagers[..].keys",
|
||||
"observers": Set {},
|
||||
},
|
||||
"name": "Silence form store.alertmanagers[..]",
|
||||
"pendingKeys": Map {
|
||||
"cheerio" => false,
|
||||
"nodeType" => false,
|
||||
"$$typeof" => false,
|
||||
"@@__IMMUTABLE_LIST__@@" => false,
|
||||
"@@__IMMUTABLE_SET__@@" => false,
|
||||
"@@__IMMUTABLE_MAP__@@" => false,
|
||||
"@@__IMMUTABLE_STACK__@@" => false,
|
||||
"toJSON" => false,
|
||||
},
|
||||
"proxy": [Circular],
|
||||
"target": Object {
|
||||
"label": "am1",
|
||||
"value": "http://am1.example.com",
|
||||
Symbol(mobx administration): [Circular],
|
||||
},
|
||||
"values": Map {
|
||||
"label" => "am1",
|
||||
"value" => "http://am1.example.com",
|
||||
},
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"label": "am2",
|
||||
"value": "http://am2.example.com",
|
||||
Symbol(mobx administration): ObservableObjectAdministration$$1 {
|
||||
"defaultEnhancer": [Function],
|
||||
"keysAtom": Atom$$1 {
|
||||
"diffValue": 0,
|
||||
"isBeingObserved": false,
|
||||
"isPendingUnobservation": false,
|
||||
"lastAccessedBy": 0,
|
||||
"lowestObserverState": 2,
|
||||
"name": "Silence form store.alertmanagers[..].keys",
|
||||
"observers": Set {},
|
||||
},
|
||||
"name": "Silence form store.alertmanagers[..]",
|
||||
"pendingKeys": Map {
|
||||
"cheerio" => false,
|
||||
"nodeType" => false,
|
||||
"$$typeof" => false,
|
||||
"@@__IMMUTABLE_LIST__@@" => false,
|
||||
"@@__IMMUTABLE_SET__@@" => false,
|
||||
"@@__IMMUTABLE_MAP__@@" => false,
|
||||
"@@__IMMUTABLE_STACK__@@" => false,
|
||||
"toJSON" => false,
|
||||
},
|
||||
"proxy": [Circular],
|
||||
"target": Object {
|
||||
"label": "am2",
|
||||
"value": "http://am2.example.com",
|
||||
Symbol(mobx administration): [Circular],
|
||||
},
|
||||
"values": Map {
|
||||
"label" => "am2",
|
||||
"value" => "http://am2.example.com",
|
||||
},
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"label": "am3",
|
||||
"value": "http://am3.example.com",
|
||||
Symbol(mobx administration): ObservableObjectAdministration$$1 {
|
||||
"defaultEnhancer": [Function],
|
||||
"keysAtom": Atom$$1 {
|
||||
"diffValue": 0,
|
||||
"isBeingObserved": false,
|
||||
"isPendingUnobservation": false,
|
||||
"lastAccessedBy": 0,
|
||||
"lowestObserverState": 2,
|
||||
"name": "Silence form store.alertmanagers[..].keys",
|
||||
"observers": Set {},
|
||||
},
|
||||
"name": "Silence form store.alertmanagers[..]",
|
||||
"pendingKeys": Map {
|
||||
"cheerio" => false,
|
||||
"nodeType" => false,
|
||||
"$$typeof" => false,
|
||||
"@@__IMMUTABLE_LIST__@@" => false,
|
||||
"@@__IMMUTABLE_SET__@@" => false,
|
||||
"@@__IMMUTABLE_MAP__@@" => false,
|
||||
"@@__IMMUTABLE_STACK__@@" => false,
|
||||
"toJSON" => false,
|
||||
},
|
||||
"proxy": [Circular],
|
||||
"target": Object {
|
||||
"label": "am3",
|
||||
"value": "http://am3.example.com",
|
||||
Symbol(mobx administration): [Circular],
|
||||
},
|
||||
"values": Map {
|
||||
"label" => "am3",
|
||||
"value" => "http://am3.example.com",
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
instanceId="silence-input-alertmanagers"
|
||||
isMulti={true}
|
||||
onChange={[Function]}
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
"label": "am1",
|
||||
"value": "http://am1.example.com",
|
||||
},
|
||||
Object {
|
||||
"label": "am2",
|
||||
"value": "http://am2.example.com",
|
||||
},
|
||||
Object {
|
||||
"label": "am3",
|
||||
"value": "http://am3.example.com",
|
||||
},
|
||||
]
|
||||
}
|
||||
placeholder="Alertmanager"
|
||||
styles={
|
||||
Object {
|
||||
"control": [Function],
|
||||
"indicatorsContainer": [Function],
|
||||
"multiValue": [Function],
|
||||
"multiValueLabel": [Function],
|
||||
"multiValueRemove": [Function],
|
||||
"option": [Function],
|
||||
"valueContainer": [Function],
|
||||
"valueLabel": [Function],
|
||||
}
|
||||
}
|
||||
/>
|
||||
`;
|
||||
Reference in New Issue
Block a user