The Angular runtime frequently calls into user code (for example, when
writing to a property binding). Since user code can throw errors, calls to
it are frequently wrapped in a try-finally block. In Ivy, the following
pattern is common:
```typescript
enterView();
try {
callUserCode();
} finally {
leaveView();
}
```
This has a significant problem, however: `leaveView` has a side effect: it
calls any pending lifecycle hooks that might've been scheduled during the
current round of change detection. Generally it's a bad idea to run
lifecycle hooks after the application has crashed. The application is in an
inconsistent state - directives may not be instantiated fully, queries may
not be resolved, bindings may not have been applied, etc. Invariants that
the app code relies upon may not hold. Further crashes or broken behavior
are likely.
Frequently, lifecycle hooks are used to make assertions about these
invariants. When these assertions fail, they will throw and "swallow" the
original error, making debugging of the problem much more difficult.
This commit modifies `leaveView` to understand whether the application is
currently crashing, via a parameter `safeToRunHooks`. This parameter is set
by modifying the above pattern:
```typescript
enterView();
let safeToRunHooks = false;
try {
callUserCode();
safeToRunHooks = true;
} finally {
leaveView(..., safeToRunHooks);
}
```
If `callUserCode` crashes, then `safeToRunHooks` will never be set to `true`
and `leaveView` won't call any further user code. The original error will
then propagate back up the stack and be reported correctly. A test is added
to verify this behavior.
PR Close #31244
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 just like we would publish it to npm, then install the distribution into each app.
To test Angular CLI applications, we use the integration test cli-hello-world.
When a significant change is released in the CLI, the application 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
# typescript version
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.jsonfile - The test runner will run
yarnandyarn teston 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.
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.