Adding test

Author: David-Desmaisons

src/core/componentStructure.js

@@ -38,7 +38,6 @@ class ComponentStructure {
     this.noneFunctional =
       this.externalComponent && typeof this.tag !== "function";
     this.setHtmlRoot($el);
-    this._checkCoherence();
   }
 
   setHtmlRoot($el) {
@@ -57,14 +56,6 @@ class ComponentStructure {
     return this._getChildrenNodes().map(getHtmlElementFromNode);
   }
 
-  _checkCoherence() {
-    if (this.noneFunctional && this.transitionMode) {
-      throw new Error(
-        `Transition-group inside component is not supported. Please alter tag value or remove transition-group. Current tag value: ${this.tag}`
-      );
-    }
-  }
-
   _getChildrenNodes() {
     const {
       noneFunctional,
@@ -73,7 +64,6 @@ class ComponentStructure {
     } = this;
 
     if (noneFunctional) {
-      //TODO check problem here
       return defaultNodes[0].children;
     }
 

tests/unit/helper/DraggableWithComponent.vue

@@ -0,0 +1,23 @@
+<template>
+  <draggable
+    :list="array"
+    tag="fake"
+    :component-data="{ props: { prop1: 'my-id' } }"
+  >
+    <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/FakeComponent.js renamed to tests/unit/helper/FakeRoot.js

@@ -1,10 +1,10 @@
 export default {
-  name: "Fake",
+  name: "FakeRoot",
   props: {
     prop1: {
       type: String,
       default: "string"
     }
   },
-  template: "<div>{{prop1}}</div>"
+  template: `<div class="fake-root" :id="prop1"><slot></slot></div>`
 }

tests/unit/vuedraggable.integrated.spec.js

@@ -11,8 +11,10 @@ Sortable.mockImplementation(() => SortableFake);
 
 import { nextTick } from "vue";
 import DraggableWithList from "./helper/DraggableWithList";
+import DraggableWithComponent from "./helper/DraggableWithComponent.vue";
 import DraggableWithModel from "./helper/DraggableWithList";
 import DraggableWithTransition from "./helper/DraggableWithTransition";
+import fake from "./helper/FakeRoot";
 
 import draggable from "@/vuedraggable";
 
@@ -25,13 +27,17 @@ function getEvent(name) {
 }
 
 const expectedArray = [0, 1, 3, 4, 5, 6, 7, 2, 8, 9];
-const expectedDomWithWrapper = wrapper =>
-  `<${wrapper}>${expectedArray
-    .map(nu => `<div>${nu}</div>`)
+const expectedDomWithWrapper = (wrapper, attr = "") =>
+  `<${wrapper}${attr}>${expectedArray
+    .map((nu) => `<div>${nu}</div>`)
     .join("")}</${wrapper}>`;
 
 const expectedDomNoTransition = expectedDomWithWrapper("span");
 const expectedDomTransition = expectedDomWithWrapper("div");
+const expectedDomComponent = expectedDomWithWrapper(
+  "div",
+  'class="fake-root"id="my-id"'
+);
 
 function normalizeHTML(wrapper) {
   return wrapper.html().replace(/(\r\n\t|\n|\r\t| )/gm, "");
@@ -45,6 +51,12 @@ function expectHTML(wrapper, expected) {
 describe.each([
   ["draggable with list", DraggableWithList, expectedDomNoTransition, "span"],
   ["draggable with model", DraggableWithModel, expectedDomNoTransition, "span"],
+  [
+    "draggable with list and component as tag",
+    DraggableWithComponent,
+    expectedDomComponent,
+    "div"
+  ],
   [
     "draggable with transition",
     DraggableWithTransition,
@@ -57,7 +69,13 @@ describe.each([
     describe("when handling sort", () => {
       beforeEach(async () => {
         jest.resetAllMocks();
-        wrapper = mount(component);
+        wrapper = mount(component, {
+          global: {
+            components: {
+              fake
+            }
+          }
+        });
         vm = wrapper.vm;
         element = wrapper.find(expectWrapper).element;
 

tests/unit/vuedraggable.spec.js

@@ -1,5 +1,4 @@
 import { mount, config } from "@vue/test-utils";
-//config.global.stubs["transition-group"] = false;
 import Sortable from "sortablejs";
 jest.genMockFromModule("sortablejs");
 jest.mock("sortablejs");
@@ -11,7 +10,7 @@ Sortable.mockImplementation(() => SortableFake);
 import draggable from "@/vuedraggable";
 import { nextTick, h } from "vue";
 
-import Fake from "./helper/FakeComponent.js";
+import Fake from "./helper/FakeRoot.js";
 import DraggableOption from "./helper/DraggableOption.vue";
 import FakeFunctional from "./helper/FakeFunctionalComponent.js";