docs: update continuous integration story (#26497)

PR Close #26497
This commit is contained in:
Alan 2018-10-17 15:39:53 +02:00 committed by Misko Hevery
parent c3643615fc
commit 23d625172a
1 changed files with 24 additions and 20 deletions

View File

@ -120,21 +120,19 @@ jobs:
steps: steps:
- checkout - checkout
- restore_cache: - restore_cache:
key: my-project-{{ .Branch }}-{{ checksum "package.json" }} key: my-project-{{ .Branch }}-{{ checksum "package-lock.json" }}
- run: npm install - run: npm install
- save_cache: - save_cache:
key: my-project-{{ .Branch }}-{{ checksum "package.json" }} key: my-project-{{ .Branch }}-{{ checksum "package-lock.json" }}
paths: paths:
- "node_modules" - "node_modules"
- run: xvfb-run -a npm run test -- --single-run --no-progress --browser=ChromeNoSandbox - run: npm run test -- --single-run --no-progress --browser=ChromeHeadlessCI
- run: xvfb-run -a npm run e2e -- --no-progress --config=protractor-ci.conf.js - 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. 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. 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 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). 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 - npm install
script: script:
# Use Chromium instead of Chrome. - npm run test -- --single-run --no-progress --browser=ChromeHeadlessCI
- export CHROME_BIN=chromium-browser - npm run e2e -- --no-progress --config=protractor-ci.conf.js
- 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
``` ```
This does the same things as the Circle CI configuration, except that Travis doesn't come with Chrome, so we use Chromium instead. 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, and [Protractor](https://www.protractortest.org/#/api-overview) end-to-end testing tool,
which you must adjust to start Chrome without sandboxing. 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: * In the Karma configuration file, `karma.conf.js`, add a custom launcher called ChromeNoSandbox below browsers:
``` ```
browsers: ['Chrome'], browsers: ['Chrome'],
customLaunchers: { customLaunchers: {
ChromeNoSandbox: { ChromeHeadlessCI: {
base: 'Chrome', base: 'ChromeHeadless',
flags: ['--no-sandbox'] flags: ['--no-sandbox']
} }
}, },
@ -210,7 +208,7 @@ const config = require('./protractor.conf').config;
config.capabilities = { config.capabilities = {
browserName: 'chrome', browserName: 'chrome',
chromeOptions: { 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: Now you can run the following commands to use the `--no-sandbox` flag:
``` <code-example language="sh" class="code-shell">
ng test --single-run --no-progress --browser=ChromeNoSandbox ng test --single-run --no-progress --browser=ChromeHeadlessCI
ng e2e --no-progress --config=protractor-ci.conf.js 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} {@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. To generate a coverage report run the following command in the root of your project.
``` <code-example language="sh" class="code-shell">
ng test --watch=false --code-coverage 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. 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.