// user-list.component.ts
import { Component, inject, OnInit } from '@angular/core';
import { UserService, User } from './user.service';

@Component({
  selector: 'app-user-list',
  standalone: true,
  template: `
    <ul>
      @for (user of users; track user.id) {
        <li>{{ user.name }}</li>
      }
    </ul>
  `,
})
export class UserListComponent implements OnInit {
  private userService = inject(UserService);
  users: User[] = [];

  ngOnInit() {
    this.userService.getUsers().subscribe((users) => (this.users = users));
  }
}

// user-list.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { of } from 'rxjs';
import { UserListComponent } from './user-list.component';
import { UserService } from './user.service';

describe('UserListComponent', () => {
  let fixture: ComponentFixture<UserListComponent>;

  // A fake service returning fixed data as an Observable — no real HTTP.
  const fakeUserService = {
    getUsers: () => of([{ id: 1, name: 'Test User' }, { id: 2, name: 'Another User' }]),
  };

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [UserListComponent],
      providers: [{ provide: UserService, useValue: fakeUserService }],
    }).compileComponents();

    fixture = TestBed.createComponent(UserListComponent);
    fixture.detectChanges(); // triggers ngOnInit + render
  });

  it('renders the names returned by the (fake) service', () => {
    const text = fixture.nativeElement.textContent;
    expect(text).toContain('Test User');
    expect(text).toContain('Another User');
  });
});

/*
  Notes:
  - { provide: UserService, useValue: fakeUserService } swaps the real
    service for the fake one — the component injects UserService as
    usual and is none the wiser, so no real API call ever happens.
  - of([...]) wraps the fixed data in an Observable, matching the real
    getUsers() signature the component subscribes to.
  - detectChanges() runs ngOnInit (which subscribes) and renders the
    resulting list, so the assertions see the fake data in the DOM.
*/