Skip to content

Commit

Permalink
rewrite BucketNestingEditor tests to use react testing library
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyracho
kyracho committed Nov 12, 2024
1 parent cb7e5f6 commit 4c5cf06
Showing 1 changed file with 44 additions and 54 deletions.
98 changes: 44 additions & 54 deletions ...plugins/lens/public/datasources/form_based/dimension_panel/bucket_nesting_editor.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 2.0.
*/

import { mount } from 'enzyme';
import { render, screen, fireEvent } from '@testing-library/react';
import React from 'react';
import { BucketNestingEditor } from './bucket_nesting_editor';
import { GenericIndexPatternColumn } from '../form_based';
Expand All @@ -21,7 +21,7 @@ const getFieldByName = (name: string): IndexPatternField | undefined => fieldMap

describe('BucketNestingEditor', () => {
function mockCol(col: Partial<GenericIndexPatternColumn> = {}): GenericIndexPatternColumn {
const result = {
return {
dataType: 'string',
isBucketed: true,
label: 'a',
Expand All @@ -33,13 +33,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(
<BucketNestingEditor
getFieldByName={getFieldByName}
columnId="a"
Expand All @@ -55,12 +53,12 @@ describe('BucketNestingEditor', () => {
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(
<BucketNestingEditor
columnId="a"
getFieldByName={getFieldByName}
Expand All @@ -76,13 +74,13 @@ describe('BucketNestingEditor', () => {
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', () => {
const setColumns = jest.fn();
const component = mount(
const { rerender } = render(
<BucketNestingEditor
columnId="a"
getFieldByName={getFieldByName}
Expand All @@ -99,37 +97,34 @@ describe('BucketNestingEditor', () => {
/>
);

component
.find('[data-test-subj="indexPattern-nesting-switch"] button')
.first()
.simulate('click');

fireEvent.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(
<BucketNestingEditor
columnId="a"
getFieldByName={getFieldByName}
layer={{
columnOrder: ['a', 'b', 'c'],
columns: {
a: mockCol(),
b: mockCol(),
c: mockCol({ operationType: 'min', isBucketed: false }),
},
indexPatternId: 'foo',
}}
setColumns={setColumns}
/>
);

fireEvent.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(
<BucketNestingEditor
columnId="a"
getFieldByName={getFieldByName}
Expand All @@ -146,11 +141,11 @@ describe('BucketNestingEditor', () => {
/>
);

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(
<BucketNestingEditor
columnId="a"
getFieldByName={getFieldByName}
Expand All @@ -167,11 +162,11 @@ describe('BucketNestingEditor', () => {
/>
);

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(
<BucketNestingEditor
columnId="a"
getFieldByName={getFieldByName}
Expand All @@ -188,14 +183,13 @@ describe('BucketNestingEditor', () => {
/>
);

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', () => {
const setColumns = jest.fn();
const component = mount(
render(
<BucketNestingEditor
columnId="a"
getFieldByName={getFieldByName}
Expand All @@ -212,17 +206,15 @@ describe('BucketNestingEditor', () => {
/>
);

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');
fireEvent.change(control, { target: { value: 'b' } });

expect(setColumns).toHaveBeenCalledWith(['c', 'b', 'a']);
});

it('should move to root if the first dropdown item is selected', () => {
const setColumns = jest.fn();
const component = mount(
render(
<BucketNestingEditor
columnId="a"
getFieldByName={getFieldByName}
Expand All @@ -239,15 +231,15 @@ describe('BucketNestingEditor', () => {
/>
);

const control = component.find('[data-test-subj="indexPattern-nesting-select"] select').first();
control.simulate('change', { target: { value: '' } });
const control = screen.getByTestId('indexPattern-nesting-select');
fireEvent.change(control, { target: { value: '' } });

expect(setColumns).toHaveBeenCalledWith(['a', 'c', 'b']);
});

it('should allow the last bucket to be moved', () => {
const setColumns = jest.fn();
const component = mount(
render(
<BucketNestingEditor
getFieldByName={getFieldByName}
columnId="b"
Expand All @@ -264,10 +256,8 @@ describe('BucketNestingEditor', () => {
/>
);

const control = component.find('[data-test-subj="indexPattern-nesting-select"] select').first();
control.simulate('change', {
target: { value: '' },
});
const control = screen.getByTestId('indexPattern-nesting-select');
fireEvent.change(control, { target: { value: '' } });

expect(setColumns).toHaveBeenCalledWith(['b', 'c', 'a']);
});
Expand Down

0 comments on commit 4c5cf06

Please sign in to comment.