feat(build): enforce mobile layout during e2e tests

This is important as we run our benchmarks on
mobile devices as web driver tests fails if buttons
are not visible / overlaid by other content.

Author: tbosch

modules/benchmarks/e2e_test/naive_infinite_scroll_perf.es6

@@ -13,8 +13,8 @@ describe('ng2 naive infinite scroll benchmark', function () {
         url: URL,
         id: 'ng2.naive_infinite_scroll',
         work: function() {
-          element(by.deepCss('#reset-btn')).click();
-          element(by.deepCss('#run-btn')).click();
+          $('#reset-btn').click();
+          $('#run-btn').click();
           browser.wait(() => {
             return $('#done').getText().then(
               function() { return true; },

modules/benchmarks/e2e_test/naive_infinite_scroll_spec.es6

@@ -53,10 +53,8 @@ describe('ng2 naive infinite scroll benchmark', function () {
       });
     })
 
-    browser.executeScript(
-        'document.querySelector("scroll-app /deep/ #reset-btn").click()');
-    browser.executeScript(
-        'document.querySelector("scroll-app /deep/ #run-btn").click()');
+    $("#reset-btn").click();
+    $("#run-btn").click();
     browser.wait(() => {
       return $('#done').getText().then(
         function() { return true; },

modules/benchmarks/src/naive_infinite_scroll/app.js

@@ -23,11 +23,10 @@ export class App {
     for (var i = 0; i < appSize; i++) {
       ListWrapper.push(this.scrollAreas, i);
     }
-    // TODO(tbosch): change to bindAction when it works in pub serve
-    DOM.on(DOM.query('scroll-app /deep/ #run-btn'), 'click', (_) => {
+    bindAction('#run-btn', () => {
       this.runBenchmark();
     });
-    DOM.on(DOM.query('scroll-app /deep/ #reset-btn'), 'click', (_) => {
+    bindAction('#reset-btn', () => {
       this._getScrollDiv().scrollTop = 0;
       var existingMarker = this._locateFinishedMarker();
       if (isPresent(existingMarker)) {
@@ -90,10 +89,6 @@ export function setupReflectorForApp() {
           <div>
             <div style="display: flex">
               <scroll-area id="testArea"></scroll-area>
-              <div style="padding-left: 20px">
-                <button id="run-btn">Run</button>
-                <button id="reset-btn">Reset</button>
-              </div>
             </div>
             <div template="if scrollAreas.length > 0">
               <p>Following tables are only here to add weight to the UI:</p>

modules/benchmarks/src/naive_infinite_scroll/index.html

@@ -9,6 +9,10 @@
     Iteration count: <input type="text" name="iterationCount" value="1"></input><br>
     Scroll increment: <input type="text" name="scrollIncrement" value="1"></input><br>
   </form>
+  <div>
+    <button id="run-btn">Run</button>
+    <button id="reset-btn">Reset</button>
+  </div>
   <scroll-app></scroll-app>
 
   $SCRIPTS$

modules/benchmarks_external/e2e_test/naive_infinite_scroll_perf.es6

@@ -13,8 +13,8 @@ describe('ng-dart1.x naive infinite scroll benchmark', function () {
         url: URL,
         id: 'ng1-dart1.x.naive_infinite_scroll',
         work: function() {
-          element(by.deepCss('#reset-btn')).click();
-          element(by.deepCss('#run-btn')).click();
+          $('#reset-btn').click();
+          $('#run-btn').click();
           var s = 1000;
           if (appSize > 4) {
             s = s + appSize * 100;

modules/benchmarks_external/src/naive_infinite_scroll/app.dart

@@ -11,10 +11,6 @@ import 'package:angular2/src/test_lib/benchmark_util.dart';
     <div>
         <div style="display: flex">
           <scroll-area scroll-top="scrollTop"></scroll-area>
-          <div style="padding-left: 20px">
-            <button id='run-btn'>Run</button>
-            <button id='reset-btn'>Reset</button>
-          </div>
         </div>
         <div ng-if="scrollAreas.length > 0">
           <p>Following tables are only here to add weight to the UI:</p>
@@ -39,10 +35,10 @@ class App implements ShadowRootAware {
 
   @override
   void onShadowRoot(ShadowRoot shadowRoot) {
-    bindAction('scroll-app /deep/ #run-btn', () {
+    bindAction('#run-btn', () {
       runBenchmark();
     });
-    bindAction('scroll-app /deep/ #reset-btn', () {
+    bindAction('#reset-btn', () {
       scrollTop = 0;
     });
   }

modules/benchmarks_external/src/naive_infinite_scroll/index.html

@@ -9,6 +9,10 @@
     Iteration count: <input type="text" name="iterationCount" value="1"></input><br>
     Scroll increment: <input type="text" name="scrollIncrement" value="1"></input><br>
   </form>
+  <div>
+    <button id="run-btn">Run</button>
+    <button id="reset-btn">Reset</button>
+  </div>
   <scroll-app></scroll-app>
 
   $SCRIPTS$

protractor-shared.js

@@ -33,44 +33,52 @@ var argv = require('yargs')
 
 var browsers = argv['browsers'].split(',');
 
+var CHROME_OPTIONS = {
+  'args': ['--js-flags=--expose-gc'],
+  'perfLoggingPrefs': {
+    'traceCategories': 'blink.console,disabled-by-default-devtools.timeline'
+  }
+};
+
+var CHROME_MOBILE_EMULATION = {
+  // Can't use 'deviceName':'Google Nexus 7 2'
+  // as this would yield wrong orientation,
+  // so we specify facts explicitly
+  'deviceMetrics': {
+    'width': 600,
+    'height': 960,
+    'pixelRatio': 2
+  }
+};
+
 var BROWSER_CAPS = {
   Dartium: {
     name: 'Dartium',
     browserName: 'chrome',
-    chromeOptions: {
-      'binary': process.env.DARTIUM,
-      'args': ['--js-flags=--expose-gc'],
-      'perfLoggingPrefs': {
-        'traceCategories': 'blink.console,disabled-by-default-devtools.timeline'
-      }
-    },
+    chromeOptions: mergeInto(CHROME_OPTIONS, {
+      'mobileEmulation': CHROME_MOBILE_EMULATION,
+      'binary': process.env.DARTIUM
+    }),
     loggingPrefs: {
       performance: 'ALL',
       browser: 'ALL'
     }
   },
   ChromeDesktop: {
     browserName: 'chrome',
-    chromeOptions: {
-      'args': ['--js-flags=--expose-gc'],
-      'perfLoggingPrefs': {
-        'traceCategories': 'blink.console,disabled-by-default-devtools.timeline'
-      }
-    },
+    chromeOptions: mergeInto(CHROME_OPTIONS, {
+      'mobileEmulation': CHROME_MOBILE_EMULATION
+    }),
     loggingPrefs: {
       performance: 'ALL',
       browser: 'ALL'
     }
   },
   ChromeAndroid: {
     browserName: 'chrome',
-    chromeOptions: {
-      androidPackage: 'com.android.chrome',
-      'args': ['--js-flags=--expose-gc'],
-      'perfLoggingPrefs': {
-        'traceCategories': 'blink.console,disabled-by-default-devtools.timeline'
-      }
-    },
+    chromeOptions: mergeInto(CHROME_OPTIONS, {
+      'androidPackage': 'com.android.chrome',
+    }),
     loggingPrefs: {
       performance: 'ALL',
       browser: 'ALL'
@@ -201,3 +209,10 @@ exports.createBenchpressRunner = function(options) {
 
   global.benchpressRunner = new benchpress.Runner(bindings);
 }
+
+function mergeInto(src, target) {
+  for (var prop in src) {
+    target[prop] = src[prop];
+  }
+  return target;
+ }