From fc36c1f7b611c2124e969b423274552889c5fd7e Mon Sep 17 00:00:00 2001 From: Dziyana Dzeraviankina Date: Fri, 28 Feb 2020 19:33:49 +0300 Subject: [PATCH] [data] Clean up QueryStringInput unit tests --- .../language_switcher.test.tsx.snap | 593 --- .../query_string_input.test.tsx.snap | 3919 ----------------- .../language_switcher.test.tsx | 11 +- .../query_bar_top_row.test.tsx | 2 +- .../query_string_input/query_bar_top_row.tsx | 15 +- .../query_string_input.test.tsx | 10 +- .../query_string_input/query_string_input.tsx | 8 +- 7 files changed, 21 insertions(+), 4537 deletions(-) delete mode 100644 src/plugins/data/public/ui/query_string_input/__snapshots__/language_switcher.test.tsx.snap delete mode 100644 src/plugins/data/public/ui/query_string_input/__snapshots__/query_string_input.test.tsx.snap diff --git a/src/plugins/data/public/ui/query_string_input/__snapshots__/language_switcher.test.tsx.snap b/src/plugins/data/public/ui/query_string_input/__snapshots__/language_switcher.test.tsx.snap deleted file mode 100644 index 6432f8049641ae..00000000000000 --- a/src/plugins/data/public/ui/query_string_input/__snapshots__/language_switcher.test.tsx.snap +++ /dev/null @@ -1,593 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`LanguageSwitcher should toggle off if language is lucene 1`] = ` - - - - - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - id="popover" - isOpen={false} - ownFocus={true} - panelPaddingSize="m" - withTitle={true} - > - -
-
- - - -
-
- - - - -`; - -exports[`LanguageSwitcher should toggle on if language is kuery 1`] = ` - - - - - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - id="popover" - isOpen={false} - ownFocus={true} - panelPaddingSize="m" - withTitle={true} - > - -
-
- - - -
-
- - - - -`; diff --git a/src/plugins/data/public/ui/query_string_input/__snapshots__/query_string_input.test.tsx.snap b/src/plugins/data/public/ui/query_string_input/__snapshots__/query_string_input.test.tsx.snap deleted file mode 100644 index 58f00ff9ed6578..00000000000000 --- a/src/plugins/data/public/ui/query_string_input/__snapshots__/query_string_input.test.tsx.snap +++ /dev/null @@ -1,3919 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`QueryStringInput Should disable autoFocus on EuiFieldText when disableAutoFocus prop is true 1`] = ` - - - - - - - - -
-
-
- - } - aria-autocomplete="list" - aria-label="Start typing to search and filter the test page" - autoComplete="off" - autoFocus={false} - data-test-subj="queryInput" - fullWidth={true} - inputRef={[Function]} - onChange={[Function]} - onClick={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - placeholder="Search" - role="textbox" - spellCheck={false} - type="text" - value="response:200" - > - - } - fullWidth={true} - > -
-
- - - - -
- - - - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - id="popover" - isOpen={false} - ownFocus={true} - panelPaddingSize="m" - withTitle={true} - > - -
-
- - - -
-
- - - -
- - -
-
- -
- - - - - - - - -`; - -exports[`QueryStringInput Should pass the query language to the language switcher 1`] = ` - - - - - - - - -
-
-
- - } - aria-autocomplete="list" - aria-label="Start typing to search and filter the test page" - autoComplete="off" - autoFocus={true} - data-test-subj="queryInput" - fullWidth={true} - inputRef={[Function]} - onChange={[Function]} - onClick={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - placeholder="Search" - role="textbox" - spellCheck={false} - type="text" - value="response:200" - > - - } - fullWidth={true} - > -
-
- - - - -
- - - - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - id="popover" - isOpen={false} - ownFocus={true} - panelPaddingSize="m" - withTitle={true} - > - -
-
- - - -
-
- - - -
- - -
-
- -
- - - - - - - - -`; - -exports[`QueryStringInput Should render the given query 1`] = ` - - - - - - - - -
-
-
- - } - aria-autocomplete="list" - aria-label="Start typing to search and filter the test page" - autoComplete="off" - autoFocus={true} - data-test-subj="queryInput" - fullWidth={true} - inputRef={[Function]} - onChange={[Function]} - onClick={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - placeholder="Search" - role="textbox" - spellCheck={false} - type="text" - value="response:200" - > - - } - fullWidth={true} - > -
-
- - - - -
- - - - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - id="popover" - isOpen={false} - ownFocus={true} - panelPaddingSize="m" - withTitle={true} - > - -
-
- - - -
-
- - - -
- - -
-
- -
- - - - - - - - -`; diff --git a/src/plugins/data/public/ui/query_string_input/language_switcher.test.tsx b/src/plugins/data/public/ui/query_string_input/language_switcher.test.tsx index e3ec5212abfd2c..f8f576c4b6e971 100644 --- a/src/plugins/data/public/ui/query_string_input/language_switcher.test.tsx +++ b/src/plugins/data/public/ui/query_string_input/language_switcher.test.tsx @@ -22,6 +22,7 @@ import { QueryLanguageSwitcher } from './language_switcher'; import { KibanaContextProvider } from 'src/plugins/kibana_react/public'; import { coreMock } from '../../../../../core/public/mocks'; import { mountWithIntl } from 'test_utils/enzyme_helpers'; +import { EuiButtonEmpty, EuiPopover } from '@elastic/eui'; const startMock = coreMock.createStart(); describe('LanguageSwitcher', () => { @@ -47,8 +48,9 @@ describe('LanguageSwitcher', () => { }, }) ); - - expect(component).toMatchSnapshot(); + component.find(EuiButtonEmpty).simulate('click'); + expect(component.find(EuiPopover).prop('isOpen')).toBe(true); + expect(component.find('[data-test-subj="languageToggle"]').get(0).props.checked).toBeFalsy(); }); it('should toggle on if language is kuery', () => { @@ -60,7 +62,8 @@ describe('LanguageSwitcher', () => { }, }) ); - - expect(component).toMatchSnapshot(); + component.find(EuiButtonEmpty).simulate('click'); + expect(component.find(EuiPopover).prop('isOpen')).toBe(true); + expect(component.find('[data-test-subj="languageToggle"]').get(0).props.checked).toBeTruthy(); }); }); diff --git a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.test.tsx b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.test.tsx index 70d0c96b4733f3..f579adbc0c7e27 100644 --- a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.test.tsx +++ b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.test.tsx @@ -104,7 +104,7 @@ function wrapQueryBarTopRowInContext(testProps: any) { return ( - + ); diff --git a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx index ad9c8401389fac..433cb652ee5ce6 100644 --- a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx +++ b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx @@ -20,6 +20,8 @@ import dateMath from '@elastic/datemath'; import classNames from 'classnames'; import React, { useState } from 'react'; +import { i18n } from '@kbn/i18n'; + import { EuiButton, EuiFlexGroup, @@ -31,7 +33,7 @@ import { } from '@elastic/eui'; // @ts-ignore import { EuiSuperUpdateButton, OnRefreshProps } from '@elastic/eui'; -import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react'; +import { FormattedMessage } from '@kbn/i18n/react'; import { Toast } from 'src/core/public'; import { IDataPluginServices, IIndexPattern, TimeRange, TimeHistoryContract, Query } from '../..'; import { useKibana, toMountPoint } from '../../../../kibana_react/public'; @@ -48,7 +50,6 @@ interface Props { disableAutoFocus?: boolean; screenTitle?: string; indexPatterns?: Array; - intl: InjectedIntl; isLoading?: boolean; prepend?: React.ComponentProps['prepend']; showQueryInput?: boolean; @@ -64,7 +65,7 @@ interface Props { timeHistory?: TimeHistoryContract; } -function QueryBarTopRowUI(props: Props) { +export function QueryBarTopRow(props: Props) { const [isDateRangeInvalid, setIsDateRangeInvalid] = useState(false); const kibana = useKibana(); @@ -285,7 +286,6 @@ function QueryBarTopRowUI(props: Props) { function handleLuceneSyntaxWarning() { if (!props.query) return; - const { intl } = props; const { query, language } = props.query; if ( language === 'kuery' && @@ -294,8 +294,7 @@ function QueryBarTopRowUI(props: Props) { doesKueryExpressionHaveLuceneSyntaxError(query) ) { const toast = notifications!.toasts.addWarning({ - title: intl.formatMessage({ - id: 'data.query.queryBar.luceneSyntaxWarningTitle', + title: i18n.translate('data.query.queryBar.luceneSyntaxWarningTitle', { defaultMessage: 'Lucene syntax warning', }), text: toMountPoint( @@ -357,10 +356,8 @@ function QueryBarTopRowUI(props: Props) { ); } -QueryBarTopRowUI.defaultProps = { +QueryBarTopRow.defaultProps = { showQueryInput: true, showDatePicker: true, showAutoRefreshOnly: false, }; - -export const QueryBarTopRow = injectI18n(QueryBarTopRowUI); diff --git a/src/plugins/data/public/ui/query_string_input/query_string_input.test.tsx b/src/plugins/data/public/ui/query_string_input/query_string_input.test.tsx index 4435bd87cd2d71..738c9cfb393986 100644 --- a/src/plugins/data/public/ui/query_string_input/query_string_input.test.tsx +++ b/src/plugins/data/public/ui/query_string_input/query_string_input.test.tsx @@ -102,8 +102,8 @@ describe('QueryStringInput', () => { indexPatterns: [stubIndexPatternWithFields], }) ); - - expect(component).toMatchSnapshot(); + expect(component.find(EuiFieldText).props().value).toBe(kqlQuery.query); + expect(component.find(QueryLanguageSwitcher).prop('language')).toBe(kqlQuery.language); }); it('Should pass the query language to the language switcher', () => { @@ -114,8 +114,7 @@ describe('QueryStringInput', () => { indexPatterns: [stubIndexPatternWithFields], }) ); - - expect(component).toMatchSnapshot(); + expect(component.find(QueryLanguageSwitcher).prop('language')).toBe(luceneQuery.language); }); it('Should disable autoFocus on EuiFieldText when disableAutoFocus prop is true', () => { @@ -127,8 +126,7 @@ describe('QueryStringInput', () => { disableAutoFocus: true, }) ); - - expect(component).toMatchSnapshot(); + expect(component.find(EuiFieldText).prop('autoFocus')).toBeFalsy(); }); it('Should create a unique PersistedLog based on the appName and query language', () => { diff --git a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx index f1f055160a3ca5..018c2927031d00 100644 --- a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx +++ b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx @@ -31,7 +31,7 @@ import { EuiLink, } from '@elastic/eui'; -import { InjectedIntl, injectI18n, FormattedMessage } from '@kbn/i18n/react'; +import { FormattedMessage } from '@kbn/i18n/react'; import { debounce, compact, isEqual } from 'lodash'; import { Toast } from 'src/core/public'; import { IDataPluginServices, IIndexPattern, SuggestionsComponent, Query } from '../..'; @@ -44,7 +44,6 @@ import { PersistedLog, getQueryLog, matchPairs, toUser, fromUser } from '../../q interface Props { kibana: KibanaReactContextValue; - intl: InjectedIntl; indexPatterns: Array; query: Query; disableAutoFocus?: boolean; @@ -356,8 +355,7 @@ export class QueryStringInputUI extends Component { if (notifications && docLinks) { const toast = notifications.toasts.add({ - title: this.props.intl.formatMessage({ - id: 'data.query.queryBar.KQLNestedQuerySyntaxInfoTitle', + title: i18n.translate('data.query.queryBar.KQLNestedQuerySyntaxInfoTitle', { defaultMessage: 'KQL nested query syntax', }), text: toMountPoint( @@ -584,4 +582,4 @@ export class QueryStringInputUI extends Component { } } -export const QueryStringInput = injectI18n(withKibana(QueryStringInputUI)); +export const QueryStringInput = withKibana(QueryStringInputUI);