Skip to content
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

Jump to bottom

[data.ui] Fix flaky test & lazy loading rendering artifacts. #80612

Merged
merged 4 commits into from
Oct 15, 2020
Merged

[data.ui] Fix flaky test & lazy loading rendering artifacts. #80612

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4c68934
Remove fallback loader which caused strange rendering artifacts.
lukeelmers Oct 15, 2020
42669cd
Unskip flaky test and revert.
lukeelmers Oct 15, 2020
3c0d627
Merge branch 'master' into fix/lazy-ui
kibanamachine Oct 15, 2020
f52e6cb
Merge branch 'master' into fix/lazy-ui
kibanamachine Oct 15, 2020
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
7 changes: 1 addition & 6 deletions src/plugins/data/public/ui/apply_filters/apply_filters_popover.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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" />;
Comment on lines +44 to +45
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was the only substantive change in this file; all other changes are pretty much reverting to the original state of the test before #78889 was merged.

});

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
Open in desktop
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
Open in desktop
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
Open in desktop
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