HTTP

// The classic way: subscribe in ngOnInit and track loading/error by hand.
@Component({
  selector: 'app-users-classic',
  template: `
    @if (loading()) {
      <p>Loading…</p>
    } @else if (error()) {
      <p class="error">{{ error() }}</p>
    } @else {
      <ul>
        @for (user of users(); track user.id) {
          <li>{{ user.name }}</li>
        }
      </ul>
    }
  `,
})
export class UsersClassic implements OnInit {
  private readonly api = inject(UserApi);
  private readonly destroyRef = inject(DestroyRef);

  protected readonly users = signal<User[]>([]);
  protected readonly loading = signal(true);
  protected readonly error = signal<string | null>(null);

  ngOnInit() {
    this.api
      .getUsers()
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe({
        next: (users) => {
          this.users.set(users);
          this.loading.set(false);
        },
        error: (err: HttpErrorResponse) => {
          this.error.set(`Failed: ${err.status}`);
          this.loading.set(false);
        },
      });
  }
}

// One user, the classic way — note the `as` alias in the template.
@Component({
  selector: 'app-user-detail-classic',
  template: `
    @if (user(); as u) {
      <h2>{{ u.name }}</h2>
      <p>{{ u.email }} · {{ u.role }}</p>
    } @else {
      <p>Loading…</p>
    }
  `,
})
export class UserDetailClassic implements OnInit {
  private readonly api = inject(UserApi);
  private readonly destroyRef = inject(DestroyRef);
  readonly id = input.required({ transform: numberAttribute });

  protected readonly user = signal<User | null>(null);

  ngOnInit() {
    this.api
      .getUser(this.id())
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((user) => this.user.set(user));
  }
}

it('the generic is a promise to the compiler, not a runtime check', () => {
  let result: User | undefined;
  api.getUser(1).subscribe((u) => (result = u));
  http.expectOne('/api/users/1').flush({ id: '1', fullName: 'Ada' });
  console.log('typed as User, actually:', result, typeof result?.id, result?.name);
  expect(result?.name).toBeUndefined();
});
// typed as User, actually: { id: '1', fullName: 'Ada' } string undefined

it('POST sends a JSON body', () => {
  let created: User | undefined;
  api.create({ name: 'Grace', email: 'grace@example.com', role: 'member' }).subscribe((u) => (created = u));

  const req = http.expectOne({ method: 'POST', url: '/api/users' });
  expect(req.request.body).toEqual({ name: 'Grace', email: 'grace@example.com', role: 'member' });
  console.log('content type detected:', req.request.detectContentTypeHeader());
  req.flush({ id: 2, name: 'Grace', email: 'grace@example.com', role: 'member' }, { status: 201, statusText: 'Created' });
  expect(created?.id).toBe(2);
});

it('PUT sends the whole resource, PATCH only the change', () => {
  api.replace({ ...ada, name: 'Ada L.' }).subscribe();
  api.rename(1, 'Ada Lovelace').subscribe();

  const put = http.expectOne({ method: 'PUT', url: '/api/users/1' });
  const patch = http.expectOne({ method: 'PATCH', url: '/api/users/1' });
  expect(put.request.body).toEqual({ id: 1, name: 'Ada L.', email: 'ada@example.com', role: 'admin' });
  expect(patch.request.body).toEqual({ name: 'Ada Lovelace' });
  put.flush(put.request.body);
  patch.flush({ ...ada, name: 'Ada Lovelace' });
});

it('HttpParams is immutable', () => {
  const p = new HttpParams();
  p.set('q', 'lost');
  expect(p.toString()).toBe('');
  expect(p.set('q', 'kept').toString()).toBe('q=kept');
});

getPage(page: number): Observable<Page<User>> {
  return this.http
    .get<User[]>(this.base, { params: { page }, observe: 'response' })
    .pipe(
      map((res: HttpResponse<User[]>) => ({
        items: res.body ?? [],
        total: Number(res.headers.get('X-Total-Count') ?? 0),
      })),
    );
}

it('walks through loading → resolved → loading → resolved as the id changes', async () => {
  const fixture = TestBed.createComponent(UserCard);
  fixture.componentRef.setInput('id', '1');
  const user = fixture.componentInstance.user;
  const snap = () => ({ status: user.status(), isLoading: user.isLoading(), value: user.hasValue() ? user.value().name : undefined });

  console.log('before tick:', snap());
  TestBed.tick();
  console.log('after tick :', snap());
  const first = http.expectOne('/api/users/1');
  expect(user.status()).toBe('loading');

  first.flush(ada);
  console.log('after flush:', snap(), 'statusCode', user.statusCode());
  await fixture.whenStable();
  console.log('stable     :', snap());
  expect(fixture.nativeElement.textContent).toContain('Ada');

  fixture.componentRef.setInput('id', '2');
  TestBed.tick();
  console.log('id → 2     :', snap());
  expect(user.status()).toBe('loading');
  http.expectOne('/api/users/2').flush(grace);
  await fixture.whenStable();
  expect(fixture.nativeElement.textContent).toContain('Grace');
});
// before tick: { status: 'loading', isLoading: true, value: undefined }
// after tick : { status: 'loading', isLoading: true, value: undefined }
// after flush: { status: 'loading', isLoading: true, value: undefined } statusCode 200
// stable     : { status: 'resolved', isLoading: false, value: 'Ada' }
// id → 2     : { status: 'loading', isLoading: true, value: undefined }

it('error state: error() is set and value() throws', async () => {
  const fixture = TestBed.createComponent(UserCard);
  fixture.componentRef.setInput('id', 99);
  TestBed.tick();
  http.expectOne('/api/users/99').flush({ message: 'nope' }, { status: 404, statusText: 'Not Found' });
  await fixture.whenStable();
  const user = fixture.componentInstance.user;
  console.log('error status:', user.status(), '| error:', user.error()?.message, '| statusCode:', user.statusCode());
  let thrown = '';
  try {
    user.value();
  } catch (e) {
    thrown = (e as Error).message;
  }
  console.log('value() threw:', thrown);
  expect(user.status()).toBe('error');
  expect(fixture.nativeElement.textContent).toContain('Could not load user 99');
});
// error status: error | error: Http failure response for /api/users/99: 404 Not Found | statusCode: 404
// value() threw: Resource is currently in an error state (see Error.cause for details): Http failure response for /api/users/99: 404 Not Found

// Returning undefined from the request function means "don't fetch yet".
@Component({
  selector: 'app-user-search',
  template: `
    <p>{{ results.status() }}: {{ results.value().length }} results</p>
  `,
})
export class UserSearch {
  readonly term = signal('');

  readonly results = httpResource<User[]>(
    () => (this.term().length < 2 ? undefined : { url: '/api/users', params: { q: this.term() } }),
    { defaultValue: [] },
  );
}

// parse: validate at runtime what the generic only promises at compile time.
function toUser(raw: unknown): User {
  const u = raw as Partial<User>;
  if (typeof u?.id !== 'number' || typeof u.name !== 'string') {
    throw new Error('Response is not a User');
  }
  return u as User;
}

@Component({ selector: 'app-checked-user', template: `` })
export class CheckedUser {
  readonly id = signal(1);
  readonly user = httpResource(() => `/api/users/${this.id()}`, { parse: toUser });
}

getUserWithRetry(id: number): Observable<User> {
  return this.http.get<User>(`${this.base}/${id}`).pipe(
    retry({
      count: 2,
      delay: (error: HttpErrorResponse, attempt) => {
        // only retry what might succeed next time: network errors (0) and 5xx
        if (error.status !== 0 && error.status < 500) return throwError(() => error);
        return timer(attempt * 1000); // 1s, then 2s
      },
    }),
  );
}

getUserOrNull(id: number): Observable<User | null> {
  return this.getUserWithRetry(id).pipe(
    catchError((error: HttpErrorResponse) => {
      if (error.status === 404) return of(null);
      return throwError(() => new Error(`Could not load user ${id} (status ${error.status})`));
    }),
  );
}

it('retries a 503 twice with growing delays, then succeeds', () => {
  let result: User | null | undefined;
  api.getUserOrNull(1).subscribe((u) => (result = u));

  http.expectOne('/api/users/1').flush(null, { status: 503, statusText: 'Service Unavailable' }); // attempt 1
  vi.advanceTimersByTime(999);
  http.expectNone('/api/users/1'); // still waiting
  vi.advanceTimersByTime(1);
  http.expectOne('/api/users/1').flush(null, { status: 503, statusText: 'Service Unavailable' }); // attempt 2
  vi.advanceTimersByTime(2000);
  http.expectOne('/api/users/1').flush(ada); // attempt 3
  expect(result).toEqual(ada);
});

it('requests go first → second; responses come back second → first', () => {
  callLog.length = 0;
  TestBed.configureTestingModule({
    providers: [provideHttpClient(withInterceptors([firstInterceptor, secondInterceptor])), provideHttpClientTesting()],
  });
  const http = TestBed.inject(HttpClient);
  const ctrl = TestBed.inject(HttpTestingController);

  http.get('/api/ping').subscribe(() => callLog.push('subscriber: value'));
  const req = ctrl.expectOne('/api/ping');
  expect(req.request.headers.get('X-Second')).toBe('yes');
  callLog.push('backend: flush');
  req.flush({ ok: true });
  expect(callLog).toEqual([
    'first: request',
    'second: request',
    'second: Sent',
    'first: Sent',
    'backend: flush',
    'second: Response',
    'first: Response',
    'subscriber: value',
  ]);
});

export const timingInterceptor: HttpInterceptorFn = (req, next) => {
  const started = performance.now();
  return next(req).pipe(
    finalize(() => console.log(`${req.method} ${req.urlWithParams} took ${Math.round(performance.now() - started)}ms`)),
  );
};

it('on 401: refreshes once, replays the request with the new token', () => {
  auth.login('expired');
  let result: unknown;
  http.get('/api/orders').subscribe((r) => (result = r));

  ctrl.expectOne('/api/orders').flush(null, { status: 401, statusText: 'Unauthorized' });

  const refresh = ctrl.expectOne('/api/auth/refresh');
  expect(refresh.request.method).toBe('POST');
  expect(refresh.request.withCredentials).toBe(true);
  expect(refresh.request.headers.has('Authorization')).toBe(false);
  refresh.flush({ accessToken: 'fresh' });

  const replay = ctrl.expectOne('/api/orders');
  expect(replay.request.headers.get('Authorization')).toBe('Bearer fresh');
  replay.flush([{ id: 1 }]);

  expect(result).toEqual([{ id: 1 }]);
  expect(auth.accessToken()).toBe('fresh');
});

it('refresh fails: logs out and redirects to /login', () => {
  auth.login('expired');
  let error: HttpErrorResponse | undefined;
  http.get('/api/orders').subscribe({ error: (e) => (error = e) });

  ctrl.expectOne('/api/orders').flush(null, { status: 401, statusText: 'Unauthorized' });
  ctrl.expectOne('/api/auth/refresh').flush(null, { status: 401, statusText: 'Unauthorized' });

  expect(error?.status).toBe(401);
  expect(auth.accessToken()).toBeNull();
  expect(navigate).toHaveBeenCalledWith('/login');
});

it('expectOne failure message', () => {
  TestBed.configureTestingModule({ providers: [provideHttpClient(), provideHttpClientTesting()] });
  const http = TestBed.inject(HttpTestingController);
  TestBed.inject(UserApi).getUser(1).subscribe();
  let message = '';
  try {
    http.expectOne('/api/user/1');
  } catch (e) {
    message = (e as Error).message;
  }
  let verifyMessage = '';
  try {
    http.verify();
  } catch (e) {
    verifyMessage = (e as Error).message;
  }
  http.expectOne('/api/users/1').flush({});
  http.verify();
});
// expectOne: Expected one matching request for criteria "Match URL: /api/user/1", found none. Requests received are: GET /api/users/1.
// verify: Expected no open requests, found 1: GET /api/users/1