angular-cn/integration
Pawel Kozlowski 3f4e02b8c7 fix(ivy): queries should match elements inside ng-container with the descendants: false option (#35384)
Before this change content queries with the `descendants: false` option, as implemented in ivy,
would not descendinto `<ng-container>` elements. This behaviour was different from the way the
View Engine worked. This change alligns ngIvy and VE behaviours when it comes to queries and the
`<ng-container>` elements and fixes a common bugs where a query target was placed inside the
`<ng-container>` element with a * directive on it.

Before:

```html
<needs-target>
  <ng-container *ngIf="condition">
    <div #target>...</div>  <!-- this node would NOT match -->
  </ng-container>
</needs-target>
```

After:

```html
<needs-target>
  <ng-container *ngIf="condition">
    <div #target>...</div>  <!-- this node WILL match -->
  </ng-container>
</needs-target>
```

Fixes #34768

PR Close #35384
2020-02-18 17:17:46 -08:00
..
bazel build: update to rules_nodejs 1.3.0 (#35430) 2020-02-13 16:29:32 -08:00
bazel-schematics ci: get rid of the `CI_CHROMEDRIVER_VERSION_ARG` env var (#35381) 2020-02-18 12:42:48 -08:00
cli-hello-world test: use puppeteer in integration tests and to download correct chromedriver (#35049) 2020-02-11 13:16:52 -08:00
cli-hello-world-ivy-compat test: use puppeteer in integration tests and to download correct chromedriver (#35049) 2020-02-11 13:16:52 -08:00
cli-hello-world-ivy-i18n test: use puppeteer in integration tests and to download correct chromedriver (#35049) 2020-02-11 13:16:52 -08:00
cli-hello-world-ivy-minimal test: use puppeteer in integration tests and to download correct chromedriver (#35049) 2020-02-11 13:16:52 -08:00
cli-hello-world-lazy test: use puppeteer in integration tests and to download correct chromedriver (#35049) 2020-02-11 13:16:52 -08:00
cli-hello-world-lazy-rollup test: use puppeteer in integration tests and to download correct chromedriver (#35049) 2020-02-11 13:16:52 -08:00
dynamic-compiler test: use puppeteer in integration tests and to download correct chromedriver (#35049) 2020-02-11 13:16:52 -08:00
hello_world__closure test: use puppeteer in integration tests and to download correct chromedriver (#35049) 2020-02-11 13:16:52 -08:00
hello_world__systemjs_umd test: use puppeteer in integration tests and to download correct chromedriver (#35049) 2020-02-11 13:16:52 -08:00
i18n test: use puppeteer in integration tests and to download correct chromedriver (#35049) 2020-02-11 13:16:52 -08:00
injectable-def build: update lock files in other integration tests (#35049) 2020-02-11 13:16:53 -08:00
ivy-i18n test: use puppeteer in integration tests and to download correct chromedriver (#35049) 2020-02-11 13:16:52 -08:00
language_service_plugin feat(language-service): Append symbol type to hover tooltip (#34515) 2019-12-20 14:40:04 -08:00
ng_elements test: use puppeteer in integration tests and to download correct chromedriver (#35049) 2020-02-11 13:16:52 -08:00
ng_elements_schematics fix(elements): schematics fails with schema.json not found error (#35211) 2020-02-11 11:42:52 -08:00
ng_update test: use puppeteer in integration tests and to download correct chromedriver (#35049) 2020-02-11 13:16:52 -08:00
ng_update_migrations test: use puppeteer in integration tests and to download correct chromedriver (#35049) 2020-02-11 13:16:52 -08:00
ngcc fix(ngcc): correctly invalidate cache when moving/removing files/directories (#35106) 2020-02-03 14:25:47 -08:00
platform-server test: use puppeteer in integration tests and to download correct chromedriver (#35049) 2020-02-11 13:16:52 -08:00
service-worker-schema build: update lockfiles for integration projects (#33968) 2019-11-26 16:08:32 -08:00
side-effects Revert "refactor: use isObservable provided by rxjs 6.1+ (#27668)" 2019-11-27 13:00:59 -08:00
terser build: update lock files in other integration tests (#35049) 2020-02-11 13:16:53 -08:00
typings_test_ts36 build: update lock files in other integration tests (#35049) 2020-02-11 13:16:53 -08:00
typings_test_ts37 build: update lock files in other integration tests (#35049) 2020-02-11 13:16:53 -08:00
.gitignore test(ivy): i18n - add compile time translation to integration test (#32881) 2019-10-09 13:19:38 -07:00
README.md test: use puppeteer in integration tests and to download correct chromedriver (#35049) 2020-02-11 13:16:52 -08:00
_payload-limits.json fix(ivy): queries should match elements inside ng-container with the descendants: false option (#35384) 2020-02-18 17:17:46 -08:00
check-dependencies.js ci: check versions of non-local integration project dependencies (#33968) 2019-11-26 16:08:33 -08:00
get-sharded-tests.js build: shard integration tests on circleci (#27937) 2019-01-07 15:35:09 -08:00
run_tests.sh fix(ngcc): do not collect private declarations from external packages (#34811) 2020-01-23 13:58:37 -08:00

README.md

Integration tests for Angular

This directory contains end-to-end tests for Angular. Each directory is a self-contained application that exactly mimics how a user might expect Angular to work, so they allow high-fidelity reproductions of real-world issues.

For this to work, we first build the Angular distribution via ./scripts/build-packages-dist.js, then install the distribution into each app.

To test Angular CLI applications, we use the cli-hello-world-* integration tests. When a significant change is released in the CLI, the applications should be updated with ng update:

$ cd integration/cli-hello-world[-*]
$ yarn install
$ yarn ng update @angular/cli @angular-devkit/build-angular
$ yarn build
$ yarn test

Afterwards the @angular/cli and @angular-devkit/build-angular should be reverted to the file:../ urls and the main package.json should be updated with the new versions.

Render3 tests

The directory cli-hello-world-ivy-compat contains a test for render3 used with the angular cli.

The cli-hello-world-ivy-minimal contains a minimal ivy app that is meant to mimic the bazel equivalent in packages/core/test/bundling/hello_world, and should be kept similar.

Writing an integration test

The API for each test is:

  • Each sub-directory here is an integration test
  • Each test should have a package.json file
  • The test runner will run yarn and yarn test on the package

This means that the test should be started by test script, like

"scripts": {"test": "runProgramA && assertResultIsGood"}

Note that the package.json file uses a special file:../../dist scheme to reference the Angular packages, so that the locally-built Angular is installed into the test app.

Also, beware of floating (non-locked) dependencies. If in doubt, you can install the package directly from file:../../node_modules.

WARNING

Always ensure that yarn.lock files are up-to-date with the corresponding package.json files (wrt the non-local dependencies - i.e. dependencies whose versions do not start with file:).

You can update a yarn.lock file by running yarn install in the project subdirectory.

Running integration tests

$ ./integration/run_tests.sh

The test runner will first re-build any stale npm packages, then cd into each subdirectory to execute the test.

Browser tests

For integration tests we use the puppeteer provisioned version of Chrome. For both Karma and Protractor tests we set a number of browser testing flags. To avoid duplication, they will be listed and explained here and the code will reference this file for more information.

No Sandbox: --no-sandbox

The sandbox needs to be disabled with the --no-sandbox flag for both Karma and Protractor tests, because it causes Chrome to crash on some environments.

See: http://chromedriver.chromium.org/help/chrome-doesn-t-start See: https://github.com/puppeteer/puppeteer/blob/v1.0.0/docs/troubleshooting.md#chrome-headless-fails-due-to-sandbox-issues

Headless: --headless

So that browsers are not popping up and tearing down when running these tests we run Chrome in headless mode. The --headless flag puts Chrome in headless mode and a number of other flags are recommended in this mode as well:

  • --headless
  • --disable-gpu
  • --disable-dev-shm-usage
  • --hide-scrollbars
  • --mute-audio

These come from the flags that puppeteer passes to chrome when it launches it in headless mode: 18f2ecdffd/lib/Launcher.js (L91)

And from the flags that the Karma ChromeHeadless browser passes to Chrome: 5f70a76de8/index.js (L171)

Disable shared memory space: --disable-dev-shm-usage

The --disable-dev-shm-usage flag disables the usage of /dev/shm because it causes Chrome to crash on some environments.

On CircleCI, the puppeteer provisioned Chrome crashes with CI we get Root cause: org.openqa.selenium.WebDriverException: unknown error: DevToolsActivePort file doesn't exist which resolves without this flag.

See: https://github.com/puppeteer/puppeteer/blob/v1.0.0/docs/troubleshooting.md#tips See: https://stackoverflow.com/questions/50642308/webdriverexception-unknown-error-devtoolsactiveport-file-doesnt-exist-while-t