Converging unit test

Author: David-Desmaisons

tests/unit/helper/DraggableOption.vue

@@ -1,6 +1,8 @@
 <template>
-  <draggable :list="array" v-bind="additionalData">
-    <div v-for="item in array" :key="item">{{ item }}</div>
+  <draggable :list="array" v-bind="additionalData" :item-key="key => key">
+    <template #item="{element}">
+      <div>{{ element }}</div>
+    </template>
   </draggable>
 </template>
 <script>

tests/unit/helper/DraggableWithComponent.vue

@@ -1,6 +1,13 @@
 <template>
-  <draggable :list="array" tag="fake" :component-data="{ prop1: 'my-id' }">
-    <div v-for="item in array" :key="item">{{ item }}</div>
+  <draggable
+    :list="array"
+    tag="fake"
+    :component-data="{ prop1: 'my-id' }"
+    :item-key="key => key"
+  >
+    <template #item="{element}">
+      <div>{{ element }}</div>
+    </template>
   </draggable>
 </template>
 <script>

tests/unit/helper/DraggableWithList.vue

@@ -1,6 +1,8 @@
 <template>
-  <draggable :list="array" tag="span">
-    <div v-for="item in array" :key="item">{{ item }}</div>
+  <draggable :list="array" tag="span" :item-key="key => key">
+    <template #item="{element}">
+      <div>{{ element }}</div>
+    </template>
   </draggable>
 </template>
 <script>

tests/unit/helper/DraggableWithModel.vue

@@ -1,6 +1,8 @@
 <template>
-  <draggable v-model="array" tag="span">
-    <div v-for="item in array" :key="item">{{ item }}</div>
+  <draggable v-model="array" tag="span" :item-key="key => key">
+    <template #item="{element}">
+      <div>{{ element }}</div>
+    </template>
   </draggable>
 </template>
 <script>

tests/unit/helper/DraggableWithTransition.vue

@@ -1,8 +1,8 @@
 <template>
-  <draggable v-model="array">
-    <transition-group>
-      <div v-for="item in array" :key="item">{{ item }}</div>
-    </transition-group>
+  <draggable tag="transition-group" v-model="array" :item-key="key => key">
+    <template #item="{element}">
+      <div>{{ element }}</div>
+    </template>
   </draggable>
 </template>
 <script>

tests/unit/vuedraggable.integrated.spec.js

@@ -7,7 +7,11 @@ const SortableFake = {
   destroy: jest.fn(),
   option: jest.fn(),
 };
-Sortable.mockImplementation(() => SortableFake);
+Sortable.mockImplementation(element => {
+  console.log(element);
+  SortableFake.el = element;
+  return SortableFake;
+});
 
 import { nextTick } from "vue";
 import DraggableWithList from "./helper/DraggableWithList";
@@ -29,18 +33,18 @@ function getEvent(name) {
 const expectedArray = [0, 1, 3, 4, 5, 6, 7, 2, 8, 9];
 const expectedDomWithWrapper = (wrapper, attr = "") =>
   `<${wrapper}${attr}>${expectedArray
-    .map((nu) => `<div>${nu}</div>`)
+    .map((nu) => `<div data-draggable="true">${nu}</div>`)
     .join("")}</${wrapper}>`;
 
 const expectedDomNoTransition = expectedDomWithWrapper("span");
 const expectedDomTransition = expectedDomWithWrapper("div");
 const expectedDomComponent = expectedDomWithWrapper(
   "div",
-  'class="fake-root"id="my-id"'
+  ' class="fake-root" id="my-id"'
 );
 
 function normalizeHTML(wrapper) {
-  return wrapper.html().replace(/(\r\n\t|\n|\r\t| )/gm, "");
+  return wrapper.html();
 }
 
 function expectHTML(wrapper, expected) {