From a0da4c99a5b176951060bf8d640730d4ba04adf8 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 26 Mar 2021 13:15:26 -0400
Subject: [PATCH] [Lens] Prepare Lens for jest-environment-jsdom migration
 (#95327) (#95530)

* :bug: Fix activeElement issue with Jest

* :label: Fix type issue

* :ok_hand: Removed expect-errors directives

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>
---
 .../src/jest/utils/enzyme_helpers.tsx         |  1 +
 .../config_panel/config_panel.test.tsx        | 28 +++++++++++++---
 .../config_panel/layer_panel.test.tsx         | 33 ++++++++++++++-----
 3 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/packages/kbn-test/src/jest/utils/enzyme_helpers.tsx b/packages/kbn-test/src/jest/utils/enzyme_helpers.tsx
index f517565434c18..686a201761dcd 100644
--- 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/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx
index 3d499b7b7b45a..e171c457c541e 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx
+++ b/x-pack/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/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx
index 30740bbd6b217..2c850d0b4472c 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx
+++ b/x-pack/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');