Testing clone mode

Author: David-Desmaisons

tests/unit/vuedraggable.spec.js

@@ -103,13 +103,13 @@ describe("draggable.vue when initialized with list", () => {
       wrapper = shallowMount(draggable, {
         attachToDocument: true,
         propsData: {
-         element: "li"
+          element: "li"
         },
         slots: {
           default: ""
         }
       });
-      expect(console.warn).toBeCalledWith( "Element props is deprecated please use tag props instead. See https://github.com/SortableJS/Vue.Draggable/blob/master/documentation/migrate.md#element-props");
+      expect(console.warn).toBeCalledWith("Element props is deprecated please use tag props instead. See https://github.com/SortableJS/Vue.Draggable/blob/master/documentation/migrate.md#element-props");
     });
 
   });
@@ -576,6 +576,70 @@ describe("draggable.vue when initialized with list", () => {
     })
   });
 
+
+  describe("when initiating a drag operation in clone context", () => {
+    let evt;
+    beforeEach(() => {
+      resetMocks();
+      wrapper = shallowMount(draggable, {
+        attachToDocument: true,
+        propsData: {
+          list: items
+        },
+        attrs: {
+          group: { pull: "clone" }
+        },
+        slots: {
+          default: items.map(item => `<div>${item}</div>`),
+        }
+      });
+      vm = wrapper.vm;
+      element = wrapper.element;
+      item = element.children[1];
+      evt = { item };
+      const start = getEvent("onStart");
+      start(evt);
+    });
+
+    describe("when remove is called", () => {
+      beforeEach(() => {
+        var clone = item.cloneNode(true);
+        wrapper.element.insertBefore(clone, item);
+        wrapper.element.removeChild(item);
+        const remove = getEvent("onRemove");
+        remove({
+          item,
+          clone,
+          oldIndex: 1
+        });
+      })
+
+      it("DOM changes should be reverted", async () => {
+        await Vue.nextTick();
+        expect(wrapper.html()).toEqual(initialRenderRaw);
+      })
+
+      it("list should be not updated", async () => {
+        await Vue.nextTick();
+        expect(vm.list).toEqual(["a", "b", "c"]);
+      })
+
+      it("does not send a remove event", async () => {
+        await Vue.nextTick();
+        expect(wrapper.emitted().remove).toEqual([[{
+          item,
+          clone: item,
+          oldIndex: 1
+        }]]);
+      })
+
+      it("does not send a change event", async () => {
+        await Vue.nextTick();
+        expect(wrapper.emitted().change).toBeUndefined();
+      })
+    })
+  });
+
   describe("when attribute changes:", () => {
     const { error } = console;
     beforeEach(() => {
@@ -597,14 +661,11 @@ describe("draggable.vue when initialized with list", () => {
     );
 
     test.each(["Start", "Add", "Remove", "Update", "End", "Choose", "Sort", "Filter", "Clone", "Move"])
-    ("do not call option when updating option on%s",
-    (callBack) =>{
-      vm.$attrs = { [`on${callBack}`]: jest.fn() };
-      expect(SortableFake.option).not.toHaveBeenCalled();
-    });
-
-
-
+      ("do not call option when updating option on%s",
+        (callBack) => {
+          vm.$attrs = { [`on${callBack}`]: jest.fn() };
+          expect(SortableFake.option).not.toHaveBeenCalled();
+        });
   });
 
   test.each([
@@ -630,7 +691,7 @@ describe("draggable.vue when initialized with list", () => {
 
   it("does not throw when sortable is not set", () => {
     delete vm._sortable;
-    expect(() =>wrapper.destroy()).not.toThrow();
+    expect(() => wrapper.destroy()).not.toThrow();
   });
 })