diff --git a/aio/content/guide/testing.md b/aio/content/guide/testing.md index 62f0e628b5b45..46f84ea5dd440 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 -``` + + ng test --single-run --no-progress --browser=ChromeHeadlessCI + ng e2e --no-progress --config=protractor-ci.conf.js + + +
+ + **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). + +
{@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 -``` + + ng test --watch=false --code-coverage + 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.