[Lens] Prepare Lens for jest-environment-jsdom migration (#95327) (#9…

…5530) * 🐛 Fix activeElement issue with Jest * 🏷️ Fix type issue * 👌 Removed expect-errors directives Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Marco Liberati <[email protected]>
elastic · Mar 26, 2021 · a0da4c9 · a0da4c9
1 parent fe3a6e0
commit a0da4c9
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 12 deletions.
diff --git a/packages/kbn-test/src/jest/utils/enzyme_helpers.tsx b/packages/kbn-test/src/jest/utils/enzyme_helpers.tsx
@@ -85,6 +85,7 @@ export function mountWithIntl<T>(
     childContextTypes,
     ...props
   }: {
+    attachTo?: HTMLElement;
     context?: any;
     childContextTypes?: ValidationMap<any>;
   } = {}

diff --git a/.../plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx b/.../plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx
@@ -22,6 +22,22 @@ import { generateId } from '../../../id_generator';
 
 jest.mock('../../../id_generator');
 
+let container: HTMLDivElement | undefined;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  container.id = 'lensContainer';
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  if (container && container.parentNode) {
+    container.parentNode.removeChild(container);
+  }
+
+  container = undefined;
+});
+
 describe('ConfigPanel', () => {
   let mockVisualization: jest.Mocked<Visualization>;
   let mockVisualization2: jest.Mocked<Visualization>;
@@ -105,7 +121,9 @@ describe('ConfigPanel', () => {
 
   describe('focus behavior when adding or removing layers', () => {
     it('should focus the only layer when resetting the layer', () => {
-      const component = mountWithIntl(<LayerPanels {...getDefaultProps()} />);
+      const component = mountWithIntl(<LayerPanels {...getDefaultProps()} />, {
+        attachTo: container,
+      });
       const firstLayerFocusable = component
         .find(LayerPanel)
         .first()
@@ -126,7 +144,7 @@ describe('ConfigPanel', () => {
         first: mockDatasource.publicAPIMock,
         second: mockDatasource.publicAPIMock,
       };
-      const component = mountWithIntl(<LayerPanels {...defaultProps} />);
+      const component = mountWithIntl(<LayerPanels {...defaultProps} />, { attachTo: container });
       const secondLayerFocusable = component
         .find(LayerPanel)
         .at(1)
@@ -147,7 +165,7 @@ describe('ConfigPanel', () => {
         first: mockDatasource.publicAPIMock,
         second: mockDatasource.publicAPIMock,
       };
-      const component = mountWithIntl(<LayerPanels {...defaultProps} />);
+      const component = mountWithIntl(<LayerPanels {...defaultProps} />, { attachTo: container });
       const firstLayerFocusable = component
         .find(LayerPanel)
         .first()
@@ -169,7 +187,9 @@ describe('ConfigPanel', () => {
         }
       });
 
-      const component = mountWithIntl(<LayerPanels {...getDefaultProps()} dispatch={dispatch} />);
+      const component = mountWithIntl(<LayerPanels {...getDefaultProps()} dispatch={dispatch} />, {
+        attachTo: container,
+      });
       act(() => {
         component.find('[data-test-subj="lnsLayerAddButton"]').first().simulate('click');
       });

diff --git a/...k/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/...k/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx
@@ -7,22 +7,38 @@
 
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import { EuiFormRow } from '@elastic/eui';
+import { mountWithIntl } from '@kbn/test/jest';
+import { Visualization } from '../../../types';
+import { LayerPanel } from './layer_panel';
+import { ChildDragDropProvider, DragDrop } from '../../../drag_drop';
+import { coreMock } from '../../../../../../../src/core/public/mocks';
+import { generateId } from '../../../id_generator';
 import {
   createMockVisualization,
   createMockFramePublicAPI,
   createMockDatasource,
   DatasourceMock,
 } from '../../mocks';
-import { ChildDragDropProvider, DragDrop } from '../../../drag_drop';
-import { EuiFormRow } from '@elastic/eui';
-import { mountWithIntl } from '@kbn/test/jest';
-import { Visualization } from '../../../types';
-import { LayerPanel } from './layer_panel';
-import { coreMock } from 'src/core/public/mocks';
-import { generateId } from '../../../id_generator';
 
 jest.mock('../../../id_generator');
 
+let container: HTMLDivElement | undefined;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  container.id = 'lensContainer';
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  if (container && container.parentNode) {
+    container.parentNode.removeChild(container);
+  }
+
+  container = undefined;
+});
+
 const defaultContext = {
   dragging: undefined,
   setDragging: jest.fn(),
@@ -642,7 +658,8 @@ describe('LayerPanel', () => {
       const component = mountWithIntl(
         <ChildDragDropProvider {...defaultContext} dragging={draggingOperation}>
           <LayerPanel {...getDefaultProps()} />
-        </ChildDragDropProvider>
+        </ChildDragDropProvider>,
+        { attachTo: container }
       );
       act(() => {
         component.find(DragDrop).at(1).prop('onDrop')!(draggingOperation, 'reorder');