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;
+ }