From da3f8bd6c3506a08b9b7ee6b79d8b7f193eee82c Mon Sep 17 00:00:00 2001
From: Florian Maffini <florian.maffini@free.fr>
Date: Mon, 13 Feb 2017 14:19:16 +0100
Subject: [PATCH] adding some tests to enhance shadow support

---
 README.md                      |   1 +
 bower.json                     |   8 +-
 paper-tree-node.html           |  15 +++-
 paper-tree.html                |  10 ++-
 test/basic-test.html           | 140 ---------------------------------
 test/index.html                |   5 +-
 test/paper-tree-node.test.html |  89 +++++++++++++++++++++
 test/paper-tree.test.html      |  97 +++++++++++++++++++++++
 8 files changed, 214 insertions(+), 151 deletions(-)
 delete mode 100755 test/basic-test.html
 create mode 100644 test/paper-tree-node.test.html
 create mode 100644 test/paper-tree.test.html

diff --git a/README.md b/README.md
index f1a2a50..e78121e 100755
--- 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
index a99a0f0..12bece3 100755
--- 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 <florian.maffini@free.fr>"
   ],
   "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
index 8b51286..e619117 100755
--- 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
index b3229a0..bc8c131 100755
--- 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
deleted file mode 100755
index df02c3b..0000000
--- a/test/basic-test.html
+++ /dev/null
@@ -1,140 +0,0 @@
-<!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>
-
-    <!-- Step 1: import the element to test -->
-    <link rel="import" href="../paper-tree.html">
-    <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>
-<paper-tree></paper-tree>
-
-<script>
-    var node = document.querySelector('paper-tree-node');
-    var tree = document.querySelector('paper-tree');
-
-    suite('<paper-tree>', function() {
-
-        test('defines the default "data" property', function() {
-            assert.equal(tree.data, null);
-        });
-
-        test('defines the default "selected" property', function() {
-            assert.equal(tree.selected, null);
-        });
-
-        test('_dataChanged', function() {
-            tree.data = { name: 'root' };
-            tree._dataChanged();
-            assert.equal(tree.$.root.data, tree.data);
-        });
-
-        test('_selectNode', function() {
-            var found = false;
-            tree._selectNode({ target: document.body });
-            for(var i=0; i<node.classList.length; i++){
-                if(node.classList[i] === 'selected') {
-                    found = true;
-                    break;
-                }
-            }
-            assert.equal(found, false);
-            assert.equal(document.body.className, 'selected');
-            tree._selectNode({ target: node });
-            assert.equal(document.body.className, '');
-            for(var i=0; i<node.classList.length; i++){
-                if(node.classList[i] === 'selected') {
-                    found = true;
-                    break;
-                }
-            }
-            assert.equal(found, true);
-        });
-
-    });
-
-    suite('<paper-tree-node>', function() {
-
-        test('defines the default "data" property', function() {
-            assert.equal(node.data, null);
-        });
-
-        test('_computeClass', 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('_computeIcon', function() {
-            var answer = node._computeIcon('');
-            assert.equal(answer, 'folder');
-
-            answer = node._computeIcon('folder');
-            assert.equal(answer, 'folder');
-        });
-
-        test('select node', function(done) {
-            tree.addEventListener('select', function(event) {
-                assert.equal(event.detail, tree.$.root);
-                done();
-            });
-            tree.$.root.select();
-        });
-
-        test('toggle 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>
diff --git a/test/index.html b/test/index.html
index d94b81a..39b07b2 100755
--- 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
new file mode 100644
index 0000000..b71b32a
--- /dev/null
+++ 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>
diff --git a/test/paper-tree.test.html b/test/paper-tree.test.html
new file mode 100644
index 0000000..62aff2d
--- /dev/null
+++ b/test/paper-tree.test.html
@@ -0,0 +1,97 @@
+<!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.html">
+</head>
+<body>
+
+<!-- You can use the document as a place to set up your fixtures. -->
+<paper-tree></paper-tree>
+
+<script>
+var tree = document.querySelector('paper-tree');
+
+suite('<paper-tree>', function() {
+
+    test('defines the default "data" property to `null`', function() {
+        assert.equal(tree.data, null);
+    });
+
+    test('defines the default "selected" property to `null`', function() {
+        assert.equal(tree.selected, null);
+    });
+
+    test('detects when data are changed (`_dataChanged` observer)', function() {
+        tree.data = { name: 'root' };
+        assert.equal(tree.$.root.data, tree.data);
+    });
+
+    test('cannot select any other element than a <paper-tree-node>', function() {
+        var found = false;
+
+        tree._selectNode({ detail: document.body });
+
+        for(var i = 0; i < tree.$.root.classList.length; i++){
+            if(tree.$.root.classList[i] === 'selected') {
+                found = true;
+                break;
+            }
+        }
+        assert.notEqual(document.body.className, 'selected');
+        assert.equal(found, false);
+        assert.equal(tree.selected, null);
+    });
+
+    test('can select any <paper-tree-node>', function() {
+        var found = false;
+
+        tree._selectNode({ detail: tree.$.root });
+
+        for(var i = 0; i < tree.$.root.classList.length; i++){
+            if(tree.$.root.classList[i] === 'selected') {
+                found = true;
+                break;
+            }
+        }
+        assert.equal(document.body.className, '');
+        assert.equal(found, true);
+        assert.equal(tree.selected, tree.$.root);
+    });
+
+    test('can unselect by passing a falsy value', function() {
+        var found = false;
+
+        tree._selectNode({ detail: false });
+
+        for(var i = 0; i < tree.$.root.classList.length; i++){
+            if(tree.$.root.classList[i] === 'selected') {
+                found = true;
+                break;
+            }
+        }
+
+        assert.equal(found, false);
+        assert.equal(tree.selected, null);
+    });
+
+    test('listen for selection coming from underneath <paper-tree-node>s', function(done) {
+        tree.addEventListener('select', function(event) {
+            assert.equal(event.detail, tree.$.root);
+            done();
+        });
+        tree.$.root.select();
+    });
+
+});
+</script>
+
+</body>
+</html>