Cómo probar componentes en Angular usando TestBed

// player-list.component.ts (Tradicional)
import { Component, OnInit } from '@angular/core';
import { PlayerService } from '../services/player.service';
import { Player } from '../models/player';
 
@Component({
  selector: 'app-player-list',
  templateUrl: './player-list.component.html',
})
export class PlayerListComponent implements OnInit {
  players: Player[] = [];
 
  constructor(private playerService: PlayerService) {}
 
  ngOnInit(): void {
    this.playerService.getPlayers().subscribe((res) => {
      this.players = res.data;
    });
  }
}

<!-- player-list.component.html (Tradicional) -->
<div *ngFor="let player of players" class="player-card">
  <app-player [player]="player"></app-player>
</div>

// player-list.component.ts (Moderno con Standalone y Signals)
import { Component, inject, OnInit, signal } from '@angular/core';
import { PlayerService } from '../services/player.service';
import { Player } from '../models/player';
import { PlayerComponent } from '../player/player.component';
 
@Component({
  selector: 'app-player-list',
  standalone: true,
  imports: [PlayerComponent],
  template: `
    @for (player of players(); track player.id) {
      <div class="player-card">
        <app-player [player]="player" />
      </div>
    } @empty {
      <p>No players found.</p>
    }
  `,
})
export class PlayerListComponent implements OnInit {
  private playerService = inject(PlayerService);
  players = signal<Player[]>([]);
 
  ngOnInit(): void {
    this.playerService.getPlayers().subscribe((res) => {
      this.players.set(res.data);
    });
  }
}

// player-list.component.spec.ts (Jasmine)
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PlayerListComponent } from './player-list.component';
import { PlayerService } from '../services/player.service';
 
describe('PlayerListComponent (Jasmine)', () => {
  let fixture: ComponentFixture<PlayerListComponent>;
  let component: PlayerListComponent;
 
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [PlayerListComponent],
      providers: [
        // Si no proveemos PlayerService aquí, obtenemos NullInjectorError
      ],
    }).compileComponents();
 
    fixture = TestBed.createComponent(PlayerListComponent);
    component = fixture.componentInstance;
  });
 
  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

NullInjectorError: No provider for PlayerService!

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { of } from 'rxjs';
import { PlayerListComponent } from './player-list.component';
import { PlayerService } from '../services/player.service';
 
describe('PlayerListComponent with Mock Service', () => {
  let fixture: ComponentFixture<PlayerListComponent>;
  let mockPlayerService: jasmine.SpyObj<PlayerService>;
 
  const FAKE_PLAYERS = {
    data: [
      { id: 1, name: 'LeBron James' },
      { id: 2, name: 'Stephen Curry' },
    ],
  };
 
  beforeEach(async () => {
    mockPlayerService = jasmine.createSpyObj<PlayerService>('PlayerService', ['getPlayers']);
    mockPlayerService.getPlayers.and.returnValue(of(FAKE_PLAYERS));
 
    await TestBed.configureTestingModule({
      declarations: [PlayerListComponent],
      providers: [
        { provide: PlayerService, useValue: mockPlayerService },
      ],
    }).compileComponents();
 
    fixture = TestBed.createComponent(PlayerListComponent);
  });
 
  it('should fetch players on ngOnInit', () => {
    fixture.detectChanges(); // Ejecuta ngOnInit()
 
    expect(mockPlayerService.getPlayers).toHaveBeenCalledTimes(1);
    expect(fixture.componentInstance.players.length).toBe(2);
  });
});

Error: NG0304: 'app-player' is not a known element

import { Component, Input } from '@angular/core';
import { By } from '@angular/platform-browser';
 
// 1. Componente stub ligero
@Component({
  selector: 'app-player',
  template: '<div class="player-stub">{{ player?.name }}</div>',
})
class MockPlayerComponent {
  @Input() player: any;
}
 
// 2. Agregar a declarations
beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [PlayerListComponent, MockPlayerComponent],
    providers: [{ provide: PlayerService, useValue: mockPlayerService }],
  }).compileComponents();
});
 
it('should render two player cards in the DOM', () => {
  fixture.detectChanges();
 
  const renderedPlayers = fixture.debugElement.queryAll(By.css('.player-stub'));
  expect(renderedPlayers.length).toBe(2);
});

// player-list.component.spec.ts (Angular moderno + Vitest)
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Component, input } from '@angular/core';
import { By } from '@angular/platform-browser';
import { of } from 'rxjs';
import { describe, it, expect, beforeEach, vi } from 'vitest';
import { PlayerListComponent } from './player-list.component';
import { PlayerService } from '../services/player.service';
import { Player } from '../models/player';
 
// 1. Componente mock Standalone moderno usando signal inputs
@Component({
  selector: 'app-player',
  standalone: true,
  template: '<div class="player-stub">{{ player().name }}</div>',
})
class MockPlayerComponent {
  player = input.required<Player>();
}
 
describe('PlayerListComponent (Vitest + Standalone)', () => {
  let fixture: ComponentFixture<PlayerListComponent>;
  let component: PlayerListComponent;
 
  // 2. Mock del servicio usando vi.fn() de Vitest
  const mockPlayerService = {
    getPlayers: vi.fn(),
  };
 
  const MOCK_DATA = {
    data: [
      { id: 1, name: 'Luka Dončić' },
      { id: 2, name: 'Giannis Antetokounmpo' },
    ],
  };
 
  beforeEach(async () => {
    vi.clearAllMocks();
    mockPlayerService.getPlayers.mockReturnValue(of(MOCK_DATA));
 
    await TestBed.configureTestingModule({
      // Los componentes standalone van en 'imports', NO en 'declarations'
      imports: [PlayerListComponent],
      providers: [
        { provide: PlayerService, useValue: mockPlayerService },
      ],
    })
    // Reemplazamos el componente hijo real con nuestro mock
    .overrideComponent(PlayerListComponent, {
      remove: { imports: [] },
      add: { imports: [MockPlayerComponent] },
    })
    .compileComponents();
 
    fixture = TestBed.createComponent(PlayerListComponent);
    component = fixture.componentInstance;
  });
 
  it('should instantiate the standalone component', () => {
    expect(component).toBeTruthy();
  });
 
  it('should populate the players signal on init', () => {
    fixture.detectChanges();
 
    expect(mockPlayerService.getPlayers).toHaveBeenCalledTimes(1);
    // Verificamos los valores del signal directamente en las aserciones
    expect(component.players().length).toBe(2);
    expect(component.players()[0].name).toBe('Luka Dončić');
  });
 
  it('should render the list of players in the DOM with @for', () => {
    fixture.detectChanges();
 
    const playerNodes = fixture.debugElement.queryAll(By.css('.player-stub'));
    expect(playerNodes.length).toBe(2);
    expect(playerNodes[0].nativeElement.textContent).toContain('Luka Dončić');
  });
});

// player.component.spec.ts (Pruebas de Signal Inputs con Vitest)
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { describe, it, expect, beforeEach } from 'vitest';
import { PlayerComponent } from './player.component';
 
describe('PlayerComponent (Signal Inputs)', () => {
  let fixture: ComponentFixture<PlayerComponent>;
  let component: PlayerComponent;
 
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [PlayerComponent],
    }).compileComponents();
 
    fixture = TestBed.createComponent(PlayerComponent);
    component = fixture.componentInstance;
  });
 
  it('should render updated player details when input signal changes', () => {
    // Asignar el valor del signal input directamente
    fixture.componentRef.setInput('player', { id: 10, name: 'Nikola Jokić' });
    fixture.detectChanges();
 
    const nameElement = fixture.nativeElement.querySelector('.player-name');
    expect(nameElement.textContent).toContain('Nikola Jokić');
  });
});