From 2d65845bac314a74bc87a52b40af78efdfb06cac Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Mon, 8 Oct 2018 09:36:08 +0200
Subject: [PATCH] Update (js-) tests and snapshots for react-select 2 #13425

---
 .../components/Picker/DescriptionPicker.tsx   |   1 -
 .../components/Picker/PickerOption.test.tsx   |  10 +-
 .../core/components/Picker/PickerOption.tsx   |   9 +-
 .../app/core/components/Picker/TeamPicker.tsx |   1 -
 .../app/core/components/Picker/UserPicker.tsx |   3 +-
 .../__snapshots__/PickerOption.test.tsx.snap  |  25 ++--
 .../__snapshots__/TeamPicker.test.tsx.snap    | 111 +++++++++---------
 .../__snapshots__/UserPicker.test.tsx.snap    | 111 +++++++++---------
 .../__snapshots__/TeamMembers.test.tsx.snap   |   3 -
 9 files changed, 134 insertions(+), 140 deletions(-)

diff --git a/public/app/core/components/Picker/DescriptionPicker.tsx b/public/app/core/components/Picker/DescriptionPicker.tsx
index b069d3472fc..cd9b4c2acbf 100644
--- a/public/app/core/components/Picker/DescriptionPicker.tsx
+++ b/public/app/core/components/Picker/DescriptionPicker.tsx
@@ -42,7 +42,6 @@ class DescriptionPicker extends Component<Props, any> {
           onChange={onSelected}
           getOptionValue={i => i.value}
           getOptionLabel={i => i.label}
-          // menuIsOpen={true} // debug
         />
       </div>
     );
diff --git a/public/app/core/components/Picker/PickerOption.test.tsx b/public/app/core/components/Picker/PickerOption.test.tsx
index 2f46f3197c5..199bb74bf90 100644
--- a/public/app/core/components/Picker/PickerOption.test.tsx
+++ b/public/app/core/components/Picker/PickerOption.test.tsx
@@ -3,10 +3,12 @@ import renderer from 'react-test-renderer';
 import PickerOption from './PickerOption';
 
 const model = {
-  onSelect: () => {},
-  onFocus: () => {},
-  isFocused: () => {},
-  option: {
+  cx: jest.fn(),
+  clearValue: jest.fn(),
+  onSelect: jest.fn(),
+  getStyles: jest.fn(),
+  children: 'Model title',
+  data: {
     title: 'Model title',
     avatarUrl: 'url/to/avatar',
     label: 'User picker label',
diff --git a/public/app/core/components/Picker/PickerOption.tsx b/public/app/core/components/Picker/PickerOption.tsx
index 1a7a51e6f31..bffe1f8f34f 100644
--- a/public/app/core/components/Picker/PickerOption.tsx
+++ b/public/app/core/components/Picker/PickerOption.tsx
@@ -2,15 +2,12 @@ import React from 'react';
 import { components } from 'react-select';
 import { OptionProps } from 'react-select/lib/components/Option';
 
-export interface Props {
-  children: Element;
-  isSelected: boolean;
+// https://github.com/JedWatson/react-select/issues/3038
+interface ExtendedOptionProps extends OptionProps<any> {
   data: any;
-  getStyles: any;
-  className?: string;
 }
 
-export const PickerOption = (props: OptionProps<any>) => {
+export const PickerOption = (props: ExtendedOptionProps) => {
   const { children, data } = props;
   return (
     <components.Option {...props}>
diff --git a/public/app/core/components/Picker/TeamPicker.tsx b/public/app/core/components/Picker/TeamPicker.tsx
index b4b66fa9467..1ced54ef305 100644
--- a/public/app/core/components/Picker/TeamPicker.tsx
+++ b/public/app/core/components/Picker/TeamPicker.tsx
@@ -80,7 +80,6 @@ export class TeamPicker extends Component<Props, State> {
           noOptionsMessage={() => 'No teams found'}
           getOptionValue={i => i.id}
           getOptionLabel={i => i.label}
-          // menuIsOpen={true}
         />
       </div>
     );
diff --git a/public/app/core/components/Picker/UserPicker.tsx b/public/app/core/components/Picker/UserPicker.tsx
index 40ec0b54482..2dfc3fb22ce 100644
--- a/public/app/core/components/Picker/UserPicker.tsx
+++ b/public/app/core/components/Picker/UserPicker.tsx
@@ -36,7 +36,7 @@ export class UserPicker extends Component<Props, State> {
     this.setState({ isLoading: true });
 
     return backendSrv
-      .get(`/api/org/users?query=${query}&limit=1`)
+      .get(`/api/org/users?query=${query}&limit=10`)
       .then(result => {
         return result.map(user => ({
           id: user.userId,
@@ -75,7 +75,6 @@ export class UserPicker extends Component<Props, State> {
           noOptionsMessage={() => 'No users found'}
           getOptionValue={i => i.id}
           getOptionLabel={i => i.label}
-          // menuIsOpen={true}
         />
       </div>
     );
diff --git a/public/app/core/components/Picker/__snapshots__/PickerOption.test.tsx.snap b/public/app/core/components/Picker/__snapshots__/PickerOption.test.tsx.snap
index 764f7844cb7..18d23983077 100644
--- a/public/app/core/components/Picker/__snapshots__/PickerOption.test.tsx.snap
+++ b/public/app/core/components/Picker/__snapshots__/PickerOption.test.tsx.snap
@@ -1,17 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PickerOption renders correctly 1`] = `
-<button
-  className="user-picker-option__button btn btn-link class-for-user-picker"
-  onMouseDown={[Function]}
-  onMouseEnter={[Function]}
-  onMouseMove={[Function]}
-  title="Model title"
->
-  <img
-    alt="User picker label"
-    className="user-picker-option__avatar"
-    src="url/to/avatar"
-  />
-</button>
+<div>
+  <div
+    className="description-picker-option__button btn btn-link width-19"
+  >
+    <img
+      alt="User picker label"
+      className="user-picker-option__avatar"
+      src="url/to/avatar"
+    />
+    Model title
+  </div>
+</div>
 `;
diff --git a/public/app/core/components/Picker/__snapshots__/TeamPicker.test.tsx.snap b/public/app/core/components/Picker/__snapshots__/TeamPicker.test.tsx.snap
index 9c21da5fdc4..69db112907e 100644
--- a/public/app/core/components/Picker/__snapshots__/TeamPicker.test.tsx.snap
+++ b/public/app/core/components/Picker/__snapshots__/TeamPicker.test.tsx.snap
@@ -5,85 +5,86 @@ exports[`TeamPicker renders correctly 1`] = `
   className="user-picker"
 >
   <div
-    className="Select gf-form-input gf-form-input--form-dropdown  is-clearable is-loading is-searchable Select--single"
+    className="css-0 gf-form-input gf-form-input--form-dropdown"
+    onKeyDown={[Function]}
   >
     <div
-      className="Select-control"
-      onKeyDown={[Function]}
+      className="css-0 gf-form-select2__control"
       onMouseDown={[Function]}
       onTouchEnd={[Function]}
-      onTouchMove={[Function]}
-      onTouchStart={[Function]}
     >
       <div
-        className="Select-multi-value-wrapper"
-        id="react-select-2--value"
+        className="css-0 gf-form-select2__value-container"
       >
         <div
-          className="Select-placeholder"
+          className="css-0 gf-form-select2__placeholder"
         >
-          Loading...
+          Select a team
         </div>
         <div
-          className="Select-input"
-          style={
-            Object {
-              "display": "inline-block",
-            }
-          }
+          className="css-0"
         >
-          <input
-            aria-activedescendant="react-select-2--value"
-            aria-expanded="false"
-            aria-haspopup="false"
-            aria-owns=""
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            required={false}
-            role="combobox"
-            style={
-              Object {
-                "boxSizing": "content-box",
-                "width": "5px",
-              }
-            }
-            value=""
-          />
           <div
+            className="gf-form-select2__input"
             style={
               Object {
-                "height": 0,
-                "left": 0,
-                "overflow": "scroll",
-                "position": "absolute",
-                "top": 0,
-                "visibility": "hidden",
-                "whiteSpace": "pre",
+                "display": "inline-block",
               }
             }
           >
-            
+            <input
+              aria-autocomplete="list"
+              autoCapitalize="none"
+              autoComplete="off"
+              autoCorrect="off"
+              disabled={false}
+              id="react-select-2-input"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              spellCheck="false"
+              style={
+                Object {
+                  "background": 0,
+                  "border": 0,
+                  "boxSizing": "content-box",
+                  "color": "inherit",
+                  "fontSize": "inherit",
+                  "opacity": 1,
+                  "outline": 0,
+                  "padding": 0,
+                  "width": "1px",
+                }
+              }
+              tabIndex="0"
+              type="text"
+              value=""
+            />
+            <div
+              style={
+                Object {
+                  "height": 0,
+                  "left": 0,
+                  "overflow": "scroll",
+                  "position": "absolute",
+                  "top": 0,
+                  "visibility": "hidden",
+                  "whiteSpace": "pre",
+                }
+              }
+            >
+              
+            </div>
           </div>
         </div>
       </div>
-      <span
-        aria-hidden="true"
-        className="Select-loading-zone"
+      <div
+        className="css-0 gf-form-select2__indicators"
       >
         <span
-          className="Select-loading"
+          className="gf-form-select2__select-arrow "
         />
-      </span>
-      <span
-        className="Select-arrow-zone"
-        onMouseDown={[Function]}
-      >
-        <span
-          className="Select-arrow"
-          onMouseDown={[Function]}
-        />
-      </span>
+      </div>
     </div>
   </div>
 </div>
diff --git a/public/app/core/components/Picker/__snapshots__/UserPicker.test.tsx.snap b/public/app/core/components/Picker/__snapshots__/UserPicker.test.tsx.snap
index 86b92213183..bdf12c03cd7 100644
--- a/public/app/core/components/Picker/__snapshots__/UserPicker.test.tsx.snap
+++ b/public/app/core/components/Picker/__snapshots__/UserPicker.test.tsx.snap
@@ -5,85 +5,86 @@ exports[`UserPicker renders correctly 1`] = `
   className="user-picker"
 >
   <div
-    className="Select gf-form-input gf-form-input--form-dropdown  is-clearable is-loading is-searchable Select--single"
+    className="css-0 gf-form-input gf-form-input--form-dropdown"
+    onKeyDown={[Function]}
   >
     <div
-      className="Select-control"
-      onKeyDown={[Function]}
+      className="css-0 gf-form-select2__control"
       onMouseDown={[Function]}
       onTouchEnd={[Function]}
-      onTouchMove={[Function]}
-      onTouchStart={[Function]}
     >
       <div
-        className="Select-multi-value-wrapper"
-        id="react-select-2--value"
+        className="css-0 gf-form-select2__value-container"
       >
         <div
-          className="Select-placeholder"
+          className="css-0 gf-form-select2__placeholder"
         >
-          Loading...
+          Select user
         </div>
         <div
-          className="Select-input"
-          style={
-            Object {
-              "display": "inline-block",
-            }
-          }
+          className="css-0"
         >
-          <input
-            aria-activedescendant="react-select-2--value"
-            aria-expanded="false"
-            aria-haspopup="false"
-            aria-owns=""
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            required={false}
-            role="combobox"
-            style={
-              Object {
-                "boxSizing": "content-box",
-                "width": "5px",
-              }
-            }
-            value=""
-          />
           <div
+            className="gf-form-select2__input"
             style={
               Object {
-                "height": 0,
-                "left": 0,
-                "overflow": "scroll",
-                "position": "absolute",
-                "top": 0,
-                "visibility": "hidden",
-                "whiteSpace": "pre",
+                "display": "inline-block",
               }
             }
           >
-            
+            <input
+              aria-autocomplete="list"
+              autoCapitalize="none"
+              autoComplete="off"
+              autoCorrect="off"
+              disabled={false}
+              id="react-select-2-input"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              spellCheck="false"
+              style={
+                Object {
+                  "background": 0,
+                  "border": 0,
+                  "boxSizing": "content-box",
+                  "color": "inherit",
+                  "fontSize": "inherit",
+                  "opacity": 1,
+                  "outline": 0,
+                  "padding": 0,
+                  "width": "1px",
+                }
+              }
+              tabIndex="0"
+              type="text"
+              value=""
+            />
+            <div
+              style={
+                Object {
+                  "height": 0,
+                  "left": 0,
+                  "overflow": "scroll",
+                  "position": "absolute",
+                  "top": 0,
+                  "visibility": "hidden",
+                  "whiteSpace": "pre",
+                }
+              }
+            >
+              
+            </div>
           </div>
         </div>
       </div>
-      <span
-        aria-hidden="true"
-        className="Select-loading-zone"
+      <div
+        className="css-0 gf-form-select2__indicators"
       >
         <span
-          className="Select-loading"
+          className="gf-form-select2__select-arrow "
         />
-      </span>
-      <span
-        className="Select-arrow-zone"
-        onMouseDown={[Function]}
-      >
-        <span
-          className="Select-arrow"
-          onMouseDown={[Function]}
-        />
-      </span>
+      </div>
     </div>
   </div>
 </div>
diff --git a/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
index 93e6f2131aa..0e9b4332cca 100644
--- a/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
+++ b/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
@@ -60,7 +60,6 @@ exports[`Render should render component 1`] = `
         <UserPicker
           className="width-30"
           onSelected={[Function]}
-          value={null}
         />
       </div>
     </div>
@@ -155,7 +154,6 @@ exports[`Render should render team members 1`] = `
         <UserPicker
           className="width-30"
           onSelected={[Function]}
-          value={null}
         />
       </div>
     </div>
@@ -376,7 +374,6 @@ exports[`Render should render team members when sync enabled 1`] = `
         <UserPicker
           className="width-30"
           onSelected={[Function]}
-          value={null}
         />
       </div>
     </div>