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.

ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap

@@ -13,13 +13,13 @@ exports[`<CustomMultiSelect /> matches snapshot when focused 1`] = `
       &nbsp;  0 results available. Select is focused ,type to refine list, press Down to open the menu,
     </p>
   </span>
-  <div class=\\"css-7i0fzi\\">
-    <div class=\\"css-pb81dw\\">
-      <div class=\\"css-1492t68\\">
+  <div class=\\"css-7i0fzi react-select__control react-select__control--is-focused\\">
+    <div class=\\"css-pb81dw react-select__value-container\\">
+      <div class=\\"css-1492t68 react-select__placeholder\\">
         Select...
       </div>
       <div class=\\"css-1g6gooi\\">
-        <div class
+        <div class=\\"react-select__input\\"
              style=\\"display: inline-block;\\"
         >
           <input autocapitalize=\\"none\\"
@@ -38,11 +38,11 @@ exports[`<CustomMultiSelect /> matches snapshot when focused 1`] = `
         </div>
       </div>
     </div>
-    <div class=\\"css-mik995\\">
-      <span class=\\"css-d8oujb\\">
+    <div class=\\"css-mik995 react-select__indicators\\">
+      <span class=\\"css-d8oujb react-select__indicator-separator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"css-1uq0kb5\\"
+           class=\\"css-1uq0kb5 react-select__indicator react-select__dropdown-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
@@ -64,13 +64,13 @@ exports[`<CustomMultiSelect /> matches snapshot when focused 1`] = `
 exports[`<CustomMultiSelect /> matches snapshot with a value 1`] = `
 "
 <div class=\\"css-10nd86i\\">
-  <div class=\\"css-7jxtyj\\">
-    <div class=\\"css-pb81dw\\">
-      <div class=\\"css-xp4uvy\\">
+  <div class=\\"css-7jxtyj react-select__control\\">
+    <div class=\\"css-pb81dw react-select__value-container react-select__value-container--has-value\\">
+      <div class=\\"css-xp4uvy react-select__single-value\\">
         foo
       </div>
       <div class=\\"css-1g6gooi\\">
-        <div class
+        <div class=\\"react-select__input\\"
              style=\\"display:inline-block\\"
         >
           <input type=\\"text\\"
@@ -89,11 +89,11 @@ exports[`<CustomMultiSelect /> matches snapshot with a value 1`] = `
         </div>
       </div>
     </div>
-    <div class=\\"css-mik995\\">
-      <span class=\\"css-d8oujb\\">
+    <div class=\\"css-mik995 react-select__indicators\\">
+      <span class=\\"css-d8oujb react-select__indicator-separator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"css-1ep9fjw\\"
+           class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
@@ -115,13 +115,13 @@ exports[`<CustomMultiSelect /> matches snapshot with a value 1`] = `
 exports[`<CustomMultiSelect /> matches snapshot with defaults 1`] = `
 "
 <div class=\\"css-10nd86i\\">
-  <div class=\\"css-7jxtyj\\">
-    <div class=\\"css-pb81dw\\">
-      <div class=\\"css-1492t68\\">
+  <div class=\\"css-7jxtyj react-select__control\\">
+    <div class=\\"css-pb81dw react-select__value-container\\">
+      <div class=\\"css-1492t68 react-select__placeholder\\">
         Select...
       </div>
       <div class=\\"css-1g6gooi\\">
-        <div class
+        <div class=\\"react-select__input\\"
              style=\\"display:inline-block\\"
         >
           <input type=\\"text\\"
@@ -140,11 +140,11 @@ exports[`<CustomMultiSelect /> matches snapshot with defaults 1`] = `
         </div>
       </div>
     </div>
-    <div class=\\"css-mik995\\">
-      <span class=\\"css-d8oujb\\">
+    <div class=\\"css-mik995 react-select__indicators\\">
+      <span class=\\"css-d8oujb react-select__indicator-separator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"css-1ep9fjw\\"
+           class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
@@ -165,14 +165,14 @@ exports[`<CustomMultiSelect /> matches snapshot with defaults 1`] = `
 
 exports[`<CustomMultiSelect /> matches snapshot with isDisabled=true 1`] = `
 "
-<div class=\\"css-1sontr1\\">
-  <div class=\\"css-rw4imq\\">
-    <div class=\\"css-57r8lk\\">
-      <div class=\\"css-142w6gm\\">
+<div class=\\"css-1sontr1 react-select--is-disabled\\">
+  <div class=\\"css-rw4imq react-select__control react-select__control--is-disabled\\">
+    <div class=\\"css-57r8lk react-select__value-container react-select__value-container--has-value\\">
+      <div class=\\"css-142w6gm react-select__single-value react-select__single-value--is-disabled\\">
         foo
       </div>
       <div class=\\"css-1g6gooi\\">
-        <div class
+        <div class=\\"react-select__input\\"
              style=\\"display:inline-block\\"
         >
           <input type=\\"text\\"
@@ -192,11 +192,11 @@ exports[`<CustomMultiSelect /> matches snapshot with isDisabled=true 1`] = `
         </div>
       </div>
     </div>
-    <div class=\\"css-191n9vh\\">
-      <span class=\\"css-ln5n5c\\">
+    <div class=\\"css-191n9vh react-select__indicators\\">
+      <span class=\\"css-ln5n5c react-select__indicator-separator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"css-1ep9fjw\\"
+           class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
@@ -218,13 +218,13 @@ exports[`<CustomMultiSelect /> matches snapshot with isDisabled=true 1`] = `
 exports[`<CustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
 "
 <div class=\\"css-10nd86i\\">
-  <div class=\\"css-7jxtyj\\">
-    <div class=\\"css-10war8y\\">
-      <div class=\\"css-1492t68\\">
+  <div class=\\"css-7jxtyj react-select__control\\">
+    <div class=\\"css-10war8y react-select__value-container react-select__value-container--is-multi\\">
+      <div class=\\"css-1492t68 react-select__placeholder\\">
         Select...
       </div>
       <div class=\\"css-1g6gooi\\">
-        <div class
+        <div class=\\"react-select__input\\"
              style=\\"display:inline-block\\"
         >
           <input type=\\"text\\"
@@ -243,11 +243,11 @@ exports[`<CustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
         </div>
       </div>
     </div>
-    <div class=\\"css-mik995\\">
-      <span class=\\"css-d8oujb\\">
+    <div class=\\"css-mik995 react-select__indicators\\">
+      <span class=\\"css-d8oujb react-select__indicator-separator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"css-1ep9fjw\\"
+           class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
@@ -269,13 +269,13 @@ exports[`<CustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
 exports[`<CustomMultiSelect /> matches snapshot with isMulti=true and a value 1`] = `
 "
 <div class=\\"css-10nd86i\\">
-  <div class=\\"css-7jxtyj\\">
-    <div class=\\"css-10war8y\\">
-      <div class=\\"css-1y5uxcf\\">
-        <div class=\\"css-yagan3\\">
+  <div class=\\"css-7jxtyj react-select__control\\">
+    <div class=\\"css-10war8y react-select__value-container react-select__value-container--is-multi react-select__value-container--has-value\\">
+      <div class=\\"css-1y5uxcf react-select__multi-value\\">
+        <div class=\\"css-yagan3 react-select__multi-value__label\\">
           foo
         </div>
-        <div class=\\"css-n82uvk\\">
+        <div class=\\"css-n82uvk react-select__multi-value__remove\\">
           <svg height=\\"14\\"
                width=\\"14\\"
                viewbox=\\"0 0 20 20\\"
@@ -289,7 +289,7 @@ exports[`<CustomMultiSelect /> matches snapshot with isMulti=true and a value 1`
         </div>
       </div>
       <div class=\\"css-1g6gooi\\">
-        <div class
+        <div class=\\"react-select__input\\"
              style=\\"display:inline-block\\"
         >
           <input type=\\"text\\"
@@ -308,9 +308,9 @@ exports[`<CustomMultiSelect /> matches snapshot with isMulti=true and a value 1`
         </div>
       </div>
     </div>
-    <div class=\\"css-mik995\\">
+    <div class=\\"css-mik995 react-select__indicators\\">
       <div aria-hidden=\\"true\\"
-           class=\\"css-1ep9fjw\\"
+           class=\\"css-1ep9fjw react-select__indicator react-select__clear-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
@@ -323,10 +323,10 @@ exports[`<CustomMultiSelect /> matches snapshot with isMulti=true and a value 1`
           </path>
         </svg>
       </div>
-      <span class=\\"css-d8oujb\\">
+      <span class=\\"css-d8oujb react-select__indicator-separator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"css-1ep9fjw\\"
+           class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"

ui/src/Components/MultiSelect/index.js

@@ -93,7 +93,11 @@ class MultiSelect extends CreatableSelect {
 
   render() {
     return (
-      <CreatableSelect styles={ReactSelectStyles} {...this.renderProps()} />
+      <CreatableSelect
+        styles={ReactSelectStyles}
+        classNamePrefix="react-select"
+        {...this.renderProps()}
+      />
     );
   }
 }

ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.js.snap

@@ -3,13 +3,13 @@
 exports[`<AlertManagerInput /> matches snapshot 1`] = `
 "
 <div class=\\"css-10nd86i\\">
-  <div class=\\"css-7jxtyj\\">
-    <div class=\\"css-10war8y\\">
-      <div class=\\"css-1y5uxcf\\">
-        <div class=\\"css-yagan3\\">
+  <div class=\\"css-7jxtyj react-select__control\\">
+    <div class=\\"css-10war8y react-select__value-container react-select__value-container--is-multi react-select__value-container--has-value\\">
+      <div class=\\"css-1y5uxcf react-select__multi-value\\">
+        <div class=\\"css-yagan3 react-select__multi-value__label\\">
           am1 | am2
         </div>
-        <div class=\\"css-n82uvk\\">
+        <div class=\\"css-n82uvk react-select__multi-value__remove\\">
           <svg height=\\"14\\"
                width=\\"14\\"
                viewbox=\\"0 0 20 20\\"
@@ -22,11 +22,11 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
           </svg>
         </div>
       </div>
-      <div class=\\"css-1y5uxcf\\">
-        <div class=\\"css-yagan3\\">
+      <div class=\\"css-1y5uxcf react-select__multi-value\\">
+        <div class=\\"css-yagan3 react-select__multi-value__label\\">
           am3
         </div>
-        <div class=\\"css-n82uvk\\">
+        <div class=\\"css-n82uvk react-select__multi-value__remove\\">
           <svg height=\\"14\\"
                width=\\"14\\"
                viewbox=\\"0 0 20 20\\"
@@ -40,7 +40,7 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
         </div>
       </div>
       <div class=\\"css-1g6gooi\\">
-        <div class
+        <div class=\\"react-select__input\\"
              style=\\"display:inline-block\\"
         >
           <input type=\\"text\\"
@@ -59,9 +59,9 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div class=\\"css-mik995\\">
+    <div class=\\"css-mik995 react-select__indicators\\">
       <div aria-hidden=\\"true\\"
-           class=\\"css-1ep9fjw\\"
+           class=\\"css-1ep9fjw react-select__indicator react-select__clear-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
@@ -74,10 +74,10 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
           </path>
         </svg>
       </div>
-      <span class=\\"css-d8oujb\\">
+      <span class=\\"css-d8oujb react-select__indicator-separator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"css-1ep9fjw\\"
+           class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"

ui/src/Components/SilenceModal/AlertManagerInput/index.js

@@ -69,6 +69,7 @@ const AlertManagerInput = observer(
       return (
         <ReactSelect
           styles={ReactSelectStyles}
+          classNamePrefix="react-select"
           instanceId="silence-input-alertmanagers"
           defaultValue={silenceFormStore.data.alertmanagers}
           options={AlertmanagerClustersToOption(

ui/src/Components/SilenceModal/AlertManagerInput/index.test.js

@@ -125,7 +125,7 @@ describe("<AlertManagerInput />", () => {
 
   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("<AlertManagerInput />", () => {
   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);

ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.test.js

@@ -72,7 +72,7 @@ describe("<LabelNameInput />", () => {
 
   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("<LabelNameInput />", () => {
 
   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");
   });

ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.test.js

@@ -76,7 +76,7 @@ describe("<LabelValueInput />", () => {
 
   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("<LabelValueInput />", () => {
 
   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("<LabelValueInput />", () => {
   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("<LabelValueInput />", () => {
     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("<LabelValueInput />", () => {
   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);

ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.js.snap

@@ -3,13 +3,13 @@
 exports[`<LabelNameInput /> matches snapshot 1`] = `
 "
 <div class=\\"css-10nd86i\\">
-  <div class=\\"css-7jxtyj\\">
-    <div class=\\"css-pb81dw\\">
-      <div class=\\"css-xp4uvy\\">
+  <div class=\\"css-7jxtyj react-select__control\\">
+    <div class=\\"css-pb81dw react-select__value-container react-select__value-container--has-value\\">
+      <div class=\\"css-xp4uvy react-select__single-value\\">
         name
       </div>
       <div class=\\"css-1g6gooi\\">
-        <div class
+        <div class=\\"react-select__input\\"
              style=\\"display:inline-block\\"
         >
           <input type=\\"text\\"
@@ -28,11 +28,11 @@ exports[`<LabelNameInput /> matches snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div class=\\"css-mik995\\">
-      <span class=\\"css-d8oujb\\">
+    <div class=\\"css-mik995 react-select__indicators\\">
+      <span class=\\"css-d8oujb react-select__indicator-separator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"css-1ep9fjw\\"
+           class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"

ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap

@@ -3,8 +3,8 @@
 exports[`<LabelValueInput /> matches snapshot 1`] = `
 "
 <div class=\\"css-10nd86i\\">
-  <div class=\\"css-7jxtyj\\">
-    <div class=\\"css-10war8y\\">
+  <div class=\\"css-7jxtyj react-select__control\\">
+    <div class=\\"css-10war8y react-select__value-container react-select__value-container--is-multi\\">
       <div title=\\"Number of alerts matching this label\\"
            class
            style=\\"display:inline\\"
@@ -17,12 +17,12 @@ exports[`<LabelValueInput /> matches snapshot 1`] = `
         </span>
       </div>
       <div>
-        <div class=\\"css-1492t68\\">
+        <div class=\\"css-1492t68 react-select__placeholder\\">
           Label value
         </div>
       </div>
       <div class=\\"css-1g6gooi\\">
-        <div class
+        <div class=\\"react-select__input\\"
              style=\\"display:inline-block\\"
         >
           <input type=\\"text\\"
@@ -41,11 +41,11 @@ exports[`<LabelValueInput /> matches snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div class=\\"css-mik995\\">
-      <span class=\\"css-d8oujb\\">
+    <div class=\\"css-mik995 react-select__indicators\\">
+      <span class=\\"css-d8oujb react-select__indicator-separator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"css-1ep9fjw\\"
+           class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"