Improving tests

Author: David-Desmaisons

src/vuedraggable.js

@@ -333,11 +333,11 @@ const draggableComponent = {
     alterList(onList) {
       if (this.list) {
         onList(this.list);
-      } else {
-        const newList = [...this.value];
-        onList(newList);
-        this.$emit("input", newList);
+        return;
       }
+      const newList = [...this.value];
+      onList(newList);
+      this.$emit("input", newList);
     },
 
     spliceList() {
@@ -364,7 +364,6 @@ const draggableComponent = {
           return Object.assign(destination, context);
         }
       }
-
       return context;
     },
 

tests/unit/vuedraggable.spec.js

@@ -16,12 +16,13 @@ let items;
 let element;
 let input;
 const initialRender = "<div><header></header><div>a</div><div>b</div><div>c</div><footer></footer></div>";
+const initialRenderRaw = "<div><div>a</div><div>b</div><div>c</div></div>";
 
 function getEvent(name) {
   return Sortable.mock.calls[0][1][name];
 }
 
-describe("draggable.vue", () => {
+describe("draggable.vue when initialized with list", () => {
   beforeEach(() => {
     Sortable.mockClear();
     items = ["a", "b", "c"];
@@ -311,6 +312,144 @@ describe("draggable.vue", () => {
       })
     });
 
+    describe("when sending DragEnd", () =>{
+      let endEvt;
+      beforeEach(() => {
+        endEvt={
+          data: "data"
+        };
+        const onEnd = getEvent("onEnd");
+        onEnd(endEvt);
+      })
+
+      it("sends a update event", async () => {
+        await Vue.nextTick();
+        expect(wrapper.emitted().end).toEqual([[endEvt]]);
+      })
+    })
+  });
+});
+
+describe("draggable.vue when initialized with value", () => {
+  beforeEach(() => {
+    Sortable.mockClear();
+    items = ["a", "b", "c"];
+    wrapper = shallowMount(draggable, {
+      attachToDocument: true,
+      propsData:{
+        value: items
+      },
+      slots: {
+        default: items.map(item => `<div>${item}</div>`),
+      }
+    });
+    vm = wrapper.vm;
+    props = vm.$options.props;
+    element = wrapper.element;
+  });
+
+  describe("when initiating a drag operation", () => {
+    let evt;
+    let item;
+    beforeEach(() => {
+      item = element.children[1];
+      evt = { item };
+      const start = getEvent("onStart");
+      start(evt);
+    });
+
+    it("sends a start event", async () => {
+      await Vue.nextTick();
+      expect(wrapper.emitted()).toEqual({
+        start: [[evt]]
+      });
+    })
+
+    it("sets context", async () => {
+      await Vue.nextTick();
+      expect(vm.context).toEqual({
+        element: "b",
+        index: 1
+      });
+    })
+
+    describe("when remove is called", () => {
+      beforeEach(() => {
+        element.removeChild(item);
+        const remove = getEvent("onRemove");
+        remove({
+          item,
+          oldIndex: 1
+        });
+      })
+
+      it("DOM changes should be reverted", async () => {
+        await Vue.nextTick();
+        expect(wrapper.html()).toEqual(initialRenderRaw);
+      })
+
+      it("input should with updated value", async () => {
+        await Vue.nextTick();
+        const expected = ["a", "c"];
+        expect(wrapper.emitted().input).toEqual([[expected]]);
+      })
+
+      it("sends a remove event", async () => {
+        await Vue.nextTick();
+        const expectedEvt = { item, oldIndex: 1 };
+        expect(wrapper.emitted().remove).toEqual([[expectedEvt]]);
+      })
+
+      it("sends a change event", async () => {
+        await Vue.nextTick();
+        const expectedEvt = { removed: { element: "b", oldIndex: 1 } };
+        expect(wrapper.emitted().change).toEqual([[expectedEvt]]);
+      })
+    })
+
+    describe("when update is called", () => {
+      beforeEach(() => {
+        const firstDraggable = element.children[0];
+        element.removeChild(item);
+        element.insertBefore(item, firstDraggable);
+        const update = getEvent("onUpdate");
+        update({
+          item,
+          oldIndex: 1,
+          newIndex: 0,
+          from: element
+        });
+      })
+
+      it("DOM changes should be reverted", async () => {
+        await Vue.nextTick();
+        expect(wrapper.html()).toEqual(initialRenderRaw);
+      })
+
+      it("send an input event", async () => {
+        await Vue.nextTick();
+        const expected = ["b", "a", "c"];
+        expect(wrapper.emitted().input).toEqual([[expected]]);
+      })
+
+      it("sends a update event", async () => {
+        await Vue.nextTick();
+        const expectedEvt = {
+          item,
+          oldIndex: 1,
+          newIndex: 0,
+          from: element
+        };
+        expect(wrapper.emitted().update).toEqual([[expectedEvt]]);
+      })
+
+      it("sends a change event", async () => {
+        await Vue.nextTick();
+        const expectedEvt = { moved: { element: "b", oldIndex: 1, newIndex: 0 } };
+        expect(wrapper.emitted().change).toEqual([[expectedEvt]]);
+      })
+    });
+
     describe("when sending DragEnd", () =>{
       let endEvt;
       beforeEach(() => {