Merge pull request #351 from suusan2go/fix-105

Fix #105 label slot for children nodes not working

jest.config.js

@@ -2,16 +2,16 @@ module.exports = {
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/src/$1",
     "^~/(.*)$": "<rootDir>/src/$1",
-    "^vue$": "vue/dist/vue.common.js"
+    "^vue$": "vue/dist/vue.common.js",
   },
   moduleFileExtensions: ["js", "vue", "json", "ts"],
   transform: {
     "^.+\\.ts$": "ts-jest",
     "^.+\\.js$": "babel-jest",
-    ".*\\.(vue)$": "vue-jest"
+    ".*\\.(vue)$": "vue-jest",
   },
   snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"],
   setupFiles: ["<rootDir>/test/setup.ts"],
   collectCoverage: true,
-  collectCoverageFrom: ["<rootDir>/src/**/*"]
+  collectCoverageFrom: ["<rootDir>/src/**/*"],
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuetify-draggable-treeview",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "draggable v-treeview component",
   "main": "dist/v-draggable-treeview.umd.js",
   "module": "dist/v-draggable-treeview.esm.js",

src/DraggableTreeviewNode.vue

@@ -49,6 +49,9 @@
           <template v-slot:prepend="{ item, open }">
             <slot name="prepend" v-bind="{ item, open }" />
           </template>
+          <template v-slot:label="{ item, open }">
+            <slot name="label" v-bind="{ item, open }"></slot>
+          </template>
           <template v-slot:append="{ item }">
             <slot name="append" v-bind="{ item }" />
           </template>

test/DraggableTreeview.spec.ts

@@ -0,0 +1,85 @@
+import Vue from "vue";
+import Vuetify from "vuetify";
+import { mount } from "@vue/test-utils";
+import DraggableTreeview from "../src/DraggableTreeview.vue";
+
+describe("DraggableTreeview", () => {
+  test("renders correctly", () => {
+    const wrapper = mount(DraggableTreeview, {
+      vuetify: new Vuetify({
+        mocks: {
+          $vuetify: {
+            theme: {
+              isDark: false,
+            },
+          },
+        },
+      }),
+      propsData: {
+        value: [
+          {
+            id: 1,
+            name: "test",
+            children: [
+              {
+                id: 101,
+                name: "test-children",
+                children: [{ id: 201, name: "test-children-children" }],
+              },
+            ],
+          },
+        ],
+      },
+    });
+    expect(wrapper.element).toMatchSnapshot();
+    wrapper.find(".v-treeview-node__root").trigger("click");
+    Vue.nextTick().then(() => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+
+  test("renders correctly with slot", () => {
+    const wrapper = mount(DraggableTreeview, {
+      vuetify: new Vuetify({
+        mocks: {
+          $vuetify: {
+            theme: {
+              isDark: false,
+            },
+          },
+        },
+      }),
+      scopedSlots: {
+        label({ item }: any) {
+          return this.$createElement(
+            "span",
+            {
+              attrs: { class: "primary--text" },
+            },
+            [item.name]
+          );
+        },
+      },
+      propsData: {
+        value: [
+          {
+            id: 1,
+            name: "test",
+            children: [
+              {
+                id: 101,
+                name: "test-children",
+                children: [{ id: 201, name: "test-children-children" }],
+              },
+            ],
+          },
+        ],
+      },
+    });
+    expect(wrapper.element).toMatchSnapshot();
+    wrapper.find(".v-treeview-node__root").trigger("click");
+    Vue.nextTick().then(() => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+});