Angular - HelpMeTest

Test Automation

Testing NgRx: Store, Effects, Selectors, and Reducers in Angular with TestBed

NgRx is the Redux-based state management library for Angular. Testing NgRx requires Angular's TestBed for dependency injection, along with NgRx's own testing utilities: provideMockStore, provideMockActions, and (optionally) jasmine-marbles for observable-based effects testing. Setup npm install @ngrx/store @ngrx/effects @ngrx/store-devtools npm install -D @ngrx/store/

Angular

Angular Material 3 Component Testing with Harnesses

Angular Material's Component Test Harnesses provide a stable, semantic API for testing Material components without relying on CSS classes or internal DOM structure. Since Material 3 (M3) changed class names and element structure significantly from M2, harnesses are the only reliable way to test Material components across versions.

Angular

Angular 19 Resource API and Linked Signals Testing Guide

Angular 19 introduced two major reactive primitives: resource() for async data fetching tied to signals, and linkedSignal() for derived writable state. Both are in developer preview as of Angular 19.0. Testing them requires understanding their async lifecycle — resources go through idle, loading, loaded, error, and local states — and how

Angular

Angular 18 HttpClient Testing with provideHttpClientTesting

Angular 15 introduced provideHttpClient() as a functional alternative to HttpClientModule. Angular 18 completed the migration story with provideHttpClientTesting() — the functional equivalent of HttpClientTestingModule. This guide covers how to test HTTP requests, intercept calls, simulate errors, and mock responses in standalone Angular apps. Key Takeaways Replace HttpClientTestingModule with provideHttpClientTesting(). In standalone

Angular

Angular Deferrable Views Testing: @defer Block Strategies

Angular 17 introduced deferrable views — the @defer block that lazily loads components based on triggers like viewport intersection, idle time, user interaction, or explicit programmatic control. Testing deferrable views requires Angular's DeferBlockBehavior and getDeferBlocks() API to control when and how deferred blocks load. Key Takeaways Use DeferBlockBehavior.Manual

Angular

Angular Standalone Components Testing: No NgModule Required

Angular standalone components (stable since Angular 15, default since Angular 17) remove NgModule from the component authoring model. Testing standalone components is simpler: you import the component directly into TestBed.configureTestingModule({ imports: [] }) instead of declaring it in a module. Dependencies go in the same imports array. Key Takeaways Import standalone

Angular

Testing Angular Signals: Unit Testing Change Detection and Reactive Primitives

Angular Signals, introduced in Angular 17 and stabilized in Angular 18, replace RxJS-heavy state management with fine-grained reactivity. Testing signals requires understanding when Angular flushes effects, how computed values are lazy, and how to assert on DOM updates triggered by signal changes. This guide covers all of it. Key Takeaways

Internationalization

Angular i18n Testing: Locales, Pipes, and Translation Keys

Angular's approach to internationalization creates a testing challenge: the default compile-time i18n bakes translations into the build, making runtime locale switching in unit tests awkward. This guide covers how to configure Angular TestBed for locale-aware testing, how to unit test locale-sensitive pipes, and how to use component harnesses

Angular

E2E Testing Angular Apps with Playwright: Setup, Component Harnesses vs Playwright Selectors

Playwright is the recommended E2E testing framework for Angular applications in 2026, replacing the deprecated Protractor. It supports auto-waiting, multi-browser testing, network interception, and trace capture out of the box. This guide covers adding Playwright to an Angular project, writing effective E2E tests, and deciding when to use Angular CDK

Angular

Spectator for Angular: Reducing TestBed Boilerplate with createComponent and createService

Spectator is an Angular testing library that wraps TestBed with a simpler, less verbose API. Instead of 20 lines of configureTestingModule, compileComponents, createComponent, and detectChanges, you get a one-liner factory that handles all of it. This guide covers the full Spectator API: createComponent, createService, SpyObject mocks, and event testing. Key

Angular

Testing Angular Services: HttpClientTestingModule, Mocking Dependencies, RxJS Marble Testing

Angular services are the workhorses of Angular applications — they handle HTTP calls, state management, caching, and business logic. Testing services involves two main concerns: intercepting HTTP requests with HttpClientTestingModule, and isolating service dependencies with spy objects. For complex observable chains, RxJS marble testing gives you frame-level control over timing. This

Angular

Testing Angular Components: Inputs, Outputs, Template Bindings, and ChangeDetectionStrategy

Angular component tests use TestBed to mount a component in a real Angular environment, then query the DOM to assert on rendered output and trigger user interactions. This guide covers the full component testing API: querying the DOM, testing @Input bindings, asserting on @Output events, handling ChangeDetectionStrategy.OnPush, and testing