8. Testing, debugging y calidad en Angular

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting } from '@angular/common/http/testing';
import { provideRouter } from '@angular/router';
import { TaskListComponent } from './task-list.component';
import { TaskService } from './task.service';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      // Un componente standalone se IMPORTA, no se declara.
      imports: [TaskListComponent],
      providers: [
        provideHttpClient(),
        provideHttpClientTesting(),   // debe ir DESPUÉS de provideHttpClient
        provideRouter([]),            // basta con rutas vacías si no navegas
      ],
    }).compileComponents();

    fixture = TestBed.createComponent(TaskListComponent);
    componente = fixture.componentInstance;
  });

  it('se crea', () => {
    fixture.detectChanges();          // dispara ngOnInit y el primer render
    expect(componente).toBeTruthy();
  });
});

// 1. Renderizar. Sin esto la plantilla NO se ha ejecutado todavía.
fixture.detectChanges();

// 2. Acceder al DOM
const raiz: HTMLElement = fixture.nativeElement;
const titulo = raiz.querySelector('h2');
expect(titulo?.textContent?.trim()).toBe('Mis tareas');

// 3. debugElement: envoltorio de Angular; permite consultar por directiva
//    y acceder al inyector del propio elemento.
const boton = fixture.debugElement.query(By.css('[data-testid="crear"]'));
const hijo  = fixture.debugElement.query(By.directive(TaskCardComponent));
const instanciaHija = hijo.componentInstance as TaskCardComponent;

// 4. Disparar eventos
boton.triggerEventHandler('click', null);          // vía Angular
raiz.querySelector('input')!.dispatchEvent(new Event('input'));  // vía DOM

// 5. Esperar a que se resuelvan las promesas pendientes
await fixture.whenStable();
fixture.detectChanges();

// --- Stub sencillo: casi siempre es suficiente ---
const taskServiceStub: Partial<TaskService> = {
  getTasks: () => of([{ id: 1, title: 'Revisar informe', done: false }]),
};

TestBed.configureTestingModule({
  imports: [TaskListComponent],
  providers: [{ provide: TaskService, useValue: taskServiceStub }],
});

// --- Spy con Jasmine ---
const spy = jasmine.createSpyObj<TaskService>('TaskService', ['getTasks', 'complete']);
spy.getTasks.and.returnValue(of([]));
expect(spy.complete).toHaveBeenCalledOnceWith(1);

// --- Spy con Jest ---
const spyJest = { getTasks: jest.fn().mockReturnValue(of([])) };
expect(spyJest.getTasks).toHaveBeenCalledTimes(1);

// --- Fake: implementación simplificada pero coherente ---
class FakeTaskRepository implements TaskRepository {
  private datos = new Map<number, Task>();
  async save(t: Task) { this.datos.set(t.id, t); return t; }
  async findById(id: number) { return this.datos.get(id) ?? null; }
}
// Un fake permite escribir tests de comportamiento reales
// (guardo y luego leo) en lugar de tests de interacción frágiles.

// Componente bajo prueba (resumido):
// @Component({ selector: 'app-task-card', standalone: true, template: `...` })
// export class TaskCardComponent {
//   readonly task = input.required<Task>();
//   readonly compacta = input(false);
//   readonly completar = output<number>();
// }

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

  beforeEach(() => {
    TestBed.configureTestingModule({ imports: [TaskCardComponent] });
    fixture = TestBed.createComponent(TaskCardComponent);
  });

  it('pinta el título de la tarea', () => {
    // Con entradas de señal se usa setInput, NO se asigna la propiedad.
    fixture.componentRef.setInput('task', crearTarea({ title: 'Revisar informe' }));
    fixture.detectChanges();

    const titulo = fixture.nativeElement.querySelector('[data-testid="titulo"]');
    expect(titulo.textContent.trim()).toBe('Revisar informe');
  });

  it('emite el identificador al pulsar completar', () => {
    fixture.componentRef.setInput('task', crearTarea({ id: 42 }));
    fixture.detectChanges();

    const emitidos: number[] = [];
    fixture.componentInstance.completar.subscribe(id => emitidos.push(id));

    fixture.nativeElement
      .querySelector('[data-testid="completar"]')
      .click();

    expect(emitidos).toEqual([42]);
  });
});

@Component({
  selector: 'app-task-card',          // MISMO selector que el real
  standalone: true,
  template: `<div data-testid="card-falsa">{{ task().title }}</div>`,
})
class TaskCardStubComponent {
  readonly task = input.required<Task>();   // MISMO contrato de entradas
  readonly completar = output<number>();
}

TestBed.configureTestingModule({ imports: [TaskListComponent] })
  .overrideComponent(TaskListComponent, {
    remove: { imports: [TaskCardComponent] },
    add:    { imports: [TaskCardStubComponent] },
  });

@Component({
  standalone: true,
  imports: [PanelComponent],
  template: `
    <app-panel [titulo]="titulo">
      <p data-testid="contenido">Texto proyectado</p>
      <button panel-acciones>Aceptar</button>
    </app-panel>
  `,
})
class AnfitrionComponent {
  titulo = 'Detalles';
}

it('proyecta el contenido y las acciones en sus ranuras', () => {
  const fixture = TestBed.createComponent(AnfitrionComponent);
  fixture.detectChanges();

  const panel = fixture.nativeElement.querySelector('app-panel');
  expect(panel.querySelector('[data-testid="contenido"]')).toBeTruthy();
  expect(panel.querySelector('.panel-acciones button')?.textContent)
    .toContain('Aceptar');
});

it('el total filtrado se recalcula al cambiar el filtro', () => {
  const store = TestBed.inject(TaskStore);

  store.cargarTareas([tarea({ done: true }), tarea({ done: false })]);

  // Leer una señal es simplemente invocarla. No hace falta detectChanges:
  // el grafo reactivo es síncrono.
  expect(store.pendientes().length).toBe(1);

  store.filtro.set('todas');
  expect(store.visibles().length).toBe(2);
});

// Testear un EFECTO requiere contexto de inyección y una detección de cambios,
// porque los efectos se planifican, no se ejecutan al instante.
it('guarda el filtro en localStorage', () => {
  TestBed.runInInjectionContext(() => {
    const store = TestBed.inject(TaskStore);
    store.filtro.set('hechas');
    TestBed.flushEffects();      // fuerza la ejecución de los efectos pendientes
    expect(localStorage.getItem('filtro')).toBe('hechas');
  });
});

import { TestScheduler } from 'rxjs/testing';

describe('flujo de búsqueda', () => {
  let scheduler: TestScheduler;

  beforeEach(() => {
    scheduler = new TestScheduler((real, esperado) => {
      expect(real).toEqual(esperado);
    });
  });

  it('descarta las pulsaciones rápidas y cancela la petición anterior', () => {
    scheduler.run(({ cold, expectObservable }) => {
      //                     tiempo →
      const teclas   = cold('a-b---------c|');   // 'a' y 'b' muy seguidas
      const respuesta = (t: string) => cold('--(r|)', { r: 'res-' + t });

      const resultado = teclas.pipe(
        debounceTime(3, scheduler),
        switchMap(t => respuesta(t)),
      );

      // 'a' se descarta por el debounce; solo sobreviven 'b' y 'c'.
      expectObservable(resultado).toBe('------r-----(s|)', {
        r: 'res-b',
        s: 'res-c',
      });
    });
  });
});

describe('TaskService', () => {
  let servicio: TaskService;
  let http: HttpTestingController;

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

  // Verifica que no quedaron peticiones sin atender: detecta llamadas
  // duplicadas o inesperadas que de otro modo pasarían desapercibidas.
  afterEach(() => http.verify());

  it('pide las tareas del proyecto con los parámetros correctos', () => {
    let recibidas: Task[] | undefined;
    servicio.getByProject(7, { page: 2 }).subscribe(r => (recibidas = r));

    const req = http.expectOne(
      r => r.url === '/api/projects/7/tasks' && r.params.get('page') === '2',
    );
    expect(req.request.method).toBe('GET');

    req.flush([{ id: 1, title: 'Revisar informe' }]);   // respuesta simulada

    expect(recibidas?.length).toBe(1);
  });

  it('convierte un 404 en un error de dominio', () => {
    let error: unknown;
    servicio.getById(99).subscribe({ error: e => (error = e) });

    http.expectOne('/api/tasks/99').flush(
      { message: 'No existe' },
      { status: 404, statusText: 'Not Found' },
    );

    expect(error).toBeInstanceOf(TaskNotFoundError);
  });

  it('no repite la petición si ya hay una en curso', () => {
    servicio.getById(1).subscribe();
    servicio.getById(1).subscribe();
    http.expectOne('/api/tasks/1');    // falla si hubiera dos
  });
});

it('añade la cabecera Authorization cuando hay sesión', () => {
  TestBed.configureTestingModule({
    providers: [
      provideHttpClient(withInterceptors([authInterceptor])),
      provideHttpClientTesting(),
      { provide: AuthStore, useValue: { token: () => 'abc123' } },
    ],
  });

  const cliente = TestBed.inject(HttpClient);
  const http = TestBed.inject(HttpTestingController);

  cliente.get('/api/tasks').subscribe();

  const req = http.expectOne('/api/tasks');
  expect(req.request.headers.get('Authorization')).toBe('Bearer abc123');
  req.flush([]);
});

// --- Guard funcional AISLADO: rápido y sin renderizar nada ---
it('redirige al login si no hay sesión', () => {
  TestBed.configureTestingModule({
    providers: [
      { provide: AuthStore, useValue: { autenticado: () => false } },
      provideRouter([]),
    ],
  });

  const resultado = TestBed.runInInjectionContext(() =>
    authGuard({} as ActivatedRouteSnapshot, {} as RouterStateSnapshot),
  );

  // El guard devuelve un UrlTree cuando quiere redirigir.
  expect(resultado).toBeInstanceOf(UrlTree);
  expect(String(resultado)).toBe('/login');
});

// --- Navegación real con RouterTestingHarness ---
it('muestra el detalle de la tarea al navegar', async () => {
  TestBed.configureTestingModule({
    providers: [
      provideRouter([
        { path: 'tasks/:id', component: TaskDetailComponent },
      ]),
      provideHttpClient(),
      provideHttpClientTesting(),
    ],
  });

  const harness = await RouterTestingHarness.create();
  const componente = await harness.navigateByUrl('/tasks/42', TaskDetailComponent);

  expect(componente.id()).toBe(42);
  expect(harness.routeNativeElement?.textContent).toContain('Tarea 42');
});

it('muestra el error de obligatorio al tocar y vaciar el título', () => {
  fixture.detectChanges();

  const control = componente.form.controls.title;
  control.setValue('');
  control.markAsTouched();
  fixture.detectChanges();

  expect(control.hasError('required')).toBe(true);
  const mensaje = fixture.nativeElement
    .querySelector('[data-testid="error-title"]');
  expect(mensaje.textContent).toContain('El título es obligatorio');
});

it('deshabilita el envío mientras el formulario es inválido', () => {
  fixture.detectChanges();
  const boton: HTMLButtonElement = fixture.nativeElement
    .querySelector('[data-testid="enviar"]');

  expect(boton.disabled).toBe(true);

  componente.form.setValue({ title: 'Nueva tarea', priority: 3 });
  fixture.detectChanges();
  expect(boton.disabled).toBe(false);
});

// Validador asíncrono: el reloj virtual evita esperas reales
it('marca el nombre como duplicado', fakeAsync(() => {
  const control = componente.form.controls.title;
  control.setValue('Existente');
  tick(300);                       // debounce del validador
  const req = http.expectOne(r => r.url.includes('/api/tasks/exists'));
  req.flush({ existe: true });
  tick();
  expect(control.hasError('duplicado')).toBe(true);
}));

// --- Uso de un harness existente ---
const loader = TestbedHarnessEnvironment.loader(fixture);
const campo = await loader.getHarness(MatInputHarness.with({
  selector: '[data-testid="titulo"]',
}));
await campo.setValue('Revisar informe');

const botones = await loader.getAllHarnesses(MatButtonHarness);
await botones[0].click();

// --- Harness propio para un componente del proyecto ---
export class TaskCardHarness extends ComponentHarness {
  static hostSelector = 'app-task-card';

  private readonly titulo = this.locatorFor('[data-testid="titulo"]');
  private readonly btnCompletar = this.locatorFor('[data-testid="completar"]');

  async obtenerTitulo(): Promise<string> {
    return (await this.titulo()).text();
  }
  async completar(): Promise<void> {
    return (await this.btnCompletar()).click();
  }
  async estaCompletada(): Promise<boolean> {
    return (await this.host()).hasClass('completada');
  }
}

// El test resultante se lee como una descripción de comportamiento:
it('marca la tarjeta como completada', async () => {
  const tarjeta = await loader.getHarness(TaskCardHarness);
  await tarjeta.completar();
  expect(await tarjeta.estaCompletada()).toBe(true);
});

import { test, expect } from '@playwright/test';

test.describe('gestión de tareas', () => {
  test.beforeEach(async ({ page }) => {
    // Cada test parte de datos propios y aislados: nada de depender
    // de lo que dejó el test anterior ni de la base de datos compartida.
    await page.request.post('/api/test/seed', {
      data: { proyecto: 'Proyecto de prueba', tareas: [] },
    });
    await page.goto('/projects/prueba/tasks');
  });

  test('crea una tarea y la ve en la lista', async ({ page }) => {
    // getByRole prueba también la accesibilidad: si el botón no tiene
    // nombre accesible, este test falla, y eso es exactamente lo que quieres.
    await page.getByRole('button', { name: 'Nueva tarea' }).click();

    await page.getByLabel('Título').fill('Revisar el informe mensual');
    await page.getByLabel('Prioridad').selectOption('1');
    await page.getByRole('button', { name: 'Guardar' }).click();

    // Aserción con espera automática: Playwright reintenta hasta el timeout.
    // No hace falta ningún waitForTimeout.
    await expect(
      page.getByRole('listitem').filter({ hasText: 'Revisar el informe mensual' }),
    ).toBeVisible();

    await expect(page.getByTestId('contador-tareas')).toHaveText('1 tarea');
  });

  test('un usuario sin permiso no ve el botón de borrar', async ({ page }) => {
    await iniciarSesionComo(page, 'invitado@taskflow.dev');
    await expect(page.getByRole('button', { name: 'Borrar' })).toHaveCount(0);
  });
});

// Encapsula los selectores en un solo sitio: si cambia la interfaz,
// se toca un archivo y no cuarenta tests.
export class TaskListPage {
  constructor(private readonly page: Page) {}

  readonly botonNueva = this.page.getByRole('button', { name: 'Nueva tarea' });
  readonly lista      = this.page.getByRole('list', { name: 'Tareas' });

  async ir(proyecto: string) {
    await this.page.goto(`/projects/${proyecto}/tasks`);
  }

  async crear(titulo: string) {
    await this.botonNueva.click();
    await this.page.getByLabel('Título').fill(titulo);
    await this.page.getByRole('button', { name: 'Guardar' }).click();
  }

  tarea(titulo: string) {
    return this.lista.getByRole('listitem').filter({ hasText: titulo });
  }
}

test('la lista de tareas mantiene su aspecto', async ({ page }) => {
  await page.goto('/projects/demo/tasks');
  // Compara con una captura de referencia versionada en el repositorio.
  await expect(page).toHaveScreenshot('lista-tareas.png', {
    maxDiffPixelRatio: 0.01,        // tolera el antialiasing
    mask: [page.getByTestId('fecha-relativa')],  // oculta lo que cambia siempre
  });
});

test('no hay violaciones de accesibilidad graves', async ({ page }) => {
  await page.goto('/projects/demo/tasks');
  const resultado = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa'])
    .analyze();
  expect(resultado.violations).toEqual([]);
});

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true
  },
  "angularCompilerOptions": {
    "strictTemplates": true,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "typeCheckHostBindings": true
  }
}

export default [
  {
    files: ['**/*.ts'],
    rules: {
      // Convenciones de Angular: detectan errores de diseño reales
      '@angular-eslint/no-empty-lifecycle-method': 'error',
      '@angular-eslint/use-lifecycle-interface': 'error',
      '@angular-eslint/no-output-native': 'error',
      '@angular-eslint/prefer-standalone': 'error',

      // Los tres que más fallos previenen en producción
      '@typescript-eslint/no-floating-promises': 'error',  // promesa sin await
      '@typescript-eslint/no-misused-promises': 'error',   // async donde no toca
      '@typescript-eslint/no-explicit-any': 'error',
    },
  },
  {
    files: ['**/*.html'],
    rules: {
      // Accesibilidad comprobada en cada guardado, gratis
      '@angular-eslint/template/alt-text': 'error',
      '@angular-eslint/template/label-has-associated-control': 'error',
      '@angular-eslint/template/click-events-have-key-events': 'error',
      '@angular-eslint/template/interactive-supports-focus': 'error',
    },
  },
];

// Cuando el escenario tiene varias entidades relacionadas, un constructor
// encadenable se lee mucho mejor que cinco factorías sueltas.
export class EscenarioProyecto {
  private proyecto = crearProyecto();
  private tareas: Task[] = [];

  conNombre(nombre: string) {
    this.proyecto = { ...this.proyecto, name: nombre };
    return this;
  }
  conTareasPendientes(n: number) {
    for (let i = 0; i < n; i++) {
      this.tareas.push(crearTarea({ projectId: this.proyecto.id, done: false }));
    }
    return this;
  }
  conTareaVencida() {
    this.tareas.push(crearTarea({
      projectId: this.proyecto.id,
      dueDate: new Date('2020-01-01'),
      done: false,
    }));
    return this;
  }
  construir() {
    return { proyecto: this.proyecto, tareas: this.tareas };
  }
}

// El test se lee como el enunciado de la historia de usuario:
const { proyecto, tareas } = new EscenarioProyecto()
  .conNombre('Migración')
  .conTareasPendientes(3)
  .conTareaVencida()
  .construir();

// --- Pipe: instancia directa, sin TestBed ---
describe('TiempoRelativoPipe', () => {
  const ahora = new Date('2026-05-10T12:00:00Z');
  const pipe = new TiempoRelativoPipe(() => ahora);   // reloj inyectado

  it.each([
    [new Date('2026-05-10T11:59:30Z'), 'hace unos segundos'],
    [new Date('2026-05-10T11:30:00Z'), 'hace 30 minutos'],
    [new Date('2026-05-09T12:00:00Z'), 'ayer'],
    [new Date('2026-05-01T12:00:00Z'), 'hace 9 días'],
    [new Date('2026-05-11T12:00:00Z'), 'mañana'],       // futuro: caso olvidado
  ])('convierte %s en "%s"', (fecha, esperado) => {
    expect(pipe.transform(fecha)).toBe(esperado);
  });
});

// --- Directiva: necesita un componente anfitrión ---
@Component({
  standalone: true,
  imports: [ResaltarDirective],
  template: `<p appResaltar="amarillo" data-testid="parrafo">Texto</p>`,
})
class AnfitrionDirectivaComponent {}

it('aplica el color de fondo al pasar el ratón', () => {
  const fixture = TestBed.createComponent(AnfitrionDirectivaComponent);
  fixture.detectChanges();

  const p: HTMLElement = fixture.nativeElement.querySelector('[data-testid="parrafo"]');
  p.dispatchEvent(new MouseEvent('mouseenter'));
  fixture.detectChanges();

  expect(p.style.backgroundColor).toBe('amarillo');
});

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      fail-fast: false          # no cortes el resto al fallar un fragmento
      matrix:
        shard: [1, 2, 3, 4]     # reparte la suite en 4 trabajos paralelos
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npx tsc --noEmit                    # tipos primero: es lo más rápido
      - run: npm run lint
      - run: npm test -- --shard=${{ matrix.shard }}/4
        env:
          TZ: Europe/Madrid                      # zona fija: evita fallos por horario
          LANG: es_ES.UTF-8

  e2e:
    runs-on: ubuntu-latest
    needs: test                                  # solo si lo barato ya pasó
    steps:
      - uses: actions/checkout@v4
      - run: npx playwright install --with-deps chromium
      - run: npm run e2e
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-trace
          path: test-results/                    # trazas para diagnosticar el fallo