add rendered field to item to solve first aspect of #24

Author: eidng8

README.md

@@ -1,18 +1,12 @@
 # vue-tree
 
+[![Master Build](https://travis-ci.com/eidng8/vue-tree.svg?branch=master)](https://travis-ci.com/eidng8/vue-tree)
+[![Master Coverage](https://coveralls.io/repos/github/eidng8/vue-tree/badge.svg?branch=master)](https://coveralls.io/github/eidng8/vue-tree?branch=master)
+
 A Vue.js tree view component with stable DOM tree. By stable, it means the
 DOM structure will not change once it is rendered.
 
 
-## Master Branch
-[![Build](https://travis-ci.com/eidng8/vue-tree.svg?branch=master)](https://travis-ci.com/eidng8/vue-tree)
-[![Coverage](https://coveralls.io/repos/github/eidng8/vue-tree/badge.svg?branch=master)](https://coveralls.io/github/eidng8/vue-tree?branch=master)
-
-## Dev Branch
-[![Build](https://travis-ci.com/eidng8/vue-tree.svg?branch=dev)](https://travis-ci.com/eidng8/vue-tree)
-[![Coverage](https://coveralls.io/repos/github/eidng8/vue-tree/badge.svg?branch=dev)](https://coveralls.io/github/eidng8/vue-tree?branch=dev)
-
-
 ## Performance Consideration
 
 The DOM structure of this component doesn't change once rendered.

package.json

@@ -1,9 +1,9 @@
 {
   "name": "g8-vue-tree",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "repository": "git@github.com:eidng8/vue-tree.git",
   "bugs": "git@github.com:eidng8/vue-tree/issues",
-  "author": "eidng8 <cheung.jackey@gmail.com>",
+  "author": "eidng8",
   "license": "GPL-3.0",
   "main": "./dist/g8-vue-tree.umd.min.js",
   "typings": "./typings/index.d.ts",
@@ -14,12 +14,17 @@
     "/src/components",
     "/typings"
   ],
+  "keywords": [
+    "typescript",
+    "vue"
+  ],
   "scripts": {
     "build": "vue-cli-service build --target lib --mode production ./src/index.ts",
     "serve": "vue-cli-service serve",
     "start": "npm run serve",
     "test": "npm run test:unit && npm run test:e2e",
     "test:unit": "vue-cli-service test:unit",
+    "test:cover": "npm run test:unit -- --coverage",
     "test:e2e": "vue-cli-service test:e2e --headless",
     "test:e2e:visual": "vue-cli-service test:e2e",
     "lint": "vue-cli-service lint"

src/App.vue

@@ -6,6 +6,7 @@
 
 <template>
   <div id="app">
+    <button @click="populate()">populate tree</button>
     <ul class="g8-tree-view g8-tree__highlight_hover">
       <g8-tree-view
         checker="1"
@@ -25,7 +26,7 @@
 
 <script lang="ts">
 import {Component, Vue} from 'vue-property-decorator';
-import {G8TreeView, G8TreeItem} from './';
+import {G8TreeItem, G8TreeView} from './';
 
 @Component({
   components: {
@@ -35,37 +36,7 @@ import {G8TreeView, G8TreeItem} from './';
 export default class App extends Vue {
   item: G8TreeItem = {
     key: 'root',
-    name: 'root name',
-    tags: [{key: 'root tag', label: 'root label'}],
-    children: [
-      {
-        key: 'item-1',
-        name: 'item 1',
-        tags: [
-          {key: 1, label: 'tag1.1'},
-          {key: 1, label: 'tag1.2', hint: '2nd tag in the 2nd branch'},
-        ],
-      },
-      {
-        key: 'item-2',
-        name: 'item 2',
-        tags: [{key: 2, label: 'tag1.1'}],
-        children: [
-          {
-            key: 'item-2.1',
-            name: 'item 2.1',
-            tags: [
-              {key: '2.1.1', label: 'tag2.1.1'},
-              {key: '2.1.2', label: 'tag2.1.2'},
-            ],
-          },
-          {
-            key: 'item-2.2',
-            name: 'item 2.2',
-          },
-        ],
-      },
-    ],
+    name: 'Click the button above to populate me.',
   };
 
   itemClicked = '';
@@ -75,6 +46,34 @@ export default class App extends Vue {
   tagClicked = '';
 
   tagDblClicked = '';
+
+  populate() {
+    const total = 1000;
+    this.item = {
+      key: 'root',
+      name: 'root name',
+      tags: [{key: 'root tag', label: 'root label'}],
+      children: [],
+    };
+    for (let i = 1; i < total; i++) {
+      const child: G8TreeItem = {
+        key: `key-${i}`,
+        name: `name ${i}`,
+        tags: [{key: `tag-${i}`, label: `tag ${i}`}],
+        children: [],
+      };
+      for (let j = 1; j < total; j++) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        child.children!.push({
+          key: `key-${i}.${j}`,
+          name: `name ${i}.${j}`,
+          tags: [{key: `tag-${i}.${j}`, label: `tag ${i}.${j}`}],
+        });
+      }
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      this.item.children!.push(child);
+    }
+  }
 }
 </script>
 

src/components/G8TreeView.vue

@@ -26,7 +26,7 @@
         >{{ tag.label }}</label>
       </span>
     </div>
-    <ul v-if="hasChild" class="g8-tree__branch">
+    <ul v-if="expanded || item.rendered" class="g8-tree__branch">
       <g8-tree-view v-for="(child, index) in item.children"
                     :key="index"
                     :item="child"
@@ -45,9 +45,7 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
 import {G8StateChangeEvent, G8TreeItem} from './types';
 
-@Component({
-  name: 'g8-tree-view',
-})
+@Component({name: 'g8-tree-view'})
 export default class G8TreeView extends Vue {
   @Prop() item!: G8TreeItem;
 
@@ -67,6 +65,10 @@ export default class G8TreeView extends Vue {
     return this.item.children && this.item.children.length;
   }
 
+  created() {
+    // console.log(`created: ${this.item.name}`);
+  }
+
   setState(state: boolean) {
     this.item.checked = this.checked = state;
     this.$children.forEach(c => (c as G8TreeView).setState(state));
@@ -75,6 +77,7 @@ export default class G8TreeView extends Vue {
 
   clicked() {
     if (this.hasChild) {
+      this.item.rendered = true;
       this.expanded = !this.expanded;
     }
     this.$emit('click', this.item.key);

src/components/types.ts

@@ -17,6 +17,8 @@ export interface G8TreeItem {
    */
   ints?: boolean;
 
+  rendered?: boolean;
+
   tags?: G8TreeItemTag[];
 
   children?: G8TreeItem[];

tests/e2e/specs/test.js

@@ -18,8 +18,17 @@ module.exports = {
       .assert // the tree view is rendered
       .elementPresent('.g8-tree-view')
       .assert // the root node's text is correct
-      .containsText('.g8-tree__node_label_text', 'root name')
+      .containsText(
+        '.g8-tree__node_label_text',
+        'Click the button above to populate me.',
+      )
 
+      .click('button')
+      .assert // root node's text has changed
+      .containsText(
+        '.g8-tree__node_label_text',
+        'root name',
+      )
       .click(rootLabel)
       .assert // clicking the toggle expands the root
       .cssClassPresent(root, 'g8-tree__node_expended')
@@ -30,7 +39,7 @@ module.exports = {
       .assert // clicking the toggle expands the first branch
       .elementPresent('.g8-tree__branch .g8-tree__node_expended')
       .assert // click event is fired
-      .value('#itemClicked', 'item-2')
+      .value('#itemClicked', 'key-2')
       .moveToElement(rootLabel, 1, 1)
       .doubleClick()
       .assert // double clicking won't collapse the node
@@ -40,18 +49,18 @@ module.exports = {
 
       .click(`${leaf} .g8-tree__node_label`)
       .assert // click event is fired
-      .value('#itemClicked', 'item-2.1')
+      .value('#itemClicked', 'key-2.1')
       .moveToElement(`${leaf} .g8-tree__node_label`, 1, 1)
       .doubleClick()
       .assert // click event is fired
-      .value('#itemDblClicked', 'item-2.1')
+      .value('#itemDblClicked', 'key-2.1')
       .click(`${leaf} .g8-tree__node_tag:last-child`)
       .assert // click event is fired
-      .value('#tagClicked', 'item-2.1,2.1.2,1')
+      .value('#tagClicked', 'key-2.1,tag-2.1,0')
       .moveToElement(`${leaf} .g8-tree__node_tag`, 1, 1)
       .doubleClick()
       .assert // click event is fired
-      .value('#tagDblClicked', 'item-2.1,2.1.1,0')
+      .value('#tagDblClicked', 'key-2.1,tag-2.1,0')
 
       .click(rootLabel)
       .assert.not // clicking the toggle collapses the node

tests/unit/G8TreeView.spec.ts

@@ -78,34 +78,34 @@ describe('Tree View', () => {
       .toBe('tag2');
   });
 
-  it('renders hierarchy', async () => {
-    expect.assertions(4);
-    const wrapper = mount(G8TreeView, {propsData: tree});
-    expect(wrapper.props('item')).toEqual(tree.item);
-    const labels = wrapper.findAll('.g8-tree__node_label_text');
-    expect(labels.length).toBe(5);
-    expect(labels.at(0).text()).toBe('root name');
-    expect(labels.at(1).text()).toBe('item 1');
-  });
-
-  it('expends/collapses branches on click', async () => {
-    expect.assertions(5);
-    // initially no branch were expanded
+  it('expends/collapses and renders branches on click', async () => {
+    expect.assertions(11);
+    // initially no branch were expanded nor rendered
     const wrapper = mount(G8TreeView, {propsData: tree});
     expect(wrapper.find('.g8-tree__node_expended').exists()).toBeFalsy();
-    expect(wrapper.findAll('.g8-tree__branch').length).toBe(2);
-    // click the first branch to expand it
+    expect(wrapper.findAll('.g8-tree__branch').length).toBe(0);
+    expect(wrapper.findAll('.g8-tree__node_label_text').length).toBe(1);
+    // click the first branch to expand it and render the sub-tree
     wrapper.find('.g8-tree__node_label').trigger('click');
-    await wrapper.vm.$nextTick();
-    expect(wrapper.findAll('.g8-tree__node_expended').length).toBe(1);
-    // click the second branch to expand it
+    await wrapper.vm.$nextTick(() => {
+      expect(wrapper.findAll('.g8-tree__node_expended').length).toBe(1);
+      const labels = wrapper.findAll('.g8-tree__node_label_text');
+      expect(labels.length).toBe(3);
+      expect(labels.at(0).text()).toBe('root name');
+      expect(labels.at(1).text()).toBe('item 1');
+    });
+    // click the second branch to expand it and render the sub-tree
     wrapper.findAll('.g8-tree__branch .g8-tree__node_label').trigger('click');
-    await wrapper.vm.$nextTick();
-    expect(wrapper.findAll('.g8-tree__node_expended').length).toBe(2);
+    await wrapper.vm.$nextTick(() => {
+      expect(wrapper.findAll('.g8-tree__node_expended').length).toBe(2);
+      expect(wrapper.findAll('.g8-tree__node_label_text').length).toBe(5);
+    });
     // click branches to collapse them all
     wrapper.findAll('.g8-tree__node_label').trigger('click');
-    await wrapper.vm.$nextTick();
-    expect(wrapper.find('.g8-tree__node_expended').exists()).toBeFalsy();
+    await wrapper.vm.$nextTick(() => {
+      expect(wrapper.find('.g8-tree__node_expended').exists()).toBeFalsy();
+      expect(wrapper.findAll('.g8-tree__node_label_text').length).toBe(5);
+    });
   });
 
   it('emits click events', async () => {