From fafcc0240327b5ebd27d74bf5d9f24294bb776ba Mon Sep 17 00:00:00 2001
From: Joshua Li <joshuali925@gmail.com>
Date: Wed, 30 Mar 2022 20:33:17 +0000
Subject: [PATCH] Update jest tests

Signed-off-by: Joshua Li <joshuali925@gmail.com>
---
 .../__snapshots__/gantt_chart.test.tsx.snap   |  20 +-
 .../gantt_chart_editor.test.tsx.snap          | 233 +++++++++---------
 .../options_editor.test.tsx.snap              |   4 +-
 .../__tests__/options_editor.test.tsx         |   2 +-
 4 files changed, 131 insertions(+), 128 deletions(-)

diff --git a/gantt-chart/public/components/__tests__/__snapshots__/gantt_chart.test.tsx.snap b/gantt-chart/public/components/__tests__/__snapshots__/gantt_chart.test.tsx.snap
index fe95bee..6ce0cbc 100644
--- a/gantt-chart/public/components/__tests__/__snapshots__/gantt_chart.test.tsx.snap
+++ b/gantt-chart/public/components/__tests__/__snapshots__/gantt_chart.test.tsx.snap
@@ -4,14 +4,14 @@ exports[`<GanttChart /> spec renders empty prompt when no data is returned 1`] =
 <div
   class="euiEmptyPrompt"
 >
+  <h2
+    class="euiTitle euiTitle--medium"
+  >
+    No data
+  </h2>
   <span
     class="euiTextColor euiTextColor--subdued"
   >
-    <h2
-      class="euiTitle euiTitle--medium"
-    >
-      No data
-    </h2>
     <div
       class="euiSpacer euiSpacer--m"
     />
@@ -32,14 +32,14 @@ exports[`<GanttChart /> spec renders empty prompt when no field is selected 1`]
 <div
   class="euiEmptyPrompt"
 >
+  <h2
+    class="euiTitle euiTitle--medium"
+  >
+    No data
+  </h2>
   <span
     class="euiTextColor euiTextColor--subdued"
   >
-    <h2
-      class="euiTitle euiTitle--medium"
-    >
-      No data
-    </h2>
     <div
       class="euiSpacer euiSpacer--m"
     />
diff --git a/gantt-chart/public/components/__tests__/__snapshots__/gantt_chart_editor.test.tsx.snap b/gantt-chart/public/components/__tests__/__snapshots__/gantt_chart_editor.test.tsx.snap
index 7923a1a..9352378 100644
--- a/gantt-chart/public/components/__tests__/__snapshots__/gantt_chart_editor.test.tsx.snap
+++ b/gantt-chart/public/components/__tests__/__snapshots__/gantt_chart_editor.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<GanttChartEditor /> spec renders the component 1`] = `
 <div
-  class="euiPanel euiPanel--paddingSmall"
+  class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
 >
   <h3
     class="euiTitle euiTitle--xsmall"
@@ -30,54 +30,55 @@ exports[`<GanttChartEditor /> spec renders the component 1`] = `
       class="euiFormRow__fieldWrapper"
     >
       <div
-        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+        class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
       >
         <div
           class="euiPopover__anchor"
         >
-          <input
-            id="random_html_id"
-            type="hidden"
-            value="spanID"
-          />
-          <div
-            class="euiFormControlLayout"
-          >
+          <div>
+            <input
+              id="random_html_id"
+              type="hidden"
+              value="spanID"
+            />
             <div
-              class="euiFormControlLayout__childrenWrapper"
+              class="euiFormControlLayout"
             >
-              <span
-                class="euiScreenReaderOnly"
-                id="random_html_id"
-              >
-                Select an option: 
-                , is selected
-              </span>
-              <button
-                aria-describedby="random_html_id-help"
-                aria-haspopup="true"
-                aria-labelledby="random_html_id random_html_id"
-                class="euiSuperSelectControl"
-                data-test-subj="gantt-chart-editor-label-field"
-                type="button"
-              />
               <div
-                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                class="euiFormControlLayout__childrenWrapper"
               >
                 <span
-                  class="euiFormControlLayoutCustomIcon"
+                  class="euiScreenReaderOnly"
+                  id="random_html_id"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                    focusable="false"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  />
+                  Select an option: , is selected
                 </span>
+                <button
+                  aria-describedby="random_html_id-help-0"
+                  aria-haspopup="true"
+                  aria-labelledby="random_html_id random_html_id"
+                  class="euiSuperSelectControl"
+                  data-test-subj="gantt-chart-editor-label-field"
+                  type="button"
+                />
+                <div
+                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                >
+                  <span
+                    class="euiFormControlLayoutCustomIcon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -85,7 +86,7 @@ exports[`<GanttChartEditor /> spec renders the component 1`] = `
       </div>
       <div
         class="euiFormHelpText euiFormRow__text"
-        id="random_html_id-help"
+        id="random_html_id-help-0"
       >
         Gantt chart allows you to compare schedules of the selected field.
       </div>
@@ -109,54 +110,55 @@ exports[`<GanttChartEditor /> spec renders the component 1`] = `
       class="euiFormRow__fieldWrapper"
     >
       <div
-        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+        class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
       >
         <div
           class="euiPopover__anchor"
         >
-          <input
-            id="random_html_id"
-            type="hidden"
-            value="startTime"
-          />
-          <div
-            class="euiFormControlLayout"
-          >
+          <div>
+            <input
+              id="random_html_id"
+              type="hidden"
+              value="startTime"
+            />
             <div
-              class="euiFormControlLayout__childrenWrapper"
+              class="euiFormControlLayout"
             >
-              <span
-                class="euiScreenReaderOnly"
-                id="random_html_id"
-              >
-                Select an option: 
-                , is selected
-              </span>
-              <button
-                aria-describedby="random_html_id-help"
-                aria-haspopup="true"
-                aria-labelledby="random_html_id random_html_id"
-                class="euiSuperSelectControl"
-                data-test-subj="gantt-chart-editor-start-time-field"
-                type="button"
-              />
               <div
-                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                class="euiFormControlLayout__childrenWrapper"
               >
                 <span
-                  class="euiFormControlLayoutCustomIcon"
+                  class="euiScreenReaderOnly"
+                  id="random_html_id"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                    focusable="false"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  />
+                  Select an option: , is selected
                 </span>
+                <button
+                  aria-describedby="random_html_id-help-0"
+                  aria-haspopup="true"
+                  aria-labelledby="random_html_id random_html_id"
+                  class="euiSuperSelectControl"
+                  data-test-subj="gantt-chart-editor-start-time-field"
+                  type="button"
+                />
+                <div
+                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                >
+                  <span
+                    class="euiFormControlLayoutCustomIcon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -164,7 +166,7 @@ exports[`<GanttChartEditor /> spec renders the component 1`] = `
       </div>
       <div
         class="euiFormHelpText euiFormRow__text"
-        id="random_html_id-help"
+        id="random_html_id-help-0"
       >
         Select a timestamp field to represent the beginning of a schedule.
       </div>
@@ -188,54 +190,55 @@ exports[`<GanttChartEditor /> spec renders the component 1`] = `
       class="euiFormRow__fieldWrapper"
     >
       <div
-        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+        class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
       >
         <div
           class="euiPopover__anchor"
         >
-          <input
-            id="random_html_id"
-            type="hidden"
-            value="duration"
-          />
-          <div
-            class="euiFormControlLayout"
-          >
+          <div>
+            <input
+              id="random_html_id"
+              type="hidden"
+              value="duration"
+            />
             <div
-              class="euiFormControlLayout__childrenWrapper"
+              class="euiFormControlLayout"
             >
-              <span
-                class="euiScreenReaderOnly"
-                id="random_html_id"
-              >
-                Select an option: 
-                , is selected
-              </span>
-              <button
-                aria-describedby="random_html_id-help"
-                aria-haspopup="true"
-                aria-labelledby="random_html_id random_html_id"
-                class="euiSuperSelectControl"
-                data-test-subj="gantt-chart-editor-duration-field"
-                type="button"
-              />
               <div
-                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                class="euiFormControlLayout__childrenWrapper"
               >
                 <span
-                  class="euiFormControlLayoutCustomIcon"
+                  class="euiScreenReaderOnly"
+                  id="random_html_id"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                    focusable="false"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  />
+                  Select an option: , is selected
                 </span>
+                <button
+                  aria-describedby="random_html_id-help-0"
+                  aria-haspopup="true"
+                  aria-labelledby="random_html_id random_html_id"
+                  class="euiSuperSelectControl"
+                  data-test-subj="gantt-chart-editor-duration-field"
+                  type="button"
+                />
+                <div
+                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                >
+                  <span
+                    class="euiFormControlLayoutCustomIcon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -243,7 +246,7 @@ exports[`<GanttChartEditor /> spec renders the component 1`] = `
       </div>
       <div
         class="euiFormHelpText euiFormRow__text"
-        id="random_html_id-help"
+        id="random_html_id-help-0"
       >
         Value of duration field must be a time interval that can be added to the start timestamp field.
       </div>
diff --git a/gantt-chart/public/components/__tests__/__snapshots__/options_editor.test.tsx.snap b/gantt-chart/public/components/__tests__/__snapshots__/options_editor.test.tsx.snap
index 7ebfb87..e1c8cd5 100644
--- a/gantt-chart/public/components/__tests__/__snapshots__/options_editor.test.tsx.snap
+++ b/gantt-chart/public/components/__tests__/__snapshots__/options_editor.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<OptionsEditor /> spec renders the component 1`] = `
 <div
-  class="euiPanel euiPanel--paddingSmall"
+  class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
 >
   <h3
     class="euiTitle euiTitle--xsmall"
@@ -233,7 +233,7 @@ exports[`<OptionsEditor /> spec renders the component 1`] = `
 
 exports[`<OptionsEditor /> spec renders the component with different options 1`] = `
 <div
-  class="euiPanel euiPanel--paddingSmall"
+  class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
 >
   <h3
     class="euiTitle euiTitle--xsmall"
diff --git a/gantt-chart/public/components/__tests__/options_editor.test.tsx b/gantt-chart/public/components/__tests__/options_editor.test.tsx
index f9e35b2..1bbaf54 100644
--- a/gantt-chart/public/components/__tests__/options_editor.test.tsx
+++ b/gantt-chart/public/components/__tests__/options_editor.test.tsx
@@ -59,7 +59,7 @@ describe('<OptionsEditor /> spec', () => {
   it('sets colors', () => {
     const setValue = jest.fn();
     const utils = render(<OptionsEditor {...mockEditorProps(setValue)} />);
-    const colorPicker = utils.getByTestId('colorPickerAnchor');
+    const colorPicker = utils.getByTestId('euiColorPickerAnchor');
     fireEvent.change(colorPicker, { target: { value: '#EEEEEE' } });
     expect(setValue).toBeCalledWith('colors', '#EEEEEE');
   });