From 4100486127a203e592df7876163304afbd359830 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Fri, 15 Feb 2019 09:51:19 +0000 Subject: [PATCH] fix(tests): add css classes to react-select components react-select 2.4 drops role['option'] from Option components, which makes it harder to find those in the DOM while testing. Set classNamePrefix so that all components get extra react-select-* css classes, which allows to easily reference them in tests via enzyme selectors. --- .../__snapshots__/index.test.js.snap | 92 +++++++++---------- ui/src/Components/MultiSelect/index.js | 6 +- .../__snapshots__/index.test.js.snap | 26 +++--- .../SilenceModal/AlertManagerInput/index.js | 1 + .../AlertManagerInput/index.test.js | 4 +- .../SilenceMatch/LabelNameInput.test.js | 4 +- .../SilenceMatch/LabelValueInput.test.js | 10 +- .../__snapshots__/LabelNameInput.test.js.snap | 14 +-- .../LabelValueInput.test.js.snap | 14 +-- 9 files changed, 88 insertions(+), 83 deletions(-) diff --git a/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap b/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap index e2c48f041..19080c22e 100644 --- a/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap +++ b/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap @@ -13,13 +13,13 @@ exports[` matches snapshot when focused 1`] = `   0 results available. Select is focused ,type to refine list, press Down to open the menu,

-
-
-
+
+
+
Select...
-
matches snapshot when focused 1`] = `
-
- +
+
matches snapshot when focused 1`] = ` exports[` matches snapshot with a value 1`] = ` "
-
-
-
+
+
+
foo
-
matches snapshot with a value 1`] = `
-
- +
+
matches snapshot with a value 1`] = ` exports[` matches snapshot with defaults 1`] = ` "
-
-
-
+
+
+
Select...
-
matches snapshot with defaults 1`] = `
-
- +
+
matches snapshot with defaults 1`] = ` exports[` matches snapshot with isDisabled=true 1`] = ` " -
-
-
-
+
+
+
+
foo
-
matches snapshot with isDisabled=true 1`] = `
-
- +
+
matches snapshot with isDisabled=true 1`] = ` exports[` matches snapshot with isMulti=true 1`] = ` "
-
-
-
+
+
+
Select...
-
matches snapshot with isMulti=true 1`] = `
-
- +
+
matches snapshot with isMulti=true 1`] = ` exports[` matches snapshot with isMulti=true and a value 1`] = ` "
-
-
-
-
+
+
+
+
foo
-
+
matches snapshot with isMulti=true and a value 1`
-
matches snapshot with isMulti=true and a value 1`
-
+
matches snapshot with isMulti=true and a value 1`
- +
+ ); } } diff --git a/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.js.snap b/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.js.snap index b3a06f6c1..0d8df7dd0 100644 --- a/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.js.snap +++ b/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.js.snap @@ -3,13 +3,13 @@ exports[` matches snapshot 1`] = ` "
-
-
-
-
+
+
+
+
am1 | am2
-
+
matches snapshot 1`] = `
-
-
+
+
am3
-
+
matches snapshot 1`] = `
-
matches snapshot 1`] = `
-
+
matches snapshot 1`] = `
- +
", () => { it("renders all 3 suggestions", () => { const tree = ValidateSuggestions(); - const options = tree.find("[role='option']"); + const options = tree.find(".react-select__option"); expect(options).toHaveLength(2); expect(options.at(0).text()).toBe("am1 | am2"); expect(options.at(1).text()).toBe("am3"); @@ -134,7 +134,7 @@ describe("", () => { it("clicking on options appends them to silenceFormStore.data.alertmanagers", () => { silenceFormStore.data.alertmanagers = []; const tree = ValidateSuggestions(); - const options = tree.find("[role='option']"); + const options = tree.find(".react-select__option"); options.at(0).simulate("click"); options.at(1).simulate("click"); expect(silenceFormStore.data.alertmanagers).toHaveLength(2); diff --git a/ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.test.js b/ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.test.js index 4508f2859..4b7677456 100644 --- a/ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.test.js +++ b/ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.test.js @@ -72,7 +72,7 @@ describe("", () => { it("renders suggestions", () => { const tree = ValidateSuggestions(); - const options = tree.find("[role='option']"); + const options = tree.find(".react-select__option"); expect(options).toHaveLength(2); expect(options.at(0).text()).toBe("job"); expect(options.at(1).text()).toBe("cluster"); @@ -80,7 +80,7 @@ describe("", () => { it("clicking on options updates the matcher", () => { const tree = ValidateSuggestions(); - const option = tree.find("[role='option']").at(0); + const option = tree.find(".react-select__option").at(0); option.simulate("click"); expect(matcher.name).toBe("job"); }); diff --git a/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.test.js b/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.test.js index 852a0618f..9b2c095b9 100644 --- a/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.test.js +++ b/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.test.js @@ -76,7 +76,7 @@ describe("", () => { it("renders suggestions", () => { const tree = ValidateSuggestions(); - const options = tree.find("[role='option']"); + const options = tree.find(".react-select__option"); expect(options).toHaveLength(2); expect(options.at(0).text()).toBe("foo"); expect(options.at(1).text()).toBe("bar"); @@ -84,7 +84,7 @@ describe("", () => { it("clicking on options appends them to matcher.values", () => { const tree = ValidateSuggestions(); - const options = tree.find("[role='option']"); + const options = tree.find(".react-select__option"); options.at(0).simulate("click"); options.at(1).simulate("click"); expect(matcher.values).toHaveLength(2); @@ -95,7 +95,7 @@ describe("", () => { it("selecting one option doesn't force matcher.isRegex=true", () => { const tree = ValidateSuggestions(); expect(matcher.isRegex).toBe(false); - const options = tree.find("[role='option']"); + const options = tree.find(".react-select__option"); options.at(0).simulate("click"); expect(matcher.isRegex).toBe(false); }); @@ -104,7 +104,7 @@ describe("", () => { matcher.isRegex = true; const tree = ValidateSuggestions(); expect(matcher.isRegex).toBe(true); - const options = tree.find("[role='option']"); + const options = tree.find(".react-select__option"); options.at(0).simulate("click"); expect(matcher.isRegex).toBe(false); }); @@ -112,7 +112,7 @@ describe("", () => { it("selecting multiple options forces matcher.isRegex=true", () => { const tree = ValidateSuggestions(); expect(matcher.isRegex).toBe(false); - const options = tree.find("[role='option']"); + const options = tree.find(".react-select__option"); options.at(0).simulate("click"); options.at(1).simulate("click"); expect(matcher.isRegex).toBe(true); diff --git a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.js.snap b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.js.snap index a41b43eb0..76f2c0b92 100644 --- a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.js.snap +++ b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.js.snap @@ -3,13 +3,13 @@ exports[` matches snapshot 1`] = ` "
-
-
-
+
+
+
name
-
matches snapshot 1`] = `
-
- +
+
matches snapshot 1`] = ` "
-
-
+
+
matches snapshot 1`] = `
-
+
Label value
-
matches snapshot 1`] = `
-
- +
+