From 23d625172aa0e98dced194f28b3b815ac5f1de87 Mon Sep 17 00:00:00 2001
From: Alan <alan.agius4@gmail.com>
Date: Wed, 17 Oct 2018 15:39:53 +0200
Subject: [PATCH] docs: update continuous integration story (#26497)

PR Close #26497
---
 aio/content/guide/testing.md | 44 ++++++++++++++++++++----------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/aio/content/guide/testing.md b/aio/content/guide/testing.md
index 59aa33b2eb..a49f9f34df 100644
--- a/aio/content/guide/testing.md
+++ b/aio/content/guide/testing.md
@@ -120,21 +120,19 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          key: my-project-{{ .Branch }}-{{ checksum "package.json" }}
+          key: my-project-{{ .Branch }}-{{ checksum "package-lock.json" }}
       - run: npm install
       - save_cache:
-          key: my-project-{{ .Branch }}-{{ checksum "package.json" }}
+          key: my-project-{{ .Branch }}-{{ checksum "package-lock.json" }}
           paths:
             - "node_modules"
-      - run: xvfb-run -a npm run test -- --single-run --no-progress --browser=ChromeNoSandbox
-      - run: xvfb-run -a npm run e2e -- --no-progress --config=protractor-ci.conf.js
+      - run: npm run test -- --single-run --no-progress --browser=ChromeHeadlessCI
+      - run: npm run e2e -- --no-progress --config=protractor-ci.conf.js
 ```
 
 This configuration caches `node_modules/` and uses [`npm run`](https://docs.npmjs.com/cli/run-script) to run CLI commands, because `@angular/cli` is not installed globally. 
 The double dash (`--`) is needed to pass arguments into the `npm` script.
 
-For Chrome, it uses `xvfb-run` to run the `npm run` command using a virtual screen.
-
 Step 3: Commit your changes and push them to your repository.
 
 Step 4: [Sign up for Circle CI](https://circleci.com/docs/2.0/first-steps/) and [add your project](https://circleci.com/add-projects). 
@@ -169,10 +167,8 @@ install:
   - npm install
 
 script:
-  # Use Chromium instead of Chrome.
-  - export CHROME_BIN=chromium-browser
-  - xvfb-run -a npm run test -- --single-run --no-progress --browser=ChromeNoSandbox
-  - xvfb-run -a npm run e2e -- --no-progress --config=protractor-ci.conf.js
+  - npm run test -- --single-run --no-progress --browser=ChromeHeadlessCI
+  - npm run e2e -- --no-progress --config=protractor-ci.conf.js
 ```
 
 This does the same things as the Circle CI configuration, except that Travis doesn't come with Chrome, so we use Chromium instead.
@@ -192,12 +188,14 @@ There are configuration files for both the [Karma JavaScript test runner](http:/
 and [Protractor](https://www.protractortest.org/#/api-overview) end-to-end testing tool, 
 which  you must adjust to start Chrome without sandboxing.
 
+We'll be using [Headless Chrome](https://developers.google.com/web/updates/2017/04/headless-chrome#cli) in these examples.
+
 * In the Karma configuration file, `karma.conf.js`, add a custom launcher called ChromeNoSandbox below browsers:
 ```
 browsers: ['Chrome'],
 customLaunchers: {
-  ChromeNoSandbox: {
-    base: 'Chrome',
+  ChromeHeadlessCI: {
+    base: 'ChromeHeadless',
     flags: ['--no-sandbox']
   }
 },
@@ -210,7 +208,7 @@ const config = require('./protractor.conf').config;
 config.capabilities = {
   browserName: 'chrome',
   chromeOptions: {
-    args: ['--no-sandbox']
+    args: ['--headless', '--no-sandbox']
   }
 };
 
@@ -219,10 +217,16 @@ exports.config = config;
 
 Now you can run the following commands to use the `--no-sandbox` flag:
 
-```
-ng test --single-run --no-progress --browser=ChromeNoSandbox
-ng e2e --no-progress --config=protractor-ci.conf.js
-```
+<code-example language="sh" class="code-shell">
+  ng test --single-run --no-progress --browser=ChromeHeadlessCI
+  ng e2e --no-progress --config=protractor-ci.conf.js
+</code-example>
+
+<div class="alert is-helpful">
+
+   **Note:** Right now, you'll also want to include the `--disable-gpu` flag if you're running on Windows. See [crbug.com/737678](https://crbug.com/737678).
+
+</div>
 
 {@a code-coverage}
 
@@ -233,9 +237,9 @@ Code coverage reports show you  any parts of our code base that may not be prope
 
 To generate a coverage report run the following command in the root of your project.
 
-```
-ng test --watch=false --code-coverage
-```
+<code-example language="sh" class="code-shell">
+  ng test --watch=false --code-coverage
+</code-example>
 
 When  the tests are complete, the command creates a new `/coverage` folder in the project. Open the `index.html` file to see a report with your source code and code coverage values.