ci: use headless chrome on travis

Author: filipesilva

.travis.yml

@@ -92,9 +92,6 @@ matrix:
 
 
 before_install:
-  # Use a virtual display.
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
   # Install yarn.
   - curl -o- -L https://yarnpkg.com/install.sh | bash
   - export PATH="$HOME/.yarn/bin:$PATH"

tests/e2e/assets/1.0.0-proj/package.json

@@ -33,7 +33,7 @@
     "jasmine-core": "~2.5.2",
     "jasmine-spec-reporter": "~3.2.0",
     "karma": "~1.4.1",
-    "karma-chrome-launcher": "~2.0.0",
+    "karma-chrome-launcher": "~2.1.1",
     "karma-cli": "~1.0.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",

tests/e2e/setup/500-create-project.ts

@@ -1,7 +1,7 @@
 import {join} from 'path';
 import {git, ng, silentNpm} from '../utils/process';
 import {expectFileToExist, replaceInFile} from '../utils/fs';
-import {updateTsConfig, updateJsonFile, useNg2} from '../utils/project';
+import {updateTsConfig, updateJsonFile, useNg2, useCIChrome} from '../utils/project';
 import {gitClean, gitCommit} from '../utils/git';
 import {getGlobalVariable} from '../utils/env';
 
@@ -36,16 +36,7 @@ export default function() {
         json['dependencies'][pkgName] = packages[pkgName].tar;
       });
     }))
-    // There's a race condition happening in Chrome. Enabling logging in chrome used by
-    // protractor actually fixes it. Logging is piped to a file so it doesn't affect our setup.
-    .then(() => replaceInFile('protractor.conf.js', `'browserName': 'chrome'`,
-      `'browserName': 'chrome',
-        chromeOptions: {
-          args: [
-            "--enable-logging",
-          ]
-        }
-      `))
+    .then(() => useCIChrome())
     .then(() => argv['ng2'] ? useNg2() : Promise.resolve())
     .then(() => {
       if (argv['nightly'] || argv['ng-sha']) {

tests/e2e/tests/misc/breaking-change.ts

@@ -1,4 +1,5 @@
 import { createProjectFromAsset } from '../../utils/assets';
+import { replaceInFile } from '../../utils/fs';
 import { ng } from '../../utils/process';
 
 // This test ensures a project generated with 1.0.0 will still work.
@@ -7,6 +8,26 @@ import { ng } from '../../utils/process';
 export default function () {
   return Promise.resolve()
     .then(() => createProjectFromAsset('1.0.0-proj'))
+    // Update chrome configs.
+    .then(() => replaceInFile('protractor.conf.js', `'browserName': 'chrome'`,
+      `'browserName': 'chrome',
+        chromeOptions: {
+          args: [
+            "--enable-logging",
+            "--no-sandbox",
+            ${process.env['TRAVIS'] ? '"--headless", "--disable-gpu"' : ''}
+          ]
+        }
+      `))
+    .then(() => replaceInFile('karma.conf.js', `browsers: ['Chrome'],`,
+      `browsers: ['ChromeCI'],
+      customLaunchers: {
+        ChromeCI: {
+          base: '${process.env['TRAVIS'] ? 'ChromeHeadless' : 'Chrome'}',
+          flags: ['--no-sandbox']
+        }
+      },
+      `))
     .then(() => ng('generate', 'component', 'my-comp'))
     .then(() => ng('lint'))
     .then(() => ng('test', '--single-run'))

tests/e2e/utils/project.ts

@@ -1,6 +1,6 @@
-import {readFile, writeFile} from './fs';
-import {silentExecAndWaitForOutputToMatch, silentNpm, ng} from './process';
-import {getGlobalVariable} from './env';
+import { readFile, writeFile, replaceInFile } from './fs';
+import { silentExecAndWaitForOutputToMatch, silentNpm, ng } from './process';
+import { getGlobalVariable } from './env';
 
 const packages = require('../../../lib/packages').packages;
 
@@ -43,6 +43,7 @@ export function createProject(name: string, ...args: string[]) {
         json['dependencies'][pkgName] = packages[pkgName].dist;
       });
     }))
+    .then(() => useCIChrome())
     .then(() => argv['ng2'] ? useNg2() : Promise.resolve())
     .then(() => {
       if (argv.nightly || argv['ng-sha']) {
@@ -77,6 +78,36 @@ export function createProject(name: string, ...args: string[]) {
     .then(() => silentNpm('install'));
 }
 
+export function useCIChrome() {
+  // There's a race condition happening in Chrome. Enabling logging in chrome used by
+  // protractor actually fixes it. Logging is piped to a file so it doesn't affect our setup.
+  // --no-sandbox is needed for Circle CI.
+  // Travis can use headless chrome, but not appveyor.
+  return Promise.resolve()
+    .then(() => replaceInFile('protractor.conf.js', `'browserName': 'chrome'`,
+      `'browserName': 'chrome',
+        chromeOptions: {
+          args: [
+            "--enable-logging",
+            "--no-sandbox",
+            ${process.env['TRAVIS'] ? '"--headless", "--disable-gpu"' : ''}
+          ]
+        }
+    `))
+    // Not a problem if the file can't be found.
+    .catch(() => null)
+    .then(() => replaceInFile('karma.conf.js', `browsers: ['Chrome'],`,
+      `browsers: ['ChromeCI'],
+      customLaunchers: {
+        ChromeCI: {
+          base: '${process.env['TRAVIS'] ? 'ChromeHeadless' : 'Chrome'}',
+          flags: ['--no-sandbox']
+        }
+      },
+    `))
+    .catch(() => null);
+}
+
 // Convert a Angular 4 project to Angular 2.
 export function useNg2() {
   const ng2Deps: any = {