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 <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
@@ -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>