Skip to content

Commit

Permalink
[8.17] [Lens] rewrite BucketNestingEditor tests to use react testing …
Browse files Browse the repository at this point in the history 
…library (#199888) (#201530)

# Backport

This will backport the following commits from `main` to `8.17`:
- [[Lens] rewrite BucketNestingEditor tests to use react testing library
(#199888)](#199888)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Kyra
Cho","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-18T16:46:33Z","message":"[Lens]
rewrite BucketNestingEditor tests to use react testing library
(#199888)\n\n## Summary\r\n\r\nHi! This PR rewrites the
`BucketNestingEditor` tests to use the react\r\ntesting
library.\r\n\r\nFixes #199839 \r\n\r\n<img width=\"1063\"
alt=\"Screenshot 2024-11-12 at 3 35
06 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/95036fe0-46e8-4bf2-9d77-31d225d38ed1\">\r\n\r\n###
Checklist\r\n\r\n- [n/a] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n\r\n---------\r\n\r\nCo-authored-by:
Marta Bondyra
<[email protected]>","sha":"eddfe5b8a73ac636d5e75606280bd771a01b1adb","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Visualizations","release_note:skip","backport
missing","💝community","v9.0.0","backport:version"],"number":199888,"url":"https://github.com/elastic/kibana/pull/199888","mergeCommit":{"message":"[Lens]
rewrite BucketNestingEditor tests to use react testing library
(#199888)\n\n## Summary\r\n\r\nHi! This PR rewrites the
`BucketNestingEditor` tests to use the react\r\ntesting
library.\r\n\r\nFixes #199839 \r\n\r\n<img width=\"1063\"
alt=\"Screenshot 2024-11-12 at 3 35
06 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/95036fe0-46e8-4bf2-9d77-31d225d38ed1\">\r\n\r\n###
Checklist\r\n\r\n- [n/a] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n\r\n---------\r\n\r\nCo-authored-by:
Marta Bondyra
<[email protected]>","sha":"eddfe5b8a73ac636d5e75606280bd771a01b1adb"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199888","number":199888,"mergeCommit":{"message":"[Lens]
rewrite BucketNestingEditor tests to use react testing library
(#199888)\n\n## Summary\r\n\r\nHi! This PR rewrites the
`BucketNestingEditor` tests to use the react\r\ntesting
library.\r\n\r\nFixes #199839 \r\n\r\n<img width=\"1063\"
alt=\"Screenshot 2024-11-12 at 3 35
06 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/95036fe0-46e8-4bf2-9d77-31d225d38ed1\">\r\n\r\n###
Checklist\r\n\r\n- [n/a] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n\r\n---------\r\n\r\nCo-authored-by:
Marta Bondyra
<[email protected]>","sha":"eddfe5b8a73ac636d5e75606280bd771a01b1adb"}}]}]
BACKPORT-->

Co-authored-by: Kyra Cho <[email protected]>
  • Loading branch information
@mbondyra @kyracho
mbondyra and kyracho authored Nov 26, 2024
1 parent 7c1b782 commit 1651d1b
Showing 1 changed file with 49 additions and 58 deletions.
107 changes: 49 additions & 58 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,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';
Expand All @@ -21,7 +22,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 +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(
<BucketNestingEditor
getFieldByName={getFieldByName}
columnId="a"
Expand All @@ -55,12 +54,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 +75,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', () => {
it('should reorder the columns when toggled', async () => {
const setColumns = jest.fn();
const component = mount(
const { rerender } = render(
<BucketNestingEditor
columnId="a"
getFieldByName={getFieldByName}
Expand All @@ -99,37 +98,34 @@ describe('BucketNestingEditor', () => {
/>
);

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(
<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}
/>
);

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(
<BucketNestingEditor
columnId="a"
getFieldByName={getFieldByName}
Expand All @@ -146,11 +142,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 +163,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 +184,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', () => {
it('should reorder the columns when a column is selected in the dropdown', async () => {
const setColumns = jest.fn();
const component = mount(
render(
<BucketNestingEditor
columnId="a"
getFieldByName={getFieldByName}
Expand All @@ -212,17 +207,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');
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(
<BucketNestingEditor
columnId="a"
getFieldByName={getFieldByName}
Expand All @@ -239,15 +232,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');
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(
<BucketNestingEditor
getFieldByName={getFieldByName}
columnId="b"
Expand All @@ -264,10 +257,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');
await userEvent.selectOptions(control, '');

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

0 comments on commit 1651d1b

Please sign in to comment.