[draft][lens] Fix drag / drop tests in lens

x-pack/plugins/lens/public/drag_drop/drag_drop.test.tsx

@@ -6,25 +6,42 @@
 
 import React from 'react';
 import { render, shallow, mount } from 'enzyme';
-import { DragDrop } from './drag_drop';
-import { ChildDragDropProvider } from './providers';
+import { DragDropInternal } from './drag_drop';
+import { DragContextState } from './providers';
 
 jest.useFakeTimers();
 
+function mockContext(): DragContextState {
+  return {
+    dragging: undefined,
+    setDragging: jest.fn(),
+  };
+}
+
 describe('DragDrop', () => {
   test('renders if nothing is being dragged', () => {
     const component = render(
-      <DragDrop value="hello" draggable>
+      <DragDropInternal
+        value="hello"
+        draggable
+        context={mockContext()}
+        isActive={false}
+        setIsActive={jest.fn()}
+      >
         Hello!
-      </DragDrop>
+      </DragDropInternal>
     );
 
     expect(component).toMatchSnapshot();
   });
 
   test('dragover calls preventDefault if droppable is true', () => {
     const preventDefault = jest.fn();
-    const component = shallow(<DragDrop droppable>Hello!</DragDrop>);
+    const component = shallow(
+      <DragDropInternal context={mockContext()} isActive={false} setIsActive={jest.fn()} droppable>
+        Hello!
+      </DragDropInternal>
+    );
 
     component.find('[data-test-subj="lnsDragDrop"]').simulate('dragover', { preventDefault });
 
@@ -33,48 +50,59 @@ describe('DragDrop', () => {
 
   test('dragover does not call preventDefault if droppable is false', () => {
     const preventDefault = jest.fn();
-    const component = shallow(<DragDrop>Hello!</DragDrop>);
+    const component = shallow(
+      <DragDropInternal context={mockContext()} isActive={false} setIsActive={jest.fn()}>
+        Hello!
+      </DragDropInternal>
+    );
 
     component.find('[data-test-subj="lnsDragDrop"]').simulate('dragover', { preventDefault });
 
     expect(preventDefault).not.toBeCalled();
   });
 
   test('dragstart sets dragging in the context', async () => {
-    const setDragging = jest.fn();
+    const context = mockContext();
     const dataTransfer = {
       setData: jest.fn(),
       getData: jest.fn(),
     };
     const value = {};
 
     const component = mount(
-      <ChildDragDropProvider dragging={undefined} setDragging={setDragging}>
-        <DragDrop value={value}>Hello!</DragDrop>
-      </ChildDragDropProvider>
+      <DragDropInternal value={value} context={context} isActive={false} setIsActive={jest.fn()}>
+        Ahoy!
+      </DragDropInternal>
     );
 
     component.find('[data-test-subj="lnsDragDrop"]').simulate('dragstart', { dataTransfer });
 
     jest.runAllTimers();
 
     expect(dataTransfer.setData).toBeCalledWith('text', 'dragging');
-    expect(setDragging).toBeCalledWith(value);
+    expect(context.setDragging).toBeCalledWith(value);
   });
 
   test('drop resets all the things', async () => {
+    const context = mockContext();
     const preventDefault = jest.fn();
     const stopPropagation = jest.fn();
-    const setDragging = jest.fn();
     const onDrop = jest.fn();
     const value = {};
 
+    context.dragging = 'hola';
+
     const component = mount(
-      <ChildDragDropProvider dragging="hola" setDragging={setDragging}>
-        <DragDrop onDrop={onDrop} value={value}>
-          Hello!
-        </DragDrop>
-      </ChildDragDropProvider>
+      <DragDropInternal
+        value={value}
+        onDrop={onDrop}
+        context={context}
+        isActive={false}
+        setIsActive={jest.fn()}
+        droppable
+      >
+        Ahoy!
+      </DragDropInternal>
     );
 
     component
@@ -83,20 +111,23 @@ describe('DragDrop', () => {
 
     expect(preventDefault).toBeCalled();
     expect(stopPropagation).toBeCalled();
-    expect(setDragging).toBeCalledWith(undefined);
+    expect(context.setDragging).toBeCalledWith(undefined);
     expect(onDrop).toBeCalledWith('hola');
   });
 
   test('droppable is reflected in the className', () => {
     const component = render(
-      <DragDrop
+      <DragDropInternal
+        context={mockContext()}
+        isActive={false}
+        setIsActive={jest.fn()}
         onDrop={(x: any) => {
           throw x;
         }}
         droppable
       >
         Hello!
-      </DragDrop>
+      </DragDropInternal>
     );
 
     expect(component).toMatchSnapshot();

x-pack/plugins/lens/public/drag_drop/drag_drop.tsx

@@ -6,7 +6,7 @@
 
 import React, { useState, useContext } from 'react';
 import classNames from 'classnames';
-import { DragContext } from './providers';
+import { DragContext, DragContextState } from './providers';
 
 type DroppableEvent = React.DragEvent<HTMLElement>;
 
@@ -54,21 +54,54 @@ interface Props {
   draggable?: boolean;
 }
 
+// For internal usage / test purposes only.
+type InternalProps = Props & {
+  context: DragContextState;
+  isActive: boolean;
+  setIsActive: (isActive: boolean) => void;
+};
+
 /**
  * A draggable / droppable item. Items can be both draggable and droppable at
  * the same time.
  *
  * @param props
  */
 export function DragDrop(props: Props) {
-  const { dragging, setDragging } = useContext(DragContext);
+  const context = useContext(DragContext);
   const [state, setState] = useState({ isActive: false });
-  const { className, onDrop, value, children, droppable, draggable } = props;
+
+  return (
+    <DragDropInternal
+      context={context}
+      isActive={state.isActive}
+      setIsActive={(isActive: boolean) => setState({ isActive })}
+      {...props}
+    />
+  );
+}
+
+/**
+ * For internal usage / test purposes only.
+ */
+export function DragDropInternal(props: InternalProps) {
+  const {
+    className,
+    onDrop,
+    value,
+    children,
+    droppable,
+    draggable,
+    context,
+    isActive,
+    setIsActive,
+  } = props;
+  const { dragging, setDragging } = context;
   const isDragging = draggable && value === dragging;
 
   const classes = classNames('lnsDragDrop', className, {
     'lnsDragDrop-isDropTarget': droppable,
-    'lnsDragDrop-isActiveDropTarget': droppable && state.isActive,
+    'lnsDragDrop-isActiveDropTarget': droppable && isActive,
     'lnsDragDrop-isDragging': isDragging,
   });
 
@@ -100,20 +133,20 @@ export function DragDrop(props: Props) {
     e.preventDefault();
 
     // An optimization to prevent a bunch of React churn.
-    if (!state.isActive) {
-      setState({ ...state, isActive: true });
+    if (!isActive) {
+      setIsActive(true);
     }
   };
 
   const dragLeave = () => {
-    setState({ ...state, isActive: false });
+    setIsActive(false);
   };
 
   const drop = (e: DroppableEvent) => {
     e.preventDefault();
     e.stopPropagation();
 
-    setState({ ...state, isActive: false });
+    setIsActive(false);
     setDragging(undefined);
 
     if (onDrop) {

x-pack/plugins/lens/public/drag_drop/index.ts

@@ -5,4 +5,4 @@
  */
 
 export * from './providers';
-export * from './drag_drop';
+export { DragDrop } from './drag_drop';