From 4b6978ff94f20b7515c8b703da91032ba1f697ae Mon Sep 17 00:00:00 2001 From: Kyra Cho Date: Mon, 18 Nov 2024 08:46:33 -0800 Subject: [PATCH] [Lens] rewrite BucketNestingEditor tests to use react testing library (#199888) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Hi! This PR rewrites the `BucketNestingEditor` tests to use the react testing library. Fixes #199839 Screenshot 2024-11-12 at 3 35 06 PM ### Checklist - [n/a] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed --------- Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com> --- .../bucket_nesting_editor.test.tsx | 107 ++++++++---------- 1 file changed, 49 insertions(+), 58 deletions(-) diff --git a/x-pack/plugins/lens/public/datasources/form_based/dimension_panel/bucket_nesting_editor.test.tsx b/x-pack/plugins/lens/public/datasources/form_based/dimension_panel/bucket_nesting_editor.test.tsx index 6c09849df04a..047916285565 100644 --- a/x-pack/plugins/lens/public/datasources/form_based/dimension_panel/bucket_nesting_editor.test.tsx +++ b/x-pack/plugins/lens/public/datasources/form_based/dimension_panel/bucket_nesting_editor.test.tsx @@ -5,7 +5,8 @@ * 2.0. */ -import { mount } from 'enzyme'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import React from 'react'; import { BucketNestingEditor } from './bucket_nesting_editor'; import { GenericIndexPatternColumn } from '../form_based'; @@ -21,7 +22,7 @@ const getFieldByName = (name: string): IndexPatternField | undefined => fieldMap describe('BucketNestingEditor', () => { function mockCol(col: Partial = {}): GenericIndexPatternColumn { - const result = { + return { dataType: 'string', isBucketed: true, label: 'a', @@ -33,13 +34,11 @@ describe('BucketNestingEditor', () => { }, sourceField: 'a', ...col, - }; - - return result as GenericIndexPatternColumn; + } as GenericIndexPatternColumn; } it('should display the top level grouping when at the root', () => { - const component = mount( + render( { setColumns={jest.fn()} /> ); - const nestingSwitch = component.find('[data-test-subj="indexPattern-nesting-switch"]').first(); - expect(nestingSwitch.prop('checked')).toBeTruthy(); + const nestingSwitch = screen.getByTestId('indexPattern-nesting-switch'); + expect(nestingSwitch).toBeChecked(); }); it('should display the bottom level grouping when appropriate', () => { - const component = mount( + render( { setColumns={jest.fn()} /> ); - const nestingSwitch = component.find('[data-test-subj="indexPattern-nesting-switch"]').first(); - expect(nestingSwitch.prop('checked')).toBeFalsy(); + const nestingSwitch = screen.getByTestId('indexPattern-nesting-switch'); + expect(nestingSwitch).not.toBeChecked(); }); - it('should reorder the columns when toggled', () => { + it('should reorder the columns when toggled', async () => { const setColumns = jest.fn(); - const component = mount( + const { rerender } = render( { /> ); - component - .find('[data-test-subj="indexPattern-nesting-switch"] button') - .first() - .simulate('click'); - + await userEvent.click(screen.getByTestId('indexPattern-nesting-switch')); expect(setColumns).toHaveBeenCalledTimes(1); expect(setColumns).toHaveBeenCalledWith(['a', 'b', 'c']); - component.setProps({ - layer: { - columnOrder: ['a', 'b', 'c'], - columns: { - a: mockCol(), - b: mockCol(), - c: mockCol({ operationType: 'min', isBucketed: false }), - }, - indexPatternId: 'foo', - }, - }); - - component - .find('[data-test-subj="indexPattern-nesting-switch"] button') - .first() - .simulate('click'); + rerender( + + ); + await userEvent.click(screen.getByTestId('indexPattern-nesting-switch')); expect(setColumns).toHaveBeenCalledTimes(2); expect(setColumns).toHaveBeenLastCalledWith(['b', 'a', 'c']); }); it('should display nothing if there are no buckets', () => { - const component = mount( + const { container } = render( { /> ); - expect(component.children().length).toBe(0); + expect(container.firstChild).toBeNull(); }); it('should display nothing if there is one bucket', () => { - const component = mount( + const { container } = render( { /> ); - expect(component.children().length).toBe(0); + expect(container.firstChild).toBeNull(); }); it('should display a dropdown with the parent column selected if 3+ buckets', () => { - const component = mount( + render( { /> ); - const control = component.find('[data-test-subj="indexPattern-nesting-select"]').first(); - - expect(control.prop('value')).toEqual('c'); + const control = screen.getByTestId('indexPattern-nesting-select'); + expect((control as HTMLSelectElement).value).toEqual('c'); }); - it('should reorder the columns when a column is selected in the dropdown', () => { + it('should reorder the columns when a column is selected in the dropdown', async () => { const setColumns = jest.fn(); - const component = mount( + render( { /> ); - const control = component.find('[data-test-subj="indexPattern-nesting-select"] select').first(); - control.simulate('change', { - target: { value: 'b' }, - }); + const control = screen.getByTestId('indexPattern-nesting-select'); + await userEvent.selectOptions(control, 'b'); expect(setColumns).toHaveBeenCalledWith(['c', 'b', 'a']); }); - it('should move to root if the first dropdown item is selected', () => { + it('should move to root if the first dropdown item is selected', async () => { const setColumns = jest.fn(); - const component = mount( + render( { /> ); - const control = component.find('[data-test-subj="indexPattern-nesting-select"] select').first(); - control.simulate('change', { target: { value: '' } }); + const control = screen.getByTestId('indexPattern-nesting-select'); + await userEvent.selectOptions(control, ''); expect(setColumns).toHaveBeenCalledWith(['a', 'c', 'b']); }); - it('should allow the last bucket to be moved', () => { + it('should allow the last bucket to be moved', async () => { const setColumns = jest.fn(); - const component = mount( + render( { /> ); - const control = component.find('[data-test-subj="indexPattern-nesting-select"] select').first(); - control.simulate('change', { - target: { value: '' }, - }); + const control = screen.getByTestId('indexPattern-nesting-select'); + await userEvent.selectOptions(control, ''); expect(setColumns).toHaveBeenCalledWith(['b', 'c', 'a']); });