[Lens] replace react specific props events with html events (#113156) (…

…#113234) Co-authored-by: Marta Bondyra <marta.bondyra@gmail.com>
elastic · Sep 28, 2021 · d20ecc8 · d20ecc8
1 parent 5c0a46f
commit d20ecc8
Show file tree

Hide file tree

Showing 11 changed files with 175 additions and 194 deletions.
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.test.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.test.tsx
@@ -205,14 +205,12 @@ describe('data table dimension editor', () => {
     state.columns[0].colorMode = 'cell';
     const instance = mountWithIntl(<TableDimensionEditor {...props} />);
 
-    act(() =>
-      (
-        instance
-          .find('[data-test-subj="lnsDatatable_dynamicColoring_trigger"]')
-          .first()
-          .prop('onClick') as () => void
-      )?.()
-    );
+    act(() => {
+      instance
+        .find('[data-test-subj="lnsDatatable_dynamicColoring_trigger"]')
+        .first()
+        .simulate('click');
+    });
 
     expect(instance.find(PalettePanelContainer).exists()).toBe(true);
   });

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.test.tsx
@@ -5,7 +5,9 @@
  * 2.0.
  */
 
-import React, { ChangeEvent, ReactElement } from 'react';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import ReactDOM from 'react-dom';
 import { createMockedDragDropContext } from './mocks';
 import { dataPluginMock } from '../../../../../src/plugins/data/public/mocks';
 import { InnerIndexPatternDataPanel, IndexPatternDataPanel, MemoizedDataPanel } from './datapanel';
@@ -240,6 +242,9 @@ const initialState: IndexPatternPrivateState = {
 
 const dslQuery = { bool: { must: [], filter: [], should: [], must_not: [] } };
 
+// @ts-expect-error Portal mocks are notoriously difficult to type
+ReactDOM.createPortal = jest.fn((element) => element);
+
 describe('IndexPattern Data Panel', () => {
   let defaultProps: Parameters<typeof InnerIndexPatternDataPanel>[0] & {
     showNoDataPopover: () => void;
@@ -752,14 +757,13 @@ describe('IndexPattern Data Panel', () => {
     it('should filter down by name', () => {
       const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
       act(() => {
-        wrapper.find('[data-test-subj="lnsIndexPatternFieldSearch"]').prop('onChange')!({
+        wrapper.find('[data-test-subj="lnsIndexPatternFieldSearch"]').simulate('change', {
           target: { value: 'me' },
-        } as ChangeEvent<HTMLInputElement>);
+        });
       });
 
       wrapper
-        .find('[data-test-subj="lnsIndexPatternEmptyFields"]')
-        .find('button')
+        .find('[data-test-subj="lnsIndexPatternEmptyFields"] button')
         .first()
         .simulate('click');
 
@@ -772,9 +776,9 @@ describe('IndexPattern Data Panel', () => {
     it('should announce filter in live region', () => {
       const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
       act(() => {
-        wrapper.find('[data-test-subj="lnsIndexPatternFieldSearch"]').prop('onChange')!({
+        wrapper.find('[data-test-subj="lnsIndexPatternFieldSearch"]').simulate('change', {
           target: { value: 'me' },
-        } as ChangeEvent<HTMLInputElement>);
+        });
       });
 
       wrapper
@@ -832,9 +836,9 @@ describe('IndexPattern Data Panel', () => {
     it('should filter down by type and by name', () => {
       const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
       act(() => {
-        wrapper.find('[data-test-subj="lnsIndexPatternFieldSearch"]').prop('onChange')!({
+        wrapper.find('[data-test-subj="lnsIndexPatternFieldSearch"]').simulate('change', {
           target: { value: 'me' },
-        } as ChangeEvent<HTMLInputElement>);
+        });
       });
 
       wrapper.find('[data-test-subj="lnsIndexPatternFiltersToggle"]').first().simulate('click');
@@ -856,24 +860,26 @@ describe('IndexPattern Data Panel', () => {
         );
         const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
         act(() => {
-          (
-            wrapper
-              .find('[data-test-subj="lnsIndexPatternActions-popover"]')
-              .first()
-              .prop('children') as ReactElement
-          ).props.items[0].props.onClick();
+          const popoverTrigger = wrapper.find(
+            '[data-test-subj="lnsIndexPatternActions-popover"] button'
+          );
+          popoverTrigger.simulate('click');
         });
 
+        wrapper.update();
+        act(() => {
+          wrapper.find('[data-test-subj="indexPattern-add-field"]').first().simulate('click');
+        });
         // wait for indx pattern to be loaded
-        await act(async () => await new Promise((r) => setTimeout(r, 0)));
-
-        expect(props.indexPatternFieldEditor.openEditor).toHaveBeenCalledWith(
-          expect.objectContaining({
-            ctx: expect.objectContaining({
-              indexPattern: mockIndexPattern,
-            }),
-          })
-        );
+        await waitFor(() => {
+          expect(props.indexPatternFieldEditor.openEditor).toHaveBeenCalledWith(
+            expect.objectContaining({
+              ctx: expect.objectContaining({
+                indexPattern: mockIndexPattern,
+              }),
+            })
+          );
+        });
       });
 
       it('should reload index pattern if callback gets called', async () => {
@@ -891,14 +897,19 @@ describe('IndexPattern Data Panel', () => {
           Promise.resolve(mockIndexPattern)
         );
         const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
+
         act(() => {
-          (
-            wrapper
-              .find('[data-test-subj="lnsIndexPatternActions-popover"]')
-              .first()
-              .prop('children') as ReactElement
-          ).props.items[0].props.onClick();
+          const popoverTrigger = wrapper.find(
+            '[data-test-subj="lnsIndexPatternActions-popover"] button'
+          );
+          popoverTrigger.simulate('click');
         });
+
+        wrapper.update();
+        act(() => {
+          wrapper.find('[data-test-subj="indexPattern-add-field"]').first().simulate('click');
+        });
+
         // wait for indx pattern to be loaded
         await act(async () => await new Promise((r) => setTimeout(r, 0)));
 

diff --git a/...lugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.test.tsx b/...lugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.test.tsx
@@ -99,8 +99,10 @@ describe('BucketNestingEditor', () => {
       />
     );
 
-    const nestingSwitch = component.find('[data-test-subj="indexPattern-nesting-switch"]').first();
-    (nestingSwitch.prop('onChange') as () => {})();
+    component
+      .find('[data-test-subj="indexPattern-nesting-switch"] button')
+      .first()
+      .simulate('click');
 
     expect(setColumns).toHaveBeenCalledTimes(1);
     expect(setColumns).toHaveBeenCalledWith(['a', 'b', 'c']);
@@ -117,12 +119,10 @@ describe('BucketNestingEditor', () => {
       },
     });
 
-    (
-      component
-        .find('[data-test-subj="indexPattern-nesting-switch"]')
-        .first()
-        .prop('onChange') as () => {}
-    )();
+    component
+      .find('[data-test-subj="indexPattern-nesting-switch"] button')
+      .first()
+      .simulate('click');
 
     expect(setColumns).toHaveBeenCalledTimes(2);
     expect(setColumns).toHaveBeenLastCalledWith(['b', 'a', 'c']);
@@ -212,8 +212,8 @@ describe('BucketNestingEditor', () => {
       />
     );
 
-    const control = component.find('[data-test-subj="indexPattern-nesting-select"]').first();
-    (control.prop('onChange') as (e: unknown) => {})({
+    const control = component.find('[data-test-subj="indexPattern-nesting-select"] select').first();
+    control.simulate('change', {
       target: { value: 'b' },
     });
 
@@ -239,10 +239,8 @@ describe('BucketNestingEditor', () => {
       />
     );
 
-    const control = component.find('[data-test-subj="indexPattern-nesting-select"]').first();
-    (control.prop('onChange') as (e: unknown) => {})({
-      target: { value: '' },
-    });
+    const control = component.find('[data-test-subj="indexPattern-nesting-select"] select').first();
+    control.simulate('change', { target: { value: '' } });
 
     expect(setColumns).toHaveBeenCalledWith(['a', 'c', 'b']);
   });
@@ -266,8 +264,8 @@ describe('BucketNestingEditor', () => {
       />
     );
 
-    const control = component.find('[data-test-subj="indexPattern-nesting-select"]').first();
-    (control.prop('onChange') as (e: unknown) => {})({
+    const control = component.find('[data-test-subj="indexPattern-nesting-select"] select').first();
+    control.simulate('change', {
       target: { value: '' },
     });
 

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx
@@ -7,7 +7,7 @@
 
 import { ReactWrapper, ShallowWrapper } from 'enzyme';
 import 'jest-canvas-mock';
-import React, { ChangeEvent, MouseEvent } from 'react';
+import React from 'react';
 import { act } from 'react-dom/test-utils';
 import {
   EuiComboBox,
@@ -1213,15 +1213,14 @@ describe('IndexPatternDimensionEditorPanel', () => {
       const props = getProps({ timeScale: 's', label: 'Count of records per second' });
       wrapper = mount(<IndexPatternDimensionEditorComponent {...props} />);
       wrapper
-        .find('[data-test-subj="indexPattern-advanced-popover"]')
+        .find('button[data-test-subj="indexPattern-advanced-popover"]')
         .hostNodes()
         .simulate('click');
-      wrapper
-        .find('[data-test-subj="indexPattern-time-scaling-unit"]')
-        .find(EuiSelect)
-        .prop('onChange')!({
+
+      wrapper.find('[data-test-subj="indexPattern-time-scaling-unit"] select').simulate('change', {
         target: { value: 'h' },
-      } as unknown as ChangeEvent<HTMLSelectElement>);
+      });
+
       expect(setState.mock.calls[0]).toEqual([expect.any(Function), { isDimensionComplete: true }]);
       expect(setState.mock.calls[0][0](props.state)).toEqual({
         ...props.state,
@@ -1243,12 +1242,9 @@ describe('IndexPatternDimensionEditorPanel', () => {
     it('should not adjust label if it is custom', () => {
       const props = getProps({ timeScale: 's', customLabel: true, label: 'My label' });
       wrapper = mount(<IndexPatternDimensionEditorComponent {...props} />);
-      wrapper
-        .find('[data-test-subj="indexPattern-time-scaling-unit"]')
-        .find(EuiSelect)
-        .prop('onChange')!({
+      wrapper.find('[data-test-subj="indexPattern-time-scaling-unit"] select').simulate('change', {
         target: { value: 'h' },
-      } as unknown as ChangeEvent<HTMLSelectElement>);
+      });
       expect(setState.mock.calls[0]).toEqual([expect.any(Function), { isDimensionComplete: true }]);
       expect(setState.mock.calls[0][0](props.state)).toEqual({
         ...props.state,
@@ -1270,13 +1266,7 @@ describe('IndexPatternDimensionEditorPanel', () => {
     it('should allow to remove time scaling', () => {
       const props = getProps({ timeScale: 's', label: 'Count of records per second' });
       wrapper = mount(<IndexPatternDimensionEditorComponent {...props} />);
-      wrapper
-        .find('[data-test-subj="indexPattern-time-scaling-remove"]')
-        .find(EuiButtonIcon)
-        .prop('onClick')!(
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        {} as any
-      );
+      wrapper.find('[data-test-subj="indexPattern-time-scaling-remove"] button').simulate('click');
       expect(setState.mock.calls[0]).toEqual([expect.any(Function), { isDimensionComplete: true }]);
       expect(setState.mock.calls[0][0](props.state)).toEqual({
         ...props.state,
@@ -1391,7 +1381,7 @@ describe('IndexPatternDimensionEditorPanel', () => {
         .find(AdvancedOptions)
         .dive()
         .find('[data-test-subj="indexPattern-time-shift-enable"]')
-        .prop('onClick')!({} as MouseEvent);
+        .simulate('click');
       expect((props.setState as jest.Mock).mock.calls[0][0](props.state)).toEqual({
         ...props.state,
         layers: {
@@ -1465,10 +1455,7 @@ describe('IndexPatternDimensionEditorPanel', () => {
       wrapper
         .find('[data-test-subj="indexPattern-time-shift-remove"]')
         .find(EuiButtonIcon)
-        .prop('onClick')!(
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        {} as any
-      );
+        .simulate('click');
       expect((props.setState as jest.Mock).mock.calls[0][0](props.state)).toEqual({
         ...props.state,
         layers: {
@@ -1657,10 +1644,8 @@ describe('IndexPatternDimensionEditorPanel', () => {
       wrapper
         .find('[data-test-subj="indexPattern-filter-by-remove"]')
         .find(EuiButtonIcon)
-        .prop('onClick')!(
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        {} as any
-      );
+        .simulate('click');
+
       expect(setState.mock.calls[0]).toEqual([expect.any(Function), { isDimensionComplete: true }]);
       expect(setState.mock.calls[0][0](props.state)).toEqual({
         ...props.state,
@@ -1963,11 +1948,11 @@ describe('IndexPatternDimensionEditorPanel', () => {
     wrapper = mount(
       <IndexPatternDimensionEditorComponent {...defaultProps} state={initialState} />
     );
-
     act(() => {
-      wrapper.find('[data-test-subj="lns-indexPatternDimension-min"]').first().prop('onClick')!(
-        {} as MouseEvent
-      );
+      wrapper
+        .find('button[data-test-subj="lns-indexPatternDimension-min"]')
+        .first()
+        .simulate('click');
     });
 
     expect(replaceColumn).toHaveBeenCalledWith(

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { MouseEvent, ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import { ReactWrapper } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { EuiLoadingSpinner, EuiPopover } from '@elastic/eui';
@@ -139,7 +139,7 @@ describe('IndexPattern Field Item', () => {
       mountWithIntl(popoverContent as ReactElement)
         .find('[data-test-subj="lnsFieldListPanelEdit"]')
         .first()
-        .prop('onClick')!({} as MouseEvent);
+        .simulate('click');
     });
     expect(editFieldSpy).toHaveBeenCalledWith('bytes');
   });