From 0870bfe868a9305d2400c6c1861ed8b1e0dd8ef1 Mon Sep 17 00:00:00 2001
From: Bree Hall <briannajdhall@gmail.com>
Date: Wed, 28 Sep 2022 16:45:21 -0400
Subject: [PATCH] Updated reference to mixins Sass file. Updated snapshots for
 Jest Test Suite #5 to account for EuiButton Emotion conversion. Updated unit
 tests that target EuiButton to simulate click events. These tests have been
 updated to target a button element to prevent undefined click event errors

---
 .../public/search/errors/timeout_error.test.tsx    |  2 +-
 .../tests/saved_object_finder_create_new.test.tsx  |  2 +-
 .../add_data/__snapshots__/add_data.test.tsx.snap  |  2 ++
 .../tutorial/__snapshots__/footer.test.js.snap     |  2 ++
 .../__snapshots__/instruction_set.test.js.snap     | 10 ++++++++++
 .../saved_objects_installer.test.js.snap           | 14 ++++++++------
 .../workpad_header/view_menu/custom_interval.tsx   |  4 ++--
 x-pack/plugins/lens/public/_mixins.scss            |  2 +-
 .../config_panel/config_panel.test.tsx             |  4 ++--
 .../workspace_panel/chart_switch.test.tsx          |  2 +-
 .../coloring/palette_panel_container.scss          |  2 +-
 .../datatable/components/toolbar.test.tsx          |  3 +--
 .../gauge/toolbar_component/gauge_toolbar.test.tsx |  3 +--
 .../public/visualizations/metric/toolbar.test.tsx  |  3 +--
 .../public/components/session_view/index.test.tsx  |  4 ++--
 15 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/src/plugins/data/public/search/errors/timeout_error.test.tsx b/src/plugins/data/public/search/errors/timeout_error.test.tsx
index aa370f395df5ef..536d8931c0d76c 100644
--- a/src/plugins/data/public/search/errors/timeout_error.test.tsx
+++ b/src/plugins/data/public/search/errors/timeout_error.test.tsx
@@ -32,7 +32,7 @@ describe('SearchTimeoutError', () => {
     const component = mount(e.getErrorMessage(startMock.application));
 
     expect(component.find('EuiButton').length).toBe(1);
-    component.find('EuiButton').simulate('click');
+    component.find('button[data-test-subj="searchTimeoutError"]').simulate('click');
     expect(startMock.application.navigateToApp).toHaveBeenCalledWith('management', {
       path: '/kibana/settings',
     });
diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/tests/saved_object_finder_create_new.test.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/tests/saved_object_finder_create_new.test.tsx
index fce942716e001f..563d5c11f5e578 100644
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/tests/saved_object_finder_create_new.test.tsx
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/tests/saved_object_finder_create_new.test.tsx
@@ -9,7 +9,7 @@
 import React from 'react';
 import { SavedObjectFinderCreateNew } from '../saved_object_finder_create_new';
 import { shallow } from 'enzyme';
-import { EuiButton, EuiContextMenuItem, EuiContextMenuPanel, EuiPopover } from '@elastic/eui';
+import { EuiContextMenuItem, EuiContextMenuPanel, EuiPopover } from '@elastic/eui';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 
 describe('SavedObjectFinderCreateNew', () => {
diff --git a/src/plugins/home/public/application/components/add_data/__snapshots__/add_data.test.tsx.snap b/src/plugins/home/public/application/components/add_data/__snapshots__/add_data.test.tsx.snap
index 58f9581a1ec916..37a1cd71c04e7c 100644
--- a/src/plugins/home/public/application/components/add_data/__snapshots__/add_data.test.tsx.snap
+++ b/src/plugins/home/public/application/components/add_data/__snapshots__/add_data.test.tsx.snap
@@ -55,11 +55,13 @@ exports[`AddData render 1`] = `
             }
           >
             <EuiButton
+              color="primary"
               data-test-subj="homeAddData"
               fill={true}
               href="/app/integrations/browse"
               iconType="plusInCircle"
               onClick={[Function]}
+              size="m"
             >
               <FormattedMessage
                 defaultMessage="Add integrations"
diff --git a/src/plugins/home/public/application/components/tutorial/__snapshots__/footer.test.js.snap b/src/plugins/home/public/application/components/tutorial/__snapshots__/footer.test.js.snap
index 395fe30d48aca0..54411f32d37f5b 100644
--- a/src/plugins/home/public/application/components/tutorial/__snapshots__/footer.test.js.snap
+++ b/src/plugins/home/public/application/components/tutorial/__snapshots__/footer.test.js.snap
@@ -22,8 +22,10 @@ exports[`render 1`] = `
     grow={false}
   >
     <EuiButton
+      color="primary"
       fill={true}
       href="/app/myapp"
+      size="m"
     >
       launch myapp
     </EuiButton>
diff --git a/src/plugins/home/public/application/components/tutorial/__snapshots__/instruction_set.test.js.snap b/src/plugins/home/public/application/components/tutorial/__snapshots__/instruction_set.test.js.snap
index 5235392121ab03..03609aebc36ece 100644
--- a/src/plugins/home/public/application/components/tutorial/__snapshots__/instruction_set.test.js.snap
+++ b/src/plugins/home/public/application/components/tutorial/__snapshots__/instruction_set.test.js.snap
@@ -191,8 +191,10 @@ exports[`statusCheckState checking status 1`] = `
                 size="s"
               />
               <EuiButton
+                color="primary"
                 isLoading={true}
                 onClick={[Function]}
+                size="m"
               >
                 custom btn label
               </EuiButton>
@@ -305,8 +307,10 @@ exports[`statusCheckState failed status check - error 1`] = `
                 size="s"
               />
               <EuiButton
+                color="primary"
                 isLoading={false}
                 onClick={[Function]}
+                size="m"
               >
                 custom btn label
               </EuiButton>
@@ -428,8 +432,10 @@ exports[`statusCheckState failed status check - no data 1`] = `
                 size="s"
               />
               <EuiButton
+                color="primary"
                 isLoading={false}
                 onClick={[Function]}
+                size="m"
               >
                 custom btn label
               </EuiButton>
@@ -551,8 +557,10 @@ exports[`statusCheckState initial state - no check has been attempted 1`] = `
                 size="s"
               />
               <EuiButton
+                color="primary"
                 isLoading={true}
                 onClick={[Function]}
+                size="m"
               >
                 custom btn label
               </EuiButton>
@@ -665,8 +673,10 @@ exports[`statusCheckState successful status check 1`] = `
                 size="s"
               />
               <EuiButton
+                color="primary"
                 isLoading={false}
                 onClick={[Function]}
+                size="m"
               >
                 custom btn label
               </EuiButton>
diff --git a/src/plugins/home/public/application/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap b/src/plugins/home/public/application/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap
index 37bdf1464bb52e..6fc57bc9af1cce 100644
--- a/src/plugins/home/public/application/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap
+++ b/src/plugins/home/public/application/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap
@@ -25,15 +25,15 @@ Array [
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButton euiButton--primary"
+        class="euiButton emotion-euiButtonDisplay-m-m-base-primary"
         data-test-subj="loadSavedObjects"
         type="button"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="emotion-euiButtonDisplayContent"
         >
           <span
-            class="euiButton__text"
+            class="eui-textTruncate"
           >
             Load Kibana objects
           </span>
@@ -82,15 +82,15 @@ Array [
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButton euiButton--primary"
+        class="euiButton emotion-euiButtonDisplay-m-m-base-primary"
         data-test-subj="loadSavedObjects"
         type="button"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="emotion-euiButtonDisplayContent"
         >
           <span
-            class="euiButton__text"
+            class="eui-textTruncate"
           >
             Load Kibana objects
           </span>
@@ -138,9 +138,11 @@ exports[`renders 1`] = `
       grow={false}
     >
       <EuiButton
+        color="primary"
         data-test-subj="loadSavedObjects"
         isLoading={false}
         onClick={[Function]}
+        size="m"
       >
         Load Kibana objects
       </EuiButton>
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/custom_interval.tsx b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/custom_interval.tsx
index a35b83bad3e7e3..e09ef9c48451fe 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/custom_interval.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/custom_interval.tsx
@@ -9,7 +9,7 @@ import React, { useState, ChangeEvent } from 'react';
 import PropTypes from 'prop-types';
 import { EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiButton, EuiFieldText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { ButtonSize } from '@elastic/eui/src/components/button/button';
+import { EuiButtonSize } from '@elastic/eui/src/components/button/button';
 import { FlexGroupGutterSize } from '@elastic/eui/src/components/flex/flex_group';
 import { getTimeInterval } from '../../../lib/time_interval';
 
@@ -36,7 +36,7 @@ const strings = {
 
 interface Props {
   gutterSize: FlexGroupGutterSize;
-  buttonSize: ButtonSize;
+  buttonSize: EuiButtonSize;
   onSubmit: (interval: number) => void;
   defaultValue: any;
 }
diff --git a/x-pack/plugins/lens/public/_mixins.scss b/x-pack/plugins/lens/public/_mixins.scss
index 21eceec6435909..c68d67f7523a13 100644
--- a/x-pack/plugins/lens/public/_mixins.scss
+++ b/x-pack/plugins/lens/public/_mixins.scss
@@ -76,7 +76,7 @@
 }
 
 @mixin euiFlyout {
-  border-left: $euiFlyoutBorder;
+  border-left: $euiBorderThin;
   // The mixin augments the above
   // sass-lint:disable mixins-before-declarations
   @include euiBottomShadowLarge;
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx
index 102b1e3f2dd27c..995b16f4fba360 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx
@@ -256,7 +256,7 @@ describe('ConfigPanel', () => {
       });
 
       act(() => {
-        instance.find('[data-test-subj="lnsLayerAddButton"]').first().simulate('click');
+        instance.find('button[data-test-subj="lnsLayerAddButton"]').first().simulate('click');
       });
       const focusedEl = document.activeElement;
       expect(focusedEl?.children[0].getAttribute('data-test-subj')).toEqual('lns-layerPanel-1');
@@ -269,7 +269,7 @@ describe('ConfigPanel', () => {
       layerType: LayerType = layerTypes.REFERENCELINE
     ) {
       act(() => {
-        instance.find('[data-test-subj="lnsLayerAddButton"]').first().simulate('click');
+        instance.find('button[data-test-subj="lnsLayerAddButton"]').first().simulate('click');
       });
       instance.update();
       act(() => {
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx
index e6b762911d4dc1..73193d1803de22 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx
@@ -146,7 +146,7 @@ describe('chart_switch', () => {
   }
 
   function showFlyout(instance: ReactWrapper) {
-    instance.find('[data-test-subj="lnsChartSwitchPopover"]').first().simulate('click');
+    instance.find('button[data-test-subj="lnsChartSwitchPopover"]').first().simulate('click');
   }
 
   function switchTo(subType: string, instance: ReactWrapper) {
diff --git a/x-pack/plugins/lens/public/shared_components/coloring/palette_panel_container.scss b/x-pack/plugins/lens/public/shared_components/coloring/palette_panel_container.scss
index 0e2c7bc17db099..f5dae56d9bd31c 100644
--- a/x-pack/plugins/lens/public/shared_components/coloring/palette_panel_container.scss
+++ b/x-pack/plugins/lens/public/shared_components/coloring/palette_panel_container.scss
@@ -1,4 +1,4 @@
-@import '../../../mixins';
+@import '../../mixins';
 
 .lnsPalettePanelContainer {
   // Use the EuiFlyout style
diff --git a/x-pack/plugins/lens/public/visualizations/datatable/components/toolbar.test.tsx b/x-pack/plugins/lens/public/visualizations/datatable/components/toolbar.test.tsx
index 281c4ef9c86a53..f8cc197e1d78ee 100644
--- a/x-pack/plugins/lens/public/visualizations/datatable/components/toolbar.test.tsx
+++ b/x-pack/plugins/lens/public/visualizations/datatable/components/toolbar.test.tsx
@@ -10,7 +10,6 @@ import { mountWithIntl } from '@kbn/test-jest-helpers';
 import { DataTableToolbar } from './toolbar';
 import { DatatableVisualizationState } from '../visualization';
 import { FramePublicAPI, VisualizationToolbarProps } from '../../../types';
-import { ToolbarButton } from '@kbn/kibana-react-plugin/public';
 import { ReactWrapper } from 'enzyme';
 import { PagingState } from '../../../../common/expressions';
 import { EuiButtonGroup, EuiRange } from '@elastic/eui';
@@ -35,7 +34,7 @@ class Harness {
   }
 
   togglePopover() {
-    this.wrapper.find(ToolbarButton).simulate('click');
+    this.wrapper.find('button[data-test-subj="lnsVisualOptionsButton"]').simulate('click');
   }
 
   public get rowHeight() {
diff --git a/x-pack/plugins/lens/public/visualizations/gauge/toolbar_component/gauge_toolbar.test.tsx b/x-pack/plugins/lens/public/visualizations/gauge/toolbar_component/gauge_toolbar.test.tsx
index d203cc86f5de8e..c7c749cec32585 100644
--- a/x-pack/plugins/lens/public/visualizations/gauge/toolbar_component/gauge_toolbar.test.tsx
+++ b/x-pack/plugins/lens/public/visualizations/gauge/toolbar_component/gauge_toolbar.test.tsx
@@ -7,7 +7,6 @@
 
 import React, { FormEvent } from 'react';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
-import { ToolbarButton } from '@kbn/kibana-react-plugin/public';
 import { ReactWrapper } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { FramePublicAPI, VisualizationToolbarProps } from '../../../types';
@@ -31,7 +30,7 @@ class Harness {
   }
 
   togglePopover() {
-    this.wrapper.find(ToolbarButton).simulate('click');
+    this.wrapper.find('button[data-test-subj="lnsVisualOptionsButton"]').simulate('click');
   }
 
   public get titleLabel() {
diff --git a/x-pack/plugins/lens/public/visualizations/metric/toolbar.test.tsx b/x-pack/plugins/lens/public/visualizations/metric/toolbar.test.tsx
index 130c0555af0733..5f7d5063eba2bc 100644
--- a/x-pack/plugins/lens/public/visualizations/metric/toolbar.test.tsx
+++ b/x-pack/plugins/lens/public/visualizations/metric/toolbar.test.tsx
@@ -13,7 +13,6 @@ import { MetricVisualizationState } from './visualization';
 import { createMockFramePublicAPI } from '../../mocks';
 import { HTMLAttributes, ReactWrapper } from 'enzyme';
 import { EuiFieldText } from '@elastic/eui';
-import { ToolbarButton } from '@kbn/kibana-react-plugin/public';
 import { act } from 'react-dom/test-utils';
 
 jest.mock('lodash', () => {
@@ -64,7 +63,7 @@ describe('metric toolbar', () => {
     }
 
     public get textOptionsButton() {
-      const toolbarButtons = this._wrapper.find(ToolbarButton);
+      const toolbarButtons = this._wrapper.find('button[data-test-subj="lnsLabelsButton"]');
       return toolbarButtons.at(0);
     }
 
diff --git a/x-pack/plugins/session_view/public/components/session_view/index.test.tsx b/x-pack/plugins/session_view/public/components/session_view/index.test.tsx
index e4650ca2eb4f17..39e7b8aa044201 100644
--- a/x-pack/plugins/session_view/public/components/session_view/index.test.tsx
+++ b/x-pack/plugins/session_view/public/components/session_view/index.test.tsx
@@ -207,8 +207,8 @@ describe('SessionView component', () => {
         render();
 
         await waitFor(() => {
-          expect(renderResult.queryByTestId('sessionView:TTYPlayerToggle')).toHaveClass(
-            'euiButtonIcon-isDisabled'
+          expect(renderResult.queryByTestId('sessionView:TTYPlayerToggle')?.classList[2]).toContain(
+            'disabled'
           );
         });
       });