feat(benchmarks): add `detectChanges` test for ng2 tree benchmark

modules/benchmarks/e2e_test/tree_perf.ts

@@ -132,13 +132,25 @@ describe('tree benchmark perf', () => {
         }).then(done, done.fail);
       });
     });
+
+    it('should run ng2 changedetection', (done) => {
+      runTreeBenchmark({
+        id: `deepTree.ng2.changedetection`,
+        url: 'all/benchmarks/src/tree/ng2/index.html',
+        work: () => $('#detectChanges').click(),
+        setup: () => $('#createDom').click(),
+      }).then(done, done.fail);
+    });
+
   });
 
   function runTreeBenchmark(config: {
     id: string,
     url: string, ignoreBrowserSynchronization?: boolean,
     work: () => any,
-    prepare: () => any, extraParams?: {name: string, value: any}[]
+    prepare?: () => any,
+    extraParams?: {name: string, value: any}[],
+    setup?: () => any
   }) {
     let params = [{name: 'depth', value: 11}];
     if (config.extraParams) {
@@ -150,7 +162,8 @@ describe('tree benchmark perf', () => {
       ignoreBrowserSynchronization: config.ignoreBrowserSynchronization,
       params: params,
       work: config.work,
-      prepare: config.prepare
+      prepare: config.prepare,
+      setup: config.setup
     });
   }
 });

modules/benchmarks/e2e_test/tree_spec.ts

@@ -19,6 +19,13 @@ describe('tree benchmark spec', () => {
     });
   });
 
+  it('should work for ng2 detect changes', () => {
+    let params = [{name: 'depth', value: 4}];
+    openBrowser({url: 'all/benchmarks/src/tree/ng2/index.html'});
+    $('#detectChanges').click();
+    expect($('#numberOfChecks').getText()).toContain('10');
+  });
+
   it('should work for ng2 ftl', () => {
     testTreeBenchmark({
       url: 'all/benchmarks/src/tree/ng2_ftl/index.html',

modules/benchmarks/src/tree/ng2/index.html

@@ -14,10 +14,15 @@
   <p>
     <button id="destroyDom">destroyDom</button>
     <button id="createDom">createDom</button>
+    <button id="detectChanges">detectChanges</button>
     <button id="updateDomProfile">profile updateDom</button>
     <button id="createDomProfile">profile createDom</button>
+    <button id="detectChangesProfile">profile detectChanges</button>
   </p>
 
+  <div>
+    Change detection runs:<span id="numberOfChecks"></span>
+  </div>
   <div>
     <tree id="root">Loading...</tree>
   </div>

modules/benchmarks/src/tree/ng2/init.ts

@@ -16,6 +16,7 @@ import {AppModule, TreeComponent} from './tree';
 export function init(moduleRef: NgModuleRef<AppModule>) {
   let tree: TreeComponent;
   let appRef: ApplicationRef;
+  let detectChangesRuns = 0;
 
   function destroyDom() {
     tree.data = emptyTree;
@@ -27,14 +28,26 @@ export function init(moduleRef: NgModuleRef<AppModule>) {
     appRef.tick();
   }
 
+  function detectChanges() {
+    for (var i = 0; i < 10; i++) {
+      appRef.tick();
+    }
+    detectChangesRuns += 10;
+    numberOfChecksEl.textContent = `${detectChangesRuns}`;
+  }
+
   function noop() {}
 
   const injector = moduleRef.injector;
   appRef = injector.get(ApplicationRef);
+  const numberOfChecksEl = document.getElementById('numberOfChecks');
 
   tree = appRef.components[0].instance;
+
   bindAction('#destroyDom', destroyDom);
   bindAction('#createDom', createDom);
+  bindAction('#detectChanges', detectChanges);
+  bindAction('#detectChangesProfile', profile(detectChanges, noop, 'detectChanges'));
   bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
   bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
 }

modules/e2e_util/perf_util.ts

@@ -35,9 +35,12 @@ export function runBenchmark(config: {
   microMetrics?: {[key: string]: string},
   work?: () => void,
   prepare?: () => void,
+  setup?: () => void
 }): Promise<any> {
   openBrowser(config);
-
+  if (config.setup) {
+    config.setup();
+  }
   const description: {[key: string]: any} = {'bundles': cmdArgs.bundles};
   config.params.forEach((param) => { description[param.name] = param.value; });
   return runner.sample({