fix(benchmarks): fix scrolling benchmark; add more tests

modules/benchmarks/e2e_test/naive_infinite_scroll_spec.es6

@@ -2,12 +2,57 @@ var testUtil = require('angular2/e2e_test/test_util');
 
 describe('ng2 naive infinite scroll benchmark', function () {
 
-  var URL = 'benchmarks/src/naive_infinite_scroll/index.html';
+  var URL = 'benchmarks/src/naive_infinite_scroll/index.html?appSize=3';
 
   afterEach(testUtil.verifyNoBrowserErrors);
 
   it('should not throw errors', function() {
     browser.get(URL);
+    var expectedRowCount = 18;
+    var expectedCellsPerRow = 11;
+    var allScrollItems = 'scroll-app /deep/ #testArea /deep/ scroll-item';
+    var cells = `${ allScrollItems } /deep/ .row *`;
+    var stageButtons =
+        `${ allScrollItems } /deep/ .row stage-buttons /deep/ button`;
+
+    var count = function(selector) {
+      return browser.executeScript(
+        `return document.querySelectorAll("${ selector }").length;`
+      );
+    }
+
+    var clickFirstOf = function(selector) {
+      return browser.executeScript(
+        `document.querySelector("${ selector }").click();`
+      );
+    }
+
+    var firstTextOf = function(selector) {
+      return browser.executeScript(
+        `return document.querySelector("${ selector }").innerText;`
+      );
+    }
+
+    // Make sure rows are rendered
+    count(allScrollItems).then(function(c) {
+      expect(c).toBe(expectedRowCount);
+    });
+
+    // Make sure cells are rendered
+    count(cells).then(function(c) {
+      expect(c).toBe(expectedRowCount * expectedCellsPerRow);
+    });
+
+    // Click on first enabled button and verify stage changes
+    firstTextOf(`${ stageButtons }:enabled`).then(function(text) {
+      expect(text).toBe('Pitched');
+      clickFirstOf(`${ stageButtons }:enabled`).then(function() {
+        firstTextOf(`${ stageButtons }:enabled`).then(function(text) {
+          expect(text).toBe('Won');
+        })
+      });
+    })
+
     browser.executeScript(
         'document.querySelector("scroll-app /deep/ #reset-btn").click()');
     browser.executeScript(

modules/benchmarks/src/naive_infinite_scroll/index.js

@@ -4,8 +4,9 @@ import {MapWrapper} from 'angular2/src/facade/collection';
 
 import {Parser, Lexer, ChangeDetector, ChangeDetection}
     from 'angular2/change_detection';
-import {bootstrap, Component, Viewport, Template, ViewContainer, Compiler}
-    from 'angular2/angular2';
+import {
+  bootstrap, Component, Viewport, Template, ViewContainer, Compiler, onChange
+}  from 'angular2/angular2';
 import {reflector} from 'angular2/src/reflection/reflection';
 import {CompilerCache} from 'angular2/src/core/compiler/compiler';
 import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
@@ -166,6 +167,7 @@ export function setupReflectorForAngular() {
     'parameters': [[ViewContainer]],
     'annotations' : [new Viewport({
       selector: '[foreach]',
+      lifecycle: [onChange],
       bind: {
         'in': 'iterable[]'
       }

modules/benchmarks/src/naive_infinite_scroll/scroll_item.js

@@ -65,7 +65,7 @@ export function setupReflectorForScrollItem() {
           FormattedCellComponent
         ],
         inline: `
-          <div [style]="itemStyle">
+          <div class="row" [style]="itemStyle">
               <company-name [company]="offering.company"
                             [cell-width]="companyNameWidth">
               </company-name>