Skip to content

Commit

Permalink
[data.ui] Fix flaky test & lazy loading rendering artifacts. (#80612) (…
Browse files Browse the repository at this point in the history 
…#80730)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
@lukeelmers @kibanamachine
lukeelmers and kibanamachine authored Oct 16, 2020
1 parent c8e6aa8 commit 4596d38
Show file tree
Hide file tree
Showing 10 changed files with 54 additions and 107 deletions.
7 changes: 1 addition & 6 deletions src/plugins/data/public/ui/apply_filters/apply_filters_popover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'));

Expand Down
7 changes: 1 addition & 6 deletions src/plugins/data/public/ui/filter_bar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
Expand Down
7 changes: 1 addition & 6 deletions src/plugins/data/public/ui/index_pattern_select/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,9 @@
*/

import React from 'react';
import { EuiLoadingContent, EuiDelayRender } from '@elastic/eui';
import type { IndexPatternSelectInternalProps } 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: IndexPatternSelectInternalProps) => (
Expand Down
7 changes: 1 addition & 6 deletions src/plugins/data/public/ui/query_string_input/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
Expand Down
6 changes: 4 additions & 2 deletions src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
7 changes: 1 addition & 6 deletions src/plugins/data/public/ui/search_bar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
Expand Down
104 changes: 42 additions & 62 deletions src/plugins/data/public/ui/search_bar/search_bar.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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();
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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);
});
});
2 changes: 1 addition & 1 deletion src/plugins/data/public/ui/search_bar/search_bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
7 changes: 1 addition & 6 deletions src/plugins/data/public/ui/shard_failure_modal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
7 changes: 1 addition & 6 deletions src/plugins/data/public/ui/typeahead/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
Expand Down

0 comments on commit 4596d38

Please sign in to comment.