Merge pull request #97 from grapoza/fix-function-prop-defaults

grapoza · web-flow · commit 1adb9f490171 · 2019-08-31T21:45:03.000-04:00
Fixes assigning function props from defaults
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "description": "Yet another Vue treeview component.",
   "author": "Gregg Rapoza <grapoza@gmail.com>",
   "license": "MIT",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "browser": "index.js",
   "repository": {
     "url": "https://github.com/grapoza/vue-tree",
diff --git a/src/components/TreeViewNode.vue b/src/components/TreeViewNode.vue
@@ -361,11 +361,16 @@
           Object.assign(target, sourceCopy);
 
           // Find object properties to deep assign them
+          // and find function properties and assign if missing in target
           for (const propName of Object.keys(source)) {
             const propValue = source[propName];
+
             if (this.$_treeViewNode_isProbablyObject(propValue)) {
               this.$_treeViewNode_assignDefaultProps(propValue, target[propName]);
             }
+            else if (typeof propValue === 'function' && !target[propName]) {
+              target[propName] = propValue;
+            }
           }
         }
       },
diff --git a/tests/local/addRemove.html b/tests/local/addRemove.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Add/Delete Usage</title>
+    <script src="https://unpkg.com/vue"></script>
+    <script src="../../dist/vue-tree.umd.js"></script>
+    <link rel="stylesheet" href="demo.css">
+    <link rel="stylesheet" href="../../dist/vue-tree.css">
+  </head>
+  <body>
+    <div class="container">
+      <h1>Basic Treeview Demo</h1>
+      <div id="app">
+          <tree id="customtree" :initial-model="model" :model-defaults="modelDefaults" ref="tree"></tree>
+      </div>
+    </div>
+
+    <script type='module'>
+        import arModel from './addRemove.js';
+
+        new Vue({
+          components: {
+            tree: window['vue-tree']
+          },
+          data() {
+            return {
+                childCounter: 0,
+                model: arModel,
+                modelDefaults: {
+                    addChildCallback: this.addChildCallback
+                }
+            };
+          },
+          methods: {
+            addChildCallback (parentModel) {
+              this.childCounter++;
+              return Promise.resolve({ id: `child-node${this.childCounter}`, label: `Added Child ${this.childCounter}`, deletable: true });
+            }
+          }
+        }).$mount('#app');
+    </script>
+  </body>
+</html>
diff --git a/tests/local/addRemove.js b/tests/local/addRemove.js
@@ -0,0 +1,6 @@
+export default [
+  {
+    id: 'rootNode',
+    label: 'Root Node'
+  }
+];
diff --git a/tests/local/index.html b/tests/local/index.html
@@ -13,6 +13,7 @@ <h1>Test Pages index</h1>
             <li><a href='./basic.html'>Basic Checkboxes</a></li>
             <li><a href='./radioBasic.html'>Basic Radiobuttons</a></li>
             <li><a href='./slots.html'>Slotting</a></li>
+            <li><a href='./addRemove.html'>Add/Remove Nodes</a></li>
         </ul>
     </div>
 </body>
diff --git a/tests/unit/TreeViewNode.spec.js b/tests/unit/TreeViewNode.spec.js
@@ -199,7 +199,7 @@ describe('TreeViewNode.vue', () => {
     });
   });
 
-  describe('when there is an addChildCallback method', () => {
+  describe('when there is an addChildCallback method in the model', () => {
 
     let addChildButton = null;
 
@@ -226,6 +226,33 @@ describe('TreeViewNode.vue', () => {
     });
   });
 
+  describe('when there is an addChildCallback method in the model defaults', () => {
+
+    let addChildButton = null;
+
+    beforeEach(() => {
+      let radioState = {};
+      let addChildCallback = () => {
+        return Promise.resolve(null);
+      };
+
+      wrapper = createWrapper({
+        ariaKeyMap: {},
+        initialModel: generateNodes(['esa'], radioState)[0],
+        modelDefaults: { addChildCallback },
+        depth: 0,
+        treeId: 'tree',
+        radioGroupValues: radioState
+      });
+
+      addChildButton = wrapper.find('#' + wrapper.vm.nodeId + '-add-child');
+    });
+
+    it('should include an add button', async () => {
+      expect(addChildButton.exists()).to.be.true;
+    });
+  });
+
   describe('when a node\'s model is disabled', () => {
 
     beforeEach(() => {

Original file line number	Diff line number	Diff line change
`@@ -361,11 +361,16 @@`
`361`	`361`	`Object.assign(target, sourceCopy);`
`362`	`362`
`363`	`363`	`// Find object properties to deep assign them`
	`364`	`+ // and find function properties and assign if missing in target`
`364`	`365`	`for (const propName of Object.keys(source)) {`
`365`	`366`	`const propValue = source[propName];`
	`367`	`+`
`366`	`368`	`if (this.$_treeViewNode_isProbablyObject(propValue)) {`
`367`	`369`	`this.$_treeViewNode_assignDefaultProps(propValue, target[propName]);`
`368`	`370`	`}`
	`371`	`+ else if (typeof propValue === 'function' && !target[propName]) {`
	`372`	`+ target[propName] = propValue;`
	`373`	`+ }`
`369`	`374`	`}`
`370`	`375`	`}`
`371`	`376`	`},`