Angular HttpClient Cancellation: Debug, Test, and Prevent Stale UI

import { AsyncPipe } from '@angular/common';
import { HttpClient, provideHttpClient } from '@angular/common/http';
import {
  HttpTestingController,
  provideHttpClientTesting,
} from '@angular/common/http/testing';
import { Component, inject } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { TestBed } from '@angular/core/testing';
import { Subject } from 'rxjs';
import { mergeMap, shareReplay, switchMap } from 'rxjs/operators';

@Component({ standalone: true, template: '' })
class LifecycleHost {
  private readonly http = inject(HttpClient);
  readonly request = this.http.get('/api/lifecycle').pipe(
    takeUntilDestroyed()
  ).subscribe();
}

@Component({
  standalone: true,
  imports: [AsyncPipe],
  template: '{{ data$ | async }}',
})
class AsyncPipeHost {
  private readonly http = inject(HttpClient);
  readonly data$ = this.http.get('/api/async-pipe');
}

describe('HttpClient cancellation contracts', () => {
  let http: HttpClient;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [provideHttpClient(), provideHttpClientTesting()],
    });
    http = TestBed.inject(HttpClient);
    httpMock = TestBed.inject(HttpTestingController);
  });

  afterEach(() => httpMock.verify());

  it('cancels an active request on manual unsubscribe', () => {
    const sub = http.get('/api/manual').subscribe();
    const req = httpMock.expectOne('/api/manual');

    sub.unsubscribe();

    expect(req.cancelled).toBeTrue();
  });

  it('lets switchMap cancel the previous request', () => {
    const queries = new Subject<string>();
    const sub = queries.pipe(
      switchMap(q => http.get('/api/search', { params: { q } }))
    ).subscribe();

    queries.next('angular');
    const first = httpMock.expectOne(r => r.params.get('q') === 'angular');
    queries.next('rxjs');
    const second = httpMock.expectOne(r => r.params.get('q') === 'rxjs');

    expect(first.cancelled).toBeTrue();
    expect(second.cancelled).toBeFalse();
    second.flush({ items: [] });
    sub.unsubscribe();
  });

  it('keeps concurrent mergeMap requests active', () => {
    const queries = new Subject<string>();
    const sub = queries.pipe(
      mergeMap(q => http.get('/api/search', { params: { q } }))
    ).subscribe();

    queries.next('angular');
    queries.next('rxjs');
    const first = httpMock.expectOne(r => r.params.get('q') === 'angular');
    const second = httpMock.expectOne(r => r.params.get('q') === 'rxjs');

    expect(first.cancelled).toBeFalse();
    expect(second.cancelled).toBeFalse();
    second.flush({ items: ['new'] });
    first.flush({ items: ['old'] });
    sub.unsubscribe();
  });

  it('cancels through takeUntilDestroyed', () => {
    const fixture = TestBed.createComponent(LifecycleHost);
    const req = httpMock.expectOne('/api/lifecycle');

    fixture.destroy();

    expect(req.cancelled).toBeTrue();
  });

  it('lets AsyncPipe cancel when its view is destroyed', () => {
    const fixture = TestBed.createComponent(AsyncPipeHost);
    fixture.detectChanges();
    const req = httpMock.expectOne('/api/async-pipe');

    fixture.destroy();

    expect(req.cancelled).toBeTrue();
  });

  it('makes shareReplay cancellation depend on refCount', () => {
    const refCounted$ = http.get('/api/ref-counted').pipe(
      shareReplay({ bufferSize: 1, refCount: true })
    );
    const refCountedSub = refCounted$.subscribe();
    const refCountedReq = httpMock.expectOne('/api/ref-counted');
    refCountedSub.unsubscribe();
    expect(refCountedReq.cancelled).toBeTrue();

    const pinned$ = http.get('/api/pinned').pipe(
      shareReplay({ bufferSize: 1, refCount: false })
    );
    const pinnedSub = pinned$.subscribe();
    const pinnedReq = httpMock.expectOne('/api/pinned');
    pinnedSub.unsubscribe();
    expect(pinnedReq.cancelled).toBeFalse();
    pinnedReq.flush({ ok: true });
  });
});