Convert 'kbn-unified-histogram' tests

Author: MiloszRadzynski

src/platform/packages/shared/kbn-unified-histogram/components/chart/histogram.test.tsx

@@ -7,49 +7,63 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { mountWithIntl } from '@kbn/test-jest-helpers';
 import type { HistogramProps } from './histogram';
-import { Histogram } from './histogram';
+import type { UnifiedHistogramFetch$ } from '../../types';
 import React from 'react';
+import { act, screen } from '@testing-library/react';
+import { allSuggestionsMock } from '../../__mocks__/suggestions';
 import { BehaviorSubject } from 'rxjs';
-import { unifiedHistogramServicesMock } from '../../__mocks__/services';
-import { getLensVisMock } from '../../__mocks__/lens_vis';
-import { dataViewWithTimefieldMock } from '../../__mocks__/data_view_with_timefield';
 import { createDefaultInspectorAdapters } from '@kbn/expressions-plugin/common';
-import type { UnifiedHistogramFetch$ } from '../../types';
-import { act } from 'react-dom/test-utils';
-import { RequestStatus } from '@kbn/inspector-plugin/public';
-import { getLensProps, useLensProps } from './hooks/use_lens_props';
+import { dataViewWithTimefieldMock } from '../../__mocks__/data_view_with_timefield';
 import { getFetch$Mock, getFetchParamsMock } from '../../__mocks__/fetch_params';
+import { getLensProps, useLensProps } from './hooks/use_lens_props';
+import { getLensVisMock } from '../../__mocks__/lens_vis';
+import { Histogram } from './histogram';
+import { renderWithI18n } from '@kbn/test-jest-helpers';
+import { RequestStatus } from '@kbn/inspector-plugin/public';
+import { unifiedHistogramServicesMock } from '../../__mocks__/services';
+
+type CombinedProps = Omit<HistogramProps, 'requestData' | 'lensProps'> &
+  Parameters<typeof useLensProps>[0];
 
 const getMockLensAttributes = async () => {
   const query = {
     language: 'kuery',
     query: '',
   };
+
   return (
     await getLensVisMock({
-      filters: [],
-      query,
+      breakdownField: dataViewWithTimefieldMock.getFieldByName('extension'),
       columns: [],
-      isPlainRecord: false,
       dataView: dataViewWithTimefieldMock,
+      filters: [],
+      isPlainRecord: false,
+      query,
       timeInterval: 'auto',
-      breakdownField: dataViewWithTimefieldMock.getFieldByName('extension'),
     })
   ).visContext;
 };
 
-type CombinedProps = Omit<HistogramProps, 'requestData' | 'lensProps'> &
-  Parameters<typeof useLensProps>[0];
+const getEmbeddableProps = () => {
+  const embeddable = unifiedHistogramServicesMock.lens.EmbeddableComponent as jest.Mock;
+  expect(embeddable).toHaveBeenCalled();
+
+  return embeddable.mock.calls[embeddable.mock.calls.length - 1][0];
+};
 
-async function mountComponent(isPlainRecord = false, hasLensSuggestions = false) {
+const renderComponent = async ({
+  isPlainRecord = false,
+  hasLensSuggestions = false,
+}: { isPlainRecord?: boolean; hasLensSuggestions?: boolean } = {}) => {
   const services = unifiedHistogramServicesMock;
+
   services.data.query.timefilter.timefilter.getAbsoluteTime = () => {
     return { from: '2020-05-14T11:05:13.590', to: '2020-05-14T11:20:13.590' };
   };
 
   const fetch$: UnifiedHistogramFetch$ = getFetch$Mock();
+
   const fetchParams = getFetchParamsMock({
     searchSessionId: '123',
     dataView: dataViewWithTimefieldMock,
@@ -61,15 +75,18 @@ async function mountComponent(isPlainRecord = false, hasLensSuggestions = false)
       from: '2020-05-14T11:05:13.590',
       to: '2020-05-14T11:20:13.590',
     },
+    query: isPlainRecord ? { esql: 'FROM index1' } : undefined,
   });
+
   const lensVisMock = await getLensVisMock({
+    allSuggestions: hasLensSuggestions ? allSuggestionsMock : undefined,
+    breakdownField: dataViewWithTimefieldMock.getFieldByName('extension'),
+    columns: [],
     dataView: fetchParams.dataView,
-    isPlainRecord: fetchParams.isESQLQuery,
-    timeInterval: fetchParams.timeInterval,
     filters: fetchParams.filters,
+    isPlainRecord: fetchParams.isESQLQuery,
     query: fetchParams.query,
-    columns: [],
-    breakdownField: dataViewWithTimefieldMock.getFieldByName('extension'),
+    timeInterval: fetchParams.timeInterval,
   });
 
   const props: CombinedProps = {
@@ -87,60 +104,77 @@ async function mountComponent(isPlainRecord = false, hasLensSuggestions = false)
     bucketInterval: undefined,
     visContext: lensVisMock.visContext!,
   };
+
   const Wrapper = (wrapperProps: CombinedProps) => {
     const lensPropsContext = useLensProps(wrapperProps);
+
     return lensPropsContext ? <Histogram {...wrapperProps} {...lensPropsContext} /> : null;
   };
 
-  const component = mountWithIntl(<Wrapper {...props} />);
+  renderWithI18n(<Wrapper {...props} />);
 
   act(() => {
     fetch$?.next({ fetchParams, lensVisServiceState: lensVisMock.lensService.state$.getValue() });
   });
 
-  return { props, fetch$, fetchParams, component: component.update(), lensVisMock };
-}
+  return { fetch$, fetchParams, lensVisMock, props };
+};
 
 describe('Histogram', () => {
+  beforeEach(() => {
+    (unifiedHistogramServicesMock.lens.EmbeddableComponent as jest.Mock)
+      .mockClear()
+      .mockImplementation(() => <div>Lens embeddable</div>);
+  });
+
   it('renders correctly', async () => {
-    const { component } = await mountComponent();
-    expect(component.find('[data-test-subj="unifiedHistogramChart"]').exists()).toBe(true);
+    await renderComponent();
+
+    expect(screen.getByText('Lens embeddable')).toBeVisible();
   });
 
   it('should only update lens.EmbeddableComponent props when fetch$ is triggered', async () => {
-    const { component, fetch$, fetchParams, lensVisMock } = await mountComponent();
-    const embeddable = unifiedHistogramServicesMock.lens.EmbeddableComponent;
-    expect(component.find(embeddable).exists()).toBe(true);
-    let lensProps = component.find(embeddable).props();
+    const { fetch$, fetchParams, lensVisMock } = await renderComponent();
+
+    expect(unifiedHistogramServicesMock.lens.EmbeddableComponent).toHaveBeenCalled();
+
+    let lensProps = getEmbeddableProps();
+
     const originalProps = getLensProps({
-      searchSessionId: fetchParams.searchSessionId,
-      timeRange: fetchParams.timeRange,
-      esqlVariables: fetchParams.esqlVariables,
       attributes: (await getMockLensAttributes())!.attributes,
-      onLoad: lensProps.onLoad!,
+      esqlVariables: fetchParams.esqlVariables,
       lastReloadRequestTime: fetchParams.lastReloadRequestTime,
+      onLoad: lensProps.onLoad!,
+      searchSessionId: fetchParams.searchSessionId,
+      timeRange: fetchParams.timeRange,
     });
+
     expect(lensProps).toMatchObject(expect.objectContaining(originalProps));
+
     const updatedFetchParams = { ...fetchParams, searchSessionId: '321' };
-    await act(async () => {
+
+    act(() => {
       fetch$.next({
         fetchParams: updatedFetchParams,
         lensVisServiceState: lensVisMock.lensService.state$.getValue(),
       });
     });
-    component.update();
-    lensProps = component.find(embeddable).props();
+
+    lensProps = getEmbeddableProps();
+
     expect(lensProps).toMatchObject(
       expect.objectContaining({ ...originalProps, searchSessionId: '321' })
     );
   });
 
   it('should execute onLoad correctly', async () => {
-    const { component, props } = await mountComponent();
-    const embeddable = unifiedHistogramServicesMock.lens.EmbeddableComponent;
-    const onLoad = component.find(embeddable).props().onLoad!;
+    const { props } = await renderComponent();
+
+    const onLoad = getEmbeddableProps().onLoad!;
     const adapters = createDefaultInspectorAdapters();
+
     adapters.tables.tables.unifiedHistogram = { meta: { statistics: { totalCount: 100 } } } as any;
+
     const rawResponse = {
       took: 0,
       timed_out: false,
@@ -187,36 +221,47 @@ describe('Histogram', () => {
         },
       },
     };
+
     jest
       .spyOn(adapters.requests, 'getRequests')
       .mockReturnValue([{ response: { json: { rawResponse } } } as any]);
+
     const dataLoading$ = new BehaviorSubject<boolean | undefined>(false);
+
     onLoad(true, undefined, dataLoading$);
+
     expect(props.onLoad).toHaveBeenLastCalledWith(true, undefined, dataLoading$);
+
     act(() => {
       onLoad?.(false, adapters, dataLoading$);
     });
+
     expect(props.onLoad).toHaveBeenLastCalledWith(false, adapters, dataLoading$);
   });
 
   it('should execute onLoad correctly when the request has a failure status', async () => {
-    const { component, props } = await mountComponent();
-    const embeddable = unifiedHistogramServicesMock.lens.EmbeddableComponent;
-    const onLoad = component.find(embeddable).props().onLoad!;
+    const { props } = await renderComponent();
+
+    const onLoad = getEmbeddableProps().onLoad!;
     const adapters = createDefaultInspectorAdapters();
+
     jest
       .spyOn(adapters.requests, 'getRequests')
       .mockReturnValue([{ status: RequestStatus.ERROR } as any]);
+
     onLoad?.(false, adapters);
+
     expect(props.onLoad).toHaveBeenLastCalledWith(false, adapters);
   });
 
   it('should execute onLoad correctly when the response has shard failures', async () => {
-    const { component, props } = await mountComponent();
-    const embeddable = unifiedHistogramServicesMock.lens.EmbeddableComponent;
-    const onLoad = component.find(embeddable).props().onLoad!;
+    const { props } = await renderComponent();
+
+    const onLoad = getEmbeddableProps().onLoad!;
     const adapters = createDefaultInspectorAdapters();
+
     adapters.tables.tables.unifiedHistogram = { meta: { statistics: { totalCount: 100 } } } as any;
+
     const rawResponse = {
       _shards: {
         total: 1,
@@ -231,20 +276,24 @@ describe('Histogram', () => {
         hits: [],
       },
     };
+
     jest
       .spyOn(adapters.requests, 'getRequests')
       .mockReturnValue([{ response: { json: { rawResponse } } } as any]);
+
     act(() => {
       onLoad?.(false, adapters);
     });
+
     expect(props.onLoad).toHaveBeenLastCalledWith(false, adapters);
   });
 
   it('should execute onLoad correctly for textbased language and no Lens suggestions', async () => {
-    const { component, props } = await mountComponent(true, false);
-    const embeddable = unifiedHistogramServicesMock.lens.EmbeddableComponent;
-    const onLoad = component.find(embeddable).props().onLoad!;
+    const { props } = await renderComponent({ isPlainRecord: true, hasLensSuggestions: false });
+
+    const onLoad = getEmbeddableProps().onLoad!;
     const adapters = createDefaultInspectorAdapters();
+
     adapters.tables.tables.layerId = {
       meta: { type: 'es_ql' },
       columns: [
@@ -266,17 +315,20 @@ describe('Histogram', () => {
         },
       ],
     } as any;
+
     act(() => {
       onLoad?.(false, adapters);
     });
+
     expect(props.onLoad).toHaveBeenLastCalledWith(false, adapters);
   });
 
   it('should execute onLoad correctly for textbased language and Lens suggestions', async () => {
-    const { component, props } = await mountComponent(true, true);
-    const embeddable = unifiedHistogramServicesMock.lens.EmbeddableComponent;
-    const onLoad = component.find(embeddable).props().onLoad!;
+    const { props } = await renderComponent({ isPlainRecord: true, hasLensSuggestions: true });
+
+    const onLoad = getEmbeddableProps().onLoad!;
     const adapters = createDefaultInspectorAdapters();
+
     adapters.tables.tables.layerId = {
       meta: { type: 'es_ql' },
       columns: [
@@ -298,9 +350,11 @@ describe('Histogram', () => {
         },
       ],
     } as any;
+
     act(() => {
       onLoad?.(false, adapters);
     });
+
     expect(props.onLoad).toHaveBeenLastCalledWith(false, adapters);
   });
 });