docs/samples fixes, some tests

Author: vladitasev

packages/main/src/Tree.hbs

@@ -15,13 +15,13 @@
 		<slot name="header" slot="header"></slot>
 		{{#each _listItems}}
 			<ui5-li-tree
+				_id="{{this.treeItem._id}}"
 				type="Active"
 				level="{{this.level}}"
 				icon="{{this.treeItem.icon}}"
 				.treeItem="{{this.treeItem}}"
 				.expanded="{{this.treeItem.expanded}}"
 				.selected="{{this.treeItem.selected}}"
-				._id="{{this.treeItem._id}}"
 				.showToggleButton="{{this.treeItem.requiresToggleButton}}"
 				@ui5-toggle="{{../_onListItemToggle}}"
 				@ui5-stepIn="{{../_onListItemStepIn}}"

packages/main/src/Tree.js

@@ -211,6 +211,7 @@ const metadata = {
  * @tagname ui5-tree
  * @appenddocs TreeItem
  * @public
+ * @since 1.0.0-rc.8
  */
 class Tree extends UI5Element {
 	static get metadata() {

packages/main/src/TreeItem.js

@@ -103,6 +103,7 @@ const metadata = {
  * @extends UI5Element
  * @tagname ui5-tree-item
  * @public
+ * @since 1.0.0-rc.8
  */
 class TreeItem extends UI5Element {
 	static get metadata() {

packages/main/src/TreeListItem.js

@@ -131,6 +131,7 @@ const metadata = {
  * @extends ListItem
  * @tagname ui5-li-tree
  * @public
+ * @since 1.0.0-rc.8
  */
 class TreeListItem extends ListItem {
 	static get render() {

packages/main/test/pages/Tree.html

@@ -125,49 +125,49 @@
 
 		document.getElementById("modeSelect").addEventListener("change", function(event) {
 			var newMode = event.detail.selectedOption.textContent;
-			const tree = document.getElementById("tree");
+			var tree = document.getElementById("tree");
 			tree.mode = newMode;
 		});
 
 		document.getElementById("expandAll").addEventListener("click", function(event) {
 			var trees = Array.prototype.slice.call(document.getElementsByTagName("ui5-tree"));
-			const tree = document.getElementById("tree");
+			var tree = document.getElementById("tree");
 			tree.walk(function(node) {
 				node.expanded = true;
 			});
 		});
 
 		document.getElementById("collapseAll").addEventListener("click", function(event) {
-			const tree = document.getElementById("tree");
+			var tree = document.getElementById("tree");
 			tree.walk(function(node) {
 				node.expanded = false;
 			});
 		});
 
 		document.getElementById("expandLevel1").addEventListener("click", function(event) {
-			const tree = document.getElementById("tree");
+			var tree = document.getElementById("tree");
 			tree.walk(function(node, level) {
 				node.expanded = (level === 1);
 			});
 		});
 
 		document.getElementById("expandLevel2").addEventListener("click", function(event) {
-			const tree = document.getElementById("tree");
+			var tree = document.getElementById("tree");
 			tree.walk(function(node, level) {
 				node.expanded = (level <= 2);
 			});
 		});
 
 		var dynamicTree = document.getElementById("treeDynamic");
 		dynamicTree.addEventListener("itemToggle", function(event) {
-			const item = event.detail.item; // get the node that is toggled
+			var item = event.detail.item; // get the node that is toggled
 
 			// Only for the dynamic node, only when it's empty
 			if (item.id === "dynamicNode" && item.children.length === 0) {
 				dynamicTree.busy = true;
 				event.preventDefault(); // do not let the toggle button switch yet
 				setTimeout(function() {
-					const newItem = document.createElement("ui5-tree-item"); // Fetching from db....
+					var newItem = document.createElement("ui5-tree-item"); // Fetching from db....
 					newItem.text = "Node fetched from DB after 2 sec";
 					item.appendChild(newItem);
 					item.toggle(); // now manually switch

packages/main/test/samples/Tree.sample.html

@@ -1,5 +1,8 @@
-<header>
-	<h2 class="control-header">Tree</h2>
+<header class="component-heading">
+    <h2 class="control-header">Tree</h2>
+    <div class="component-heading-since">
+        <span><!--since_tag_marker--></span>
+    </div>
 </header>
 
 <div class="component-package">@ui5/webcomponents</div>
@@ -146,14 +149,14 @@ <h3>Tree with dynamic content</h3>
 <script>
 	var dynamicTree = document.getElementById("treeDynamic");
 	dynamicTree.addEventListener("itemToggle", function(event) {
-		const item = event.detail.item; // get the node that is toggled
+		var item = event.detail.item; // get the node that is toggled
 
 		// Only for the dynamic node, and only when it's empty
 		if (item.id === "dynamicNode" && item.children.length === 0) {
 			dynamicTree.busy = true; // block the tree from the user
 			event.preventDefault(); // do not let the toggle button switch yet
 			setTimeout(function() {
-				const newItem = document.createElement("ui5-tree-item"); // Fetching from db....
+				var newItem = document.createElement("ui5-tree-item"); // Fetching from db....
 				newItem.text = "Node fetched from DB after 2 sec";
 				item.appendChild(newItem); // add the newly fetched node to the tree
 				item.toggle(); // now manually switch the toggle button
@@ -167,14 +170,14 @@ <h3>Tree with dynamic content</h3>
     <script>
 		var dynamicTree = document.getElementById("treeDynamic");
 		dynamicTree.addEventListener("itemToggle", function(event) {
-			const item = event.detail.item; // get the node that is toggled
+			var item = event.detail.item; // get the node that is toggled
 
 			// Only for the dynamic node, and only when it's empty
 			if (item.id === "dynamicNode" && item.children.length === 0) {
 				dynamicTree.busy = true; // block the tree from the user
 				event.preventDefault(); // do not let the toggle button switch yet
 				setTimeout(function() {
-					const newItem = document.createElement("ui5-tree-item"); // Fetching from db....
+					var newItem = document.createElement("ui5-tree-item"); // Fetching from db....
 					newItem.text = "Node fetched from DB after 2 sec";
 					item.appendChild(newItem); // add the newly fetched node to the tree
 					item.toggle(); // now manually switch the toggle button

packages/main/test/specs/Tree.spec.js

@@ -5,7 +5,6 @@ describe("Tree general interaction", () => {
 
 	it("Tree is rendered", () => {
 		const treeRoot = browser.$("#tree").shadow$(".ui5-tree-root");
-
 		assert.ok(treeRoot.isExisting(), "Tree is rendered.");
 	});
 
@@ -27,6 +26,35 @@ describe("Tree general interaction", () => {
 		toggleButton.click();
 		const listItemsAfter = tree.shadow$$("ui5-li-tree").length;
 		assert.ok(listItemsAfter > listItemsBefore, "After expanding a node, there are more items in the list");
+	})
+
+});
+
+describe("Tree proxies properties to list", () => {
+	browser.url("http://localhost:8080/test-resources/pages/Tree.html");
+
+	it("Mode works", () => {
+		const tree = browser.$("#tree");
+		const list = tree.shadow$("ui5-list");
+
+		const modes = ["None", "SingleSelect", "SingleSelectBegin", "SingleSelectEnd", "MultiSelect", "Delete"];
+		modes.forEach(mode => {
+			tree.setAttribute("mode", mode);
+			assert.ok(list.getAttribute("mode") === mode, "Mode applied");
+		});
 	});
 
+	it("headerText, footerText, noDataText work", () => {
+		const tree = browser.$("#tree");
+		const list = tree.shadow$("ui5-list");
+
+		tree.setAttribute("header-text", "header text");
+		tree.setAttribute("footer-text", "footer text");
+		tree.setAttribute("no-data-text", "no data text");
+
+		assert.ok(list.getAttribute("header-text") === "header text", "header text applied");
+		assert.ok(list.getAttribute("footer-text") === "footer text", "footer text applied");
+		assert.ok(list.getAttribute("no-data-text") === "no data text", "no data text applied");
+	})
+
 });