Skip to content

[8.19] [ES|QL] Moves the editor tests to react-testing library (#222975) #223019

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kibanamachine merged 4 commits into from
Jun 12, 2025
Merged

[8.19] [ES|QL] Moves the editor tests to react-testing library (#222975) #223019

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1d8131b
[ES|QL] Moves the editor tests to react-testing library (#222975)
stratoula Jun 6, 2025
c86265b
Merge branch '8.19' into backport/8.19/pr-222975
stratoula Jun 8, 2025
f985872
Merge branch '8.19' into backport/8.19/pr-222975
elasticmachine Jun 10, 2025
d63e32e
Merge branch '8.19' into backport/8.19/pr-222975
stratoula Jun 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 43 additions & 51 deletions src/platform/packages/private/kbn-esql-editor/src/esql_editor.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,13 @@
*/

import React from 'react';
import { act } from 'react-dom/test-utils';
import userEvent from '@testing-library/user-event';
import { BehaviorSubject } from 'rxjs';
import { IUiSettingsClient } from '@kbn/core/public';
import { mountWithIntl as mount } from '@kbn/test-jest-helpers';
import { findTestSubject } from '@elastic/eui/lib/test';
import { renderWithI18n } from '@kbn/test-jest-helpers';
import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
import { ESQLEditor } from './esql_editor';
import type { ESQLEditorProps } from './types';
import { ReactWrapper } from 'enzyme';
import { coreMock } from '@kbn/core/public/mocks';
import { dataPluginMock } from '@kbn/data-plugin/public/mocks';

Expand Down Expand Up @@ -54,85 +52,74 @@ describe('ESQLEditor', () => {
};
});
it('should render the editor component', async () => {
const component = mount(renderESQLEditorComponent({ ...props }));
expect(component.find('[data-test-subj="ESQLEditor"]').length).not.toBe(0);
const { getByTestId } = renderWithI18n(renderESQLEditorComponent({ ...props }));
expect(getByTestId('ESQLEditor')).toBeInTheDocument();
});

it('should render the date info with no @timestamp found', async () => {
const component = mount(renderESQLEditorComponent({ ...props }));
expect(component.find('[data-test-subj="ESQLEditor-date-info"]').at(0).text()).toStrictEqual(
'@timestamp not found'
);
const { getByTestId } = renderWithI18n(renderESQLEditorComponent({ ...props }));
expect(getByTestId('ESQLEditor-date-info')).toHaveTextContent('@timestamp not found');
});

it('should render the feedback link', async () => {
const component = mount(renderESQLEditorComponent({ ...props }));
expect(component.find('[data-test-subj="ESQLEditor-feedback-link"]').length).not.toBe(0);
const { getByTestId } = renderWithI18n(renderESQLEditorComponent({ ...props }));
expect(getByTestId('ESQLEditor-feedback-link')).toBeInTheDocument();
});

it('should not render the date info if hideTimeFilterInfo is set to true', async () => {
const newProps = {
...props,
hideTimeFilterInfo: true,
};
const component = mount(renderESQLEditorComponent({ ...newProps }));
expect(component.find('[data-test-subj="ESQLEditor-date-info"]').length).toBe(0);
const { queryByTestId } = renderWithI18n(renderESQLEditorComponent({ ...newProps }));
expect(queryByTestId('ESQLEditor-date-info')).not.toBeInTheDocument();
});

it('should render the date info with @timestamp found if detectedTimestamp is given', async () => {
const newProps = {
...props,
detectedTimestamp: '@timestamp',
};
const component = mount(renderESQLEditorComponent({ ...newProps }));
expect(component.find('[data-test-subj="ESQLEditor-date-info"]').at(0).text()).toStrictEqual(
'@timestamp found'
);
const { queryByTestId } = renderWithI18n(renderESQLEditorComponent({ ...newProps }));
expect(queryByTestId('ESQLEditor-date-info')).toHaveTextContent('@timestamp found');
});

it('should render the limit information', async () => {
const component = mount(renderESQLEditorComponent({ ...props }));
expect(component.find('[data-test-subj="ESQLEditor-limit-info"]').at(0).text()).toStrictEqual(
'LIMIT 1000 rows'
);
const { queryByTestId } = renderWithI18n(renderESQLEditorComponent({ ...props }));
expect(queryByTestId('ESQLEditor-limit-info')).toHaveTextContent('LIMIT 1000 rows');
});

it('should not render the query history action if hideQueryHistory is set to true', async () => {
const newProps = {
...props,
hideQueryHistory: true,
};
const component = mount(renderESQLEditorComponent({ ...newProps }));
const { queryByTestId } = renderWithI18n(renderESQLEditorComponent({ ...newProps }));
expect(
component.find('[data-test-subj="ESQLEditor-toggle-query-history-button-container"]').length
).toBe(0);
queryByTestId('ESQLEditor-toggle-query-history-button-container')
).not.toBeInTheDocument();
});

it('should render the correct buttons for the expanded code editor mode', async () => {
let component: ReactWrapper;
await act(async () => {
component = mount(renderESQLEditorComponent({ ...props }));
});
component!.update();
expect(component!.find('[data-test-subj="ESQLEditor-toggleWordWrap"]').length).not.toBe(0);
const { queryByTestId } = renderWithI18n(renderESQLEditorComponent({ ...props }));
const toggleWordWrapButton = queryByTestId('ESQLEditor-toggleWordWrap');
expect(toggleWordWrapButton).toBeInTheDocument();
});

it('should render the resize for the expanded code editor mode', async () => {
const component = mount(renderESQLEditorComponent({ ...props }));
expect(component.find('[data-test-subj="ESQLEditor-resize"]').length).not.toBe(0);
const { queryByTestId } = renderWithI18n(renderESQLEditorComponent({ ...props }));
expect(queryByTestId('ESQLEditor-resize')).toBeInTheDocument();
});

it('should render the footer for the expanded code editor mode', async () => {
const component = mount(renderESQLEditorComponent({ ...props }));
expect(component.find('[data-test-subj="ESQLEditor-footer"]').length).not.toBe(0);
expect(component.find('[data-test-subj="ESQLEditor-footer-lines"]').at(0).text()).toBe(
'1 line'
);
const { queryByTestId } = renderWithI18n(renderESQLEditorComponent({ ...props }));
expect(queryByTestId('ESQLEditor-footer')).toBeInTheDocument();
expect(queryByTestId('ESQLEditor-footer-lines')).toHaveTextContent('1 line');
});

it('should render the run query text', async () => {
const component = mount(renderESQLEditorComponent({ ...props }));
expect(component.find('[data-test-subj="ESQLEditor-run-query"]').length).not.toBe(0);
const { queryByTestId } = renderWithI18n(renderESQLEditorComponent({ ...props }));
expect(queryByTestId('ESQLEditor-run-query')).toBeInTheDocument();
});

it('should render the doc icon if the displayDocumentationAsFlyout is true', async () => {
Expand All @@ -141,17 +128,17 @@ describe('ESQLEditor', () => {
displayDocumentationAsFlyout: true,
editorIsInline: false,
};
const component = mount(renderESQLEditorComponent({ ...newProps }));
expect(component.find('[data-test-subj="ESQLEditor-documentation"]').length).not.toBe(0);
const { queryByTestId } = renderWithI18n(renderESQLEditorComponent({ ...newProps }));
expect(queryByTestId('ESQLEditor-documentation')).toBeInTheDocument();
});

it('should not render the run query text if the hideRunQueryText prop is set to true', async () => {
const newProps = {
...props,
hideRunQueryText: true,
};
const component = mount(renderESQLEditorComponent({ ...newProps }));
expect(component.find('[data-test-subj="ESQLEditor-run-query"]').length).toBe(0);
const { queryByTestId } = renderWithI18n(renderESQLEditorComponent({ ...newProps }));
expect(queryByTestId('ESQLEditor-run-query')).not.toBeInTheDocument();
});

it('should render correctly if editorIsInline prop is set to true', async () => {
Expand All @@ -162,11 +149,16 @@ describe('ESQLEditor', () => {
editorIsInline: true,
onTextLangQuerySubmit,
};
const component = mount(renderESQLEditorComponent({ ...newProps }));
expect(component.find('[data-test-subj="ESQLEditor-run-query"]').length).toBe(0);
expect(component.find('[data-test-subj="ESQLEditor-run-query-button"]').length).not.toBe(1);
findTestSubject(component, 'ESQLEditor-run-query-button').simulate('click');
expect(onTextLangQuerySubmit).toHaveBeenCalled();
const { queryByTestId } = renderWithI18n(renderESQLEditorComponent({ ...newProps }));
expect(queryByTestId('ESQLEditor-run-query')).not.toBeInTheDocument();

const runQueryButton = queryByTestId('ESQLEditor-run-query-button');
expect(runQueryButton).toBeInTheDocument(); // Assert it exists

if (runQueryButton) {
await userEvent.click(runQueryButton);
expect(onTextLangQuerySubmit).toHaveBeenCalledTimes(1);
}
});

it('should not render the run query button if the hideRunQueryButton prop is set to true and editorIsInline prop is set to true', async () => {
Expand All @@ -175,7 +167,7 @@ describe('ESQLEditor', () => {
hideRunQueryButton: true,
editorIsInline: true,
};
const component = mount(renderESQLEditorComponent({ ...newProps }));
expect(component.find('[data-test-subj="ESQLEditor-run-query-button"]').length).toBe(0);
const { queryByTestId } = renderWithI18n(renderESQLEditorComponent({ ...newProps }));
expect(queryByTestId('ESQLEditor-run-query-button')).not.toBeInTheDocument();
});
});