// La vista desa un Date perquè l'<input type="date"> l'hi ha donat així
tasca.dataLimit = new Date('2026-09-30');

// El model compara cadenes ISO
estaVencuda(dataLimit, estat, avui) { return dataLimit < avui && estat !== 'feta'; }
// new Date(...) < '2026-09-20'  →  comparació entre objecte i cadena: sempre false

// I en serialitzar
JSON.stringify(tasca)   // "dataLimit": "2026-09-30T00:00:00.000Z"   ← ja no casa amb 'yyyy-MM-dd'

// proves/integracio/persistencia.test.js
import { Tauler } from '../../js/model/tauler.js';
import { RepositoriLocal } from '../../js/dades/repositori-local.js';
import { magatzemFals } from '../ajudes/magatzem-fals.js';
import { unTauler, AVUI } from '../ajudes/backlog-de-prova.js';

describe('Integració · Tauler ↔ RepositoriLocal', () => {
  let magatzem, repositori;

  beforeEach(() => {
    magatzem = magatzemFals();
    repositori = new RepositoriLocal({ magatzem });   // ← el repositori REAL
  });

  test('el tauler desat i recuperat conserva els números canònics', () => {
    repositori.desar(unTauler());

    const recuperat = repositori.carregar();

    expect(recuperat).toBeInstanceOf(Tauler);
    expect(recuperat.resum(AVUI)).toStrictEqual({
      total: 6, obertes: 5, horesTotals: 48,
      horesObertes: 45, vencudes: 1, esforc: 124
    });
  });

  test("els canvis d'estat sobreviuen al viatge complet", () => {
    const tauler = unTauler();
    tauler.canviarEstat(2, 'en-curs');
    tauler.canviarEstat(1, 'feta');

    repositori.desar(tauler);
    const recuperat = repositori.carregar();

    expect(recuperat.cercarPerId(2).estat).toBe('en-curs');
    expect(recuperat.cercarPerId(1).estat).toBe('feta');
    expect(recuperat.horesObertes).toBe(33);          // 45 − 12
  });

  test('el que es recupera són instàncies de Tasca amb tots els seus mètodes', () => {
    repositori.desar(unTauler());

    const tasca = repositori.carregar().cercarPerId(6);

    // No n'hi ha prou que les dades hi siguin: han de ser objectes vius
    expect(tasca.estaVencuda(AVUI)).toBe(true);       // el mètode existeix i funciona
    expect(tasca.esforc).toBe(15);                    // 5 h × pes 3 de prioritat alta
    expect(() => tasca.canviarEstat('feta')).toThrow();   // R6 continua vigent
  });

  test('el que es desa es revalida en carregar: una dada que viola R3 es rebutja', () => {
    const avisos = jest.spyOn(console, 'warn').mockImplementation(() => {});
    magatzem.setItem('nomada:tauler:v1', JSON.stringify({
      nom: 'Taller Nómada', versio: 1,
      tasques: [{ id: 1, titol: 'Manipulada', horesEstimades: 999, dataLimit: '2026-10-01' }]
    }));

    expect(repositori.carregar()).toBeNull();         // ← mai es confia en el magatzem
    expect(avisos).toHaveBeenCalled();

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

describe("Integració · el viatge d'anada i tornada", () => {
  test('el camp privat estat sobreviu al viatge sencer', () => {
    const tauler = unTauler();
    tauler.canviarEstat(2, 'en-curs');

    // El viatge complet, salt a salt, escrit a mà per veure'l
    const objecte = tauler.toJSON();
    const cadena = JSON.stringify(objecte);
    magatzem.setItem('nomada:tauler:v1', cadena);
    const recuperat = Tauler.importar(JSON.parse(magatzem.getItem('nomada:tauler:v1')));

    expect(recuperat.cercarPerId(2).estat).toBe('en-curs');
  });

  test('cap camp no es perd pel camí', () => {
    const original = unTauler();

    repositori.desar(original);
    const recuperat = repositori.carregar();

    // Comparem les representacions completes: si falta un camp, salta aquí
    expect(recuperat.toJSON()).toStrictEqual(original.toJSON());
  });

  test('les dates continuen sent cadenes ISO de 10 caràcters, no objectes Date', () => {
    repositori.desar(unTauler());

    for (const tasca of repositori.carregar()) {
      expect(typeof tasca.dataLimit).toBe('string');
      expect(tasca.dataLimit).toMatch(/^\d{4}-\d{2}-\d{2}$/);
    }
  });

  test('un revisor null es conserva com a null, no es converteix en undefined (R8)', () => {
    repositori.desar(unTauler());

    const tasca = repositori.carregar().cercarPerId(2);   // la 2 no té revisor

    expect(tasca.revisor).toBeNull();
    expect('revisor' in tasca.toJSON()).toBe(true);        // la clau EXISTEIX
  });

  test('les etiquetes es conserven com a array, no com a cadena', () => {
    repositori.desar(unTauler());

    expect(repositori.carregar().cercarPerId(1).etiquetes).toEqual(['espai', 'disseny']);
  });
});

// js/dades/migracions.js
const MIGRACIONS = {
  1: (dades) => ({
    ...dades,
    versio: 2,
    tasques: dades.tasques.map((t) => ({
      ...t,
      hores: t.horesEstimades,          // reanomenat
      creada: t.creada ?? '2026-01-01', // camp nou, amb valor raonable
      horesEstimades: undefined
    }))
  })
};

/** Aplica les migracions necessàries fins a arribar a la versió actual. */
export function migrar(dades, versioActual = 2) {
  let actuals = dades;
  while ((actuals.versio ?? 1) < versioActual) {
    const migracio = MIGRACIONS[actuals.versio ?? 1];
    if (!migracio) throw new ErrorDeDades(`No hi ha migració des de la versió ${actuals.versio}`);
    actuals = migracio(actuals);
  }
  return actuals;
}

describe('Integració · migracions de format', () => {
  test('un tauler en format v1 es migra i conserva les hores', () => {
    magatzem.setItem('nomada:tauler:v1', JSON.stringify({
      nom: 'Taller Nómada', versio: 1,
      tasques: [{ id: 1, titol: 'Redissenyar la sala', responsable: 'Iván', prioritat: 'alta',
                  estat: 'en-curs', etiquetes: ['espai'], horesEstimades: 12,
                  dataLimit: '2026-09-30', revisor: 'Marta' }]
    }));

    const tauler = repositori.carregar();

    expect(tauler.total).toBe(1);
    expect(tauler.cercarPerId(1).hores).toBe(12);         // migrat
    expect(tauler.cercarPerId(1).creada).toBe('2026-01-01');  // emplenat
  });

  test('un tauler ja en v2 es carrega sense tocar', () => {
    const original = unTauler();
    repositori.desar(original);

    expect(repositori.carregar().toJSON()).toStrictEqual(original.toJSON());
  });

  test('un format futur desconegut no destrueix les dades', () => {
    magatzem.setItem('nomada:tauler:v1', JSON.stringify({ versio: 99, tasques: [] }));

    expect(repositori.carregar()).toBeNull();             // es descarta amb cura…
    expect(magatzem.getItem('nomada:tauler:v1')).not.toBeNull();   // …però NO s'esborra
  });
});

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

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

// jest.config.js
export default {
  projects: [
    {
      displayName: 'unitaries',
      testEnvironment: 'node',
      testMatch: ['**/proves/{model,util,dades}/**/*.test.js'],
      transform: {}
    },
    {
      displayName: 'integracio',
      testEnvironment: 'jsdom',
      testMatch: ['**/proves/integracio/**/*.test.js'],
      transform: {}
    }
  ]
};

// proves/ajudes/montar-dom.js

/** Estructura mínima que TaulerVista necessita per funcionar. */
const HTML = `
  <main>
    <form id="form-tasca" novalidate>
      <label for="titol">Títol</label>
      <input id="titol" name="titol" required minlength="3">

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

      <label for="horesEstimades">Hores estimades</label>
      <input id="horesEstimades" name="horesEstimades" type="number" min="1" max="40" required>

      <label for="dataLimit">Data límit</label>
      <input id="dataLimit" name="dataLimit" type="date" required>

      <label for="etiquetes">Etiquetes</label>
      <input id="etiquetes" name="etiquetes">

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

    <div id="tauler"></div>
    <output id="resum" aria-live="polite"></output>
  </main>

  <template id="plantilla-columna">
    <section class="columna"><h2 class="columna__titol"></h2><ul class="columna__llista"></ul></section>
  </template>

  <template id="plantilla-tasca">
    <li class="tasca">
      <h3 class="tasca__titol"></h3>
      <p class="tasca__meta"></p>
      <ul class="tasca__etiquetes"></ul>
      <button data-accio="avancar"></button>
      <button data-accio="reobrir">Reobrir</button>
    </li>
  </template>
`;

export function montarDom() {
  document.body.innerHTML = HTML;
  return {
    contenidor: document.querySelector('#tauler'),
    resum: document.querySelector('#resum'),
    formulari: document.querySelector('#form-tasca')
  };
}

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

/**
 * @jest-environment jsdom
 */
import { TaulerVista } from '../../js/vista/tauler-vista.js';
import { montarDom, netejarDom } from '../ajudes/montar-dom.js';
import { unTauler, AVUI } from '../ajudes/backlog-de-prova.js';

describe('Integració · TaulerVista sobre el DOM', () => {
  let dom, tauler, vista;

  beforeEach(() => {
    dom = montarDom();
    tauler = unTauler();
    vista = new TaulerVista({ contenidor: dom.contenidor, resum: dom.resum, tauler, avui: AVUI });
    vista.render();
  });

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

  test('pinta les sis tasques repartides a les seves tres columnes', () => {
    expect(document.querySelectorAll('[data-id]')).toHaveLength(6);
    expect(document.querySelectorAll('[data-estat="pendent"]')).toHaveLength(3);
    expect(document.querySelectorAll('[data-estat="en-curs"]')).toHaveLength(2);
    expect(document.querySelectorAll('[data-estat="feta"]')).toHaveLength(1);
  });

  test("marca visualment l'única tasca vençuda (R10)", () => {
    const vencudes = document.querySelectorAll('.tasca--vencuda');

    expect(vencudes).toHaveLength(1);
    expect(vencudes[0].dataset.id).toBe('6');
    expect(vencudes[0].textContent).toContain('Pressupost de la fusteria');
  });

  test('el resum mostra les 45 hores obertes', () => {
    expect(dom.resum.textContent).toContain('45');
  });

  test('reconciliar reaprofita els nodes en lloc de recrear-los', () => {
    const nodeAbans = document.querySelector('[data-id="2"]');

    tauler.canviarEstat(2, 'en-curs');
    vista.actualitzar();

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

    expect(nodeDespres).toBe(nodeAbans);                   // ← el MATEIX node (toBe, identitat)
    expect(nodeDespres.dataset.estat).toBe('en-curs');     // …actualitzat
  });
});

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 com toBeVisible, toHaveTextContent

// ❌ Acoblada a la implementació: es trenca en reanomenar una classe
expect(document.querySelector('.tasca__titol').textContent).toBe('Redissenyar la sala polivalent');
const boto = document.querySelector('[data-accio="avancar"]');

// ✅ Acoblada al que percep l'usuari: sobreviu a qualsevol refactor de CSS
expect(screen.getByRole('heading', { name: 'Redissenyar la sala polivalent' })).toBeVisible();
const boto = screen.getByRole('button', { name: 'Començar: Redissenyar la sala polivalent' });

// getBy: ja està renderitzat
const titol = screen.getByRole('heading', { name: 'Actualitzar el web de reserves' });

// queryBy: l'única manera correcta d'afirmar una absència
expect(screen.queryByText('Carregant…')).not.toBeInTheDocument();

// findBy: espera que aparegui (després d'una petició, d'un render asíncron…)
const avis = await screen.findByRole('alert');

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

screen.getByRole('button', { name: 'Crear tasca' });
screen.getByRole('heading', { name: /redissenyar la sala/i });   // regex: tolerant a majúscules
screen.getByRole('textbox', { name: 'Títol' });                  // input de text, per la seva <label>
screen.getByRole('combobox', { name: 'Responsable' });           // <select>
screen.getByRole('spinbutton', { name: 'Hores estimades' });     // 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('Data límit');                             // per la seva etiqueta
screen.getByText(/45 h obertes/);                                // pel seu text

const columnaPendents = screen.getByRole('region', { name: 'Pendents' });
const tasques = within(columnaPendents).getAllByRole('listitem');

expect(tasques).toHaveLength(3);
expect(within(tasques[0]).getByRole('button')).toHaveTextContent('Començar');

expect(element).toBeInTheDocument();
expect(element).toBeVisible();                  // considera hidden, display:none, visibility
expect(boto).toBeDisabled();
expect(camp).toHaveValue('Revisar els extintors');
expect(camp).toBeInvalid();                     // aria-invalid o validació nativa
expect(element).toHaveClass('tasca--vencuda');
expect(element).toHaveTextContent(/45/);
expect(camp).toHaveFocus();
expect(camp).toHaveAccessibleName('Hores estimades');

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

test('escriure al formulari dispara la validació després del retard', async () => {
  const usuari = userEvent.setup();           // ← una vegada per prova

  await usuari.type(screen.getByLabelText('Títol'), 'Revisar els extintors');
  await usuari.selectOptions(screen.getByLabelText('Responsable'), 'Marta');
  await usuari.click(screen.getByRole('button', { name: 'Crear tasca' }));
});

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

test('el cercador filtra 300 ms després de deixar de teclejar', async () => {
  const usuari = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });

  await usuari.type(screen.getByLabelText('Cercar'), 'fuster');

  expect(screen.getAllByRole('listitem')).toHaveLength(6);   // encara sense filtrar

  jest.advanceTimersByTime(300);

  expect(screen.getAllByRole('listitem')).toHaveLength(1);   // ja filtrat
});

describe("Integració · delegació d'esdeveniments (06-04)", () => {
  let usuari, dom, tauler, vista;

  beforeEach(() => {
    usuari = userEvent.setup();
    dom = montarDom();
    tauler = unTauler();
    vista = new TaulerVista({ contenidor: dom.contenidor, resum: dom.resum, tauler, avui: AVUI });
    vista.render();
    connectarAccions({ contenidor: dom.contenidor, tauler, vista });
  });

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

  test("prémer Començar canvia l'estat al model i a la vista", async () => {
    const targeta = screen.getByRole('listitem', { name: /cartelleria del taller/i });

    await usuari.click(within(targeta).getByRole('button', { name: /començar/i }));

    expect(tauler.cercarPerId(2).estat).toBe('en-curs');                // el MODEL
    expect(targeta.dataset.estat).toBe('en-curs');                      // la VISTA
    expect(within(targeta).getByRole('button', { name: /marcar feta/i })).toBeInTheDocument();
  });

  test('el resum es recalcula després de cada acció', async () => {
    expect(dom.resum).toHaveTextContent(/45/);

    const targeta = screen.getByRole('listitem', { name: /redissenyar la sala/i });
    await usuari.click(within(targeta).getByRole('button', { name: /marcar feta/i }));

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

  test('el botó de la tasca feta està desactivat i no fa res', async () => {
    const targeta = screen.getByRole('listitem', { name: /inventari de tintes/i });
    const boto = within(targeta).getByRole('button', { name: /completada/i });

    expect(boto).toBeDisabled();

    await usuari.click(boto);

    expect(tauler.cercarPerId(4).estat).toBe('feta');                   // sense canvis
  });

  test("la delegació funciona amb targetes creades DESPRÉS de connectar l'oient", async () => {
    tauler.afegir(unaTasca({ id: 7, titol: 'Revisar els extintors', estat: 'pendent',
                             horesEstimades: 2, responsable: 'Marta' }));
    vista.actualitzar();

    const nova = screen.getByRole('listitem', { name: /revisar els extintors/i });
    await usuari.click(within(nova).getByRole('button', { name: /començar/i }));

    expect(tauler.cercarPerId(7).estat).toBe('en-curs');
  });

  test('un clic al buit entre targetes no trenca res', async () => {
    await usuari.click(dom.contenidor);

    expect(tauler.resum(AVUI).horesObertes).toBe(45);
  });
});

describe('Integració · formulari → model → render (06-07)', () => {
  let usuari, dom, tauler, vista, repositori;

  beforeEach(() => {
    usuari = userEvent.setup();
    dom = montarDom();
    tauler = unTauler();
    repositori = new RepositoriLocal({ magatzem: magatzemFals() });
    vista = new TaulerVista({ contenidor: dom.contenidor, resum: dom.resum, tauler, avui: AVUI });
    vista.render();
    connectarFormulari({ formulari: dom.formulari, tauler, seguentId: () => 7,
                         enCrear: () => { vista.actualitzar(); repositori.desar(tauler); }, avui: AVUI });
  });

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

  async function omplir({ titol = 'Revisar els extintors', responsable = 'Marta',
                          hores = '2', data = '2026-10-20', etiquetes = 'seguretat' } = {}) {
    await usuari.type(screen.getByLabelText('Títol'), titol);
    if (responsable) await usuari.selectOptions(screen.getByLabelText('Responsable'), responsable);
    await usuari.type(screen.getByLabelText('Hores estimades'), hores);
    await usuari.type(screen.getByLabelText('Data límit'), data);
    if (etiquetes) await usuari.type(screen.getByLabelText('Etiquetes'), etiquetes);
  }

  test('una tasca vàlida arriba al model, a la vista i al magatzem', async () => {
    await omplir();
    await usuari.click(screen.getByRole('button', { name: 'Crear tasca' }));

    // 1 · El model
    expect(tauler.total).toBe(7);
    expect(tauler.cercarPerId(7)).toMatchObject({
      titol: 'Revisar els extintors', responsable: 'Marta',
      horesEstimades: 2, estat: 'pendent'                       // R5
    });

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

    // 3 · El magatzem
    expect(repositori.carregar().total).toBe(7);

    // 4 · El formulari s'ha buidat
    expect(screen.getByLabelText('Títol')).toHaveValue('');
  });

  test('les etiquetes es normalitzen segons R9 a tot el recorregut', async () => {
    await omplir({ etiquetes: 'Seguretat, SEGURETAT , extintors' });
    await usuari.click(screen.getByRole('button', { name: 'Crear tasca' }));

    expect(tauler.cercarPerId(7).etiquetes).toEqual(['seguretat', 'extintors']);
    expect(repositori.carregar().cercarPerId(7).etiquetes).toEqual(['seguretat', 'extintors']);
  });

  test("un títol buit mostra l'error accessible i NO toca el model", async () => {
    await omplir({ titol: '' });
    await usuari.click(screen.getByRole('button', { name: 'Crear tasca' }));

    expect(tauler.total).toBe(6);                               // el model intacte
    expect(screen.getByRole('alert')).toBeVisible();
    expect(screen.getByLabelText('Títol')).toBeInvalid();       // aria-invalid="true"
    expect(screen.getByLabelText('Títol')).toHaveFocus();       // el focus va al camp
  });

  test("99 hores incompleix R3 i l'error identifica el camp correcte", async () => {
    await omplir({ hores: '99' });
    await usuari.click(screen.getByRole('button', { name: 'Crear tasca' }));

    expect(tauler.total).toBe(6);
    expect(screen.getByRole('alert')).toHaveTextContent(/40/);
    expect(screen.getByLabelText('Hores estimades')).toBeInvalid();
  });

  test('una data límit anterior a avui es rebutja (R4)', async () => {
    await omplir({ data: '2026-09-01' });
    await usuari.click(screen.getByRole('button', { name: 'Crear tasca' }));

    expect(tauler.total).toBe(6);
    expect(screen.getByLabelText('Data límit')).toBeInvalid();
  });

  test("després de corregir l'error, el segon enviament funciona i els avisos desapareixen", async () => {
    await omplir({ titol: '' });
    await usuari.click(screen.getByRole('button', { name: 'Crear tasca' }));

    await usuari.type(screen.getByLabelText('Títol'), 'Revisar els extintors');
    await usuari.click(screen.getByRole('button', { name: 'Crear tasca' }));

    expect(tauler.total).toBe(7);
    expect(screen.queryByRole('alert')).not.toBeInTheDocument();   // ← queryBy per a l'absència
  });

  test('el formulari es pot completar i enviar només amb el teclat', async () => {
    await usuari.tab();                                     // Títol
    await usuari.keyboard('Revisar els extintors');
    await usuari.tab();                                     // Responsable
    await usuari.keyboard('Marta');
    await usuari.tab();                                     // Hores
    await usuari.keyboard('2');
    await usuari.tab();                                     // Data
    await usuari.keyboard('2026-10-20');
    await usuari.tab();                                     // Etiquetes
    await usuari.tab();                                     // Botó
    await usuari.keyboard('{Enter}');

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

describe("Integració · estats d'interfície davant de fallades de xarxa (07-03)", () => {
  let usuari, dom, xarxa;

  beforeEach(() => {
    usuari = userEvent.setup();
    dom = montarDom();
    xarxa = instalarFetchFals();
  });

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

  test('mostra "carregant", després les sis tasques', async () => {
    let resoldre;
    xarxa.mockReturnValue(new Promise((r) => { resoldre = r; }));

    const carrega = arrencarAplicacio({ dom });

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

    resoldre(respostaJson(dadesBacklog));
    await carrega;

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

  test('un 500 mostra un missatge accessible i un botó de reintentar', async () => {
    xarxa.mockResolvedValue(respostaJson({ missatge: 'Error intern' }, { status: 500 }));

    await arrencarAplicacio({ dom });

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

  test('el botó de reintentar torna a demanar i mostra les tasques', async () => {
    xarxa.mockResolvedValueOnce(respostaJson({ missatge: 'Error' }, { status: 500 }))
         .mockResolvedValueOnce(respostaJson(dadesBacklog));

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

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

  test("una llista buida mostra l'estat buit, no un error", async () => {
    xarxa.mockResolvedValue(respostaJson([]));

    await arrencarAplicacio({ dom });

    expect(await screen.findByText(/no hi ha tasques/i)).toBeVisible();
    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
  });

  test("sense connexió, s'avisa i es conserva el que hi hagués al magatzem", async () => {
    const magatzem = magatzemFals();
    new RepositoriLocal({ magatzem }).desar(unTauler());
    xarxa.mockRejectedValue(new TypeError('Failed to fetch'));

    await arrencarAplicacio({ dom, magatzem });

    expect(await screen.findByRole('alert')).toHaveTextContent(/connexió/i);
    expect(screen.getAllByRole('listitem')).toHaveLength(6);   // ← el que és local continua visible
  });
});

// proves/ajudes/servidor-fals.js
import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';
import { dadesBacklog } from '../../js/dades/backlog.js';

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

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

  http.post(`${BASE}/tasques`, async ({ request }) => {
    const dades = await request.json();
    if (!dades.titol?.trim()) {
      return HttpResponse.json({ missatge: 'El títol és obligatori' }, { status: 422 });
    }
    return HttpResponse.json({ ...dades, id: 7, estat: 'pendent' }, { status: 201 });
  }),

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

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

// Ús a les proves
beforeAll(() => servidor.listen({ onUnhandledRequest: 'error' }));
afterEach(() => servidor.resetHandlers());     // desfà les sobreescriptures per prova
afterAll(() => servidor.close());

test("un 503 puntual activa l'estat d'error", async () => {
  // Sobreescriure NOMÉS per a aquesta prova
  servidor.use(http.get(`${BASE}/tasques`, () =>
    HttpResponse.json({ missatge: 'No disponible' }, { status: 503 })));

  await arrencarAplicacio({ dom });

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

npm test -- --coverage

File                     | % Stmts | % Branch | Δ vs. només unitàries
-------------------------|---------|----------|----------------------
 js/model/tasca.js       |   98.2  |   96.1   |  +1.8   (poc: ja hi era)
 js/model/tauler.js      |  100.0  |  100.0   |   0.0
 js/dades/repositori…    |   94.7  |   89.5   | +63.4   ← el salt gran
 js/vista/tauler-vista   |   88.3  |   76.2   | +88.3   ← de zero
 js/vista/targeta.js     |   95.1  |   88.9   | +95.1   ← de zero
 js/vista/controlador.js |   91.4  |   80.0   | +91.4   ← de zero
 js/vista/formulari.js   |   86.9  |   79.3   | +86.9   ← de zero

// ❌ Fràgil: 100 ms pot bastar avui al teu portàtil i no bastar a CI
await new Promise((r) => setTimeout(r, 100));
expect(screen.getByRole('listitem')).toBeInTheDocument();

// ✅ Espera la CONDICIÓ, no un temps. Reintenta fins que es compleixi
expect(await screen.findByRole('listitem')).toBeInTheDocument();

// ✅ Per a condicions que no són "un element apareix"
await waitFor(() => {
  expect(tauler.total).toBe(7);
});

// ✅ Per esperar que alguna cosa DESAPAREGUI
await waitForElementToBeRemoved(() => screen.queryByText(/carregant/i));

// 1 · Detectar dependències d'ordre executant en ordre aleatori
//     jest --randomize

// 2 · Netejar SEMPRE el DOM i els dobles entre proves
afterEach(() => {
  document.body.innerHTML = '';
  jest.restoreAllMocks();
  localStorage.clear();                  // jsdom sí que l'implementa
});

// 3 · Fixar el rellotge quan el codi el llegeixi directament
beforeEach(() => { jest.useFakeTimers({ now: new Date('2026-09-20T09:00:00Z') }); });

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

proves/
  integracio/
    persistencia.test.js       model + RepositoriLocal + migracions        (node)
    serialitzacio.test.js      el viatge toJSON → cadena → desDeJSON       (node)
    render.test.js             TaulerVista + targeta + reconciliar         (jsdom)
    delegacio.test.js          controlador + esdeveniments + model + vista (jsdom)
    formulari.test.js          formulari → model → render → magatzem       (jsdom)
    xarxa.test.js              estats d'interfície davant de fallades      (jsdom)
  ajudes/
    montar-dom.js              l'HTML mínim
    magatzem-fals.js           el fake de Web Storage (08-04)
    xarxa-falsa.js             respostes de fetch (08-04)
    servidor-fals.js           els gestors de MSW
    backlog-de-prova.js        AVUI, unaTasca, unTauler, capturar

$ npm test

 PASS  unitaries  proves/model/tasca.test.js
 PASS  unitaries  proves/model/tauler.test.js
 PASS  unitaries  proves/util/dates.test.js
 PASS  unitaries  proves/util/temps.test.js
 PASS  unitaries  proves/dades/api-tasques.test.js
 PASS  unitaries  proves/dades/http.test.js
 PASS  unitaries  proves/dades/repositori-local.test.js
 PASS  integracio  proves/integracio/persistencia.test.js
 PASS  integracio  proves/integracio/serialitzacio.test.js
 PASS  integracio  proves/integracio/render.test.js
 PASS  integracio  proves/integracio/delegacio.test.js
 PASS  integracio  proves/integracio/formulari.test.js
 PASS  integracio  proves/integracio/xarxa.test.js

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

      - name: Executar les proves
        run: npm test -- --coverage --ci

// A
test('les tasques apareixen després de carregar', async () => {
  arrencarAplicacio({ dom });
  await new Promise((r) => setTimeout(r, 200));
  expect(screen.getAllByRole('listitem')).toHaveLength(6);
});

// B
const repositori = new RepositoriLocal({ magatzem: magatzemFals() });

test('desa el tauler', () => {
  repositori.desar(unTauler());
  expect(repositori.carregar().total).toBe(6);
});

test('netejar deixa el magatzem buit', () => {
  repositori.netejar();
  expect(repositori.carregar()).toBeNull();
});

// C
test('la tasca vençuda es marca', () => {
  const vista = new TaulerVista({ contenidor: dom.contenidor, tauler: unTauler() });
  vista.render();
  expect(document.querySelectorAll('.tasca--vencuda')).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 { TaulerVista } from '../../js/vista/tauler-vista.js';
import { connectarEncaminador, llegirEstatDeUrl } from '../../js/vista/encaminador.js';
import { connectarFiltres } from '../../js/vista/controlador.js';
import { montarDom, netejarDom } from '../ajudes/montar-dom.js';
import { unTauler, AVUI } from '../ajudes/backlog-de-prova.js';

describe('Integració · filtres ↔ URL (07-06)', () => {
  let usuari, dom, tauler, vista;

  function arrencar(cerca = '') {
    // jsdom permet reescriure la URL sense recarregar
    history.replaceState(null, '', `/${cerca}`);

    dom = montarDom();
    tauler = unTauler();
    vista = new TaulerVista({ contenidor: dom.contenidor, resum: dom.resum, tauler, avui: AVUI });
    vista.actualitzar({ filtres: llegirEstatDeUrl() });
    connectarFiltres({ contenidor: document.body, vista });
    connectarEncaminador(vista);
  }

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

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

  test('(a) arrencar amb ?responsable=Iván mostra 3 targetes sense tocar el model', () => {
    arrencar('?responsable=Iván');

    expect(screen.getAllByRole('listitem')).toHaveLength(3);
    expect(tauler.total).toBe(6);                         // el MODEL no es filtra
    expect(dom.resum).toHaveTextContent(/45/);            // el resum és del tauler complet
  });

  test("(b) prémer el filtre de la Lucía afegeix una entrada a l'historial", async () => {
    arrencar();
    const abans = history.length;

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

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

  test('(c) el cercador fa servir replaceState i filtra després de 300 ms', async () => {
    arrencar();
    const abans = history.length;

    await usuari.type(screen.getByLabelText('Cercar'), 'fuster');

    expect(screen.getAllByRole('listitem')).toHaveLength(6);   // encara sense filtrar

    jest.advanceTimersByTime(300);

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

  test('(d) popstate restaura el filtre anterior', async () => {
    arrencar();

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

    // jsdom no navega sol: se simula l'esdeveniment amb l'estat que hi hauria
    history.replaceState({ responsable: null, text: '', ordre: 'prioritat' }, '', '/');
    window.dispatchEvent(new PopStateEvent('popstate', { state: { responsable: null } }));

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

// js/dades/migracions.js
import { ErrorDeDades } from '../model/errors.js';

export const VERSIO_ACTUAL = 2;

const MIGRACIONS = {
  1: (dades) => ({
    nom: dades.nom,
    versio: 2,
    tasques: dades.tasques.map((t) => ({
      ...t,
      creada: t.creada ?? '2026-01-01',
      // null es conserva com a null: NO s'embolcalla en un objecte buit
      revisor: t.revisor == null ? null : { nom: t.revisor, notificat: false }
    }))
  })
};

export function migrar(dades) {
  let actuals = dades;
  let voltes = 0;

  while ((actuals.versio ?? 1) < VERSIO_ACTUAL) {
    if (voltes++ > 10) throw new ErrorDeDades('Bucle de migració detectat');
    const pas = MIGRACIONS[actuals.versio ?? 1];
    if (!pas) throw new ErrorDeDades(`Sense migració des de v${actuals.versio}`);
    actuals = pas(actuals);
  }

  if ((actuals.versio ?? 1) > VERSIO_ACTUAL) {
    throw new ErrorDeDades(`Format v${actuals.versio} més recent que l'aplicació`);
  }
  return actuals;
}

// proves/integracio/migracions.test.js
import { jest } from '@jest/globals';
import { RepositoriLocal } from '../../js/dades/repositori-local.js';
import { magatzemFals } from '../ajudes/magatzem-fals.js';
import { unTauler, AVUI } from '../ajudes/backlog-de-prova.js';
import { dadesBacklog } from '../../js/dades/backlog.js';

const v1 = () => ({ nom: 'Taller Nómada', versio: 1, tasques: dadesBacklog });

describe('Integració · migració v1 → v2', () => {
  let magatzem, repositori, avisos;

  beforeEach(() => {
    magatzem = magatzemFals();
    repositori = new RepositoriLocal({ magatzem });
    avisos = jest.spyOn(console, 'warn').mockImplementation(() => {});
  });

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

  test('un tauler v1 complet migra conservant els números canònics', () => {
    magatzem.setItem('nomada:tauler:v1', JSON.stringify(v1()));

    const tauler = repositori.carregar();

    expect(tauler.total).toBe(6);
    expect(tauler.resum(AVUI)).toMatchObject({
      horesObertes: 45, horesTotals: 48, vencudes: 1, esforc: 124
    });
    expect(tauler.cercarPerId(1).creada).toBe('2026-01-01');
  });

  test('un revisor amb nom es converteix en objecte', () => {
    magatzem.setItem('nomada:tauler:v1', JSON.stringify(v1()));

    expect(repositori.carregar().cercarPerId(1).revisor)
      .toStrictEqual({ nom: 'Marta', notificat: false });
  });

  test('un revisor null continua sent null, no un objecte amb nom null', () => {
    magatzem.setItem('nomada:tauler:v1', JSON.stringify(v1()));

    const tasca = repositori.carregar().cercarPerId(2);     // la 2 no té revisor

    expect(tasca.revisor).toBeNull();
    expect(tasca.revisor).not.toStrictEqual({ nom: null, notificat: false });
  });

  test('un tauler ja en v2 no es toca', () => {
    const original = unTauler();
    repositori.desar(original);

    expect(repositori.carregar().toJSON()).toStrictEqual(original.toJSON());
  });

  test("una versió futura desconeguda es descarta SENSE esborrar l'original", () => {
    const futur = JSON.stringify({ nom: 'X', versio: 99, tasques: [] });
    magatzem.setItem('nomada:tauler:v2', futur);

    expect(repositori.carregar()).toBeNull();
    expect(magatzem.getItem('nomada:tauler:v2')).toBe(futur);   // intacte
    expect(avisos).toHaveBeenCalled();
  });

  test('després de migrar i desar, les dades viuen sota la clau v2', () => {
    magatzem.setItem('nomada:tauler:v1', JSON.stringify(v1()));

    repositori.desar(repositori.carregar());

    expect(magatzem.getItem('nomada:tauler:v2')).not.toBeNull();
    expect(JSON.parse(magatzem.getItem('nomada:tauler:v2')).versio).toBe(2);
  });
});

// A · corregida: esperar la CONDICIÓ, no un temps
test('les tasques apareixen després de carregar', async () => {
  await arrencarAplicacio({ dom });                        // ← esperar la promesa

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

// B · corregida: estat nou a cada prova
describe('RepositoriLocal', () => {
  let magatzem, repositori;

  beforeEach(() => {
    magatzem = magatzemFals();
    repositori = new RepositoriLocal({ magatzem });
  });

  test('desar i carregar retorna les sis tasques', () => {
    repositori.desar(unTauler());

    expect(repositori.carregar().total).toBe(6);
  });

  test('netejar deixa el magatzem buit', () => {
    repositori.desar(unTauler());                          // ← prepara EL SEU propi estat

    repositori.netejar();

    expect(repositori.carregar()).toBeNull();
    expect(magatzem.length).toBe(0);
  });
});

// C · corregida: la data entra com a dada, i es consulta per rol
test('la tasca vençuda es marca visualment (R10)', () => {
  const vista = new TaulerVista({
    contenidor: dom.contenidor, resum: dom.resum,
    tauler: unTauler(), avui: AVUI                         // ← '2026-09-20', fix
  });
  vista.render();

  const vencuda = screen.getByRole('listitem', { name: /pressupost de la fusteria/i });

  expect(vencuda).toHaveClass('tasca--vencuda');
  expect(document.querySelectorAll('.tasca--vencuda')).toHaveLength(1);
});