Improving tests

Author: David-Desmaisons

tests/unit/helper/DraggableWithFragment.vue

@@ -0,0 +1,23 @@
+<template>
+  <div id="root">
+    <draggable :list="array" tag="FragmentRoot" :item-key="key => key">
+      <template #item="{element, index }">
+        <div>{{ element }}-{{ index }}</div>
+      </template>
+    </draggable>
+  </div>
+</template>
+<script>
+import draggable from "@/vuedraggable";
+
+export default {
+  components: {
+    draggable
+  },
+  data() {
+    return {
+      array: ["a", "b", "c"]
+    };
+  }
+};
+</script>

tests/unit/helper/FakeFunctionalComponent.js

@@ -0,0 +1,8 @@
+<template>
+  <slot></slot>
+</template>
+<script>
+import draggable from "@/vuedraggable";
+
+export default {};
+</script>

tests/unit/helper/FragmentComponent.vue

@@ -11,6 +11,8 @@ import { nextTick, h } from "vue";
 
 import Fake from "./helper/FakeRoot.js";
 import DraggableOption from "./helper/DraggableOption.vue";
+import DraggableWithFragment from "./helper/DraggableWithFragment.vue";
+import FragmentRoot from "./helper/FragmentComponent";
 
 let wrapper;
 let vm;
@@ -1546,3 +1548,37 @@ describe("when using only footer slot with an none-empty list", () => {
     });
   });
 });
+
+describe("when using a fragment component as tag", () => {
+  beforeEach(async () => {
+    resetMocks();
+
+    wrapper = mount(DraggableWithFragment, {
+      global: {
+        components: {
+          FragmentRoot
+        }
+      }
+    });
+    vm = wrapper.vm;
+    element = wrapper.element;
+  });
+
+  it("renders correctly", () => {
+    const expectedDOM = `<div id="root"><div data-draggable="true">a-0</div><div data-draggable="true">b-1</div><div data-draggable="true">c-2</div></div>`;
+    expectHTML(wrapper, expectedDOM);
+  });
+
+  it("creates sortable instance with parent node", () => {
+    expect(Sortable.mock.calls.length).toBe(1);
+    const parameters = Sortable.mock.calls[0];
+    expect(parameters[0]).toBe(element);
+  });
+
+  it("sets nodes keys", () => {
+    const keys = [0, 1, 2]
+      .map(index => element.children.item(index))
+      .map(el => el.__vnode.key);
+    expect(keys).toEqual(["a", "b", "c"]);
+  });
+});