This document describes the testing infrastructure used across the Angular repository, including the multi-framework strategy (Karma, Jasmine, Jest, Cypress), the specialized TestBed environment for component testing, local development via the dev-app, and performance tracking with benchpress.
The infrastructure is designed to handle unit tests for framework internals, integration tests for CLI compatibility, and end-to-end (E2E) tests for tooling like DevTools.
The Angular repository employs a multi-framework testing strategy. While Karma and Jasmine are the primary drivers for framework unit tests, specialized runners are used for specific packages like zone.js and DevTools.
Sources:
The TestBed is the primary API for configuring and initializing the environment for unit testing Angular components and services. It provides a virtual Angular module environment that allows for overriding metadata and injecting mock providers.
The ComponentFixture class manages the lifecycle of a component under test. It bridges the gap between the Angular runtime and the test environment.
| Class/Property | File Path | Role |
|---|---|---|
ComponentFixture | packages/core/testing/src/component_fixture.ts47 | Main handle for a component's debug environment. |
detectChanges() | packages/core/testing/src/component_fixture.ts148 | Triggers change detection. In zoneless mode, it calls appRef.tick(). |
debugElement | packages/core/testing/src/component_fixture.ts51 | Provides access to the DebugElement for DOM inspection. |
checkNoChanges() | packages/core/testing/src/component_fixture.ts182 | Verifies that the first change detection run is stable. |
Sources:
Integration tests verify that Angular packages work correctly when used in real-world scenarios, such as within the Angular CLI or with Server-Side Rendering (SSR). These tests are located in the integration/ directory.
Each integration test is a project with its own package.json and pnpm-lock.yaml. They use link: dependencies to point to the locally built Angular packages (e.g., in-existing-linked-by-bazel).
signal-inputs work with the CLI integration/cli-signal-inputs/package.json15-26platform-server and client-side hydration integration/platform-server-hydration/pnpm-lock.yaml10-34Sources:
Performance is tracked using the benchpress framework, measuring execution time and memory usage.
Performance metrics are collected and uploaded to a tracking dashboard via GitHub Actions.
Key Implementation Details:
pnpm ng-dev perf workflows --list .github/workflows/perf.yml27google-github-actions/auth .github/workflows/perf.yml46-54Sources:
The testing infrastructure includes a DeferBlockFixture to trigger state transitions in @defer blocks.
ɵgetDeferBlocks to find blocks within a component packages/core/testing/src/component_fixture.ts19ɵDeferBlockDetails provides the underlying metadata for the discovered blocks packages/core/testing/src/component_fixture.ts15For testing asynchronous code without real-time delays, Angular provides fakeAsync. This environment intercepts tasks via a specialized FakeAsyncTestZoneSpec.
ComponentFixture checks for the presence of FakeAsyncTestZoneSpec to determine if errors should be rethrown or handled by the zone packages/core/testing/src/component_fixture.ts135-138NgZone.onError subscription is used to report failures during change detection runs packages/core/testing/src/component_fixture.ts125-142Sources:
Refresh this wiki