Adding integrated tests

Author: David-Desmaisons

tests/unit/helper/DraggableWithList.vue

@@ -1,5 +1,5 @@
 <template>
-  <draggable :list="array">
+  <draggable :list="array" tag="span">
     <div
       v-for="item in array"
       :key="item"

tests/unit/helper/DraggableWithModel.vue

@@ -0,0 +1,22 @@
+<template>
+  <draggable v-model="array" tag="span">
+    <div
+      v-for="item in array"
+      :key="item"
+    >{{item}}</div>
+  </draggable>
+</template>
+<script>
+import draggable from "@/vuedraggable";
+
+export default {
+  components: {
+    draggable
+  },
+  data() {
+    return {
+      array: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+    };
+  }
+};
+</script>

tests/unit/helper/DraggableWithTransition.vue

@@ -0,0 +1,24 @@
+<template>
+  <draggable v-model="array">
+    <transition-group>
+      <div
+        v-for="item in array"
+        :key="item"
+      >{{item}}</div>
+    </transition-group>
+  </draggable>
+</template>
+<script>
+import draggable from "@/vuedraggable";
+
+export default {
+  components: {
+    draggable
+  },
+  data() {
+    return {
+      array: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+    };
+  }
+};
+</script>

tests/unit/vuedraggable.integrated.spec.js

@@ -6,15 +6,13 @@ const SortableFake = {
   destroy: jest.fn(),
   option: jest.fn()
 };
-const SortableFake2 = {
-  destroy: jest.fn(),
-  option: jest.fn()
-};
-Sortable.mockImplementationOnce(() => SortableFake)
-  .mockImplementationOnce(() => SortableFake2);
+Sortable.mockImplementation(() => SortableFake);
 
 import Vue from "vue";
 import DraggableWithList from "./helper/DraggableWithList"
+import DraggableWithModel from "./helper/DraggableWithList"
+import DraggableWithTransition from "./helper/DraggableWithTransition"
+
 import draggable from "@/vuedraggable";
 
 let wrapper;
@@ -25,51 +23,62 @@ function getEvent(name) {
   return Sortable.mock.calls[0][1][name];
 }
 
-describe("draggable.vue when working list", () => {
-  beforeEach(() => {
-    jest.resetAllMocks();
-    wrapper = mount(DraggableWithList, {
-      attachToDocument: true
-    });
-    vm = wrapper.vm;
-    element = wrapper.element;
-  });
-
-  describe("when handling sort", () => {
-    let item;
+const expectedArray = [0, 1, 3, 4, 5, 6, 7, 2, 8, 9];
+const expectedDomNoTransition = `<span>${expectedArray.map(nu => `<div>${nu}</div>`).join('')}</span>`;
+const expectedDomTransition = `<div>${expectedDomNoTransition}</div>`;
 
-    beforeEach(async () => {
-      item = element.children[2];
-      const startEvt = { item };
-      getEvent("onStart")(startEvt);
-      await Vue.nextTick();
+describe.each([
+  [DraggableWithList, "draggable with list", expectedDomNoTransition],
+  [DraggableWithModel, "draggable with model", expectedDomNoTransition],
+  [DraggableWithTransition, "draggable with transition", expectedDomTransition]
+])
+  (
+    "should update list with component: %s %s",
+    (component, _, expectedDom) => {
 
-      const firstDraggable = element.children[1];
-      element.removeChild(item);
-      element.insertBefore(item, firstDraggable);
-      getEvent("onUpdate")({
-        item,
-        oldIndex: 2,
-        newIndex: 7,
-        from: element
+      beforeEach(() => {
+        jest.resetAllMocks();
+        wrapper = mount(component, {
+          attachToDocument: true
+        });
+        vm = wrapper.vm;
+        element = wrapper.find('span').element;
       });
-      await Vue.nextTick();
-    })
 
-    it("sends a change event", async () => {
-      const draggableWrapper = wrapper.find(draggable);
-      const expectedEvt = { moved: { element: 2, oldIndex: 2, newIndex: 7 } };
-      expect(draggableWrapper.emitted().change).toEqual([[expectedEvt]]);
-    });
+      describe("when handling sort", () => {
+        let item;
 
-    it("update list", async () => {
-      expect(wrapper.vm.array).toEqual([0, 1, 3, 4, 5, 6, 7, 2, 8, 9]);
-    });
+        beforeEach(async () => {
+          item = element.children[2];
+          const startEvt = { item };
+          getEvent("onStart")(startEvt);
+          await Vue.nextTick();
 
-    it("updates DOM", async () => {
-      const expectedArray = [0, 1, 3, 4, 5, 6, 7, 2, 8, 9];
-      const expectedDom = `<div>${expectedArray.map(nu => `<div>${nu}</div>`).join('')}</div>`;
-      expect(wrapper.html()).toEqual(expectedDom);
-    });
-  });
-});
+          const firstDraggable = element.children[1];
+          element.removeChild(item);
+          element.insertBefore(item, firstDraggable);
+          getEvent("onUpdate")({
+            item,
+            oldIndex: 2,
+            newIndex: 7,
+            from: element
+          });
+          await Vue.nextTick();
+        })
+
+        it("sends a change event", async () => {
+          const draggableWrapper = wrapper.find(draggable);
+          const expectedEvt = { moved: { element: 2, oldIndex: 2, newIndex: 7 } };
+          expect(draggableWrapper.emitted().change).toEqual([[expectedEvt]]);
+        });
+
+        it("update list", async () => {
+          expect(vm.array).toEqual(expectedArray);
+        });
+
+        it("updates DOM", async () => {
+          expect(wrapper.html()).toEqual(expectedDom);
+        });
+      });
+    }
+  )