[data.ui] Fix flaky test & lazy loading rendering artifacts. (elastic…

…#80612) # Conflicts: # src/plugins/data/public/ui/index_pattern_select/index.tsx
lukeelmers · Oct 15, 2020 · 2486369 · 2486369
1 parent 58f152a
commit 2486369
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 107 deletions.
diff --git a/src/plugins/data/public/ui/apply_filters/apply_filters_popover.tsx b/src/plugins/data/public/ui/apply_filters/apply_filters_popover.tsx
@@ -18,17 +18,12 @@
  */
 
 import React from 'react';
-import { EuiLoadingContent, EuiDelayRender } from '@elastic/eui';
 import { IIndexPattern, Filter } from '../..';
 
 type CancelFnType = () => void;
 type SubmitFnType = (filters: Filter[]) => void;
 
-const Fallback = () => (
-  <EuiDelayRender>
-    <EuiLoadingContent lines={1} />
-  </EuiDelayRender>
-);
+const Fallback = () => <div />;
 
 const LazyApplyFiltersPopoverContent = React.lazy(() => import('./apply_filter_popover_content'));
 

diff --git a/src/plugins/data/public/ui/filter_bar/index.tsx b/src/plugins/data/public/ui/filter_bar/index.tsx
@@ -18,14 +18,9 @@
  */
 
 import React from 'react';
-import { EuiLoadingContent, EuiDelayRender } from '@elastic/eui';
 import type { FilterLabelProps } from './filter_editor/lib/filter_label';
 
-const Fallback = () => (
-  <EuiDelayRender>
-    <EuiLoadingContent lines={1} />
-  </EuiDelayRender>
-);
+const Fallback = () => <div />;
 
 const LazyFilterLabel = React.lazy(() => import('./filter_editor/lib/filter_label'));
 export const FilterLabel = (props: FilterLabelProps) => (

diff --git a/src/plugins/data/public/ui/index_pattern_select/index.tsx b/src/plugins/data/public/ui/index_pattern_select/index.tsx
@@ -18,14 +18,9 @@
  */
 
 import React from 'react';
-import { EuiLoadingContent, EuiDelayRender } from '@elastic/eui';
 import type { IndexPatternSelectProps } from './index_pattern_select';
 
-const Fallback = () => (
-  <EuiDelayRender>
-    <EuiLoadingContent lines={1} />
-  </EuiDelayRender>
-);
+const Fallback = () => <div />;
 
 const LazyIndexPatternSelect = React.lazy(() => import('./index_pattern_select'));
 export const IndexPatternSelect = (props: IndexPatternSelectProps) => (

diff --git a/src/plugins/data/public/ui/query_string_input/index.tsx b/src/plugins/data/public/ui/query_string_input/index.tsx
@@ -18,16 +18,11 @@
  */
 
 import React from 'react';
-import { EuiLoadingContent, EuiDelayRender } from '@elastic/eui';
 import { withKibana } from '../../../../kibana_react/public';
 import type { QueryBarTopRowProps } from './query_bar_top_row';
 import type { QueryStringInputProps } from './query_string_input';
 
-const Fallback = () => (
-  <EuiDelayRender>
-    <EuiLoadingContent lines={1} />
-  </EuiDelayRender>
-);
+const Fallback = () => <div />;
 
 const LazyQueryBarTopRow = React.lazy(() => import('./query_bar_top_row'));
 export const QueryBarTopRow = (props: QueryBarTopRowProps) => (

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
@@ -36,12 +36,14 @@ import { EuiSuperUpdateButton, OnRefreshProps } from '@elastic/eui';
 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';
-import { QueryStringInput } from './';
+import { useKibana, toMountPoint, withKibana } from '../../../../kibana_react/public';
+import QueryStringInputUI from './query_string_input';
 import { doesKueryExpressionHaveLuceneSyntaxError, UI_SETTINGS } from '../../../common';
 import { PersistedLog, getQueryLog } from '../../query';
 import { NoDataPopover } from './no_data_popover';
 
+const QueryStringInput = withKibana(QueryStringInputUI);
+
 // @internal
 export interface QueryBarTopRowProps {
   query?: Query;

diff --git a/src/plugins/data/public/ui/search_bar/index.tsx b/src/plugins/data/public/ui/search_bar/index.tsx
@@ -19,15 +19,10 @@
 
 import React from 'react';
 import { injectI18n } from '@kbn/i18n/react';
-import { EuiLoadingContent, EuiDelayRender } from '@elastic/eui';
 import { withKibana } from '../../../../kibana_react/public';
 import type { SearchBarProps } from './search_bar';
 
-const Fallback = () => (
-  <EuiDelayRender>
-    <EuiLoadingContent lines={3} />
-  </EuiDelayRender>
-);
+const Fallback = () => <div />;
 
 const LazySearchBar = React.lazy(() => import('./search_bar'));
 const WrappedSearchBar = (props: SearchBarProps) => (

diff --git a/src/plugins/data/public/ui/search_bar/search_bar.test.tsx b/src/plugins/data/public/ui/search_bar/search_bar.test.tsx
@@ -18,17 +18,15 @@
  */
 
 import React from 'react';
-import { waitFor } from '@testing-library/dom';
-import { render } from '@testing-library/react';
-
-import { SearchBar } from './';
+import SearchBar from './search_bar';
 
 import { KibanaContextProvider } from 'src/plugins/kibana_react/public';
 import { I18nProvider } from '@kbn/i18n/react';
 
 import { coreMock } from '../../../../../core/public/mocks';
 const startMock = coreMock.createStart();
 
+import { mount } from 'enzyme';
 import { IIndexPattern } from '../..';
 
 const mockTimeHistory = {
@@ -37,16 +35,14 @@ const mockTimeHistory = {
   },
 };
 
-jest.mock('..', () => {
+jest.mock('../filter_bar/filter_bar', () => {
   return {
     FilterBar: () => <div className="filterBar" />,
   };
 });
 
-jest.mock('../query_string_input', () => {
-  return {
-    QueryBarTopRow: () => <div className="queryBar" />,
-  };
+jest.mock('../query_string_input/query_bar_top_row', () => {
+  return () => <div className="queryBar" />;
 });
 
 const noop = jest.fn();
@@ -117,48 +113,42 @@ function wrapSearchBarInContext(testProps: any) {
   );
 }
 
-// FLAKY: https://github.com/elastic/kibana/issues/79910
-describe.skip('SearchBar', () => {
-  const SEARCH_BAR_TEST_ID = 'globalQueryBar';
+describe('SearchBar', () => {
   const SEARCH_BAR_ROOT = '.globalQueryBar';
-  const FILTER_BAR = '.globalFilterBar';
+  const FILTER_BAR = '.filterBar';
   const QUERY_BAR = '.queryBar';
 
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  it('Should render query bar when no options provided (in reality - timepicker)', async () => {
-    const { container, getByTestId } = render(
+  it('Should render query bar when no options provided (in reality - timepicker)', () => {
+    const component = mount(
       wrapSearchBarInContext({
         indexPatterns: [mockIndexPattern],
       })
     );
 
-    await waitFor(() => getByTestId(SEARCH_BAR_TEST_ID));
-
-    expect(container.querySelectorAll(SEARCH_BAR_ROOT).length).toBe(1);
-    expect(container.querySelectorAll(FILTER_BAR).length).toBe(0);
-    expect(container.querySelectorAll(QUERY_BAR).length).toBe(1);
+    expect(component.find(SEARCH_BAR_ROOT).length).toBe(1);
+    expect(component.find(FILTER_BAR).length).toBe(0);
+    expect(component.find(QUERY_BAR).length).toBe(1);
   });
 
-  it('Should render empty when timepicker is off and no options provided', async () => {
-    const { container, getByTestId } = render(
+  it('Should render empty when timepicker is off and no options provided', () => {
+    const component = mount(
       wrapSearchBarInContext({
         indexPatterns: [mockIndexPattern],
         showDatePicker: false,
       })
     );
 
-    await waitFor(() => getByTestId(SEARCH_BAR_TEST_ID));
-
-    expect(container.querySelectorAll(SEARCH_BAR_ROOT).length).toBe(1);
-    expect(container.querySelectorAll(FILTER_BAR).length).toBe(0);
-    expect(container.querySelectorAll(QUERY_BAR).length).toBe(0);
+    expect(component.find(SEARCH_BAR_ROOT).length).toBe(1);
+    expect(component.find(FILTER_BAR).length).toBe(0);
+    expect(component.find(QUERY_BAR).length).toBe(0);
   });
 
-  it('Should render filter bar, when required fields are provided', async () => {
-    const { container, getByTestId } = render(
+  it('Should render filter bar, when required fields are provided', () => {
+    const component = mount(
       wrapSearchBarInContext({
         indexPatterns: [mockIndexPattern],
         showDatePicker: false,
@@ -167,15 +157,13 @@ describe.skip('SearchBar', () => {
       })
     );
 
-    await waitFor(() => getByTestId(SEARCH_BAR_TEST_ID));
-
-    expect(container.querySelectorAll(SEARCH_BAR_ROOT).length).toBe(1);
-    expect(container.querySelectorAll(FILTER_BAR).length).toBe(1);
-    expect(container.querySelectorAll(QUERY_BAR).length).toBe(0);
+    expect(component.find(SEARCH_BAR_ROOT).length).toBe(1);
+    expect(component.find(FILTER_BAR).length).toBe(1);
+    expect(component.find(QUERY_BAR).length).toBe(0);
   });
 
-  it('Should NOT render filter bar, if disabled', async () => {
-    const { container, getByTestId } = render(
+  it('Should NOT render filter bar, if disabled', () => {
+    const component = mount(
       wrapSearchBarInContext({
         indexPatterns: [mockIndexPattern],
         showFilterBar: false,
@@ -185,15 +173,13 @@ describe.skip('SearchBar', () => {
       })
     );
 
-    await waitFor(() => getByTestId(SEARCH_BAR_TEST_ID));
-
-    expect(container.querySelectorAll(SEARCH_BAR_ROOT).length).toBe(1);
-    expect(container.querySelectorAll(FILTER_BAR).length).toBe(0);
-    expect(container.querySelectorAll(QUERY_BAR).length).toBe(0);
+    expect(component.find(SEARCH_BAR_ROOT).length).toBe(1);
+    expect(component.find(FILTER_BAR).length).toBe(0);
+    expect(component.find(QUERY_BAR).length).toBe(0);
   });
 
-  it('Should render query bar, when required fields are provided', async () => {
-    const { container, getByTestId } = render(
+  it('Should render query bar, when required fields are provided', () => {
+    const component = mount(
       wrapSearchBarInContext({
         indexPatterns: [mockIndexPattern],
         screenTitle: 'test screen',
@@ -202,15 +188,13 @@ describe.skip('SearchBar', () => {
       })
     );
 
-    await waitFor(() => getByTestId(SEARCH_BAR_TEST_ID));
-
-    expect(container.querySelectorAll(SEARCH_BAR_ROOT).length).toBe(1);
-    expect(container.querySelectorAll(FILTER_BAR).length).toBe(0);
-    expect(container.querySelectorAll(QUERY_BAR).length).toBe(1);
+    expect(component.find(SEARCH_BAR_ROOT).length).toBe(1);
+    expect(component.find(FILTER_BAR).length).toBe(0);
+    expect(component.find(QUERY_BAR).length).toBe(1);
   });
 
-  it('Should NOT render query bar, if disabled', async () => {
-    const { container, getByTestId } = render(
+  it('Should NOT render query bar, if disabled', () => {
+    const component = mount(
       wrapSearchBarInContext({
         indexPatterns: [mockIndexPattern],
         screenTitle: 'test screen',
@@ -220,15 +204,13 @@ describe.skip('SearchBar', () => {
       })
     );
 
-    await waitFor(() => getByTestId(SEARCH_BAR_TEST_ID));
-
-    expect(container.querySelectorAll(SEARCH_BAR_ROOT).length).toBe(1);
-    expect(container.querySelectorAll(FILTER_BAR).length).toBe(0);
-    expect(container.querySelectorAll(QUERY_BAR).length).toBe(0);
+    expect(component.find(SEARCH_BAR_ROOT).length).toBe(1);
+    expect(component.find(FILTER_BAR).length).toBe(0);
+    expect(component.find(QUERY_BAR).length).toBe(0);
   });
 
-  it('Should render query bar and filter bar', async () => {
-    const { container, getByTestId } = render(
+  it('Should render query bar and filter bar', () => {
+    const component = mount(
       wrapSearchBarInContext({
         indexPatterns: [mockIndexPattern],
         screenTitle: 'test screen',
@@ -239,10 +221,8 @@ describe.skip('SearchBar', () => {
       })
     );
 
-    await waitFor(() => getByTestId(SEARCH_BAR_TEST_ID));
-
-    expect(container.querySelectorAll(SEARCH_BAR_ROOT).length).toBe(1);
-    expect(container.querySelectorAll(FILTER_BAR).length).toBe(1);
-    expect(container.querySelectorAll(QUERY_BAR).length).toBe(1);
+    expect(component.find(SEARCH_BAR_ROOT).length).toBe(1);
+    expect(component.find(FILTER_BAR).length).toBe(1);
+    expect(component.find(QUERY_BAR).length).toBe(1);
   });
 });
diff --git a/src/plugins/data/public/ui/search_bar/search_bar.tsx b/src/plugins/data/public/ui/search_bar/search_bar.tsx
@@ -26,7 +26,7 @@ import { get, isEqual } from 'lodash';
 
 import { withKibana, KibanaReactContextValue } from '../../../../kibana_react/public';
 
-import { QueryBarTopRow } from '../query_string_input';
+import QueryBarTopRow from '../query_string_input/query_bar_top_row';
 import { SavedQueryAttributes, TimeHistoryContract, SavedQuery } from '../../query';
 import { IDataPluginServices } from '../../types';
 import { TimeRange, Query, Filter, IIndexPattern } from '../../../common';

diff --git a/src/plugins/data/public/ui/shard_failure_modal/index.tsx b/src/plugins/data/public/ui/shard_failure_modal/index.tsx
@@ -18,14 +18,9 @@
  */
 
 import React from 'react';
-import { EuiLoadingContent, EuiDelayRender } from '@elastic/eui';
 import type { ShardFailureOpenModalButtonProps } from './shard_failure_open_modal_button';
 
-const Fallback = () => (
-  <EuiDelayRender>
-    <EuiLoadingContent lines={1} />
-  </EuiDelayRender>
-);
+const Fallback = () => <div />;
 
 const LazyShardFailureOpenModalButton = React.lazy(
   () => import('./shard_failure_open_modal_button')

diff --git a/src/plugins/data/public/ui/typeahead/index.tsx b/src/plugins/data/public/ui/typeahead/index.tsx
@@ -18,14 +18,9 @@
  */
 
 import React from 'react';
-import { EuiLoadingContent, EuiDelayRender } from '@elastic/eui';
 import type { SuggestionsComponentProps } from './suggestions_component';
 
-const Fallback = () => (
-  <EuiDelayRender>
-    <EuiLoadingContent lines={1} />
-  </EuiDelayRender>
-);
+const Fallback = () => <div />;
 
 const LazySuggestionsComponent = React.lazy(() => import('./suggestions_component'));
 export const SuggestionsComponent = (props: SuggestionsComponentProps) => (