From f7b5478e9fcb4d7999707a11f9fdf1b3837295fc Mon Sep 17 00:00:00 2001
From: Tobias Bosch <tbosch1009@gmail.com>
Date: Tue, 30 Aug 2016 13:44:52 -0700
Subject: [PATCH] feat(benchmarks): add `polymer_leaves` benchmark

---
 modules/benchmarks/e2e_test/tree_perf.ts      | 23 ++++++++---
 modules/benchmarks/e2e_test/tree_spec.ts      | 17 +++++++--
 .../src/tree/polymer_leaves/index.html        | 29 ++++++++++++++
 .../src/tree/polymer_leaves/index.ts          | 38 +++++++++++++++++++
 .../src/tree/polymer_leaves/tree_leaf.html    | 14 +++++++
 5 files changed, 112 insertions(+), 9 deletions(-)
 create mode 100644 modules/benchmarks/src/tree/polymer_leaves/index.html
 create mode 100644 modules/benchmarks/src/tree/polymer_leaves/index.ts
 create mode 100644 modules/benchmarks/src/tree/polymer_leaves/tree_leaf.html

diff --git a/modules/benchmarks/e2e_test/tree_perf.ts b/modules/benchmarks/e2e_test/tree_perf.ts
index 8fd12960a5..154c339368 100644
--- a/modules/benchmarks/e2e_test/tree_perf.ts
+++ b/modules/benchmarks/e2e_test/tree_perf.ts
@@ -12,7 +12,7 @@ describe('tree benchmark', () => {
 
   afterEach(verifyNoBrowserErrors);
 
-  it('should work for the baseline', function(done) {
+  it('should work for the baseline', (done) => {
     runBenchmark({
       id: 'deepTree.baseline',
       url: 'all/benchmarks/src/tree/baseline/index.html',
@@ -25,7 +25,7 @@ describe('tree benchmark', () => {
     }).then(done, done.fail);
   });
 
-  it('should work for ng2', function(done) {
+  it('should work for ng2', (done) => {
     runBenchmark({
       id: 'deepTree.ng2',
       url: 'all/benchmarks/src/tree/ng2/index.html',
@@ -34,10 +34,10 @@ describe('tree benchmark', () => {
         $('#createDom').click();
         $('#destroyDom').click();
       }
-    }).then(done, done.fail)
+    }).then(done, done.fail);
   });
 
-  it('should work for polymer', function(done) {
+  it('should work for polymer binary tree', (done) => {
     runBenchmark({
       id: 'deepTree.polymer',
       url: 'all/benchmarks/src/tree/polymer/index.html',
@@ -47,6 +47,19 @@ describe('tree benchmark', () => {
         $('#createDom').click();
         $('#destroyDom').click();
       }
-    }).then(done, done.fail)
+    }).then(done, done.fail);
+  });
+
+  it('should work for polymer leaves', (done) => {
+    runBenchmark({
+      id: 'deepTree.polymerLeaves',
+      url: 'all/benchmarks/src/tree/polymer_leaves/index.html',
+      ignoreBrowserSynchronization: true,
+      params: [{name: 'depth', value: 9}],
+      work: () => {
+        $('#createDom').click();
+        $('#destroyDom').click();
+      }
+    }).then(done, done.fail);
   });
 });
diff --git a/modules/benchmarks/e2e_test/tree_spec.ts b/modules/benchmarks/e2e_test/tree_spec.ts
index 3b8acf2fbb..fc7a635ffb 100644
--- a/modules/benchmarks/e2e_test/tree_spec.ts
+++ b/modules/benchmarks/e2e_test/tree_spec.ts
@@ -10,11 +10,11 @@ import {openBrowser, verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 
 const useBundles = false;
 
-describe('tree benchmark', function() {
+describe('tree benchmark', () => {
 
   afterEach(verifyNoBrowserErrors);
 
-  it('should work for the baseline', function() {
+  it('should work for the baseline', () => {
     openBrowser({
       url: 'all/benchmarks/src/tree/baseline/index.html',
       ignoreBrowserSynchronization: true,
@@ -23,7 +23,7 @@ describe('tree benchmark', function() {
     expect($('baseline').getText()).toContain('0');
   });
 
-  it('should work for ng2', function() {
+  it('should work for ng2', () => {
     openBrowser({
       url: 'all/benchmarks/src/tree/ng2/index.html',
     });
@@ -31,7 +31,7 @@ describe('tree benchmark', function() {
     expect($('app').getText()).toContain('0');
   });
 
-  it('should work for polymer', function() {
+  it('should work for polymer binary tree', () => {
     openBrowser({
       url: 'all/benchmarks/src/tree/polymer/index.html',
       ignoreBrowserSynchronization: true,
@@ -40,4 +40,13 @@ describe('tree benchmark', function() {
     expect($('#app').getText()).toContain('0');
   });
 
+  it('should work for polymer leaves', () => {
+    openBrowser({
+      url: 'all/benchmarks/src/tree/polymer_leaves/index.html',
+      ignoreBrowserSynchronization: true,
+    });
+    $('#createDom').click();
+    expect($('#app').getText()).toContain('0');
+  });
+
 });
diff --git a/modules/benchmarks/src/tree/polymer_leaves/index.html b/modules/benchmarks/src/tree/polymer_leaves/index.html
new file mode 100644
index 0000000000..b15d3814f8
--- /dev/null
+++ b/modules/benchmarks/src/tree/polymer_leaves/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+<head>
+  <link rel="import" href="tree_leaf.html">
+</head>
+<body>
+
+<h2>Params</h2>
+<form>
+  Depth:
+  <input type="number" name="depth" placeholder="depth" value="9">
+  <br>
+  <button>Apply</button>
+</form>
+
+<h2>Polymer tree benchmark</h2>
+<p>
+<button id="destroyDom">destroyDom</button>
+<button id="createDom">createDom</button>
+</p>
+
+<div>
+<binary-tree id="app"></binary-tree>
+</div>
+
+<script src="../../bootstrap.js"></script>
+
+</body>
+</html>
diff --git a/modules/benchmarks/src/tree/polymer_leaves/index.ts b/modules/benchmarks/src/tree/polymer_leaves/index.ts
new file mode 100644
index 0000000000..d83ce6657d
--- /dev/null
+++ b/modules/benchmarks/src/tree/polymer_leaves/index.ts
@@ -0,0 +1,38 @@
+import {bindAction} from '@angular/platform-browser/testing/benchmark_util';
+
+import {TreeNode, buildTree, emptyTree} from '../app/util';
+
+declare var Polymer: any;
+
+export function main() {
+  const rootEl: any = document.querySelector('binary-tree');
+
+  rootEl.data = emptyTree();
+
+  function destroyDom() {
+    while (rootEl.firstChild) rootEl.removeChild(rootEl.firstChild);
+  }
+
+  function createDom() {
+    const flatTree = flattenTree(buildTree(), []);
+    for (var i = 0; i < flatTree.length; i++) {
+      const el: any = document.createElement('tree-leaf');
+      el.value = flatTree[i];
+      rootEl.appendChild(el);
+    }
+  }
+
+  bindAction('#destroyDom', destroyDom);
+  bindAction('#createDom', createDom);
+}
+
+function flattenTree(node: TreeNode, target: string[]): string[] {
+  target.push(node.value);
+  if (node.left) {
+    flattenTree(node.left, target);
+  }
+  if (node.right) {
+    flattenTree(node.right, target);
+  }
+  return target;
+}
diff --git a/modules/benchmarks/src/tree/polymer_leaves/tree_leaf.html b/modules/benchmarks/src/tree/polymer_leaves/tree_leaf.html
new file mode 100644
index 0000000000..f08ed3632e
--- /dev/null
+++ b/modules/benchmarks/src/tree/polymer_leaves/tree_leaf.html
@@ -0,0 +1,14 @@
+<link rel="import" href="/all/benchmarks/vendor/polymer/polymer.html">
+<dom-module id="tree-leaf">
+  <template>
+    <span>{{value}}</span>
+  </template>
+  <script>
+    Polymer({
+      is: 'tree-leaf',
+      properties: {
+        value: ''
+      }
+    });
+  </script>
+</dom-module>