Making unit test pass

Author: David-Desmaisons

src/core/componentBuilderHelper.js

@@ -26,10 +26,10 @@ function createSortableOption({ $attrs, callBackBuilder }) {
       options[`on${event}`] = eventBuilder(event);
     });
   });
-  const draggable = `${options.draggable || ""}[data-draggable]`;
+  const draggable = `[data-draggable]${options.draggable || ""}`;
   return {
-    draggable,
-    ...options
+    ...options,
+    draggable
   };
 }
 

src/vuedraggable.js

@@ -125,6 +125,7 @@ const draggableComponent = defineComponent({
     });
     const targetDomElement = $el.nodeType === 1 ? $el : $el.parentElement;
     this._sortable = new Sortable(targetDomElement, sortableOptions);
+    this.targetDomElement = targetDomElement;
     targetDomElement.__draggable_component__ = this;
   },
 
@@ -215,7 +216,7 @@ const draggableComponent = defineComponent({
     getVmIndexFromDomIndex(domIndex) {
       return this.componentStructure.getVmIndexFromDomIndex(
         domIndex,
-        this._sortable.el
+        this.targetDomElement
       );
     },
 

tests/unit/core/componentBuilderHelper.spec.js

@@ -71,22 +71,28 @@ describe("getComponentAttributes", () => {
 
 describe("createSortableOption", () => {
   test.each([
-    [{ $attrs: {}, callBackBuilder: {} }, { draggable: ">*" }],
-    [{ $attrs: { onStart: 23 }, callBackBuilder: {} }, { draggable: ">*" }],
-    [{ $attrs: { onEnd: 23 }, callBackBuilder: {} }, { draggable: ">*" }],
+    [{ $attrs: {}, callBackBuilder: {} }, { draggable: "[data-draggable]" }],
+    [
+      { $attrs: { onStart: 23 }, callBackBuilder: {} },
+      { draggable: "[data-draggable]" }
+    ],
+    [
+      { $attrs: { onEnd: 23 }, callBackBuilder: {} },
+      { draggable: "[data-draggable]" }
+    ],
     [
       {
         $attrs: { id: "id", class: "class", "data-app": "app" },
         callBackBuilder: {}
       },
-      { draggable: ">*" }
+      { draggable: "[data-draggable]" }
     ],
     [
       {
         $attrs: { value: "43" },
         callBackBuilder: {}
       },
-      { value: "43", draggable: ">*" }
+      { value: "43", draggable: "[data-draggable]" }
     ],
     [
       {
@@ -100,7 +106,7 @@ describe("createSortableOption", () => {
       {
         value: "43",
         ghostClass: "phantom",
-        draggable: ".draggable"
+        draggable: "[data-draggable].draggable"
       }
     ],
     [
@@ -115,7 +121,7 @@ describe("createSortableOption", () => {
       },
       {
         value: "7",
-        draggable: ".draggable",
+        draggable: "[data-draggable].draggable",
         onChoose: "Choose",
         onClone: "Clone",
         onFilter: "Filter",
@@ -136,7 +142,7 @@ describe("createSortableOption", () => {
       },
       {
         property: "property",
-        draggable: ">*",
+        draggable: "[data-draggable]",
         onChoose: "emit-Choose",
         onClone: "emit-Clone",
         onFilter: "emit-Filter",

tests/unit/helper/DraggableWithTransition.vue

@@ -1,5 +1,10 @@
 <template>
-  <draggable tag="transition-group" v-model="array" :item-key="key => key">
+  <draggable
+    tag="transition-group"
+    :component-data="{ tag: 'div' }"
+    v-model="array"
+    :item-key="key => key"
+  >
     <template #item="{element}">
       <div>{{ element }}</div>
     </template>

tests/unit/vuedraggable.integrated.spec.js

@@ -1,17 +1,17 @@
 import { mount, config } from "@vue/test-utils";
 config.global.stubs["transition-group"] = false;
 import Sortable from "sortablejs";
+
 jest.genMockFromModule("sortablejs");
 jest.mock("sortablejs");
+
 const SortableFake = {
   destroy: jest.fn(),
-  option: jest.fn(),
+  option: jest.fn()
 };
-Sortable.mockImplementation(element => {
-  console.log(element);
-  SortableFake.el = element;
-  return SortableFake;
-});
+Sortable.mockImplementation(() => SortableFake);
+
+import draggable from "@/vuedraggable";
 
 import { nextTick } from "vue";
 import DraggableWithList from "./helper/DraggableWithList";
@@ -20,8 +20,6 @@ import DraggableWithModel from "./helper/DraggableWithList";
 import DraggableWithTransition from "./helper/DraggableWithTransition";
 import fake from "./helper/FakeRoot";
 
-import draggable from "@/vuedraggable";
-
 let wrapper;
 let element;
 let vm;

tests/unit/vuedraggable.spec.js

@@ -2,14 +2,10 @@ import { mount, config } from "@vue/test-utils";
 import Sortable from "sortablejs";
 jest.mock("sortablejs");
 const SortableFake = {
-  el: null,
   destroy: jest.fn(),
   option: jest.fn()
 };
-Sortable.mockImplementation(element => {
-  SortableFake.el = element;
-  return SortableFake;
-});
+Sortable.mockImplementation(() => SortableFake);
 import draggable from "@/vuedraggable";
 import { nextTick, h } from "vue";
 
@@ -341,6 +337,7 @@ describe("draggable.vue when initialized with list", () => {
 
   describe("when add is called", () => {
     let newItem;
+    const expectedDOMAfterUpdate = `<div><header></header><div data-draggable="true">a</div><div data-draggable="true">b</div><div data-draggable="true">d</div><div data-draggable="true">c</div><footer></footer></div>`;
     beforeEach(async () => {
       await nextTick();
       newItem = document.createElement("div");
@@ -349,16 +346,17 @@ describe("draggable.vue when initialized with list", () => {
       newItem._underlying_vm_ = "d";
       const last = element.children[3];
       element.insertBefore(newItem, last);
+
       const add = getEvent("onAdd");
       add({
         item: newItem,
         newIndex: 3
       });
     });
 
-    it("DOM changes should be reverted", async () => {
+    it("DOM changes should be performed", async () => {
       await nextTick();
-      expectHTML(wrapper, initialRender);
+      expectHTML(wrapper, expectedDOMAfterUpdate);
     });
 
     it("list should be updated", async () => {
@@ -506,6 +504,7 @@ describe("draggable.vue when initialized with list", () => {
     });
 
     describe("when remove is called", () => {
+      const expectedDomAfterRemove = `<div><header></header><div data-draggable="true">a</div><div data-draggable="true">c</div><footer></footer></div>`;
       beforeEach(() => {
         element.removeChild(item);
         const remove = getEvent("onRemove");
@@ -515,9 +514,9 @@ describe("draggable.vue when initialized with list", () => {
         });
       });
 
-      it("DOM changes should be reverted", async () => {
+      it("DOM should be updated", async () => {
         await nextTick();
-        expectHTML(wrapper, initialRender);
+        expectHTML(wrapper, expectedDomAfterRemove);
       });
 
       it("list should be updated", async () => {
@@ -544,6 +543,10 @@ describe("draggable.vue when initialized with list", () => {
     ])(
       "when update is called with new index being %i",
       (index, expectedList) => {
+        const expectedDomAfterUpdate = `<div><header></header>${expectedList
+          .map(value => `<div data-draggable="true">${value}</div>`)
+          .join("")}<footer></footer></div>`;
+
         beforeEach(() => {
           const firstDraggable = element.children[index];
           element.removeChild(item);
@@ -557,9 +560,9 @@ describe("draggable.vue when initialized with list", () => {
           });
         });
 
-        it("DOM changes should be reverted", async () => {
+        it("DOM should be updated", async () => {
           await nextTick();
-          expectHTML(wrapper, initialRender);
+          expectHTML(wrapper, expectedDomAfterUpdate);
         });
 
         it("list should be updated", async () => {
@@ -1046,6 +1049,9 @@ describe("draggable.vue when initialized with a transition group", () => {
       props: {
         modelValue: items,
         tag: "transition-group",
+        componentData: {
+          tag: "div"
+        },
         itemKey: k => k
       },
       slots: {
@@ -1076,7 +1082,7 @@ describe("draggable.vue when initialized with a transition group", () => {
   describe("when initiating a drag operation", () => {
     let evt;
     beforeEach(() => {
-      item = element.children[0].children[1];
+      item = element.children[1];
       evt = { item };
       const start = getEvent("onStart");
       start(evt);
@@ -1099,7 +1105,7 @@ describe("draggable.vue when initialized with a transition group", () => {
 
     describe("when remove is called", () => {
       beforeEach(() => {
-        element.children[0].removeChild(item);
+        element.removeChild(item);
         const remove = getEvent("onRemove");
         remove({
           item,
@@ -1134,7 +1140,6 @@ describe("draggable.vue when initialized with a transition group", () => {
     describe("when update is called", () => {
       beforeEach(() => {
         const transitionRoot = element;
-        //.children[0];
         const firstDraggable = transitionRoot.children[0];
         transitionRoot.removeChild(item);
         transitionRoot.insertBefore(item, firstDraggable);
@@ -1164,7 +1169,7 @@ describe("draggable.vue when initialized with a transition group", () => {
           item,
           oldIndex: 1,
           newIndex: 0,
-          from: element.children[0]
+          from: element
         };
         expect(wrapper.emitted().update).toEqual([[expectedEvt]]);
       });
@@ -1187,8 +1192,8 @@ describe("draggable.vue when initialized with a transition group", () => {
         move = jest.fn();
         wrapper.setProps({ move });
         evt = {
-          to: element.children[0],
-          related: element.children[0].children[1],
+          to: element,
+          related: element.children[1],
           willInsertAfter: false
         };
         originalEvt = {
@@ -1210,8 +1215,8 @@ describe("draggable.vue when initialized with a transition group", () => {
             index: 1,
             list: ["a", "b", "c"]
           },
-          to: element.children[0],
-          related: element.children[0].children[1],
+          to: element,
+          related: element.children[1],
           willInsertAfter: false
         };
         doMove();