[data] Clean up QueryStringInput unit tests (elastic#58704)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

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

src/plugins/data/public/ui/query_string_input/query_bar_top_row.test.tsx

@@ -104,7 +104,7 @@ function wrapQueryBarTopRowInContext(testProps: any) {
   return (
     <I18nProvider>
       <KibanaContextProvider services={services}>
-        <QueryBarTopRow.WrappedComponent {...defaultOptions} {...testProps} />
+        <QueryBarTopRow {...defaultOptions} {...testProps} />
       </KibanaContextProvider>
     </I18nProvider>
   );

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<IIndexPattern | string>;
-  intl: InjectedIntl;
   isLoading?: boolean;
   prepend?: React.ComponentProps<typeof EuiFieldText>['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<IDataPluginServices>();
@@ -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);

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', () => {

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<IDataPluginServices>;
-  intl: InjectedIntl;
   indexPatterns: Array<IIndexPattern | string>;
   query: Query;
   disableAutoFocus?: boolean;
@@ -356,8 +355,7 @@ export class QueryStringInputUI extends Component<Props, State> {
 
       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<Props, State> {
   }
 }
 
-export const QueryStringInput = injectI18n(withKibana(QueryStringInputUI));
+export const QueryStringInput = withKibana(QueryStringInputUI);