Merge 7a0aae6 into 3a984b0

README.md

@@ -4,6 +4,8 @@
 
 A Vue tree view component with stable DOM structure. By stable, it means the DOM structure will not change once it is rendered.
 
+[Demo](https://codesandbox.io/s/g8-vue-tree-demo-pwj45?file=/src/App.vue)
+
 ## Performance Consideration
 
 The DOM structure of this component doesn't change once rendered. Comparing to others using `v-if`, which generate sub-nodes while expanded. While working on long list of items, lags will be obvious.

package.json

@@ -65,7 +65,6 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^6.1.2",
-    "geckodriver": "latest",
     "husky": "^4.2.5",
     "prettier": "2.0.4",
     "pretty-data": "^0.40.0",

src/components/G8VueTree.vue

@@ -22,7 +22,7 @@
         @click.stop.prevent="setState(!checked)"
         :class="{
           'g8-tree__checker--checked': checked,
-          'g8-tree__checker--checked--intermediate': intermediate,
+          'g8-tree__checker--intermediate': intermediate,
         }"
       ></span>
       <span class="g8-tree__node__entry__label">

src/components/tree-view.scss

@@ -70,8 +70,9 @@ $g8-tree__bg--highlight--secondary--inverse: lighten(
   }
 }
 
-.g8-tree__checker--checked--intermediate:after {
+.g8-tree__checker--intermediate:after {
   content: '\220E';
+  visibility: visible;
   margin-left: -0.05em;
 }
 

tests/e2e/custom-assertions/checkerIntermediate.js

@@ -56,7 +56,7 @@ exports.assertion = function (selector, msg) {
    * @return {Boolean}
    */
   this.evaluate = function (value) {
-    return /.*\bg8-tree__checker--checked--intermediate\b.*/.test(value);
+    return /.*\bg8-tree__checker--intermediate\b.*/.test(value);
   };
 
   /**

tests/unit/G8TreeView-interactions.spec.ts

@@ -106,7 +106,7 @@ describe('Tree View interactions', () => {
     checkers.at(1).trigger('click');
     await wrapper.vm.$nextTick();
     expect(wrapper.find('.g8-tree__checker').classes()).toContain(
-      'g8-tree__checker--checked--intermediate',
+      'g8-tree__checker--intermediate',
     );
   });
 
@@ -121,7 +121,7 @@ describe('Tree View interactions', () => {
     checkers.at(1).trigger('click');
     await wrapper.vm.$nextTick();
     expect(wrapper.find('.g8-tree__checker').classes()).toContain(
-      'g8-tree__checker--checked--intermediate',
+      'g8-tree__checker--intermediate',
     );
     expect(wrapper.findAll('.g8-tree__checker--checked').length).toBe(2);
   });
@@ -140,26 +140,20 @@ describe('Tree View interactions', () => {
     // check last node = set root & 2nd branch to intermediate
     checkers.at(checkers.length - 1).trigger('click');
     await wrapper.vm.$nextTick();
-    expect(
-      wrapper.findAll('.g8-tree__checker--checked--intermediate').length,
-    ).toBe(2);
+    expect(wrapper.findAll('.g8-tree__checker--intermediate').length).toBe(2);
     // check root node = check all
     checkers.at(0).trigger('click');
     await wrapper.vm.$nextTick();
     expect(wrapper.findAll('.g8-tree__checker--checked').length).toBe(5);
     // uncheck last node = set root & 2nd branch to intermediate
     checkers.at(checkers.length - 1).trigger('click');
     await wrapper.vm.$nextTick();
-    expect(
-      wrapper.findAll('.g8-tree__checker--checked--intermediate').length,
-    ).toBe(2);
+    expect(wrapper.findAll('.g8-tree__checker--intermediate').length).toBe(2);
     expect(wrapper.findAll('.g8-tree__checker--checked').length).toBe(4);
     // uncheck 2nd last node = set root & 2nd branch to intermediate
     checkers.at(checkers.length - 2).trigger('click');
     await wrapper.vm.$nextTick();
-    expect(
-      wrapper.findAll('.g8-tree__checker--checked--intermediate').length,
-    ).toBe(1);
+    expect(wrapper.findAll('.g8-tree__checker--intermediate').length).toBe(1);
     expect(wrapper.findAll('.g8-tree__checker--checked').length).toBe(2);
   });
 });