Improving tests

Author: David-Desmaisons

src/core/componentBuilderHelper.js

@@ -6,7 +6,7 @@ function isHtmlAttribute(value) {
   return ["id", "class"].includes(value) || value.startsWith("data-");
 }
 
-function getComponentAttributes($attrs, componentData) {
+function getComponentAttributes({ $attrs, componentData }) {
   const attributes = Object.entries($attrs)
     .filter(([key, _]) => isHtmlAttribute(key))
     .reduce((res, [key, value]) => {
@@ -29,8 +29,9 @@ function getSortableOption({ $attrs, callBackBuilder }) {
     draggable: ">*"
   };
   Object.entries($attrs)
+    .filter(([key, _]) => !isHtmlAttribute(key))
     .map(([key, value]) => [camelize(key), value])
-    .filter(([key, _]) => !isHtmlAttribute(key) && !isReadOnlyEvent(key))
+    .filter(([key, _]) => !isReadOnlyEvent(key))
     .forEach(([key, value]) => {
       options[key] = value;
     });

src/util/string.js

@@ -7,9 +7,7 @@ function cached(fn) {
 }
 
 const regex = /-(\w)/g;
-const camelize = cached(str =>
-  str.replace(regex, (_, c) => (c ? c.toUpperCase() : ""))
-);
+const camelize = cached(str => str.replace(regex, (_, c) => c.toUpperCase()));
 
 const capitalize = str => str.replace(/^\w/, c => c.toUpperCase());
 

src/vuedraggable.js

@@ -143,7 +143,7 @@ const draggableComponent = defineComponent({
   },
 
   render() {
-    const { $slots, $attrs, tag } = this;
+    const { $slots, $attrs, tag, componentData } = this;
     const defaultSlots = getSlot($slots, "default") || [];
     this.transitionMode = isTransition(defaultSlots);
     const { children, headerOffset, footerOffset } = computeChildrenAndOffsets(
@@ -152,7 +152,7 @@ const draggableComponent = defineComponent({
     );
     this.headerOffset = headerOffset;
     this.footerOffset = footerOffset;
-    const attributes = getComponentAttributes($attrs, this.componentData);
+    const attributes = getComponentAttributes({ $attrs, componentData });
     this.defaultSlots = defaultSlots;
     const realRoot =
       isHtmlTag(tag) || isTransitionName(tag) ? tag : resolveComponent(tag);

tests/unit/core/componentBuilderHelper.spec.js

@@ -0,0 +1,105 @@
+import {
+  getComponentAttributes,
+  getSortableOption,
+} from "@/core/componentBuilderHelper";
+
+describe("getComponentAttributes", () => {
+  test.each([
+    [{ $attrs: {}, componentData: {} }, {}],
+    [
+      {
+        $attrs: {},
+        componentData: {
+          attrs: {
+            value: 89,
+          },
+        },
+      },
+      {
+        value: 89,
+      },
+    ],
+    [
+      {
+        $attrs: {},
+        componentData: {
+          props:{
+            prop1: "value"
+          },
+          attrs: {
+            value: 89,
+          },
+        },
+      },
+      {
+        value: 89,
+        prop1: "value"
+      },
+    ],
+    [
+      {
+        $attrs: {
+          filtered: true,
+          id: 68,
+          "data-application": "app",
+          class: "my-class",
+          other: "will be filtered"
+        },
+        componentData: {
+          attrs: {
+            value: 89,
+          },
+        },
+      },
+      {
+        id: 68,
+        class: "my-class",
+        "data-application": "app",
+        value: 89,
+      },
+    ],
+  ])("for %o returns %o", (value, expected) => {
+    const actual = getComponentAttributes(value);
+    expect(actual).toEqual(expected);
+  });
+});
+
+describe("getSortableOption", () => {
+  test.each([
+    [{ $attrs: {}, callBackBuilder: {} }, { draggable: ">*" }],
+    [{ $attrs: { onStart: 23 }, callBackBuilder: {} }, { draggable: ">*" }],
+    [{ $attrs: { onEnd: 23 }, callBackBuilder: {} }, { draggable: ">*" }],
+    [
+      {
+        $attrs: { id: "id", class: "class", "data-app": "app" },
+        callBackBuilder: {},
+      },
+      { draggable: ">*" },
+    ],
+    [
+      {
+        $attrs: { value: "43" },
+        callBackBuilder: {},
+      },
+      { value: "43", draggable: ">*" },
+    ],
+    [
+      {
+        $attrs: {
+          value: "43",
+          "ghost-class": "phantom",
+          draggable: ".draggable",
+        },
+        callBackBuilder: {},
+      },
+      {
+        value: "43",
+        ghostClass: "phantom",
+        draggable: ".draggable",
+      },
+    ],
+  ])("for %o returns %o", (value, expected) => {
+    const actual = getSortableOption(value);
+    expect(actual).toEqual(expected);
+  });
+});