fix(Treeview): empty children expand icon (#5442)

* fix(v-treeview): expand icon on empty children

changed logic for rendering expand icon to only show when children
actually has items, or load-children prop is used

fixes #5357

* test: added tests

* refactor: added hasChildren boolean

packages/vuetify/src/components/VTreeview/VTreeviewNode.ts

@@ -122,6 +122,9 @@ export default mixins<options>(
       if (this.isIndeterminate) return this.indeterminateIcon
       else if (this.isSelected) return this.onIcon
       else return this.offIcon
+    },
+    hasChildren (): boolean {
+      return !!this.children && (!!this.children.length || !!this.loadChildren)
     }
   },
 
@@ -218,7 +221,7 @@ export default mixins<options>(
       const children = [this.genContent()]
 
       if (this.selectable) children.unshift(this.genCheckbox())
-      if (this.children) children.unshift(this.genToggle())
+      if (this.hasChildren) children.unshift(this.genToggle())
 
       return this.$createElement('div', {
         staticClass: 'v-treeview-node__root',
@@ -283,7 +286,7 @@ export default mixins<options>(
       staticClass: 'v-treeview-node',
       class: {
         [this.activeClass]: this.isActive,
-        'v-treeview-node--leaf': !this.children,
+        'v-treeview-node--leaf': !this.hasChildren,
         'v-treeview-node--click': this.openOnClick,
         'v-treeview-node--selected': this.isSelected
       }

packages/vuetify/test/unit/components/VTreeview/VTreeview.spec.js

@@ -310,4 +310,37 @@ test('VTreeView.ts', ({ mount }) => {
 
     expect('[Vuetify] The prepend and append slots require a slot-scope attribute').toHaveBeenTipped()
   })
+
+  it('should not show expand icon when children is empty', () => {
+    const wrapper = mount(VTreeview, {
+      propsData: {
+        items: [
+          {
+            text: 'root',
+            children: []
+          }
+        ],
+      }
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.find('.v-treeview-node__toggle').length).toBe(0)
+  })
+
+  it('should show expand icon when children is empty and load-children prop used', () => {
+    const wrapper = mount(VTreeview, {
+      propsData: {
+        loadChildren: () => {},
+        items: [
+          {
+            text: 'root',
+            children: []
+          }
+        ],
+      }
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.find('.v-treeview-node__toggle').length).toBe(1)
+  })
 })

packages/vuetify/test/unit/components/VTreeview/__snapshots__/VTreeview.spec.js.snap

@@ -105,6 +105,21 @@ exports[`VTreeView.ts should load children when selecting, but not render 2`] =
 
 `;
 
+exports[`VTreeView.ts should not show expand icon when children is empty 1`] = `
+
+<div class="v-treeview theme--light">
+  <div class="v-treeview-node v-treeview-node--leaf">
+    <div class="v-treeview-node__root">
+      <div class="v-treeview-node__content">
+        <label class="v-treeview-node__label">
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+
+`;
+
 exports[`VTreeView.ts should open all children when using open-all prop 1`] = `
 
 <div class="v-treeview theme--light">
@@ -390,6 +405,26 @@ exports[`VTreeView.ts should select all descendants 1`] = `
 
 `;
 
+exports[`VTreeView.ts should show expand icon when children is empty and load-children prop used 1`] = `
+
+<div class="v-treeview theme--light">
+  <div class="v-treeview-node">
+    <div class="v-treeview-node__root">
+      <i aria-hidden="true"
+         class="v-icon v-treeview-node__toggle v-icon--link material-icons theme--light"
+      >
+        arrow_drop_down
+      </i>
+      <div class="v-treeview-node__content">
+        <label class="v-treeview-node__label">
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+
+`;
+
 exports[`VTreeView.ts should update selection when selected prop changes 1`] = `
 
 <div class="v-treeview theme--light">