Fixes add/remove container api

Author: tsov

CHANGELOG.md

@@ -6,6 +6,8 @@
 
 ### Changed
 
+- Fixed `addContainer`/`removeContainer` api
+
 ## v1.0.0-beta.5 - 2018-03-02
 
 ### Added

src/Draggable/Draggable.js

@@ -245,21 +245,23 @@ export default class Draggable {
    * Adds container to this draggable instance
    * @param {...HTMLElement} containers - Containers you want to add to draggable
    * @return {Draggable}
-   * @example draggable.addPlugin(CustomA11yPlugin, CustomMirrorPlugin)
+   * @example draggable.addContainer(document.body)
    */
   addContainer(...containers) {
     this.containers = [...this.containers, ...containers];
+    this.sensors.forEach((sensor) => sensor.addContainer(...containers));
     return this;
   }
 
   /**
    * Removes container from this draggable instance
    * @param {...HTMLElement} containers - Containers you want to remove from draggable
    * @return {Draggable}
-   * @example draggable.removePlugin(MirrorPlugin, CustomMirrorPlugin)
+   * @example draggable.removeContainer(document.body)
    */
   removeContainer(...containers) {
     this.containers = this.containers.filter((container) => !containers.includes(container));
+    this.sensors.forEach((sensor) => sensor.removeContainer(...containers));
     return this;
   }
 

src/Draggable/Sensors/Sensor/Sensor.js

@@ -16,7 +16,7 @@ export default class Sensor {
      * @property containers
      * @type {HTMLElement[]}
      */
-    this.containers = containers;
+    this.containers = [...containers];
 
     /**
      * Current options
@@ -56,6 +56,24 @@ export default class Sensor {
     return this;
   }
 
+  /**
+   * Adds container to this sensor instance
+   * @param {...HTMLElement} containers - Containers you want to add to this sensor
+   * @example draggable.addContainer(document.body)
+   */
+  addContainer(...containers) {
+    this.containers = [...this.containers, ...containers];
+  }
+
+  /**
+   * Removes container from this sensor instance
+   * @param {...HTMLElement} containers - Containers you want to remove from this sensor
+   * @example draggable.removeContainer(document.body)
+   */
+  removeContainer(...containers) {
+    this.containers = this.containers.filter((container) => !containers.includes(container));
+  }
+
   /**
    * Triggers event on target element
    * @param {HTMLElement} element - Element to trigger event on

src/Draggable/Sensors/Sensor/tests/Sensor.test.js

@@ -37,6 +37,36 @@ describe('Sensor', () => {
     });
   });
 
+  describe('#addContainer', () => {
+    test('adds container to sensor', () => {
+      const containers = [document.documentElement, document.body];
+      const sensor = new Sensor();
+
+      expect(sensor.containers)
+        .toEqual([]);
+
+      sensor.addContainer(...containers);
+
+      expect(sensor.containers)
+        .toEqual(containers);
+    });
+  });
+
+  describe('#removeContainer', () => {
+    test('removes container to sensor', () => {
+      const containers = [document.documentElement, document.body];
+      const sensor = new Sensor(containers);
+
+      expect(sensor.containers)
+        .toEqual(containers);
+
+      sensor.removeContainer(...containers);
+
+      expect(sensor.containers)
+        .toEqual([]);
+    });
+  });
+
   describe('#trigger', () => {
     it('should dispatch event on element', () => {
       const sensor = new Sensor();

src/Draggable/tests/Draggable.test.js

@@ -1,12 +1,17 @@
-import {createSandbox, triggerEvent, TestPlugin} from 'helper';
+import {createSandbox, triggerEvent, TestPlugin, clickMouse, moveMouse, releaseMouse, waitForDragDelay} from 'helper';
+
 import Draggable, {defaultOptions} from '../Draggable';
 import {DragStartEvent, DragMoveEvent, DragStopEvent} from '../DragEvent';
 import {DraggableInitializedEvent, DraggableDestroyEvent} from '../DraggableEvent';
 import {Accessibility, Mirror, Scrollable, Announcement} from '../Plugins';
 import {MouseSensor, TouchSensor} from '../Sensors';
 
 const sampleMarkup = `
-  <ul>
+  <ul class="Container">
+    <li>First item</li>
+    <li>Second item</li>
+  </ul>
+  <ul class="DynamicContainer">
     <li>First item</li>
     <li>Second item</li>
   </ul>
@@ -20,7 +25,7 @@ describe('Draggable', () => {
 
   beforeEach(() => {
     sandbox = createSandbox(sampleMarkup);
-    containers = sandbox.querySelectorAll('ul');
+    containers = sandbox.querySelectorAll('.Container');
   });
 
   afterEach(() => {
@@ -296,6 +301,78 @@ describe('Draggable', () => {
     });
   });
 
+  describe('#addContainer', () => {
+    it('adds single container dynamically', () => {
+      const dragOverContainerHandler = jest.fn();
+      const newInstance = new Draggable(containers, {
+        draggable: 'li',
+      });
+
+      newInstance.on('drag:over:container', dragOverContainerHandler);
+
+      const draggableElement = document.querySelector('li');
+      const dynamicContainer = document.querySelector('.DynamicContainer');
+
+      clickMouse(draggableElement);
+      waitForDragDelay(100);
+      moveMouse(dynamicContainer);
+
+      expect(dragOverContainerHandler).not.toHaveBeenCalled();
+
+      releaseMouse(newInstance.source);
+
+      newInstance.addContainer(dynamicContainer);
+
+      expect(newInstance.containers).toEqual([...containers, dynamicContainer]);
+
+      clickMouse(draggableElement);
+      waitForDragDelay(100);
+      moveMouse(dynamicContainer);
+
+      expect(dragOverContainerHandler).toHaveBeenCalled();
+
+      releaseMouse(newInstance.source);
+    });
+  });
+
+  describe('#removeContainer', () => {
+    it('removes single container dynamically', () => {
+      let dragOverContainerHandler = jest.fn();
+      const allContainers = document.querySelectorAll('.Container, .DynamicContainer');
+      const newInstance = new Draggable(allContainers, {
+        draggable: 'li',
+      });
+
+      newInstance.on('drag:over:container', dragOverContainerHandler);
+
+      const draggableElement = document.querySelector('li');
+      const dynamicContainer = document.querySelector('.DynamicContainer');
+
+      clickMouse(draggableElement);
+      waitForDragDelay(100);
+      moveMouse(dynamicContainer);
+
+      expect(dragOverContainerHandler).toHaveBeenCalled();
+
+      releaseMouse(newInstance.source);
+
+      newInstance.removeContainer(dynamicContainer);
+
+      expect(newInstance.containers).toEqual([...containers]);
+
+      dragOverContainerHandler = jest.fn();
+      newInstance.on('drag:over:container', dragOverContainerHandler);
+
+      clickMouse(draggableElement);
+      waitForDragDelay(100);
+      moveMouse(dynamicContainer);
+
+      expect(dragOverContainerHandler).not.toHaveBeenCalled();
+
+      releaseMouse(newInstance.source);
+    });
+  });
+
   it('triggers `drag:start` drag event on mousedown', () => {
     const newInstance = new Draggable(containers, {
       draggable: 'li',