From 383407bff7575c6b017f24d818c660ddd691c649 Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Tue, 28 Sep 2021 10:55:41 +0200 Subject: [PATCH] [Lens] replace react specific props events with html events (#113156) --- .../components/dimension_editor.test.tsx | 14 ++- .../datapanel.test.tsx | 71 ++++++++------- .../bucket_nesting_editor.test.tsx | 30 +++---- .../dimension_panel/dimension_panel.test.tsx | 49 ++++------- .../field_item.test.tsx | 4 +- .../definitions/date_histogram.test.tsx | 18 ++-- .../definitions/percentile.test.tsx | 18 ++-- .../definitions/ranges/ranges.test.tsx | 86 ++++++++++--------- .../definitions/terms/terms.test.tsx | 32 +++---- .../definitions/terms/values_input.test.tsx | 18 ++-- .../coloring/color_stops.test.tsx | 29 +++---- 11 files changed, 175 insertions(+), 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 index 2239816667d62..22f5227baa556 100644 --- 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(); - 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 index 09617804e3bac..a6a3cda0ca033 100644 --- 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[0] & { showNoDataPopover: () => void; @@ -752,14 +757,13 @@ describe('IndexPattern Data Panel', () => { it('should filter down by name', () => { const wrapper = mountWithIntl(); act(() => { - wrapper.find('[data-test-subj="lnsIndexPatternFieldSearch"]').prop('onChange')!({ + wrapper.find('[data-test-subj="lnsIndexPatternFieldSearch"]').simulate('change', { target: { value: 'me' }, - } as ChangeEvent); + }); }); 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(); act(() => { - wrapper.find('[data-test-subj="lnsIndexPatternFieldSearch"]').prop('onChange')!({ + wrapper.find('[data-test-subj="lnsIndexPatternFieldSearch"]').simulate('change', { target: { value: 'me' }, - } as ChangeEvent); + }); }); wrapper @@ -832,9 +836,9 @@ describe('IndexPattern Data Panel', () => { it('should filter down by type and by name', () => { const wrapper = mountWithIntl(); act(() => { - wrapper.find('[data-test-subj="lnsIndexPatternFieldSearch"]').prop('onChange')!({ + wrapper.find('[data-test-subj="lnsIndexPatternFieldSearch"]').simulate('change', { target: { value: 'me' }, - } as ChangeEvent); + }); }); wrapper.find('[data-test-subj="lnsIndexPatternFiltersToggle"]').first().simulate('click'); @@ -856,24 +860,26 @@ describe('IndexPattern Data Panel', () => { ); const wrapper = mountWithIntl(); 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(); + 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/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.test.tsx index 4eac0d372d462..b48d13d6d3499 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.test.tsx +++ b/x-pack/plugins/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 index d823def1da114..656174fcb8708 100644 --- 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(); 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); + }); + 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(); - 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); + }); 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(); - 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( ); - 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 index c84989e560871..1d58af6326cf6 100644 --- 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'); }); diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/date_histogram.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/date_histogram.test.tsx index 77569b58e8e31..b7d2302ec0326 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/date_histogram.test.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/date_histogram.test.tsx @@ -9,7 +9,7 @@ import React from 'react'; import type { DateHistogramIndexPatternColumn } from './date_histogram'; import { dateHistogramOperation } from './index'; import { shallow } from 'enzyme'; -import { EuiSwitch, EuiSwitchEvent } from '@elastic/eui'; +import { EuiSwitch } from '@elastic/eui'; import type { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'kibana/public'; import type { IStorageWrapper } from 'src/plugins/kibana_utils/public'; import { UI_SETTINGS } from '../../../../../../../src/plugins/data/public'; @@ -415,9 +415,9 @@ describe('date_histogram', () => { currentColumn={thirdLayer.columns.col1 as DateHistogramIndexPatternColumn} /> ); - instance.find(EuiSwitch).prop('onChange')!({ + instance.find(EuiSwitch).simulate('change', { target: { checked: true }, - } as EuiSwitchEvent); + }); expect(updateLayerSpy).toHaveBeenCalled(); const newLayer = updateLayerSpy.mock.calls[0][0]; expect(newLayer).toHaveProperty('columns.col1.params.interval', '30d'); @@ -434,11 +434,11 @@ describe('date_histogram', () => { currentColumn={layer.columns.col1 as DateHistogramIndexPatternColumn} /> ); - instance.find('[data-test-subj="lensDateHistogramValue"]').prop('onChange')!({ + instance.find('[data-test-subj="lensDateHistogramValue"]').simulate('change', { target: { value: '2', }, - } as React.ChangeEvent); + }); expect(updateLayerSpy).toHaveBeenCalledWith(layerWithInterval('1w')); }); @@ -498,11 +498,11 @@ describe('date_histogram', () => { currentColumn={layer.columns.col1 as DateHistogramIndexPatternColumn} /> ); - instance.find('[data-test-subj="lensDateHistogramUnit"]').prop('onChange')!({ + instance.find('[data-test-subj="lensDateHistogramUnit"]').simulate('change', { target: { value: 'd', }, - } as React.ChangeEvent); + }); expect(updateLayerSpy).toHaveBeenCalledWith(layerWithInterval('42d')); }); @@ -519,11 +519,11 @@ describe('date_histogram', () => { currentColumn={testLayer.columns.col1 as DateHistogramIndexPatternColumn} /> ); - instance.find('[data-test-subj="lensDateHistogramValue"]').prop('onChange')!({ + instance.find('[data-test-subj="lensDateHistogramValue"]').simulate('change', { target: { value: '9', }, - } as React.ChangeEvent); + }); expect(updateLayerSpy).toHaveBeenCalledWith(layerWithInterval('9d')); }); diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/percentile.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/percentile.test.tsx index c4a88617c24b7..61f2390820067 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/percentile.test.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/percentile.test.tsx @@ -286,12 +286,12 @@ describe('percentile', () => { jest.runAllTimers(); - const input = instance - .find('[data-test-subj="lns-indexPattern-percentile-input"]') - .find(EuiFieldNumber); + const input = instance.find( + '[data-test-subj="lns-indexPattern-percentile-input"] input[type="number"]' + ); await act(async () => { - input.prop('onChange')!({ target: { value: '27' } } as React.ChangeEvent); + input.simulate('change', { target: { value: '27' } }); }); instance.update(); @@ -327,14 +327,12 @@ describe('percentile', () => { jest.runAllTimers(); - const input = instance - .find('[data-test-subj="lns-indexPattern-percentile-input"]') - .find(EuiFieldNumber); + const input = instance.find( + '[data-test-subj="lns-indexPattern-percentile-input"] input[type="number"]' + ); await act(async () => { - input.prop('onChange')!({ - target: { value: '12.12' }, - } as React.ChangeEvent); + input.simulate('change', { target: { value: '12.12' } }); }); instance.update(); diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.test.tsx index 7ef8d1ec36b8a..b85652481d5b2 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.test.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.test.tsx @@ -8,14 +8,7 @@ import React from 'react'; import { mount } from 'enzyme'; import { act } from 'react-dom/test-utils'; -import { - EuiFieldNumber, - EuiRange, - EuiButtonEmpty, - EuiLink, - EuiText, - EuiFieldText, -} from '@elastic/eui'; +import { EuiFieldNumber, EuiRange, EuiButtonEmpty, EuiLink, EuiText } from '@elastic/eui'; import { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'kibana/public'; import { IStorageWrapper } from 'src/plugins/kibana_utils/public'; import type { IndexPatternLayer, IndexPattern } from '../../../types'; @@ -73,9 +66,6 @@ dataPluginMockValue.fieldFormats.deserialize = jest.fn().mockImplementation(({ p }; }); -type ReactMouseEvent = React.MouseEvent & - React.MouseEvent; - // need this for MAX_HISTOGRAM value const uiSettingsMock = { get: jest.fn().mockReturnValue(100), @@ -419,7 +409,7 @@ describe('ranges', () => { instance .find('[data-test-subj="lns-indexPattern-range-maxBars-minus"]') .find('button') - .prop('onClick')!({} as ReactMouseEvent); + .simulate('click'); jest.advanceTimersByTime(TYPING_DEBOUNCE_TIME * 4); instance.update(); }); @@ -443,7 +433,7 @@ describe('ranges', () => { instance .find('[data-test-subj="lns-indexPattern-range-maxBars-plus"]') .find('button') - .prop('onClick')!({} as ReactMouseEvent); + .simulate('click'); jest.advanceTimersByTime(TYPING_DEBOUNCE_TIME * 4); instance.update(); }); @@ -501,7 +491,7 @@ describe('ranges', () => { // This series of act closures are made to make it work properly the update flush act(() => { - instance.find(EuiButtonEmpty).prop('onClick')!({} as ReactMouseEvent); + instance.find(EuiButtonEmpty).simulate('click'); }); act(() => { @@ -511,11 +501,15 @@ describe('ranges', () => { expect(instance.find(RangePopover)).toHaveLength(2); // edit the range and check - instance.find(RangePopover).find(EuiFieldNumber).first().prop('onChange')!({ - target: { - value: '50', - }, - } as React.ChangeEvent); + instance + .find('RangePopover input[type="number"]') + .first() + .simulate('change', { + target: { + value: '50', + }, + }); + jest.advanceTimersByTime(TYPING_DEBOUNCE_TIME * 4); expect(updateLayerSpy).toHaveBeenCalledWith({ @@ -552,7 +546,7 @@ describe('ranges', () => { // This series of act closures are made to make it work properly the update flush act(() => { - instance.find(EuiButtonEmpty).prop('onClick')!({} as ReactMouseEvent); + instance.find(EuiButtonEmpty).simulate('click'); }); act(() => { @@ -562,11 +556,15 @@ describe('ranges', () => { expect(instance.find(RangePopover)).toHaveLength(2); // edit the label and check - instance.find(RangePopover).find(EuiFieldText).first().prop('onChange')!({ - target: { - value: 'customlabel', - }, - } as React.ChangeEvent); + instance + .find('RangePopover input[type="text"]') + .first() + .simulate('change', { + target: { + value: 'customlabel', + }, + }); + jest.advanceTimersByTime(TYPING_DEBOUNCE_TIME * 4); expect(updateLayerSpy).toHaveBeenCalledWith({ @@ -603,19 +601,20 @@ describe('ranges', () => { // This series of act closures are made to make it work properly the update flush act(() => { - instance.find(RangePopover).find(EuiLink).prop('onClick')!({} as ReactMouseEvent); + instance.find(RangePopover).find(EuiLink).simulate('click'); }); act(() => { // need another wrapping for this in order to work instance.update(); - - // edit the range "to" field - instance.find(RangePopover).find(EuiFieldNumber).last().prop('onChange')!({ - target: { - value: '50', - }, - } as React.ChangeEvent); + instance + .find('RangePopover input[type="number"]') + .last() + .simulate('change', { + target: { + value: '50', + }, + }); jest.advanceTimersByTime(TYPING_DEBOUNCE_TIME * 4); expect(updateLayerSpy).toHaveBeenCalledWith({ @@ -649,7 +648,7 @@ describe('ranges', () => { // This series of act closures are made to make it work properly the update flush act(() => { - instance.find(RangePopover).find(EuiLink).prop('onClick')!({} as ReactMouseEvent); + instance.find(RangePopover).find(EuiLink).simulate('click'); }); act(() => { @@ -657,11 +656,14 @@ describe('ranges', () => { instance.update(); // edit the range "to" field - instance.find(RangePopover).find(EuiFieldNumber).last().prop('onChange')!({ - target: { - value: '-1', - }, - } as React.ChangeEvent); + instance + .find('RangePopover input[type="number"]') + .last() + .simulate('change', { + target: { + value: '-1', + }, + }); }); act(() => { @@ -701,7 +703,7 @@ describe('ranges', () => { instance .find('[data-test-subj="lns-customBucketContainer-remove"]') .last() - .prop('onClick')!({} as ReactMouseEvent); + .simulate('click'); }); act(() => { @@ -733,7 +735,7 @@ describe('ranges', () => { ); act(() => { - instance.find(RangePopover).last().find(EuiLink).prop('onClick')!({} as ReactMouseEvent); + instance.find(RangePopover).last().find(EuiLink).simulate('click'); }); act(() => { @@ -840,7 +842,7 @@ describe('ranges', () => { // This series of act closures are made to make it work properly the update flush act(() => { - instance.find(EuiLink).first().prop('onClick')!({} as ReactMouseEvent); + instance.find(EuiLink).first().simulate('click'); }); expect(updateLayerSpy.mock.calls[0][0].columns.col1.params.format).toEqual({ diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/terms.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/terms.test.tsx index f4b6e99e0a0d1..180d5ed5e49b7 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/terms.test.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/terms.test.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; import { shallow, mount } from 'enzyme'; -import { EuiFieldNumber, EuiSelect, EuiSwitch, EuiSwitchEvent } from '@elastic/eui'; +import { EuiFieldNumber, EuiSelect, EuiSwitch } from '@elastic/eui'; import type { IUiSettingsClient, SavedObjectsClientContract, @@ -813,11 +813,11 @@ describe('terms', () => { instance .find('[data-test-subj="indexPattern-terms-other-bucket"]') .find(EuiSwitch) - .prop('onChange')!({ - target: { - checked: true, - }, - } as EuiSwitchEvent); + .simulate('change', { + target: { + checked: true, + }, + }); expect(updateLayerSpy).toHaveBeenCalledWith({ ...layer, @@ -871,11 +871,11 @@ describe('terms', () => { instance .find(EuiSelect) .find('[data-test-subj="indexPattern-terms-orderBy"]') - .prop('onChange')!({ - target: { - value: 'column$$$col2', - }, - } as React.ChangeEvent); + .simulate('change', { + target: { + value: 'column$$$col2', + }, + }); expect(updateLayerSpy).toHaveBeenCalledWith({ ...layer, @@ -931,11 +931,11 @@ describe('terms', () => { instance .find('[data-test-subj="indexPattern-terms-orderDirection"]') .find(EuiSelect) - .prop('onChange')!({ - target: { - value: 'desc', - }, - } as React.ChangeEvent); + .simulate('change', { + target: { + value: 'desc', + }, + }); expect(updateLayerSpy).toHaveBeenCalledWith({ ...layer, diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_input.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_input.test.tsx index ac7397fb582ab..c94d7d05828d8 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_input.test.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_input.test.tsx @@ -32,9 +32,7 @@ describe('Values', () => { const onChangeSpy = jest.fn(); const instance = shallow(); act(() => { - instance.find(EuiFieldNumber).prop('onChange')!({ - currentTarget: { value: '7' }, - } as React.ChangeEvent); + instance.find(EuiFieldNumber).simulate('change', { currentTarget: { value: '7' } }); }); expect(instance.find(EuiFieldNumber).prop('value')).toEqual('7'); expect(onChangeSpy.mock.calls.length).toBe(1); @@ -45,9 +43,7 @@ describe('Values', () => { const onChangeSpy = jest.fn(); const instance = shallow(); act(() => { - instance.find(EuiFieldNumber).prop('onChange')!({ - currentTarget: { value: '1007' }, - } as React.ChangeEvent); + instance.find(EuiFieldNumber).simulate('change', { currentTarget: { value: '1007' } }); }); instance.update(); expect(instance.find(EuiFieldNumber).prop('value')).toEqual('1007'); @@ -64,9 +60,7 @@ describe('Values', () => { ); act(() => { - instance.find(EuiFieldNumber).prop('onChange')!({ - currentTarget: { value: '1007' }, - } as React.ChangeEvent); + instance.find(EuiFieldNumber).simulate('change', { currentTarget: { value: '1007' } }); }); instance.update(); @@ -81,13 +75,13 @@ describe('Values', () => { function changeAndBlur(newValue: string) { act(() => { - instance.find(EuiFieldNumber).prop('onChange')!({ + instance.find(EuiFieldNumber).simulate('change', { currentTarget: { value: newValue }, - } as React.ChangeEvent); + }); }); instance.update(); act(() => { - instance.find(EuiFieldNumber).prop('onBlur')!({} as React.FocusEvent); + instance.find(EuiFieldNumber).simulate('blur'); }); instance.update(); } diff --git a/x-pack/plugins/lens/public/shared_components/coloring/color_stops.test.tsx b/x-pack/plugins/lens/public/shared_components/coloring/color_stops.test.tsx index a27b6efb39075..b6482b0d89e04 100644 --- a/x-pack/plugins/lens/public/shared_components/coloring/color_stops.test.tsx +++ b/x-pack/plugins/lens/public/shared_components/coloring/color_stops.test.tsx @@ -64,7 +64,7 @@ describe('Color Stops component', () => { .find('[data-test-subj="my-test_dynamicColoring_addStop"]') .first(); act(() => { - addStopButton.prop('onClick')!({} as React.MouseEvent); + addStopButton.simulate('click'); }); component = component.update(); @@ -119,7 +119,7 @@ describe('Color Stops component', () => { component .find('[data-test-subj="my-test_dynamicColoring_stop_color_0"]') .first() - .prop('onBlur')!({} as React.FocusEvent); + .simulate('blur'); }); component = component.update(); expect( @@ -134,35 +134,30 @@ describe('Color Stops component', () => { it('should sort stops value on whole component blur', () => { let component = mount(); - let firstStopValueInput = component - .find('[data-test-subj="my-test_dynamicColoring_stop_value_0"]') - .first(); + let firstStopValueInput = component.find( + '[data-test-subj="my-test_dynamicColoring_stop_value_0"] input[type="number"]' + ); + act(() => { - firstStopValueInput.prop('onChange')!({ - target: { value: ' 90' }, - } as unknown as React.ChangeEvent); + firstStopValueInput.simulate('change', { target: { value: ' 90' } }); }); - - component = component.update(); - act(() => { component .find('[data-test-subj="my-test_dynamicColoring_stop_row_0"]') .first() - .prop('onBlur')!({} as React.FocusEvent); + .simulate('blur'); }); component = component.update(); // retrieve again the input - firstStopValueInput = component - .find('[data-test-subj="my-test_dynamicColoring_stop_value_0"]') - .first(); + firstStopValueInput = component.find( + '[data-test-subj="my-test_dynamicColoring_stop_value_0"] input[type="number"]' + ); expect(firstStopValueInput.prop('value')).toBe('40'); // the previous one move at the bottom expect( component - .find('[data-test-subj="my-test_dynamicColoring_stop_value_2"]') - .first() + .find('[data-test-subj="my-test_dynamicColoring_stop_value_2"] input[type="number"]') .prop('value') ).toBe('90'); });