moving testing utilities out of connected draggable

src/view/droppable/connected-droppable.js

@@ -10,6 +10,7 @@ import type {
   DraggableId,
   DraggableLocation,
   DraggableDimension,
+  DraggableDescriptor,
   Placeholder,
 } from '../../types';
 import type {
@@ -21,44 +22,31 @@ import type {
 
 // Returning a function to ensure each
 // Droppable gets its own selector
-export const makeSelector = (): Selector => {
-  const getIsDraggingOver = memoizeOne(
-    (id: DroppableId, destination: ?DraggableLocation): boolean => {
-      if (!destination) {
-        return false;
-      }
-      return destination.droppableId === id;
-    },
-  );
+export const makeMapStateToProps = (): Selector => {
+  const getIsDraggingOver = (id: DroppableId, destination: ?DraggableLocation): boolean => {
+    if (!destination) {
+      return false;
+    }
+    return destination.droppableId === id;
+  };
 
-  const getPlaceholder = memoizeOne(
-    (id: DroppableId,
-      destination: ?DraggableLocation,
-      draggable: ?DraggableDimension
-    ): ?Placeholder => {
-      // not dragging anything
-      if (!draggable) {
-        return null;
-      }
-
-      // not dragging over any droppable
-      if (!destination) {
-        return null;
-      }
-
-      // no placeholder needed when dragging over the home droppable
-      if (id === draggable.descriptor.droppableId) {
-        return null;
-      }
-
-      // not over this droppable
-      if (id !== destination.droppableId) {
-        return null;
-      }
-
-      return draggable.placeholder;
+  const shouldUsePlaceholder = (
+    id: DroppableId,
+    descriptor: DraggableDescriptor,
+    destination: ?DraggableLocation,
+  ): boolean => {
+    if (!destination) {
+      return false;
     }
-  );
+
+    // Do not use a placeholder when over the home list
+    if (id === descriptor.droppableId) {
+      return false;
+    }
+
+    // TODO: no placeholder if over foreign list
+    return id === destination.droppableId;
+  };
 
   const getMapProps = memoizeOne(
     (isDraggingOver: boolean,
@@ -78,30 +66,28 @@ export const makeSelector = (): Selector => {
 
     const id: DroppableId = ownProps.droppableId;
 
-    if (state.phase === 'DRAGGING' || state.phase === 'COLLECTING' || state.phase === 'DROP_PENDING') {
-      const isDraggingOver: boolean = getIsDraggingOver(id, state.impact.destination);
+    if (state.isDragging) {
+      const destination: ?DraggableLocation = state.impact.destination;
+      const isDraggingOver: boolean = getIsDraggingOver(id, destination);
       const draggableId: DraggableId = state.critical.draggable.id;
       const draggingOverWith: ?DraggableId = isDraggingOver ? draggableId : null;
+      const draggable: DraggableDimension = state.dimensions.draggables[draggableId];
 
-      const placeholder: ?Placeholder = getPlaceholder(
-        id,
-        state.impact.destination,
-        state.dimensions.draggables[draggableId],
-      );
+      const placeholder: ?Placeholder =
+        shouldUsePlaceholder(id, draggable.descriptor, destination) ? draggable.placeholder : null;
 
       return getMapProps(isDraggingOver, draggingOverWith, placeholder);
     }
 
     if (state.phase === 'DROP_ANIMATING') {
-      const isDraggingOver = getIsDraggingOver(id, state.pending.impact.destination);
+      const destination: ?DraggableLocation = state.pending.impact.destination;
+      const isDraggingOver = getIsDraggingOver(id, destination);
       const draggableId: DraggableId = state.pending.result.draggableId;
       const draggingOverWith: ?DraggableId = isDraggingOver ? draggableId : null;
+      const draggable: DraggableDimension = state.dimensions.draggables[draggableId];
 
-      const placeholder: ?Placeholder = getPlaceholder(
-        id,
-        state.pending.result.destination,
-        state.dimensions.draggables[draggableId],
-      );
+      const placeholder: ?Placeholder =
+        shouldUsePlaceholder(id, draggable.descriptor, destination) ? draggable.placeholder : null;
 
       return getMapProps(isDraggingOver, draggingOverWith, placeholder);
     }
@@ -116,7 +102,7 @@ export const makeSelector = (): Selector => {
 // that `connect` provides.
 // It avoids needing to do it own within `Droppable`
 const connectedDroppable: OwnProps => Node = (connect(
-  makeSelector,
+  makeMapStateToProps,
   null,
   null,
   { storeKey },

test/unit/view/connected-draggable/dragging.spec.js

@@ -11,11 +11,11 @@ import type {
 } from '../../../../src/view/draggable/draggable-types';
 import {
   move,
-  getOwnProps,
   draggingStates,
   withImpact,
   type IsDraggingState,
-} from './util';
+} from '../../../utils/dragging-state';
+import getOwnProps from './get-own-props';
 
 const preset = getPreset();
 const state = getStatePreset();

test/unit/view/connected-draggable/dropping-something-else.spec.js

@@ -5,8 +5,9 @@ import { getPreset } from '../../../utils/dimension';
 import { patch, negate } from '../../../../src/state/position';
 import getStatePreset from '../../../utils/get-simple-state-preset';
 import {
-  getOwnProps, draggingStates, withImpact, withPending, type IsDraggingState,
-} from './util';
+  draggingStates, withImpact, withPending, type IsDraggingState,
+} from '../../../utils/dragging-state';
+import getOwnProps from './get-own-props';
 import type {
   Selector,
   OwnProps,

test/unit/view/connected-draggable/dropping.spec.js

@@ -2,7 +2,7 @@
 import { makeMapStateToProps } from '../../../../src/view/draggable/connected-draggable';
 import { getPreset } from '../../../utils/dimension';
 import getStatePreset from '../../../utils/get-simple-state-preset';
-import { getOwnProps } from './util';
+import getOwnProps from './get-own-props';
 import type {
   Selector,
   OwnProps,

test/unit/view/connected-draggable/get-own-props.js

@@ -0,0 +1,16 @@
+// @flow
+import type {
+  OwnProps,
+} from '../../../../src/view/draggable/draggable-types';
+import type {
+  DraggableDimension,
+} from '../../../../src/types';
+
+export default (dimension: DraggableDimension): OwnProps => ({
+  draggableId: dimension.descriptor.id,
+  index: dimension.descriptor.index,
+  isDragDisabled: false,
+  disableInteractiveElementBlocking: false,
+  children: () => null,
+});
+

test/unit/view/connected-draggable/nothing-is-dragging.spec.js

@@ -2,9 +2,7 @@
 import { makeMapStateToProps } from '../../../../src/view/draggable/connected-draggable';
 import { getPreset } from '../../../utils/dimension';
 import getStatePreset from '../../../utils/get-simple-state-preset';
-import {
-  getOwnProps,
-} from './util';
+import getOwnProps from './get-own-props';
 import type {
   Selector,
   OwnProps,

test/unit/view/connected-draggable/selector-isolation.spec.js

@@ -2,7 +2,7 @@
 import { makeMapStateToProps } from '../../../../src/view/draggable/connected-draggable';
 import { getPreset } from '../../../utils/dimension';
 import getStatePreset from '../../../utils/get-simple-state-preset';
-import { getOwnProps } from './util';
+import getOwnProps from './get-own-props';
 import type {
   Selector,
   OwnProps,

test/unit/view/connected-draggable/something-else-is-dragging.spec.js

@@ -6,12 +6,9 @@ import noImpact from '../../../../src/state/no-impact';
 import getStatePreset from '../../../utils/get-simple-state-preset';
 import { negate, patch } from '../../../../src/state/position';
 import {
-  move,
-  getOwnProps,
-  draggingStates,
-  withImpact,
-  type IsDraggingState,
-} from './util';
+  draggingStates, withImpact, move, type IsDraggingState,
+} from '../../../utils/dragging-state';
+import getOwnProps from './get-own-props';
 import type {
   Selector,
   OwnProps,

test/unit/view/connected-droppable/disabled.spec.js

@@ -0,0 +1,47 @@
+// @flow
+import getStatePreset from '../../../utils/get-simple-state-preset';
+import { makeMapStateToProps } from '../../../../src/view/droppable/connected-droppable';
+import type { State, DroppableDimension } from '../../../../src/types';
+import type {
+  OwnProps,
+  Selector,
+  MapProps,
+} from '../../../../src/view/droppable/droppable-types';
+import getOwnProps from './get-own-props';
+import { getPreset } from '../../../utils/dimension';
+
+const preset = getPreset();
+const state = getStatePreset();
+
+const execute = (droppable: DroppableDimension) => {
+  const ownProps: OwnProps = getOwnProps(droppable);
+  ownProps.isDropDisabled = true;
+  const selector: Selector = makeMapStateToProps();
+  const defaultDisabledProps: MapProps = selector(state.idle, ownProps);
+  const expected: MapProps = {
+    isDraggingOver: false,
+    draggingOverWith: null,
+    placeholder: null,
+  };
+
+  it('should have the expected disabled props while resting', () => {
+    expect(defaultDisabledProps).toEqual(expected);
+  });
+
+  // always dragging inside of home
+  state.allPhases(preset.inHome1.descriptor.id).forEach((current: State) => {
+    it(`should return disabled map props when in phase ${current.phase}`, () => {
+      const result: MapProps = selector(current, ownProps);
+      // memoization check
+      expect(result).toBe(defaultDisabledProps);
+    });
+  });
+};
+
+describe('home list', () => {
+  execute(preset.home);
+});
+
+describe('in foreign list', () => {
+  execute(preset.foreign);
+});

test/unit/view/connected-droppable/dragging.spec.js

@@ -0,0 +1,67 @@
+// @flow
+import getStatePreset from '../../../utils/get-simple-state-preset';
+import { makeMapStateToProps } from '../../../../src/view/droppable/connected-droppable';
+import type { State, DroppableDimension } from '../../../../src/types';
+import type {
+  OwnProps,
+  Selector,
+  MapProps,
+} from '../../../../src/view/droppable/droppable-types';
+import getOwnProps from './get-own-props';
+import { getPreset } from '../../../utils/dimension';
+
+const preset = getPreset();
+const state = getStatePreset();
+
+const restingProps: MapProps = {
+  isDraggingOver: false,
+  draggingOverWith: null,
+  placeholder: null,
+};
+
+describe('home list', () => {
+  const ownProps: OwnProps = getOwnProps(preset.home);
+  it('should not break memoization between IDLE and PREPARING phases', () => {
+    const selector: Selector = makeMapStateToProps();
+
+    const defaultProps: MapProps = selector(state.idle, ownProps);
+    // checking value
+    expect(defaultProps).toEqual(restingProps);
+    // checking memoization
+    expect(selector(state.preparing, ownProps)).toBe(defaultProps);
+  });
+
+  describe('is dragging over', () => {
+    it('should indicate that it is being dragged over', () => {
+      const selector: Selector = makeMapStateToProps();
+      const props: MapProps = selector(state.dragging(preset.inHome1.descriptor.id), ownProps);
+
+      const expected: MapProps = {
+        isDraggingOver: true,
+        draggingOverWith: preset.inHome1.descriptor.id,
+        // no placeholder when dragging in own list
+        placeholder: null,
+      };
+      expect(props).toEqual(expected);
+    });
+
+    it('should not break memoization between moves', () => {
+      const selector: Selector = makeMapStateToProps();
+      const base: DraggingState = state.dragging(preset.inHome1.descriptor.id);
+    });
+  });
+
+  describe('is not dragging over', () => {
+    it('should indicate that it is not being dragged over', () => {
+
+    });
+
+    it('should not break memoization between moves', () => {
+
+    });
+  });
+});
+
+describe('foreign list', () => {
+  // as above, but also that placeholder is there!
+});

test/unit/view/connected-droppable/get-own-props.js

@@ -0,0 +1,13 @@
+// @flow
+import type { DroppableDimension } from '../../../../src/types';
+import type { OwnProps } from '../../../../src/view/droppable/droppable-types';
+
+export default (dimension: DroppableDimension): OwnProps => ({
+  droppableId: dimension.descriptor.id,
+  type: dimension.descriptor.type,
+  isDropDisabled: false,
+  direction: dimension.axis.direction,
+  ignoreContainerClipping: false,
+  children: () => null,
+});
+