// La vista guarda un Date porque el <input type="date"> se lo dio así
tarea.fechaLimite = new Date('2026-09-30');

// El modelo compara cadenas ISO
estaVencida(fechaLimite, estado, hoy) { return fechaLimite < hoy && estado !== 'hecha'; }
// new Date(...) < '2026-09-20'  →  comparación entre objeto y cadena: siempre false

// Y al serializar
JSON.stringify(tarea)   // "fechaLimite": "2026-09-30T00:00:00.000Z"   ← ya no casa con 'yyyy-MM-dd'

// pruebas/integracion/persistencia.test.js
import { Tablero } from '../../js/modelo/tablero.js';
import { RepositorioLocal } from '../../js/datos/repositorio-local.js';
import { almacenFalso } from '../ayudas/almacen-falso.js';
import { unTablero, HOY } from '../ayudas/backlog-de-prueba.js';

describe('Integración · Tablero ↔ RepositorioLocal', () => {
  let almacen, repositorio;

  beforeEach(() => {
    almacen = almacenFalso();
    repositorio = new RepositorioLocal({ almacen });   // ← el repositorio REAL
  });

  test('el tablero guardado y recuperado conserva los números canónicos', () => {
    repositorio.guardar(unTablero());

    const recuperado = repositorio.cargar();

    expect(recuperado).toBeInstanceOf(Tablero);
    expect(recuperado.resumen(HOY)).toStrictEqual({
      total: 6, abiertas: 5, horasTotales: 48,
      horasAbiertas: 45, vencidas: 1, esfuerzo: 124
    });
  });

  test('los cambios de estado sobreviven al viaje completo', () => {
    const tablero = unTablero();
    tablero.cambiarEstado(2, 'en-curso');
    tablero.cambiarEstado(1, 'hecha');

    repositorio.guardar(tablero);
    const recuperado = repositorio.cargar();

    expect(recuperado.buscarPorId(2).estado).toBe('en-curso');
    expect(recuperado.buscarPorId(1).estado).toBe('hecha');
    expect(recuperado.horasAbiertas).toBe(33);         // 45 − 12
  });

  test('lo recuperado son instancias de Tarea con todos sus métodos', () => {
    repositorio.guardar(unTablero());

    const tarea = repositorio.cargar().buscarPorId(6);

    // No basta con que los datos estén: tienen que ser objetos vivos
    expect(tarea.estaVencida(HOY)).toBe(true);         // el método existe y funciona
    expect(tarea.esfuerzo).toBe(15);                   // 5 h × peso 3 de prioridad alta
    expect(() => tarea.cambiarEstado('hecha')).toThrow();   // R6 sigue vigente
  });

  test('lo guardado se revalida al cargar: un dato que viola R3 se rechaza', () => {
    const avisos = jest.spyOn(console, 'warn').mockImplementation(() => {});
    almacen.setItem('nomada:tablero:v1', JSON.stringify({
      nombre: 'Taller Nómada', version: 1,
      tareas: [{ id: 1, titulo: 'Manipulada', horasEstimadas: 999, fechaLimite: '2026-10-01' }]
    }));

    expect(repositorio.cargar()).toBeNull();           // ← nunca se confía en el almacén
    expect(avisos).toHaveBeenCalled();

    avisos.mockRestore();
  });
});

describe('Integración · el viaje de ida y vuelta', () => {
  test('el estado privado sobrevive al viaje entero', () => {
    const tablero = unTablero();
    tablero.cambiarEstado(2, 'en-curso');

    // El viaje completo, salto a salto, escrito a mano para verlo
    const objeto = tablero.toJSON();
    const cadena = JSON.stringify(objeto);
    almacen.setItem('nomada:tablero:v1', cadena);
    const recuperado = Tablero.importar(JSON.parse(almacen.getItem('nomada:tablero:v1')));

    expect(recuperado.buscarPorId(2).estado).toBe('en-curso');
  });

  test('ningún campo se pierde por el camino', () => {
    const original = unTablero();

    repositorio.guardar(original);
    const recuperado = repositorio.cargar();

    // Comparamos las representaciones completas: si falta un campo, salta aquí
    expect(recuperado.toJSON()).toStrictEqual(original.toJSON());
  });

  test('las fechas siguen siendo cadenas ISO de 10 caracteres, no objetos Date', () => {
    repositorio.guardar(unTablero());

    for (const tarea of repositorio.cargar()) {
      expect(typeof tarea.fechaLimite).toBe('string');
      expect(tarea.fechaLimite).toMatch(/^\d{4}-\d{2}-\d{2}$/);
    }
  });

  test('un revisor null se conserva como null, no se convierte en undefined (R8)', () => {
    repositorio.guardar(unTablero());

    const tarea = repositorio.cargar().buscarPorId(2);   // la 2 no tiene revisor

    expect(tarea.revisor).toBeNull();
    expect('revisor' in tarea.toJSON()).toBe(true);       // la clave EXISTE
  });

  test('las etiquetas se conservan como array, no como cadena', () => {
    repositorio.guardar(unTablero());

    expect(repositorio.cargar().buscarPorId(1).etiquetas).toEqual(['espacio', 'diseño']);
  });
});

// js/datos/migraciones.js
const MIGRACIONES = {
  1: (datos) => ({
    ...datos,
    version: 2,
    tareas: datos.tareas.map((t) => ({
      ...t,
      horas: t.horasEstimadas,          // renombrado
      creada: t.creada ?? '2026-01-01', // campo nuevo, con valor razonable
      horasEstimadas: undefined
    }))
  })
};

/** Aplica las migraciones necesarias hasta llegar a la versión actual. */
export function migrar(datos, versionActual = 2) {
  let actuales = datos;
  while ((actuales.version ?? 1) < versionActual) {
    const migracion = MIGRACIONES[actuales.version ?? 1];
    if (!migracion) throw new ErrorDeDatos(`No hay migración desde la versión ${actuales.version}`);
    actuales = migracion(actuales);
  }
  return actuales;
}

describe('Integración · migraciones de formato', () => {
  test('un tablero en formato v1 se migra y conserva las horas', () => {
    almacen.setItem('nomada:tablero:v1', JSON.stringify({
      nombre: 'Taller Nómada', version: 1,
      tareas: [{ id: 1, titulo: 'Rediseñar la sala', responsable: 'Iván', prioridad: 'alta',
                 estado: 'en-curso', etiquetas: ['espacio'], horasEstimadas: 12,
                 fechaLimite: '2026-09-30', revisor: 'Marta' }]
    }));

    const tablero = repositorio.cargar();

    expect(tablero.total).toBe(1);
    expect(tablero.buscarPorId(1).horas).toBe(12);        // migrado
    expect(tablero.buscarPorId(1).creada).toBe('2026-01-01');  // rellenado
  });

  test('un tablero ya en v2 se carga sin tocar', () => {
    const original = unTablero();
    repositorio.guardar(original);

    expect(repositorio.cargar().toJSON()).toStrictEqual(original.toJSON());
  });

  test('un formato futuro desconocido no destruye los datos', () => {
    almacen.setItem('nomada:tablero:v1', JSON.stringify({ version: 99, tareas: [] }));

    expect(repositorio.cargar()).toBeNull();              // se descarta con cuidado…
    expect(almacen.getItem('nomada:tablero:v1')).not.toBeNull();   // …pero NO se borra
  });
});

npm install --save-dev jest-environment-jsdom

/**
 * @jest-environment jsdom
 */
import { TableroVista } from '../../js/vista/tablero-vista.js';

// jest.config.js
export default {
  projects: [
    {
      displayName: 'unitarias',
      testEnvironment: 'node',
      testMatch: ['**/pruebas/{modelo,util,datos}/**/*.test.js'],
      transform: {}
    },
    {
      displayName: 'integracion',
      testEnvironment: 'jsdom',
      testMatch: ['**/pruebas/integracion/**/*.test.js'],
      transform: {}
    }
  ]
};

// pruebas/ayudas/montar-dom.js

/** Estructura mínima que TableroVista necesita para funcionar. */
const HTML = `
  <main>
    <form id="form-tarea" novalidate>
      <label for="titulo">Título</label>
      <input id="titulo" name="titulo" required minlength="3">

      <label for="responsable">Responsable</label>
      <select id="responsable" name="responsable">
        <option value="">Sin asignar</option>
        <option value="Iván">Iván</option>
        <option value="Lucía">Lucía</option>
        <option value="Marta">Marta</option>
      </select>

      <label for="horasEstimadas">Horas estimadas</label>
      <input id="horasEstimadas" name="horasEstimadas" type="number" min="1" max="40" required>

      <label for="fechaLimite">Fecha límite</label>
      <input id="fechaLimite" name="fechaLimite" type="date" required>

      <label for="etiquetas">Etiquetas</label>
      <input id="etiquetas" name="etiquetas">

      <button type="submit">Crear tarea</button>
      <div id="errores-form" role="alert" hidden></div>
    </form>

    <div id="tablero"></div>
    <output id="resumen" aria-live="polite"></output>
  </main>

  <template id="plantilla-columna">
    <section class="columna"><h2 class="columna__titulo"></h2><ul class="columna__lista"></ul></section>
  </template>

  <template id="plantilla-tarea">
    <li class="tarea">
      <h3 class="tarea__titulo"></h3>
      <p class="tarea__meta"></p>
      <ul class="tarea__etiquetas"></ul>
      <button data-accion="avanzar"></button>
      <button data-accion="reabrir">Devolver a pendiente</button>
    </li>
  </template>
`;

export function montarDom() {
  document.body.innerHTML = HTML;
  return {
    contenedor: document.querySelector('#tablero'),
    resumen: document.querySelector('#resumen'),
    formulario: document.querySelector('#form-tarea')
  };
}

export function limpiarDom() {
  document.body.innerHTML = '';
}

/**
 * @jest-environment jsdom
 */
import { TableroVista } from '../../js/vista/tablero-vista.js';
import { montarDom, limpiarDom } from '../ayudas/montar-dom.js';
import { unTablero, HOY } from '../ayudas/backlog-de-prueba.js';

describe('Integración · TableroVista sobre el DOM', () => {
  let dom, tablero, vista;

  beforeEach(() => {
    dom = montarDom();
    tablero = unTablero();
    vista = new TableroVista({ contenedor: dom.contenedor, resumen: dom.resumen, tablero, hoy: HOY });
    vista.render();
  });

  afterEach(() => { limpiarDom(); });

  test('pinta las seis tareas repartidas en sus tres columnas', () => {
    expect(document.querySelectorAll('[data-id]')).toHaveLength(6);
    expect(document.querySelectorAll('[data-estado="pendiente"]')).toHaveLength(3);
    expect(document.querySelectorAll('[data-estado="en-curso"]')).toHaveLength(2);
    expect(document.querySelectorAll('[data-estado="hecha"]')).toHaveLength(1);
  });

  test('marca visualmente la única tarea vencida (R10)', () => {
    const vencidas = document.querySelectorAll('.tarea--vencida');

    expect(vencidas).toHaveLength(1);
    expect(vencidas[0].dataset.id).toBe('6');
    expect(vencidas[0].textContent).toContain('Presupuesto de la carpintería');
  });

  test('el resumen muestra las 45 horas abiertas', () => {
    expect(dom.resumen.textContent).toContain('45');
  });

  test('reconciliar reutiliza los nodos en lugar de recrearlos', () => {
    const nodoAntes = document.querySelector('[data-id="2"]');

    tablero.cambiarEstado(2, 'en-curso');
    vista.actualizar();

    const nodoDespues = document.querySelector('[data-id="2"]');

    expect(nodoDespues).toBe(nodoAntes);                    // ← el MISMO nodo (toBe, identidad)
    expect(nodoDespues.dataset.estado).toBe('en-curso');    // …actualizado
  });
});

npm install --save-dev @testing-library/dom @testing-library/user-event @testing-library/jest-dom

import { screen, within } from '@testing-library/dom';
import '@testing-library/jest-dom';        // matchers como toBeVisible, toHaveTextContent

// ❌ Acoplada a la implementación: se rompe al renombrar una clase
expect(document.querySelector('.tarea__titulo').textContent).toBe('Rediseñar la sala polivalente');
const boton = document.querySelector('[data-accion="avanzar"]');

// ✅ Acoplada a lo que percibe el usuario: sobrevive a cualquier refactor de CSS
expect(screen.getByRole('heading', { name: 'Rediseñar la sala polivalente' })).toBeVisible();
const boton = screen.getByRole('button', { name: 'Empezar: Rediseñar la sala polivalente' });

// getBy: ya está renderizado
const titulo = screen.getByRole('heading', { name: 'Actualizar la web de reservas' });

// queryBy: la única forma correcta de afirmar una ausencia
expect(screen.queryByText('Cargando…')).not.toBeInTheDocument();

// findBy: espera a que aparezca (tras una petición, un render asíncrono…)
const aviso = await screen.findByRole('alert');

// AllBy: varios
expect(screen.getAllByRole('listitem')).toHaveLength(6);

screen.getByRole('button', { name: 'Crear tarea' });
screen.getByRole('heading', { name: /rediseñar la sala/i });    // regex: tolerante a mayúsculas
screen.getByRole('textbox', { name: 'Título' });                // input de texto, por su <label>
screen.getByRole('combobox', { name: 'Responsable' });          // <select>
screen.getByRole('spinbutton', { name: 'Horas estimadas' });    // input type=number
screen.getByRole('list');                                        // <ul> / <ol>
screen.getByRole('listitem');                                    // <li>
screen.getByRole('alert');                                       // role="alert" o aria-live=assertive
screen.getByRole('status');                                      // aria-live="polite"
screen.getByLabelText('Fecha límite');                           // por su etiqueta
screen.getByText(/45 h abiertas/);                               // por su texto

const columnaPendientes = screen.getByRole('region', { name: 'Pendientes' });
const tareas = within(columnaPendientes).getAllByRole('listitem');

expect(tareas).toHaveLength(3);
expect(within(tareas[0]).getByRole('button')).toHaveTextContent('Empezar');

expect(elemento).toBeInTheDocument();
expect(elemento).toBeVisible();                 // considera hidden, display:none, visibility
expect(boton).toBeDisabled();
expect(campo).toHaveValue('Revisar extintores');
expect(campo).toBeInvalid();                    // aria-invalid o validación nativa
expect(elemento).toHaveClass('tarea--vencida');
expect(elemento).toHaveTextContent(/45/);
expect(campo).toHaveFocus();
expect(campo).toHaveAccessibleName('Horas estimadas');

import userEvent from '@testing-library/user-event';

test('escribir en el formulario dispara la validación tras el retardo', async () => {
  const usuario = userEvent.setup();          // ← una vez por prueba

  await usuario.type(screen.getByLabelText('Título'), 'Revisar extintores');
  await usuario.selectOptions(screen.getByLabelText('Responsable'), 'Marta');
  await usuario.click(screen.getByRole('button', { name: 'Crear tarea' }));
});

beforeEach(() => { jest.useFakeTimers(); });

test('el buscador filtra 300 ms después de dejar de teclear', async () => {
  const usuario = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });

  await usuario.type(screen.getByLabelText('Buscar'), 'carpint');

  expect(screen.getAllByRole('listitem')).toHaveLength(6);   // aún sin filtrar

  jest.advanceTimersByTime(300);

  expect(screen.getAllByRole('listitem')).toHaveLength(1);   // ya filtrado
});

describe('Integración · delegación de eventos (06-04)', () => {
  let usuario, dom, tablero, vista;

  beforeEach(() => {
    usuario = userEvent.setup();
    dom = montarDom();
    tablero = unTablero();
    vista = new TableroVista({ contenedor: dom.contenedor, resumen: dom.resumen, tablero, hoy: HOY });
    vista.render();
    conectarAcciones({ contenedor: dom.contenedor, tablero, vista });
  });

  afterEach(() => { limpiarDom(); });

  test('pulsar Empezar cambia el estado en el modelo y en la vista', async () => {
    const tarjeta = screen.getByRole('listitem', { name: /cartelería del taller/i });

    await usuario.click(within(tarjeta).getByRole('button', { name: /empezar/i }));

    expect(tablero.buscarPorId(2).estado).toBe('en-curso');            // el MODELO
    expect(tarjeta.dataset.estado).toBe('en-curso');                   // la VISTA
    expect(within(tarjeta).getByRole('button', { name: /marcar hecha/i })).toBeInTheDocument();
  });

  test('el resumen se recalcula tras cada acción', async () => {
    expect(dom.resumen).toHaveTextContent(/45/);

    const tarjeta = screen.getByRole('listitem', { name: /rediseñar la sala/i });
    await usuario.click(within(tarjeta).getByRole('button', { name: /marcar hecha/i }));

    expect(dom.resumen).toHaveTextContent(/33/);                       // 45 − 12
  });

  test('el botón de la tarea hecha está desactivado y no hace nada', async () => {
    const tarjeta = screen.getByRole('listitem', { name: /inventario de tintas/i });
    const boton = within(tarjeta).getByRole('button', { name: /completada/i });

    expect(boton).toBeDisabled();

    await usuario.click(boton);

    expect(tablero.buscarPorId(4).estado).toBe('hecha');               // sin cambios
  });

  test('la delegación funciona con tarjetas creadas DESPUÉS de conectar el oyente', async () => {
    tablero.agregar(unaTarea({ id: 7, titulo: 'Revisar extintores', estado: 'pendiente',
                               horasEstimadas: 2, responsable: 'Marta' }));
    vista.actualizar();

    const nueva = screen.getByRole('listitem', { name: /revisar extintores/i });
    await usuario.click(within(nueva).getByRole('button', { name: /empezar/i }));

    expect(tablero.buscarPorId(7).estado).toBe('en-curso');
  });

  test('un clic en el hueco entre tarjetas no rompe nada', async () => {
    await usuario.click(dom.contenedor);

    expect(tablero.resumen(HOY).horasAbiertas).toBe(45);
  });
});

describe('Integración · formulario → modelo → render (06-07)', () => {
  let usuario, dom, tablero, vista, repositorio;

  beforeEach(() => {
    usuario = userEvent.setup();
    dom = montarDom();
    tablero = unTablero();
    repositorio = new RepositorioLocal({ almacen: almacenFalso() });
    vista = new TableroVista({ contenedor: dom.contenedor, resumen: dom.resumen, tablero, hoy: HOY });
    vista.render();
    conectarFormulario({ formulario: dom.formulario, tablero, siguienteId: () => 7,
                         alCrear: () => { vista.actualizar(); repositorio.guardar(tablero); }, hoy: HOY });
  });

  afterEach(() => { limpiarDom(); });

  async function rellenar({ titulo = 'Revisar extintores', responsable = 'Marta',
                            horas = '2', fecha = '2026-10-20', etiquetas = 'seguridad' } = {}) {
    await usuario.type(screen.getByLabelText('Título'), titulo);
    if (responsable) await usuario.selectOptions(screen.getByLabelText('Responsable'), responsable);
    await usuario.type(screen.getByLabelText('Horas estimadas'), horas);
    await usuario.type(screen.getByLabelText('Fecha límite'), fecha);
    if (etiquetas) await usuario.type(screen.getByLabelText('Etiquetas'), etiquetas);
  }

  test('una tarea válida llega al modelo, a la vista y al almacén', async () => {
    await rellenar();
    await usuario.click(screen.getByRole('button', { name: 'Crear tarea' }));

    // 1 · El modelo
    expect(tablero.total).toBe(7);
    expect(tablero.buscarPorId(7)).toMatchObject({
      titulo: 'Revisar extintores', responsable: 'Marta',
      horasEstimadas: 2, estado: 'pendiente'                    // R5
    });

    // 2 · La vista
    expect(screen.getByRole('listitem', { name: /revisar extintores/i })).toBeVisible();

    // 3 · El almacén
    expect(repositorio.cargar().total).toBe(7);

    // 4 · El formulario se ha vaciado
    expect(screen.getByLabelText('Título')).toHaveValue('');
  });

  test('las etiquetas se normalizan según R9 en todo el recorrido', async () => {
    await rellenar({ etiquetas: 'Seguridad, SEGURIDAD , extintores' });
    await usuario.click(screen.getByRole('button', { name: 'Crear tarea' }));

    expect(tablero.buscarPorId(7).etiquetas).toEqual(['seguridad', 'extintores']);
    expect(repositorio.cargar().buscarPorId(7).etiquetas).toEqual(['seguridad', 'extintores']);
  });

  test('un título vacío muestra el error accesible y NO toca el modelo', async () => {
    await rellenar({ titulo: '' });
    await usuario.click(screen.getByRole('button', { name: 'Crear tarea' }));

    expect(tablero.total).toBe(6);                              // el modelo intacto
    expect(screen.getByRole('alert')).toBeVisible();
    expect(screen.getByLabelText('Título')).toBeInvalid();      // aria-invalid="true"
    expect(screen.getByLabelText('Título')).toHaveFocus();      // el foco va al campo
  });

  test('99 horas incumple R3 y el error identifica el campo correcto', async () => {
    await rellenar({ horas: '99' });
    await usuario.click(screen.getByRole('button', { name: 'Crear tarea' }));

    expect(tablero.total).toBe(6);
    expect(screen.getByRole('alert')).toHaveTextContent(/40/);
    expect(screen.getByLabelText('Horas estimadas')).toBeInvalid();
  });

  test('una fecha límite anterior a hoy se rechaza (R4)', async () => {
    await rellenar({ fecha: '2026-09-01' });
    await usuario.click(screen.getByRole('button', { name: 'Crear tarea' }));

    expect(tablero.total).toBe(6);
    expect(screen.getByLabelText('Fecha límite')).toBeInvalid();
  });

  test('tras corregir el error, el segundo envío funciona y los avisos desaparecen', async () => {
    await rellenar({ titulo: '' });
    await usuario.click(screen.getByRole('button', { name: 'Crear tarea' }));

    await usuario.type(screen.getByLabelText('Título'), 'Revisar extintores');
    await usuario.click(screen.getByRole('button', { name: 'Crear tarea' }));

    expect(tablero.total).toBe(7);
    expect(screen.queryByRole('alert')).not.toBeInTheDocument();   // ← queryBy para la ausencia
  });

  test('el formulario se puede completar y enviar solo con el teclado', async () => {
    await usuario.tab();                                    // Título
    await usuario.keyboard('Revisar extintores');
    await usuario.tab();                                    // Responsable
    await usuario.keyboard('Marta');
    await usuario.tab();                                    // Horas
    await usuario.keyboard('2');
    await usuario.tab();                                    // Fecha
    await usuario.keyboard('2026-10-20');
    await usuario.tab();                                    // Etiquetas
    await usuario.tab();                                    // Botón
    await usuario.keyboard('{Enter}');

    expect(tablero.total).toBe(7);
  });
});

describe('Integración · estados de interfaz ante fallos de red (07-03)', () => {
  let usuario, dom, red;

  beforeEach(() => {
    usuario = userEvent.setup();
    dom = montarDom();
    red = instalarFetchFalso();
  });

  afterEach(() => { limpiarDom(); jest.restoreAllMocks(); });

  test('muestra "cargando", luego las seis tareas', async () => {
    let resolver;
    red.mockReturnValue(new Promise((r) => { resolver = r; }));

    const carga = arrancarAplicacion({ dom });

    expect(screen.getByRole('status')).toHaveTextContent(/cargando/i);

    resolver(respuestaJson(datosBacklog));
    await carga;

    expect(await screen.findAllByRole('listitem')).toHaveLength(6);
    expect(screen.queryByText(/cargando/i)).not.toBeInTheDocument();
  });

  test('un 500 muestra un mensaje accesible y un botón de reintentar', async () => {
    red.mockResolvedValue(respuestaJson({ mensaje: 'Error interno' }, { status: 500 }));

    await arrancarAplicacion({ dom });

    const aviso = await screen.findByRole('alert');
    expect(aviso).toHaveTextContent(/servidor/i);
    expect(screen.getByRole('button', { name: /reintentar/i })).toBeVisible();
  });

  test('el botón de reintentar vuelve a pedir y muestra las tareas', async () => {
    red.mockResolvedValueOnce(respuestaJson({ mensaje: 'Error' }, { status: 500 }))
       .mockResolvedValueOnce(respuestaJson(datosBacklog));

    await arrancarAplicacion({ dom });
    await usuario.click(await screen.findByRole('button', { name: /reintentar/i }));

    expect(await screen.findAllByRole('listitem')).toHaveLength(6);
    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
    expect(red).toHaveBeenCalledTimes(2);
  });

  test('una lista vacía muestra el estado vacío, no un error', async () => {
    red.mockResolvedValue(respuestaJson([]));

    await arrancarAplicacion({ dom });

    expect(await screen.findByText(/no hay tareas/i)).toBeVisible();
    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
  });

  test('sin conexión, se avisa y se conserva lo que hubiera en el almacén', async () => {
    const almacen = almacenFalso();
    new RepositorioLocal({ almacen }).guardar(unTablero());
    red.mockRejectedValue(new TypeError('Failed to fetch'));

    await arrancarAplicacion({ dom, almacen });

    expect(await screen.findByRole('alert')).toHaveTextContent(/conexión/i);
    expect(screen.getAllByRole('listitem')).toHaveLength(6);   // ← lo local sigue visible
  });
});

// pruebas/ayudas/servidor-falso.js
import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';
import { datosBacklog } from '../../js/datos/backlog.js';

const BASE = 'https://api.tallernomada.example/v1';

export const manejadores = [
  http.get(`${BASE}/tareas`, ({ request }) => {
    const responsable = new URL(request.url).searchParams.get('responsable');
    const tareas = responsable
      ? datosBacklog.filter((t) => t.responsable === responsable)
      : datosBacklog;
    return HttpResponse.json(tareas);
  }),

  http.post(`${BASE}/tareas`, async ({ request }) => {
    const datos = await request.json();
    if (!datos.titulo?.trim()) {
      return HttpResponse.json({ mensaje: 'El título es obligatorio' }, { status: 422 });
    }
    return HttpResponse.json({ ...datos, id: 7, estado: 'pendiente' }, { status: 201 });
  }),

  http.patch(`${BASE}/tareas/:id`, async ({ params, request }) =>
    HttpResponse.json({ ...datosBacklog.find((t) => t.id === Number(params.id)),
                        ...(await request.json()) }))
];

export const servidor = setupServer(...manejadores);

// Uso en las pruebas
beforeAll(() => servidor.listen({ onUnhandledRequest: 'error' }));
afterEach(() => servidor.resetHandlers());     // deshace las sobrescrituras por prueba
afterAll(() => servidor.close());

test('un 503 puntual activa el estado de error', async () => {
  // Sobrescribir SOLO para esta prueba
  servidor.use(http.get(`${BASE}/tareas`, () =>
    HttpResponse.json({ mensaje: 'No disponible' }, { status: 503 })));

  await arrancarAplicacion({ dom });

  expect(await screen.findByRole('alert')).toHaveTextContent(/servidor/i);
});

npm test -- --coverage

File                     | % Stmts | % Branch | Δ vs. solo unitarias
-------------------------|---------|----------|---------------------
 js/modelo/tarea.js      |   98.2  |   96.1   |  +1.8   (poco: ya estaba)
 js/modelo/tablero.js    |  100.0  |  100.0   |   0.0
 js/datos/repositorio…   |   94.7  |   89.5   | +63.4   ← el salto grande
 js/vista/tablero-vista  |   88.3  |   76.2   | +88.3   ← de cero
 js/vista/tarjeta.js     |   95.1  |   88.9   | +95.1   ← de cero
 js/vista/controlador.js |   91.4  |   80.0   | +91.4   ← de cero
 js/vista/formulario.js  |   86.9  |   79.3   | +86.9   ← de cero

// ❌ Frágil: 100 ms puede bastar hoy en tu portátil y no bastar en CI
await new Promise((r) => setTimeout(r, 100));
expect(screen.getByRole('listitem')).toBeInTheDocument();

// ✅ Espera a la CONDICIÓN, no a un tiempo. Reintenta hasta que se cumpla
expect(await screen.findByRole('listitem')).toBeInTheDocument();

// ✅ Para condiciones que no son "un elemento aparece"
await waitFor(() => {
  expect(tablero.total).toBe(7);
});

// ✅ Para esperar a que algo DESAPAREZCA
await waitForElementToBeRemoved(() => screen.queryByText(/cargando/i));

// 1 · Detectar dependencias de orden ejecutando en orden aleatorio
//     jest --randomize

// 2 · Limpiar SIEMPRE el DOM y los dobles entre pruebas
afterEach(() => {
  document.body.innerHTML = '';
  jest.restoreAllMocks();
  localStorage.clear();                  // jsdom sí lo implementa
});

// 3 · Fijar el reloj cuando el código lo lea directamente
beforeEach(() => { jest.useFakeTimers({ now: new Date('2026-09-20T09:00:00Z') }); });

// 4 · Hacer fallar cualquier petición no prevista
beforeAll(() => servidor.listen({ onUnhandledRequest: 'error' }));

pruebas/
  integracion/
    persistencia.test.js       modelo + RepositorioLocal + migraciones     (node)
    serializacion.test.js      el viaje toJSON → cadena → desdeJSON        (node)
    render.test.js             TableroVista + tarjeta + reconciliar        (jsdom)
    delegacion.test.js         controlador + eventos + modelo + vista      (jsdom)
    formulario.test.js         formulario → modelo → render → almacén      (jsdom)
    red.test.js                estados de interfaz ante fallos de red      (jsdom)
  ayudas/
    montar-dom.js              el HTML mínimo
    almacen-falso.js           el fake de Web Storage (08-04)
    red-falsa.js               respuestas de fetch (08-04)
    servidor-falso.js          los manejadores de MSW
    backlog-de-prueba.js       HOY, unaTarea, unTablero, capturar

$ npm test

 PASS  unitarias  pruebas/modelo/tarea.test.js
 PASS  unitarias  pruebas/modelo/tablero.test.js
 PASS  unitarias  pruebas/util/fechas.test.js
 PASS  unitarias  pruebas/util/tiempo.test.js
 PASS  unitarias  pruebas/datos/api-tareas.test.js
 PASS  unitarias  pruebas/datos/http.test.js
 PASS  unitarias  pruebas/datos/repositorio-local.test.js
 PASS  integracion  pruebas/integracion/persistencia.test.js
 PASS  integracion  pruebas/integracion/serializacion.test.js
 PASS  integracion  pruebas/integracion/render.test.js
 PASS  integracion  pruebas/integracion/delegacion.test.js
 PASS  integracion  pruebas/integracion/formulario.test.js
 PASS  integracion  pruebas/integracion/red.test.js

Test Suites: 13 passed, 13 total
Tests:       124 passed, 124 total
Time:        3.71 s

      - name: Ejecutar las pruebas
        run: npm test -- --coverage --ci

// A
test('las tareas aparecen tras cargar', async () => {
  arrancarAplicacion({ dom });
  await new Promise((r) => setTimeout(r, 200));
  expect(screen.getAllByRole('listitem')).toHaveLength(6);
});

// B
const repositorio = new RepositorioLocal({ almacen: almacenFalso() });

test('guarda el tablero', () => {
  repositorio.guardar(unTablero());
  expect(repositorio.cargar().total).toBe(6);
});

test('limpiar deja el almacén vacío', () => {
  repositorio.limpiar();
  expect(repositorio.cargar()).toBeNull();
});

// C
test('la tarea vencida se marca', () => {
  const vista = new TableroVista({ contenedor: dom.contenedor, tablero: unTablero() });
  vista.render();
  expect(document.querySelectorAll('.tarea--vencida')).toHaveLength(1);
});

/**
 * @jest-environment jsdom
 */
import { jest } from '@jest/globals';
import { screen } from '@testing-library/dom';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';

import { TableroVista } from '../../js/vista/tablero-vista.js';
import { conectarEnrutador, leerEstadoDeUrl } from '../../js/vista/enrutador.js';
import { conectarFiltros } from '../../js/vista/controlador.js';
import { montarDom, limpiarDom } from '../ayudas/montar-dom.js';
import { unTablero, HOY } from '../ayudas/backlog-de-prueba.js';

describe('Integración · filtros ↔ URL (07-06)', () => {
  let usuario, dom, tablero, vista;

  function arrancar(busqueda = '') {
    // jsdom permite reescribir la URL sin recargar
    history.replaceState(null, '', `/${busqueda}`);

    dom = montarDom();
    tablero = unTablero();
    vista = new TableroVista({ contenedor: dom.contenedor, resumen: dom.resumen, tablero, hoy: HOY });
    vista.actualizar({ filtros: leerEstadoDeUrl() });
    conectarFiltros({ contenedor: document.body, vista });
    conectarEnrutador(vista);
  }

  beforeEach(() => {
    jest.useFakeTimers();
    usuario = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });  // ← imprescindible
  });

  afterEach(() => {
    jest.useRealTimers();
    limpiarDom();
    history.replaceState(null, '', '/');
  });

  test('(a) arrancar con ?responsable=Iván muestra 3 tarjetas sin tocar el modelo', () => {
    arrancar('?responsable=Iván');

    expect(screen.getAllByRole('listitem')).toHaveLength(3);
    expect(tablero.total).toBe(6);                        // el MODELO no se filtra
    expect(dom.resumen).toHaveTextContent(/45/);          // el resumen es del tablero completo
  });

  test('(b) pulsar el filtro de Lucía añade una entrada al historial', async () => {
    arrancar();
    const antes = history.length;

    await usuario.click(screen.getByRole('button', { name: 'Lucía' }));

    expect(new URL(location.href).searchParams.get('responsable')).toBe('Lucía');
    expect(history.length).toBe(antes + 1);               // pushState, no replaceState
    expect(screen.getAllByRole('listitem')).toHaveLength(1);
  });

  test('(c) el buscador usa replaceState y filtra tras 300 ms', async () => {
    arrancar();
    const antes = history.length;

    await usuario.type(screen.getByLabelText('Buscar'), 'carpint');

    expect(screen.getAllByRole('listitem')).toHaveLength(6);   // aún sin filtrar

    jest.advanceTimersByTime(300);

    expect(screen.getAllByRole('listitem')).toHaveLength(1);
    expect(new URL(location.href).searchParams.get('q')).toBe('carpint');
    expect(history.length).toBe(antes);                        // replaceState: no crece
  });

  test('(d) popstate restaura el filtro anterior', async () => {
    arrancar();

    await usuario.click(screen.getByRole('button', { name: 'Iván' }));
    expect(screen.getAllByRole('listitem')).toHaveLength(3);

    // jsdom no navega solo: se simula el evento con el estado que habría
    history.replaceState({ responsable: null, texto: '', orden: 'prioridad' }, '', '/');
    window.dispatchEvent(new PopStateEvent('popstate', { state: { responsable: null } }));

    expect(screen.getAllByRole('listitem')).toHaveLength(6);
  });
});

// js/datos/migraciones.js
import { ErrorDeDatos } from '../modelo/errores.js';

export const VERSION_ACTUAL = 2;

const MIGRACIONES = {
  1: (datos) => ({
    nombre: datos.nombre,
    version: 2,
    tareas: datos.tareas.map((t) => ({
      ...t,
      creada: t.creada ?? '2026-01-01',
      // null se conserva como null: NO se envuelve en un objeto vacío
      revisor: t.revisor == null ? null : { nombre: t.revisor, notificado: false }
    }))
  })
};

export function migrar(datos) {
  let actuales = datos;
  let vueltas = 0;

  while ((actuales.version ?? 1) < VERSION_ACTUAL) {
    if (vueltas++ > 10) throw new ErrorDeDatos('Bucle de migración detectado');
    const paso = MIGRACIONES[actuales.version ?? 1];
    if (!paso) throw new ErrorDeDatos(`Sin migración desde v${actuales.version}`);
    actuales = paso(actuales);
  }

  if ((actuales.version ?? 1) > VERSION_ACTUAL) {
    throw new ErrorDeDatos(`Formato v${actuales.version} más reciente que la aplicación`);
  }
  return actuales;
}

// pruebas/integracion/migraciones.test.js
import { jest } from '@jest/globals';
import { RepositorioLocal } from '../../js/datos/repositorio-local.js';
import { almacenFalso } from '../ayudas/almacen-falso.js';
import { unTablero, HOY } from '../ayudas/backlog-de-prueba.js';
import { datosBacklog } from '../../js/datos/backlog.js';

const v1 = () => ({ nombre: 'Taller Nómada', version: 1, tareas: datosBacklog });

describe('Integración · migración v1 → v2', () => {
  let almacen, repositorio, avisos;

  beforeEach(() => {
    almacen = almacenFalso();
    repositorio = new RepositorioLocal({ almacen });
    avisos = jest.spyOn(console, 'warn').mockImplementation(() => {});
  });

  afterEach(() => { avisos.mockRestore(); });

  test('un tablero v1 completo migra conservando los números canónicos', () => {
    almacen.setItem('nomada:tablero:v1', JSON.stringify(v1()));

    const tablero = repositorio.cargar();

    expect(tablero.total).toBe(6);
    expect(tablero.resumen(HOY)).toMatchObject({
      horasAbiertas: 45, horasTotales: 48, vencidas: 1, esfuerzo: 124
    });
    expect(tablero.buscarPorId(1).creada).toBe('2026-01-01');
  });

  test('un revisor con nombre se convierte en objeto', () => {
    almacen.setItem('nomada:tablero:v1', JSON.stringify(v1()));

    expect(repositorio.cargar().buscarPorId(1).revisor)
      .toStrictEqual({ nombre: 'Marta', notificado: false });
  });

  test('un revisor null sigue siendo null, no un objeto con nombre null', () => {
    almacen.setItem('nomada:tablero:v1', JSON.stringify(v1()));

    const tarea = repositorio.cargar().buscarPorId(2);      // la 2 no tiene revisor

    expect(tarea.revisor).toBeNull();
    expect(tarea.revisor).not.toStrictEqual({ nombre: null, notificado: false });
  });

  test('un tablero ya en v2 no se toca', () => {
    const original = unTablero();
    repositorio.guardar(original);

    expect(repositorio.cargar().toJSON()).toStrictEqual(original.toJSON());
  });

  test('una versión futura desconocida se descarta SIN borrar el original', () => {
    const futuro = JSON.stringify({ nombre: 'X', version: 99, tareas: [] });
    almacen.setItem('nomada:tablero:v2', futuro);

    expect(repositorio.cargar()).toBeNull();
    expect(almacen.getItem('nomada:tablero:v2')).toBe(futuro);   // intacto
    expect(avisos).toHaveBeenCalled();
  });

  test('tras migrar y guardar, los datos viven bajo la clave v2', () => {
    almacen.setItem('nomada:tablero:v1', JSON.stringify(v1()));

    repositorio.guardar(repositorio.cargar());

    expect(almacen.getItem('nomada:tablero:v2')).not.toBeNull();
    expect(JSON.parse(almacen.getItem('nomada:tablero:v2')).version).toBe(2);
  });
});

// A · corregida: esperar a la CONDICIÓN, no a un tiempo
test('las tareas aparecen tras cargar', async () => {
  await arrancarAplicacion({ dom });                       // ← esperar la promesa

  expect(await screen.findAllByRole('listitem')).toHaveLength(6);   // ← findBy reintenta
});

// B · corregida: estado nuevo en cada prueba
describe('RepositorioLocal', () => {
  let almacen, repositorio;

  beforeEach(() => {
    almacen = almacenFalso();
    repositorio = new RepositorioLocal({ almacen });
  });

  test('guardar y cargar devuelve las seis tareas', () => {
    repositorio.guardar(unTablero());

    expect(repositorio.cargar().total).toBe(6);
  });

  test('limpiar deja el almacén vacío', () => {
    repositorio.guardar(unTablero());                      // ← prepara SU propio estado

    repositorio.limpiar();

    expect(repositorio.cargar()).toBeNull();
    expect(almacen.length).toBe(0);
  });
});

// C · corregida: la fecha entra como dato, y se consulta por rol
test('la tarea vencida se marca visualmente (R10)', () => {
  const vista = new TableroVista({
    contenedor: dom.contenedor, resumen: dom.resumen,
    tablero: unTablero(), hoy: HOY                         // ← '2026-09-20', fijo
  });
  vista.render();

  const vencida = screen.getByRole('listitem', { name: /presupuesto de la carpintería/i });

  expect(vencida).toHaveClass('tarea--vencida');
  expect(document.querySelectorAll('.tarea--vencida')).toHaveLength(1);
});