[Discover] Enzyme -> RTL migration: leftovers

src/platform/packages/shared/kbn-resizable-layout/src/panels_static.test.tsx

@@ -7,66 +7,61 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiFlexGroup } from '@elastic/eui';
-import { mount } from 'enzyme';
 import type { ReactElement } from 'react';
 import React from 'react';
-import { ResizableLayoutDirection } from '../types';
 import { PanelsStatic } from './panels_static';
+import { render, screen } from '@testing-library/react';
+import { ResizableLayoutDirection } from '../types';
 
 describe('Panels static', () => {
-  const mountComponent = ({
+  const renderComponent = ({
     direction = ResizableLayoutDirection.Vertical,
+    fixedPanel = <div>Fixed panel</div>,
+    flexPanel = <div>Flex panel</div>,
     hideFixedPanel = false,
-    fixedPanel = <></>,
-    flexPanel = <></>,
   }: {
     direction?: ResizableLayoutDirection;
+    fixedPanel?: ReactElement;
+    flexPanel?: ReactElement;
     hideFixedPanel?: boolean;
-    fixedPanel: ReactElement;
-    flexPanel: ReactElement;
-  }) => {
-    return mount(
+  } = {}) => {
+    return render(
       <PanelsStatic
         direction={direction}
-        hideFixedPanel={hideFixedPanel}
         fixedPanel={fixedPanel}
         flexPanel={flexPanel}
+        hideFixedPanel={hideFixedPanel}
       />
     );
   };
 
   it('should render both panels when hideFixedPanel is false', () => {
-    const fixedPanel = <div data-test-subj="fixedPanel" />;
-    const flexPanel = <div data-test-subj="flexPanel" />;
-    const component = mountComponent({ fixedPanel, flexPanel });
-    expect(component.contains(fixedPanel)).toBe(true);
-    expect(component.contains(flexPanel)).toBe(true);
+    renderComponent();
+
+    expect(screen.getByText('Fixed panel')).toBeVisible();
+    expect(screen.getByText('Flex panel')).toBeVisible();
   });
 
   it('should render only flex panel when hideFixedPanel is true', () => {
-    const fixedPanel = <div data-test-subj="fixedPanel" />;
-    const flexPanel = <div data-test-subj="flexPanel" />;
-    const component = mountComponent({ hideFixedPanel: true, fixedPanel, flexPanel });
-    expect(component.contains(fixedPanel)).toBe(false);
-    expect(component.contains(flexPanel)).toBe(true);
+    renderComponent({ hideFixedPanel: true });
+
+    expect(screen.queryByText('Fixed panel')).not.toBeInTheDocument();
+    expect(screen.getByText('Flex panel')).toBeVisible();
   });
 
   it('should pass direction "column" to EuiFlexGroup when direction is ResizableLayoutDirection.Vertical', () => {
-    const component = mountComponent({
-      direction: ResizableLayoutDirection.Vertical,
-      fixedPanel: <></>,
-      flexPanel: <></>,
+    renderComponent({ direction: ResizableLayoutDirection.Vertical });
+
+    expect(screen.getByTestId('resizableLayoutStaticContainer')).toHaveStyle({
+      flexDirection: 'column',
     });
-    expect(component.find(EuiFlexGroup).prop('direction')).toBe('column');
   });
 
   it('should pass direction "row" to EuiFlexGroup when direction is ResizableLayoutDirection.Horizontal', () => {
-    const component = mountComponent({
-      direction: ResizableLayoutDirection.Horizontal,
-      fixedPanel: <></>,
-      flexPanel: <></>,
+    renderComponent({ direction: ResizableLayoutDirection.Horizontal });
+
+    expect(screen.getByTestId('resizableLayoutStaticContainer')).toHaveStyle({
+      flexDirection: 'row',
     });
-    expect(component.find(EuiFlexGroup).prop('direction')).toBe('row');
   });
 });

src/platform/packages/shared/kbn-resizable-layout/src/resizable_layout.test.tsx

@@ -7,98 +7,63 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { mount } from 'enzyme';
 import type { ReactElement } from 'react';
 import React from 'react';
+import { render, screen } from '@testing-library/react';
 import { ResizableLayout } from './resizable_layout';
-import { PanelsResizable } from './panels_resizable';
-import { PanelsStatic } from './panels_static';
 import { ResizableLayoutDirection, ResizableLayoutMode } from '../types';
 
-jest.mock('@elastic/eui', () => ({
-  ...jest.requireActual('@elastic/eui'),
-  useResizeObserver: jest.fn(() => ({ width: 1000, height: 1000 })),
-}));
-
 describe('ResizableLayout component', () => {
-  const mountComponent = ({
-    mode = ResizableLayoutMode.Resizable,
+  const renderComponent = ({
+    fixedPanel = <div>Fixed panel</div>,
+    flexPanel = <div>Flex panel</div>,
     initialFixedPanelSize = 200,
     minFixedPanelSize = 100,
     minFlexPanelSize = 100,
-    fixedPanel = <></>,
-    flexPanel = <></>,
+    mode = ResizableLayoutMode.Resizable,
   }: {
-    mode?: ResizableLayoutMode;
+    fixedPanel?: ReactElement;
+    flexPanel?: ReactElement;
     initialFixedPanelSize?: number;
     minFixedPanelSize?: number;
     minFlexPanelSize?: number;
-    flexPanel?: ReactElement;
-    fixedPanel?: ReactElement;
-  }) => {
-    return mount(
+    mode?: ResizableLayoutMode;
+  } = {}) => {
+    return render(
       <ResizableLayout
-        mode={mode}
         direction={ResizableLayoutDirection.Vertical}
+        fixedPanel={fixedPanel}
         fixedPanelSize={initialFixedPanelSize}
+        flexPanel={flexPanel}
         minFixedPanelSize={minFixedPanelSize}
         minFlexPanelSize={minFlexPanelSize}
-        fixedPanel={fixedPanel}
-        flexPanel={flexPanel}
+        mode={mode}
         onFixedPanelSizeChange={jest.fn()}
       />
     );
   };
 
-  it('should show PanelsFixed when mode is ResizableLayoutMode.Single', () => {
-    const fixedPanel = <div data-test-subj="fixedPanel" />;
-    const flexPanel = <div data-test-subj="flexPanel" />;
-    const component = mountComponent({ mode: ResizableLayoutMode.Single, fixedPanel, flexPanel });
-    expect(component.find(PanelsStatic).exists()).toBe(true);
-    expect(component.find(PanelsResizable).exists()).toBe(false);
-    expect(component.contains(fixedPanel)).toBe(false);
-    expect(component.contains(flexPanel)).toBe(true);
-  });
+  it('should show only the flex panel when mode is ResizableLayoutMode.Single', () => {
+    renderComponent({ mode: ResizableLayoutMode.Single });
 
-  it('should show PanelsFixed when mode is ResizableLayoutMode.Static', () => {
-    const fixedPanel = <div data-test-subj="fixedPanel" />;
-    const flexPanel = <div data-test-subj="flexPanel" />;
-    const component = mountComponent({ mode: ResizableLayoutMode.Static, fixedPanel, flexPanel });
-    expect(component.find(PanelsStatic).exists()).toBe(true);
-    expect(component.find(PanelsResizable).exists()).toBe(false);
-    expect(component.contains(fixedPanel)).toBe(true);
-    expect(component.contains(flexPanel)).toBe(true);
+    expect(screen.queryByText('Fixed panel')).not.toBeInTheDocument();
+    expect(screen.getByText('Flex panel')).toBeVisible();
+    expect(screen.queryByTestId('resizableLayoutResizableButton')).not.toBeInTheDocument();
   });
 
-  it('should show PanelsResizable when mode is ResizableLayoutMode.Resizable', () => {
-    const fixedPanel = <div data-test-subj="fixedPanel" />;
-    const flexPanel = <div data-test-subj="flexPanel" />;
-    const component = mountComponent({
-      mode: ResizableLayoutMode.Resizable,
-      fixedPanel,
-      flexPanel,
-    });
-    expect(component.find(PanelsStatic).exists()).toBe(false);
-    expect(component.find(PanelsResizable).exists()).toBe(true);
-    expect(component.contains(fixedPanel)).toBe(true);
-    expect(component.contains(flexPanel)).toBe(true);
-  });
+  it('should show both panels without resize controls when mode is ResizableLayoutMode.Static', () => {
+    renderComponent({ mode: ResizableLayoutMode.Static });
 
-  it('should pass true for hideFixedPanel when mode is ResizableLayoutMode.Single', () => {
-    const fixedPanel = <div data-test-subj="fixedPanel" />;
-    const flexPanel = <div data-test-subj="flexPanel" />;
-    const component = mountComponent({ mode: ResizableLayoutMode.Single, fixedPanel, flexPanel });
-    expect(component.find(PanelsStatic).prop('hideFixedPanel')).toBe(true);
-    expect(component.contains(fixedPanel)).toBe(false);
-    expect(component.contains(flexPanel)).toBe(true);
+    expect(screen.getByText('Fixed panel')).toBeVisible();
+    expect(screen.getByText('Flex panel')).toBeVisible();
+    expect(screen.queryByTestId('resizableLayoutResizableButton')).not.toBeInTheDocument();
   });
 
-  it('should pass false for hideFixedPanel when mode is ResizableLayoutMode.Static', () => {
-    const fixedPanel = <div data-test-subj="fixedPanel" />;
-    const flexPanel = <div data-test-subj="flexPanel" />;
-    const component = mountComponent({ mode: ResizableLayoutMode.Static, fixedPanel, flexPanel });
-    expect(component.find(PanelsStatic).prop('hideFixedPanel')).toBe(false);
-    expect(component.contains(fixedPanel)).toBe(true);
-    expect(component.contains(flexPanel)).toBe(true);
+  it('should show both panels with resize controls when mode is ResizableLayoutMode.Resizable', () => {
+    renderComponent({ mode: ResizableLayoutMode.Resizable });
+
+    expect(screen.getByText('Fixed panel')).toBeVisible();
+    expect(screen.getByText('Flex panel')).toBeVisible();
+    expect(screen.getByTestId('resizableLayoutResizableButton')).toBeVisible();
   });
 });

src/platform/packages/shared/kbn-search-errors/src/es_error.test.tsx

@@ -7,12 +7,12 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { ReactElement } from 'react';
 import type { CoreStart } from '@kbn/core/public';
+import { coreMock } from '@kbn/core/public/mocks';
 import { createEsError } from './create_es_error';
+import { screen } from '@testing-library/react';
 import { renderSearchError } from './render_search_error';
-import { shallow } from 'enzyme';
-import { coreMock } from '@kbn/core/public/mocks';
+import { renderWithKibanaRenderContext } from '@kbn/test-jest-helpers';
 
 const services = {
   application: coreMock.createStart().application,
@@ -45,21 +45,26 @@ describe('EsError', () => {
     services
   );
 
-  test('should set error.message to root "error cause" reason', () => {
+  it('should set error.message to root "error cause" reason', () => {
     expect(esError.message).toEqual(
       'The supplied interval [2q] could not be parsed as a calendar interval.'
     );
   });
 
-  test('should render error message', () => {
+  it('should render error message', () => {
     const searchErrorDisplay = renderSearchError(esError);
     expect(searchErrorDisplay).not.toBeUndefined();
-    const wrapper = shallow(searchErrorDisplay?.body as ReactElement);
-    expect(wrapper).toMatchSnapshot();
+
+    renderWithKibanaRenderContext(searchErrorDisplay?.body);
+
+    expect(screen.getByTestId('errMessage')).toHaveTextContent(
+      'The supplied interval [2q] could not be parsed as a calendar interval.'
+    );
   });
 
-  test('should return 1 action', () => {
+  it('should return 1 action', () => {
     const searchErrorDisplay = renderSearchError(esError);
+
     expect(searchErrorDisplay).not.toBeUndefined();
     expect(searchErrorDisplay?.actions?.length).toBe(1);
   });

src/platform/packages/shared/kbn-search-errors/src/painless_error.test.tsx

@@ -7,13 +7,13 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { ReactElement } from 'react';
 import type { CoreStart } from '@kbn/core/public';
-import type { DataView } from '@kbn/data-views-plugin/common';
+import { buildDataViewMock } from '@kbn/discover-utils/src/__mocks__';
+import { coreMock } from '@kbn/core/public/mocks';
 import { createEsError } from './create_es_error';
+import { screen } from '@testing-library/react';
 import { renderSearchError } from './render_search_error';
-import { shallow } from 'enzyme';
-import { coreMock } from '@kbn/core/public/mocks';
+import { renderWithKibanaRenderContext } from '@kbn/test-jest-helpers';
 
 const servicesMock = {
   application: coreMock.createStart().application,
@@ -26,10 +26,10 @@ const servicesMock = {
   } as CoreStart['docLinks'],
 };
 
-const dataViewMock = {
-  title: 'logs',
+const dataViewMock = buildDataViewMock({
   id: '1234',
-} as unknown as DataView;
+  title: 'logs',
+});
 
 describe('Painless error', () => {
   const painlessError = createEsError(
@@ -71,21 +71,29 @@ describe('Painless error', () => {
     dataViewMock
   );
 
-  test('should set error.message to painless reason', () => {
+  it('should set error.message to painless reason', () => {
     expect(painlessError.message).toEqual(
       'Error executing runtime field or scripted field on data view logs'
     );
   });
 
-  test('should render error message', () => {
+  it('should render error message', () => {
     const searchErrorDisplay = renderSearchError(painlessError);
     expect(searchErrorDisplay).not.toBeUndefined();
-    const wrapper = shallow(searchErrorDisplay?.body as ReactElement);
-    expect(wrapper).toMatchSnapshot();
+
+    renderWithKibanaRenderContext(searchErrorDisplay?.body);
+
+    expect(
+      screen.getByText('Error executing runtime field or scripted field on data view logs')
+    ).toBeVisible();
+    expect(screen.getByText('cannot resolve symbol [invalid]')).toBeVisible();
+    expect(screen.getByTestId('painlessStackTrace')).toHaveTextContent('invalid');
+    expect(screen.getByTestId('painlessStackTrace')).toHaveTextContent('^---- HERE');
   });
 
-  test('should return 2 actions', () => {
+  it('should return 2 actions', () => {
     const searchErrorDisplay = renderSearchError(painlessError);
+
     expect(searchErrorDisplay).not.toBeUndefined();
     expect(searchErrorDisplay?.actions?.length).toBe(2);
   });