Add testing

Author: geekhybrid

package-lock.json

@@ -35,7 +35,9 @@
     "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format umd",
     "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
     "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife",
-    "postbuild": "rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"
+    "postbuild": "rimraf ./dist/types/dev ./dist/types/src/entry.d.ts",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",
@@ -47,12 +49,17 @@
     "@rollup/plugin-commonjs": "^14.0.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-replace": "^2.4.2",
+    "@types/jest": "^29.5.14",
     "@vue/cli-plugin-babel": "^4.5.13",
     "@vue/cli-plugin-typescript": "^4.5.13",
     "@vue/cli-service": "^4.5.13",
     "@vue/compiler-sfc": "^3.0.11",
+    "@vue/test-utils": "^2.4.0",
+    "@vue/vue3-jest": "^29.2.6",
     "@zerollup/ts-transform-paths": "^1.7.18",
     "cross-env": "^7.0.3",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "minimist": "^1.2.5",
     "postcss": "^8.2.10",
     "rimraf": "^3.0.2",
@@ -62,6 +69,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.0",
     "rollup-plugin-vue": "^6.0.0",
+    "ts-jest": "^29.1.2",
     "ttypescript": "^1.5.12",
     "typescript": "4.6.4",
     "vue": "^3.0.5"
@@ -71,5 +79,28 @@
   },
   "engines": {
     "node": ">=12"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "transform": {
+      "^.+\\.vue$": "@vue/vue3-jest",
+      "^.+\\.(ts|tsx)$": "ts-jest"
+    },
+    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
+    "moduleFileExtensions": [
+      "vue",
+      "js",
+      "jsx",
+      "ts",
+      "tsx",
+      "json",
+      "node"
+    ],
+    "moduleNameMapper": {
+      "^@/(.*)$": "<rootDir>/src/$1"
+    },
+    "testEnvironmentOptions": {
+      "customExportConditions": ["node", "node-addons"]
+    }
   }
 }

package.json

@@ -3,36 +3,37 @@
   color: white;
 }
 
-.vue3-tree-vue .tree-item:hover .on-item-hover{
-display: block;
+.vue3-tree-vue .tree-item:hover .on-item-hover {
+  display: block;
 }
 
-.vue3-tree-vue .tree-item .on-item-hover{
-display: none;
+.vue3-tree-vue .tree-item .on-item-hover {
+  display: none;
 }
 
-.vue3-tree-vue .tree-item-node:hover li > .on-item-hover{
-display: block;
+.vue3-tree-vue .tree-item-node:hover li>.on-item-hover {
+  display: block;
 }
 
-.vue3-tree-vue .tree-item-node li > .on-item-hover{
-display: none;
+.vue3-tree-vue .tree-item-node li>.on-item-hover {
+  display: none;
 }
 
 
 .vue3-tree-vue .no-guide .tree-item-node {
-border: none !important;
+  border: none !important;
 }
+
 .vue3-tree-vue .no-guide .tree-item-node::before {
-border: none !important;
+  border: none !important;
 }
 
 .vue3-tree-vue .no-guide .guide-line {
-border: none !important;
+  border: none !important;
 }
 
 .vue3-tree-vue .no-guide .guide-line::before {
-border: none !important;
+  border: none !important;
 }
 
 
@@ -42,7 +43,7 @@ border: none !important;
   * Add a dashed border to the left of all but the last child in a parent node.
   * There will be a gap between the bottom of this tree-item-node and the top of the next sibling.
   */
-  .vue3-tree-vue .node-child  .tree-item-node-parent .tree-item-node:not(:last-child) {
+.vue3-tree-vue .node-child .tree-item-node-parent .tree-item-node:not(:last-child) {
   position: relative;
   border-left: 1px dashed rgb(192, 192, 192);
   border-radius: 0;
@@ -53,31 +54,38 @@ border: none !important;
   * use the ::before pseudo-element to create a dashed line that extends down to the next sibling.
   * This will be applied to all but the last child in a parent node, and fill in the gap mentioned above.
   */
-  .vue3-tree-vue .node-child  .tree-item-node-parent .tree-item-node:not(:last-child)::before {
+.vue3-tree-vue .node-child .tree-item-node-parent .tree-item-node:not(:last-child)::before {
   content: "";
   position: absolute;
-  top: 100%; /* Extend below the actual element */
-  left: -1px; /* Match the border-left width */
-  height: 1em; /* Adjust the desired height */
+  top: 100%;
+  /* Extend below the actual element */
+  left: -1px;
+  /* Match the border-left width */
+  height: 1em;
+  /* Adjust the desired height */
   border-left: 1px dashed rgb(192, 192, 192);
 }
 
 
-.vue3-tree-vue .tree-item-node:only-child  .tree-view-item{
-  position: relative; /* Needed to position the ::before pseudo-element */
+.vue3-tree-vue .tree-item-node:only-child .tree-view-item {
+  position: relative;
+  /* Needed to position the ::before pseudo-element */
 }
 
 /**
 * Create Vertical Guideline for only-children
 * Since we rely on the previous sibling to fill in the gap by extending down, 
 * only-child elements will need to extend up to fill in the gap.
 */
-.vue3-tree-vue .node-child  .tree-item-node-parent .tree-item-node:only-child >  .tree-view-item >  .guide-line::before {
+.vue3-tree-vue .node-child .tree-item-node-parent .tree-item-node:only-child>.tree-view-item>.guide-line::before {
   content: "";
   position: absolute;
-  bottom: 50%; /* Extend above the actual element */
-  left: -1px; /* Match the border-left width */
-  height: 1em; /* Extend 20px above the element */
+  bottom: 50%;
+  /* Extend above the actual element */
+  left: -1px;
+  /* Match the border-left width */
+  height: 1em;
+  /* Extend 20px above the element */
   border-left: 1px dashed rgb(192, 192, 192);
 }
 
@@ -174,7 +182,7 @@ border: none !important;
   box-sizing: border-box;
   position: relative;
   display: block;
-  transform: scale(var(--ggs,1));
+  transform: scale(var(--ggs, 1));
   width: 22px;
   height: 22px;
   border: 2px solid transparent;

src/style.css

@@ -31,37 +31,49 @@ export default defineComponent({
         const checkbox = ref<HTMLInputElement>();
         const parent = computed<TreeViewItem>(() => attrs.parent as TreeViewItem);
         const treeState = inject<TreeState>(_TREE_STATE_PROVIDER_INJECT_KEY)!;
-        const setCheckboxState = () => checkbox.value!.checked = props.item.checked!;
+        
+        const setCheckboxState = () => {
+            if (checkbox.value && props.item.checked !== undefined) {
+                checkbox.value.checked = props.item.checked;
+            }
+        };
 
         onMounted(() => {
             treeState.trackNode(props.item, parent.value);
             if (props.item.checked) {
-              setCheckboxState();
-              updateParentCheckState(props.item!, treeState);
+              nextTick(() => {
+                setCheckboxState();
+                updateParentCheckState(props.item!, treeState);
+              });
             }
-            else
-            {
-              props.item.checked = parent.value?.checked;
+            else if (parent.value?.checked !== undefined) {
+              props.item.checked = parent.value.checked;
             }
         });
 
         const updateCheckState = () =>  {
-          props.item.checked = checkbox.value?.checked;
-          props.item.indeterminate = false;
-
-          updateParentCheckState(props.item!, treeState);
-          updateChildrenCheckState(props.item!, treeState);
-          treeState.emitItemCheckedChange();
+          if (checkbox.value) {
+            props.item.checked = checkbox.value.checked;
+            props.item.indeterminate = false;
+
+            updateParentCheckState(props.item!, treeState);
+            updateChildrenCheckState(props.item!, treeState);
+            treeState.emitItemCheckedChange();
+          }
         };
 
         watch(
             () => props.item.indeterminate, 
-            () => checkbox.value!.indeterminate = props.item.indeterminate
+            () => {
+                if (checkbox.value && props.item.indeterminate !== undefined) {
+                    checkbox.value.indeterminate = props.item.indeterminate;
+                }
+            }
         );
 
         watch(
           () => props.item.checked, 
-          () => setCheckboxState()
+          () => nextTick(setCheckboxState)
         );
 
         watch(
@@ -74,7 +86,6 @@ export default defineComponent({
           () => props.item.children?.forEach(child => treeState?.trackNode(child, props.item))
         )
 
-
         const isRenaming = ref(false);
         const renameBox = ref<HTMLInputElement>();
 
@@ -99,23 +110,27 @@ export default defineComponent({
             /// expanded/collapsed events.
 
             if (shouldSet) {
-              props.item.expanded = !props.item.expanded;
-              if (props.item.expanded)
-                treeState.emitItemExpanded(props.item);
-              else
-                treeState.emitItemCollapsed(props.item);
+                props.item.expanded = !props.item.expanded;
+            }
+
+            if (props.item.expanded) {
+                treeState?.emitItemExpanded(props.item);
+            }
+            else {
+                treeState?.emitItemCollapsed(props.item);
             }
         }
 
         return {
-            toggleExpand,
+            checkbox,
+            parent,
             treeState,
-            updateCheckState,
             isRenaming,
+            renameBox,
+            updateCheckState,
             beginRenaming,
             finishRenaming,
-            parent,
-            checkbox
+            toggleExpand
         }
     }
 })

src/tree-item.ts

@@ -2,7 +2,7 @@
   <div class="d-flex align-items-center" @contextmenu.prevent="$emit('onContextMenu', { item, event: $event })">
     <div class="guide-line" v-if="parent != null && !hideGuideLines"></div>
 
-    <div @click="toggleExpand()" v-show="lazyLoad || item.children && item.children.length > 0">
+    <div @click="toggleExpand()" v-if="lazyLoad || (item.children && item.children.length > 0)">
       <slot name="expander" v-bind="item">
         <span class="chevron-right" :class="{'rotate-90' : item.expanded }"></span>
       </slot>