Prove an Angular search cannot be overwritten by an older HTTP response

Write deterministic tests for the cancellable typeahead. Start query A, then query B, and attempt to complete A after B becomes active. Prove only B can own the rendered state. Also prove a failed request does not terminate later searches and no requests remain after the test.

query "ang"     -> request A
query "angular" -> request B; A becomes cancelled
flush B           -> B results render
attempt A result  -> A cannot replace B

• Use the Angular HTTP testing backend, not a real server.
• Advance debounce time deterministically.
• Inspect request cancellation or active-request matching explicitly.
• Verify rendered or public component state, not only operator output.
• Call HttpTestingController.verify() after every test.

1. Configure TestBed with the component and HTTP testing support.
2. Enter the first query and advance virtual time through debounce.
3. Capture request A, enter the second query, and capture request B.
4. Verify A is cancelled, flush B, and assert the latest state.
5. Add a failure-then-success case and verify no unexpected requests remain.

import {fakeAsync, TestBed, tick} from '@angular/core/testing';
import {provideHttpClient} from '@angular/common/http';
import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';

it('keeps only the latest search result', fakeAsync(() => {
  TestBed.configureTestingModule({
    imports: [Typeahead],
    providers: [provideHttpClient(), provideHttpClientTesting()],
  });
  const http = TestBed.inject(HttpTestingController);
  const fixture = TestBed.createComponent(Typeahead);
  const component = fixture.componentInstance;

  component.updateQuery('ang');
  tick(250);
  const oldRequest = http.expectOne('/api/search?q=ang');

  component.updateQuery('angular');
  tick(250);
  const latestRequest = http.expectOne('/api/search?q=angular');
  expect(oldRequest.cancelled).toBe(true);

  latestRequest.flush([{id: '2', label: 'Angular'}]);
  tick();
  expect(component.state()).toEqual({
    kind: 'ready',
    results: [{id: '2', label: 'Angular'}],
  });
  http.verify();
}));

The test is O(1) requests and state transitions and uses no wall-clock waiting, so runtime remains deterministic.

• The testing backend marks an unsubscribed TestRequest as cancelled.
• Clearing the input should cancel the active request and return idle.
• A 500 response should produce error state while a later request still succeeds.
• Destroying the fixture while loading should cancel the active request.

• Run the sequence with B completing before inspection of A cancellation.
• Fail B, then submit C and verify C can render.
• Clear the query during A and verify idle state.
• Remove switchMap intentionally and confirm the regression test fails.

• Flushing only in expected order never proves race safety.
• Real sleeps make the debounce test depend on CI timing.
• Asserting an internal subject ignores whether Angular rendered the state.
• Skipping verify allows accidental background requests.