Merge pull request elastic#21 from dimaanj/improve-tests-and-storyboo…

…k-for-new-data-type

[Discover] Improve ui tests & storybook for new dataType

src/plugins/discover/public/__mocks__/__storybook_mocks__/with_discover_services.tsx

@@ -0,0 +1,139 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FunctionComponent } from 'react';
+import { action } from '@storybook/addon-actions';
+import { EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
+import { LIGHT_THEME } from '@elastic/charts';
+import { FieldFormat } from '@kbn/field-formats-plugin/common';
+import { identity } from 'lodash';
+import { CoreStart, IUiSettingsClient, PluginInitializerContext } from '@kbn/core/public';
+import {
+  DEFAULT_COLUMNS_SETTING,
+  DOC_TABLE_LEGACY,
+  MAX_DOC_FIELDS_DISPLAYED,
+  ROW_HEIGHT_OPTION,
+  SAMPLE_SIZE_SETTING,
+  SEARCH_FIELDS_FROM_SOURCE,
+  SHOW_MULTIFIELDS,
+} from '../../../common';
+import { SIDEBAR_CLOSED_KEY } from '../../application/main/components/layout/discover_layout';
+import { LocalStorageMock } from '../local_storage_mock';
+import { DiscoverServices } from '../../build_services';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { Plugin as NavigationPublicPlugin } from '@kbn/navigation-plugin/public';
+import { SearchBar, UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
+import { SavedQuery } from '@kbn/data-plugin/public';
+
+const NavigationPlugin = new NavigationPublicPlugin({} as PluginInitializerContext);
+
+export const uiSettingsMock = {
+  get: (key: string) => {
+    if (key === MAX_DOC_FIELDS_DISPLAYED) {
+      return 3;
+    } else if (key === SAMPLE_SIZE_SETTING) {
+      return 10;
+    } else if (key === DEFAULT_COLUMNS_SETTING) {
+      return ['default_column'];
+    } else if (key === DOC_TABLE_LEGACY) {
+      return false;
+    } else if (key === SEARCH_FIELDS_FROM_SOURCE) {
+      return false;
+    } else if (key === SHOW_MULTIFIELDS) {
+      return false;
+    } else if (key === ROW_HEIGHT_OPTION) {
+      return 3;
+    } else if (key === 'dateFormat:tz') {
+      return true;
+    }
+  },
+  isDefault: () => {
+    return true;
+  },
+} as unknown as IUiSettingsClient;
+
+const services = {
+  core: { http: { basePath: { prepend: () => void 0 } } },
+  storage: new LocalStorageMock({
+    [SIDEBAR_CLOSED_KEY]: false,
+  }) as unknown as Storage,
+  data: {
+    query: {
+      timefilter: {
+        timefilter: {
+          setTime: action('Set timefilter time'),
+          getAbsoluteTime: () => {
+            return { from: '2020-05-14T11:05:13.590', to: '2020-05-14T11:20:13.590' };
+          },
+        },
+      },
+      savedQueries: { findSavedQueries: () => Promise.resolve({ queries: [] as SavedQuery[] }) },
+    },
+    dataViews: {
+      getIdsWithTitle: () => Promise.resolve([]),
+    },
+  },
+  uiSettings: uiSettingsMock,
+  dataViewFieldEditor: {
+    openEditor: () => void 0,
+    userPermissions: {
+      editIndexPattern: () => void 0,
+    },
+  },
+  navigation: NavigationPlugin.start({} as CoreStart, {
+    unifiedSearch: { ui: { SearchBar } } as unknown as UnifiedSearchPublicPluginStart,
+  }),
+  theme: {
+    useChartsTheme: () => ({
+      ...EUI_CHARTS_THEME_LIGHT.theme,
+      chartPaddings: {
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+      },
+      heatmap: { xAxisLabel: { rotation: {} } },
+    }),
+    useChartsBaseTheme: () => LIGHT_THEME,
+  },
+  capabilities: {
+    visualize: {
+      show: true,
+    },
+    discover: {
+      save: false,
+    },
+    advancedSettings: {
+      save: true,
+    },
+  },
+  docLinks: { links: { discover: {} } },
+  addBasePath: (path: string) => path,
+  filterManager: {
+    getGlobalFilters: () => [],
+    getAppFilters: () => [],
+  },
+  history: () => ({}),
+  fieldFormats: {
+    deserialize: () => {
+      const DefaultFieldFormat = FieldFormat.from(identity);
+      return new DefaultFieldFormat();
+    },
+  },
+  toastNotifications: {
+    addInfo: action('add toast'),
+  },
+} as unknown as DiscoverServices;
+
+export const withDiscoverServices = (Component: FunctionComponent) => {
+  return (props: object) => (
+    <KibanaContextProvider services={services}>
+      <Component {...props} />
+    </KibanaContextProvider>
+  );
+};

src/plugins/discover/public/application/main/components/document_explorer_callout/document_explorer_update_callout.test.tsx

@@ -62,7 +62,7 @@ describe('Document Explorer Update callout', () => {
   it('should start a tour when the button is clicked', () => {
     const result = mountWithIntl(
       <KibanaContextProvider services={defaultServices}>
-        <DiscoverTourProvider>
+        <DiscoverTourProvider isPlainRecord={false}>
           <DocumentExplorerUpdateCallout />
         </DiscoverTourProvider>
       </KibanaContextProvider>

src/plugins/discover/public/application/main/components/layout/__stories__/discover_layout.stories.tsx

@@ -6,30 +6,64 @@
  * Side Public License, v 1.
  */
 
+import React, { useState } from 'react';
 import { storiesOf } from '@storybook/react';
-import React from 'react';
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
-import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
-import { getIndexPatternMock } from './get_index_pattern_mock';
-import { getServices } from './get_services';
-import { getLayoutProps } from './get_layout_props';
+import { getIndexPatternMock } from '../../../../../__mocks__/__storybook_mocks__/get_index_pattern_mock';
+import { withDiscoverServices } from '../../../../../__mocks__/__storybook_mocks__/with_discover_services';
+import { getDocumentsLayoutProps, getPlainRecordLayoutProps } from './get_layout_props';
 import { DiscoverLayout } from '../discover_layout';
 import { setHeaderActionMenuMounter } from '../../../../../kibana_services';
+import { AppState } from '../../../services/discover_state';
+import { DiscoverLayoutProps } from '../types';
 
 setHeaderActionMenuMounter(() => void 0);
 
-storiesOf('components/layout/DiscoverLayout', module).add('Data view with timestamp', () => (
-  <IntlProvider locale="en">
-    <KibanaContextProvider services={getServices()}>
-      <DiscoverLayout {...getLayoutProps(getIndexPatternMock(true))} />
-    </KibanaContextProvider>
-  </IntlProvider>
-));
-
-storiesOf('components/layout/DiscoverLayout', module).add('Data view without timestamp', () => (
-  <IntlProvider locale="en">
-    <KibanaContextProvider services={getServices()}>
-      <DiscoverLayout {...getLayoutProps(getIndexPatternMock(false))} />
-    </KibanaContextProvider>
-  </IntlProvider>
-));
+const DiscoverLayoutStory = (layoutProps: DiscoverLayoutProps) => {
+  const [state, setState] = useState(layoutProps.state);
+
+  const setAppState = (newState: Partial<AppState>) => {
+    setState((prevState) => ({ ...prevState, ...newState }));
+  };
+
+  const getState = () => state;
+
+  return (
+    <DiscoverLayout
+      {...layoutProps}
+      state={state}
+      stateContainer={{
+        ...layoutProps.stateContainer,
+        appStateContainer: { ...layoutProps.stateContainer.appStateContainer, getState },
+        setAppState,
+      }}
+    />
+  );
+};
+
+storiesOf('components/layout/DiscoverLayout', module).add(
+  'Data view with timestamp',
+  withDiscoverServices(() => (
+    <IntlProvider locale="en">
+      <DiscoverLayoutStory {...getDocumentsLayoutProps(getIndexPatternMock(true))} />
+    </IntlProvider>
+  ))
+);
+
+storiesOf('components/layout/DiscoverLayout', module).add(
+  'Data view without timestamp',
+  withDiscoverServices(() => (
+    <IntlProvider locale="en">
+      <DiscoverLayoutStory {...getDocumentsLayoutProps(getIndexPatternMock(false))} />
+    </IntlProvider>
+  ))
+);
+
+storiesOf('components/layout/DiscoverLayout', module).add(
+  'SQL view',
+  withDiscoverServices(() => (
+    <IntlProvider locale="en">
+      <DiscoverLayoutStory {...getPlainRecordLayoutProps(getIndexPatternMock(false))} />
+    </IntlProvider>
+  ))
+);