adding some tests to enhance shadow support

vpusher · Feb 13, 2017 · da3f8bd · da3f8bd
1 parent e610cd6
commit da3f8bd
Show file tree

Hide file tree

Showing 8 changed files with 214 additions and 151 deletions.
diff --git a/README.md b/README.md
@@ -87,6 +87,7 @@ See documentation to know the options and structure of the `data` attribute.
 
 ## History
 
+* **1.0.2:** full shadow dom support.
 * **1.0.1:** ability to select a node clicking the icon.
 * **1.0.0:** initial release.
 

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "paper-tree",
   "main": "paper-tree.html",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A custom element displaying a browsable tree.",
   "keywords": [
     "tree",
@@ -16,12 +16,12 @@
     "Florian Maffini <[email protected]>"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.4.0",
+    "polymer": "Polymer/polymer#^1.7.0",
     "paper-menu": "PolymerElements/paper-menu#^1.2.2",
     "paper-menu-button": "PolymerElements/paper-menu-button#^1.5.2",
-    "paper-icon-button": "PolymerElements/paper-icon-button#^1.1.3",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^1.1.4",
     "paper-item": "PolymerElements/paper-item#^1.2.1",
-    "iron-icons": "PolymerElements/iron-icons#^1.1.3",
+    "iron-icons": "PolymerElements/iron-icons#^1.2.0",
     "iron-icon": "PolymerElements/iron-icon#^1.0.12"
   },
   "devDependencies": {

diff --git a/paper-tree-node.html b/paper-tree-node.html
@@ -22,7 +22,7 @@
 Custom property | Description | Default
 ----------------|-------------|----------
 `--paper-tree-selected-background-color`      | Highlight color for selected node         | `rgba(200, 200, 200, 0.5)`
-`--paper-tree-selected--color`                | Text and icon color for selected node     | `rgb(0, 0, 0)`
+`--paper-tree-selected-color`                | Text and icon color for selected node     | `inherit`
 
 @demo
 -->
@@ -33,12 +33,12 @@
 
     <style>
 
-        :host.selected > .node-container > .node-row {
+        :host(.selected) > .node-container > .node-row {
             background-color: var(--paper-tree-selected-background-color, rgba(200, 200, 200, 0.5));
-            color: var(--paper-tree-selected-color, rgb(0, 0, 0));
+            color: var(--paper-tree-selected-color, inherit);
         }
 
-        :host.selected > .node-container > .node-row > #actions {
+        :host(.selected) > .node-container > .node-row > #actions {
             display: inline-block;
         }
 
@@ -206,6 +206,13 @@
             this.fire("select", this);
         },
 
+        /**
+         * Returns the parent node. Returns `null` if root.
+         */
+        getParent: function () {
+            return this.domHost.tagName === 'WOOD-TREE-NODE' ? this.domHost : null;
+        },
+
         /**
          * Display/Hide the children nodes.
          */

diff --git a/paper-tree.html b/paper-tree.html
@@ -101,8 +101,14 @@
             if(this.selected) {
                 this.toggleClass("selected", false, this.selected);
             }
-            this.selected = e.target;
-            this.toggleClass("selected", true, this.selected);
+
+            // Only selects `<paper-tree-node>`.
+            if (e.detail && e.detail.tagName === 'PAPER-TREE-NODE') {
+                this.selected = e.detail;
+                this.toggleClass("selected", true, this.selected);
+            } else {
+                this.selected = null;
+            }
         }
 
     });

diff --git a/test/basic-test.html b/test/basic-test.html
diff --git a/test/index.html b/test/index.html
@@ -12,7 +12,10 @@
     <script>
       // Load and run all tests (.html, .js):
       WCT.loadSuites([
-        'basic-test.html',
+        'paper-tree.test.html?dom=shady',
+        'paper-tree.test.html?dom=shadow',
+        'paper-tree-node.test.html?dom=shady',
+        'paper-tree-node.test.html?dom=shadow'
       ]);
     </script>
   </body>

diff --git a/test/paper-tree-node.test.html b/test/paper-tree-node.test.html
@@ -0,0 +1,89 @@
+<!doctype html>
+
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+
+    <!-- Import the element to test -->
+    <link rel="import" href="../paper-tree-node.html">
+</head>
+<body>
+
+<!-- You can use the document as a place to set up your fixtures. -->
+<paper-tree-node></paper-tree-node>
+
+<script>
+var node = document.querySelector('paper-tree-node');
+
+suite('<paper-tree-node>', function() {
+
+    test('defines the default "data" property to `null`', function() {
+        assert.equal(node.data, null);
+    });
+
+    test('properly computes its classes', function() {
+        // Some defaults tests
+        var answer = node._computeClass();
+        assert.equal(answer, 'node-preicon ');
+
+        answer = node._computeClass({});
+        assert.equal(answer, 'node-preicon ');
+
+        // Ask for expanded with no children
+        answer = node._computeClass({base: {open: true}});
+        assert.equal(answer, 'node-preicon ');
+
+        // Ask for expanded with empty children
+        answer = node._computeClass({base: {open: true, children:[]}});
+        assert.equal(answer, 'node-preicon ');
+
+        // Ask for collapsed with children
+        answer = node._computeClass({base: {open: false, children:[0]}});
+        assert.equal(answer, 'node-preicon collapsed');
+
+        // Ask for expanded with children
+        answer = node._computeClass({base: {open: true, children:[0]}});
+        assert.equal(answer, 'node-preicon expanded');
+    });
+
+    test('properly computes its icon', function() {
+        var answer = node._computeIcon('');
+        assert.equal(answer, 'folder');
+
+        answer = node._computeIcon('folder');
+        assert.equal(answer, 'folder');
+    });
+
+    test('ables to toggle its children', function() {
+        node.data = {
+            children: [],
+            open: false
+        };
+
+        // No children, open state is always false.
+        node.toggleChildren();
+        assert.equal(node.data.open, false);
+
+        // Same thing.
+        node.data.open = true;
+        node.toggleChildren();
+        assert.equal(node.data.open, false);
+
+        // With children, open state is toggled properly.
+        node.data.children = [1];
+        node.toggleChildren();
+        assert.equal(node.data.open, true);
+
+        node.toggleChildren();
+        assert.equal(node.data.open, false);
+    });
+
+});
+</script>
+
+</body>
+</html>