npm install -D cypress
npx cypress open        # la primera vegada crea l'estructura de carpetes

ciclourbano/
├── cypress/
│   ├── e2e/
│   │   ├── acces.cy.js
│   │   ├── reservar.cy.js
│   │   └── cancellar.cy.js
│   ├── fixtures/
│   │   └── bicicletes.json          ← dades fixes per a cy.intercept
│   ├── support/
│   │   ├── e2e.js                    ← es carrega abans de CADA fitxer de proves
│   │   └── comandes.js               ← comandes pròpies: cy.accedirCom(), cy.sembrarDades()
│   └── downloads/
├── cypress.config.js
└── db.json                            ← la base de dades de json-server

// cypress.config.js
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    // Permet escriure cy.visit('/') en lloc de la URL completa
    baseUrl: 'http://localhost:5173',

    supportFile: 'cypress/support/e2e.js',
    specPattern: 'cypress/e2e/**/*.cy.js',

    viewportWidth: 1280,
    viewportHeight: 800,

    // Sense reintents a l'execució interactiva; dos a la integració contínua,
    // on una fallada puntual d'infraestructura no ha de tombar el desplegament.
    retries: { runMode: 2, openMode: 0 },

    video: true,
    screenshotOnRunFailure: true,

    env: {
      apiUrl: 'http://localhost:3001'
    }
  }
});

// cypress/support/e2e.js
import './comandes.js';

// Testing Library per a Cypress: aporta cy.findByRole i companyia,
// amb la mateixa prioritat de consultes de 09-03
import '@testing-library/cypress/add-commands';

// Fa fallar la prova si l'aplicació llança un error no capturat.
// És el comportament per defecte i convé NO desactivar-lo:
// un error a la consola és una fallada, encara que la pantalla sembli correcta.

npm install -D @testing-library/cypress

npm install -D start-server-and-test npm-run-all

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 5173",
    "api": "json-server --watch db.json --port 3001",

    "test": "vitest",
    "test:executar": "vitest run",
    "cobertura": "vitest run --coverage",

    "dev:tot": "npm-run-all --parallel dev api",
    "cy:obrir": "cypress open",
    "cy:executar": "cypress run",

    "e2e": "start-server-and-test dev:tot 'http://localhost:5173|http://localhost:3001' cy:executar",
    "e2e:obrir": "start-server-and-test dev:tot 'http://localhost:5173|http://localhost:3001' cy:obrir",

    "proves:totes": "npm run test:executar && npm run e2e"
  }
}

// cypress/e2e/cataleg.cy.js
describe('Catàleg de CicloUrbano', () => {
  beforeEach(() => {
    cy.visit('/');
  });

  it('mostra les cinc bicicletes de la flota', () => {
    cy.get('[data-testid="tarjeta-bicicleta"]').should('have.length', 5);
  });

  it('permet veure la fitxa d\'una bicicleta', () => {
    cy.contains('[data-testid="tarjeta-bicicleta"]', 'Urbana Clàssica')
      .findByRole('button', { name: 'Veure fitxa' })
      .click();

    cy.url().should('include', '/bicicletas/bici-001');
    cy.findByRole('heading', { name: 'Urbana Clàssica' }).should('be.visible');
  });
});

// ❌ Això NO funciona: cy.get no retorna un element
const boto = cy.get('[data-testid="boton-reservar"]');
boto.click();          // `boto` no és un element del DOM

// ❌ Això tampoc: les comandes no són promeses de les quals es pugui fer await
const text = await cy.get('h1').text();

it('reserva una bicicleta', () => {
  cy.visit('/');                   // 1) s'encua
  cy.get('[data-testid="x"]');     // 2) s'encua
  cy.contains('Reservar').click(); // 3) s'encua
  // El cos acaba AQUÍ. Ara Cypress executa l'1, el 2 i el 3 en ordre.
});

cy.get('[data-testid="total-reserva"]').then(($element) => {
  // Aquí sí: la comanda ja s'ha executat i $element és un objecte jQuery
  const total = parseFloat($element.text().replace(',', '.'));
  expect(total).to.be.greaterThan(0);
});

// No cal esperar res: cy.get reintenta fins que la targeta apareix,
// encara que les dades triguin un segon a arribar de json-server
cy.get('[data-testid="tarjeta-bicicleta"]').should('have.length', 5);

// ❌ Mai
cy.wait(2000);
cy.get('[data-testid="tarjeta-bicicleta"]').should('have.length', 5);

// ✅ Sempre
cy.get('[data-testid="tarjeta-bicicleta"]').should('have.length', 5);

// src/components/TargetaBicicleta.jsx (fragment amb els ancoratges)
<article className={estils.targeta} data-testid="tarjeta-bicicleta" data-bicicleta={bicicleta.id}>
  <h3>{bicicleta.model}</h3>
  <p className={estils.estacio}>{nomEstacio}</p>
  <EtiquetaEstat estat={bicicleta.estat} />
  <p className={estils.preu}>{FORMAT_EURO.format(bicicleta.preuHora)} / hora</p>

  <button type="button" onClick={() => alSeleccionar(bicicleta.id)}>Veure fitxa</button>
  <button
    type="button"
    onClick={() => alReservar(bicicleta.id)}
    disabled={bicicleta.estat !== 'disponible'}
  >
    Reservar
  </button>
</article>

// Localitzar una targeta concreta pel seu identificador de domini
cy.get('[data-bicicleta="bici-001"]').findByRole('button', { name: 'Reservar' }).click();

// O pel seu contingut, quan l'identificador no importa
cy.contains('[data-testid="tarjeta-bicicleta"]', 'Elèctrica Pro')
  .findByRole('button', { name: 'Veure fitxa' })
  .click();

// cypress/support/comandes.js
Cypress.Commands.add('perTestId', (identificador, ...resta) =>
  cy.get(`[data-testid="${identificador}"]`, ...resta)
);

Cypress.Commands.add('targetaDe', (bicicletaId) =>
  cy.get(`[data-bicicleta="${bicicletaId}"]`)
);

cy.perTestId('lista-bicicletas').should('be.visible');
cy.targetaDe('bici-001').findByRole('button', { name: 'Reservar' }).click();

// Estil encadenat: reintenta fins que es compleix
cy.get('[data-testid="tarjeta-bicicleta"]').should('have.length', 5);
cy.findByRole('button', { name: 'Reservar' }).should('be.visible').and('not.be.disabled');
cy.url().should('include', '/reservas');
cy.get('[data-testid="aviso"]').should('contain.text', 'Reserva creada');
cy.findByLabelText('Durada (hores)').should('have.value', '2');

// Estil expect: dins de then, sense reintents
cy.get('[data-testid="total-reserva"]').then(($el) => {
  expect($el.text()).to.match(/12,00\s*€/);
});

it('carrega el catàleg des de l\'API', () => {
  // L'àlies permet esperar AQUESTA petició concreta
  cy.intercept('GET', '**/bicicletas*').as('carregarBicicletes');

  cy.visit('/');

  cy.wait('@carregarBicicletes').its('response.statusCode').should('eq', 200);
  cy.get('[data-testid="tarjeta-bicicleta"]').should('have.length', 5);
});

cy.intercept('POST', '**/reservas').as('crearReserva');
// … omplir i enviar …
cy.wait('@crearReserva').then(({ request, response }) => {
  expect(request.body).to.include({
    bicicletaId: 'bici-001',
    usuari: 'usr-01',
    hores: 2,
    estat: 'activa'
  });
  expect(response.statusCode).to.eq(201);
});

// Un error del servidor
cy.intercept('GET', '**/bicicletas*', { statusCode: 500, body: {} }).as('fallada');

// Una llista buida
cy.intercept('GET', '**/bicicletas*', { body: [] });

// Dades fixes des de cypress/fixtures/bicicletes.json
cy.intercept('GET', '**/bicicletas*', { fixture: 'bicicletes.json' });

// Una resposta lenta, per comprovar l'esquelet
cy.intercept('GET', '**/bicicletas*', (req) => {
  req.reply({ delay: 1000, fixture: 'bicicletes.json' });
});

// Fallar només la primera vegada, per provar el reintent
cy.intercept('GET', '**/bicicletas*', { statusCode: 500, times: 1 });

{
  "bicicletas": [
    { "id": "bici-001", "model": "Urbana Clàssica", "tipus": "urbana", "estat": "disponible", "estacioId": "est-01", "preuHora": 2.5 },
    { "id": "bici-002", "model": "Elèctrica Pro", "tipus": "electrica", "estat": "alquilada", "estacioId": "est-01", "preuHora": 4.0 },
    { "id": "bici-003", "model": "Càrrega Max", "tipus": "carga", "estat": "mantenimiento", "estacioId": "est-02", "preuHora": 5.5 },
    { "id": "bici-004", "model": "Urbana Clàssica", "tipus": "urbana", "estat": "disponible", "estacioId": "est-03", "preuHora": 2.5 },
    { "id": "bici-005", "model": "Elèctrica Pro", "tipus": "electrica", "estat": "disponible", "estacioId": "est-02", "preuHora": 4.0 }
  ],
  "estaciones": [
    { "id": "est-01", "nom": "Plaça Major", "barri": "Centre", "places": 20 },
    { "id": "est-02", "nom": "Parc Nord", "barri": "Nord", "places": 15 },
    { "id": "est-03", "nom": "Estació Central", "barri": "Eixample", "places": 30 }
  ],
  "reservas": [
    { "id": "res-01", "bicicletaId": "bici-002", "usuari": "usr-01", "dataInici": "2026-05-04T09:00", "hores": 2, "estat": "activa" }
  ]
}

// cypress/support/comandes.js
Cypress.Commands.add('sembrarDades', () => {
  cy.fixture('db.llavor.json').then((llavor) => {
    // Esborra el que hi hagi i reposa l'estat conegut
    cy.request('GET', `${Cypress.env('apiUrl')}/reservas`).then(({ body }) => {
      body.forEach((reserva) => {
        cy.request('DELETE', `${Cypress.env('apiUrl')}/reservas/${reserva.id}`);
      });
    });

    llavor.reservas.forEach((reserva) => {
      cy.request('POST', `${Cypress.env('apiUrl')}/reservas`, reserva);
    });

    llavor.bicicletas.forEach((bicicleta) => {
      cy.request('PUT', `${Cypress.env('apiUrl')}/bicicletas/${bicicleta.id}`, bicicleta);
    });
  });
});

beforeEach(() => {
  cy.sembrarDades();
});

// cypress/support/comandes.js
Cypress.Commands.add('accedirCom', (usuariId) => {
  cy.session(
    // 1) Clau de la sessió: sessions diferents per a usuaris diferents
    ['sessio', usuariId],

    // 2) Com s'estableix la sessió. S'executa la primera vegada i quan falla la validació
    () => {
      cy.visit('/acceso');
      cy.findByLabelText('Identifica\'t com').select(usuariId);
      cy.findByRole('button', { name: /Entrar/ }).click();
      cy.url().should('not.include', '/acceso');
    },

    // 3) Validació: si retorna algun valor fals o falla, la sessió es refà
    {
      validate() {
        cy.window().its('localStorage')
          .invoke('getItem', 'ciclourbano:usuario')
          .should('contain', usuariId);
      },
      cacheAcrossSpecs: true      // es reutilitza també entre fitxers de proves
    }
  );
});

describe('Reservar una bicicleta', () => {
  beforeEach(() => {
    cy.sembrarDades();
    cy.accedirCom('usr-01');    // instantani a partir de la segona vegada
    cy.visit('/');
  });

  // …
});

// cypress/e2e/acces.cy.js
describe('Identificar-se a CicloUrbano', () => {
  beforeEach(() => {
    cy.sembrarDades();
  });

  it('permet entrar com a client i mostra el seu nom a la capçalera', () => {
    cy.visit('/acceso');

    cy.findByRole('heading', { name: /Accés a CicloUrbano/ }).should('be.visible');

    cy.findByLabelText('Identifica\'t com').select('usr-01');
    cy.findByRole('button', { name: /Entrar/ }).click();

    // Redirecció al catàleg
    cy.url().should('eq', `${Cypress.config('baseUrl')}/`);
    cy.perTestId('menu-usuario').should('contain.text', 'Ana Ribera');
  });

  it('retorna l\'usuari a la pantalla que intentava visitar', () => {
    // Sense sessió, /reservas expulsa a l'accés guardant l'origen (06-05)
    cy.visit('/reservas');

    cy.url().should('include', '/acceso');
    cy.findByRole('alert').should('contain.text', '/reservas');

    cy.findByLabelText('Identifica\'t com').select('usr-01');
    cy.findByRole('button', { name: /Entrar/ }).click();

    // I torna a la destinació original, no a l'inici
    cy.url().should('include', '/reservas');
    cy.findByRole('heading', { name: /Les teves reserves/ }).should('be.visible');
  });

  it('la sessió sobreviu a una recàrrega de la pàgina', () => {
    cy.accedirCom('usr-01');
    cy.visit('/');
    cy.perTestId('menu-usuario').should('contain.text', 'Ana Ribera');

    cy.reload();

    cy.perTestId('menu-usuario').should('contain.text', 'Ana Ribera');
    cy.url().should('not.include', '/acceso');
  });

  it('un client no pot entrar al taller', () => {
    cy.accedirCom('usr-01');
    cy.visit('/taller');

    cy.url().should('include', '/sin-permisos');
    cy.findByRole('heading', { name: /No tens permís/ }).should('be.visible');
  });

  it('un operari sí que entra al taller', () => {
    cy.accedirCom('usr-02');
    cy.visit('/taller');

    cy.url().should('include', '/taller');
    cy.findByRole('heading', { name: /Taller/ }).should('be.visible');
  });

  it('tancar la sessió torna a l\'accés i no deixa tornar enrere', () => {
    cy.accedirCom('usr-01');
    cy.visit('/reservas');

    cy.perTestId('menu-usuario').findByRole('button', { name: /Tancar sessió/ }).click();

    cy.url().should('include', '/acceso');
    cy.go('back');
    cy.url().should('include', '/acceso');   // la protecció continua actuant
  });
});

// cypress/e2e/reservar.cy.js
describe('Reservar una bicicleta', () => {
  beforeEach(() => {
    cy.sembrarDades();
    cy.accedirCom('usr-01');
  });

  it('recorre el flux complet: catàleg → fitxa → reserva → llista', () => {
    // S'observa la petició per poder afirmar sobre el cos enviat,
    // però NO se substitueix: el camí feliç va contra l'API real
    cy.intercept('POST', '**/reservas').as('crearReserva');

    cy.visit('/');

    // 1) El catàleg carrega i bici-001 està disponible
    cy.get('[data-testid="tarjeta-bicicleta"]').should('have.length', 5);
    cy.targetaDe('bici-001').should('contain.text', 'Disponible');

    // 2) S'obre la seva fitxa
    cy.targetaDe('bici-001').findByRole('button', { name: 'Veure fitxa' }).click();
    cy.url().should('include', '/bicicletas/bici-001');
    cy.findByRole('heading', { name: 'Urbana Clàssica' }).should('be.visible');
    cy.contains('Plaça Major').should('be.visible');

    // 3) S'inicia la reserva des de la fitxa
    cy.findByRole('button', { name: /Reservar aquesta bicicleta/ }).click();
    cy.url().should('include', '/reservas/nueva');

    // 4) S'omple el formulari
    cy.findByLabelText('Bicicleta').should('have.value', 'bici-001');   // preseleccionada
    cy.findByLabelText('Inici de la reserva').type('2030-06-01T10:00');
    cy.findByLabelText('Durada (hores)').clear().type('3');
    cy.findByRole('checkbox', { name: /Accepto les condicions/ }).check();

    // El total derivat: 2,50 € × 3 h
    cy.perTestId('total-reserva').should('contain.text', '7,50');

    // 5) S'envia
    cy.findByRole('button', { name: 'Crear reserva' }).click();

    // 6) Es verifica el que ha sortit per la xarxa
    cy.wait('@crearReserva').then(({ request, response }) => {
      expect(response.statusCode).to.eq(201);
      expect(request.body).to.include({
        bicicletaId: 'bici-001',
        usuari: 'usr-01',
        dataInici: '2030-06-01T10:00',
        hores: 3,
        estat: 'activa'
      });
      expect(request.body.id).to.match(/^res-[a-z0-9]{8}$/);
    });

    // 7) Confirmació i navegació
    cy.findByRole('status').should('contain.text', 'Reserva creada');
    cy.url().should('include', '/reservas');

    // 8) La reserva nova és a la llista, junt amb la de la llavor
    cy.get('[data-testid="fila-reserva"]').should('have.length', 2);
    cy.contains('[data-testid="fila-reserva"]', 'Urbana Clàssica')
      .should('contain.text', '3 h')
      .and('contain.text', 'Activa');

    // 9) I persisteix després de recarregar: s'ha guardat de veritat al servidor
    cy.reload();
    cy.get('[data-testid="fila-reserva"]').should('have.length', 2);
  });

  it('no deixa reservar una bicicleta en manteniment', () => {
    cy.visit('/');

    cy.targetaDe('bici-003')
      .should('contain.text', 'En manteniment')
      .findByRole('button', { name: 'Reservar' })
      .should('be.disabled');
  });

  it('mostra els errors de validació i no envia res', () => {
    // Si s'enviés alguna cosa, aquest àlies ho detectaria
    cy.intercept('POST', '**/reservas').as('crearReserva');

    cy.visit('/reservas/nueva');
    cy.findByRole('button', { name: 'Crear reserva' }).click();

    cy.findAllByRole('alert').should('have.length.at.least', 3);
    cy.findByLabelText('Durada (hores)').should('have.attr', 'aria-invalid', 'true');
    cy.url().should('include', '/reservas/nueva');

    cy.get('@crearReserva.all').should('have.length', 0);
  });

  it('avisa si el servidor falla i no perd les dades introduïdes', () => {
    // Aquí SÍ se simula: el camí alternatiu no es pot provocar de cap altra manera
    cy.intercept('POST', '**/reservas', { statusCode: 500, body: {} }).as('crearReservaFallida');

    cy.visit('/reservas/nueva');
    cy.findByLabelText('Bicicleta').select('bici-001');
    cy.findByLabelText('Inici de la reserva').type('2030-06-01T10:00');
    cy.findByLabelText('Durada (hores)').clear().type('2');
    cy.findByRole('checkbox', { name: /Accepto les condicions/ }).check();
    cy.findByRole('button', { name: 'Crear reserva' }).click();

    cy.wait('@crearReservaFallida');
    cy.findByRole('alert').should('contain.text', 'No s\'ha pogut crear la reserva');

    // La feina de l'usuari continua allà
    cy.findByLabelText('Durada (hores)').should('have.value', '2');
    cy.url().should('include', '/reservas/nueva');
  });
});

// cypress/e2e/cancellar.cy.js
describe('Cancel·lar una reserva', () => {
  beforeEach(() => {
    cy.sembrarDades();
    cy.accedirCom('usr-01');
    cy.visit('/reservas');
  });

  it('cancel·la una reserva activa després de confirmar-ho al diàleg', () => {
    cy.intercept('PATCH', '**/reservas/res-01').as('cancellarReserva');

    cy.contains('[data-testid="fila-reserva"]', 'Elèctrica Pro')
      .should('contain.text', 'Activa')
      .findByRole('button', { name: /Cancel·lar/ })
      .click();

    // El diàleg modal ha de rebre el focus i ser accessible (03-06)
    cy.findByRole('dialog').should('be.visible').within(() => {
      cy.findByRole('heading', { name: /Vols cancel·lar la reserva/ }).should('be.visible');
      cy.contains('Elèctrica Pro').should('be.visible');
      cy.findByRole('button', { name: /Sí, cancel·lar/ }).click();
    });

    cy.wait('@cancellarReserva').then(({ request, response }) => {
      expect(request.body).to.include({ estat: 'cancelada' });
      expect(response.statusCode).to.eq(200);
    });

    cy.findByRole('dialog').should('not.exist');
    cy.findByRole('status').should('contain.text', 'Reserva cancel·lada');

    // La fila continua allà, però amb un altre estat: cancel·lar no elimina (09-02)
    cy.contains('[data-testid="fila-reserva"]', 'Elèctrica Pro')
      .should('contain.text', 'Cancel·lada');
    cy.contains('[data-testid="fila-reserva"]', 'Elèctrica Pro')
      .findByRole('button', { name: /Cancel·lar/ })
      .should('not.exist');
  });

  it('tancar el diàleg sense confirmar no cancel·la res', () => {
    cy.intercept('PATCH', '**/reservas/*').as('cancellarReserva');

    cy.contains('[data-testid="fila-reserva"]', 'Elèctrica Pro')
      .findByRole('button', { name: /Cancel·lar/ })
      .click();

    cy.findByRole('dialog').findByRole('button', { name: /No, mantenir-la/ }).click();

    cy.findByRole('dialog').should('not.exist');
    cy.contains('[data-testid="fila-reserva"]', 'Elèctrica Pro').should('contain.text', 'Activa');
    cy.get('@cancellarReserva.all').should('have.length', 0);
  });

  it('el diàleg es tanca amb la tecla Escape', () => {
    cy.contains('[data-testid="fila-reserva"]', 'Elèctrica Pro')
      .findByRole('button', { name: /Cancel·lar/ })
      .click();

    cy.findByRole('dialog').should('be.visible');
    cy.get('body').type('{esc}');

    cy.findByRole('dialog').should('not.exist');
    cy.contains('[data-testid="fila-reserva"]', 'Elèctrica Pro').should('contain.text', 'Activa');
  });

  it('la cancel·lació persisteix després de recarregar i allibera la bicicleta', () => {
    cy.contains('[data-testid="fila-reserva"]', 'Elèctrica Pro')
      .findByRole('button', { name: /Cancel·lar/ })
      .click();
    cy.findByRole('dialog').findByRole('button', { name: /Sí, cancel·lar/ }).click();
    cy.findByRole('status').should('contain.text', 'Reserva cancel·lada');

    cy.reload();
    cy.contains('[data-testid="fila-reserva"]', 'Elèctrica Pro').should('contain.text', 'Cancel·lada');

    // I bici-002 torna a estar disponible al catàleg
    cy.visit('/');
    cy.targetaDe('bici-002').should('contain.text', 'Disponible');
  });

  it('avisa si la cancel·lació falla al servidor', () => {
    cy.intercept('PATCH', '**/reservas/*', { statusCode: 500, body: {} }).as('cancellacioFallida');

    cy.contains('[data-testid="fila-reserva"]', 'Elèctrica Pro')
      .findByRole('button', { name: /Cancel·lar/ })
      .click();
    cy.findByRole('dialog').findByRole('button', { name: /Sí, cancel·lar/ }).click();

    cy.wait('@cancellacioFallida');
    cy.findByRole('alert').should('contain.text', 'No s\'ha pogut cancel·lar');
    // L'estat no ha canviat: no hi ha actualització optimista mal revertida
    cy.contains('[data-testid="fila-reserva"]', 'Elèctrica Pro').should('contain.text', 'Activa');
  });
});

it('depuració', () => {
  cy.visit('/');
  cy.pause();                                    // s'atura aquí
  cy.get('[data-testid="tarjeta-bicicleta"]').debug().first().click();
  cy.log('Fitxa oberta');
});

# .github/workflows/proves.yml
name: Proves

on:
  push:
    branches: [main]
  pull_request:

jobs:
  unitaries:
    name: Unitàries i de components
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      - run: npm ci

      - name: Anàlisi estàtica
        run: npm run lint

      - name: Vitest amb cobertura
        run: npm run cobertura

      - name: Publicar l'informe de cobertura
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: cobertura
          path: coverage/

  e2e:
    name: Extrem a extrem
    runs-on: ubuntu-latest
    needs: unitaries          # si fallen les ràpides, no es gasten minuts en les lentes
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      - run: npm ci

      - name: Compilar l'aplicació
        run: npm run build

      - name: Cypress contra el build de producció
        uses: cypress-io/github-action@v6
        with:
          # Arrenca els dos servidors, espera que responguin i llança les proves
          start: npm run dev:todo
          wait-on: 'http://localhost:5173, http://localhost:3001'
          wait-on-timeout: 120
          browser: chrome

      - name: Guardar captures si falla alguna cosa
        uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: cypress-captures
          path: cypress/screenshots

      - name: Guardar els vídeos
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: cypress-videos
          path: cypress/videos

it('reserva', () => {
  cy.visit('http://localhost:5173/reservas/nueva');
  cy.get('.formulario_a3f9 > div:nth-child(2) > select').select('bici-001');
  cy.wait(2000);
  cy.get('.boton-enviar').click();
  cy.wait(3000);
  cy.get('.aviso').should('contain', 'creada');
});

// cypress/e2e/taller.cy.js
describe('Flux de l\'operari', () => {
  beforeEach(() => {
    cy.sembrarDades();
    cy.accedirCom('usr-02');       // Marc Solé, rol operari
  });

  it('posar una bicicleta en manteniment la retira del catàleg públic', () => {
    // S'observa l'actualització per afirmar sobre el cos; NO se substitueix:
    // el camí feliç ha d'arribar a json-server de veritat
    cy.intercept('PATCH', '**/bicicletas/bici-001').as('actualitzarBicicleta');

    cy.visit('/taller');
    cy.findByRole('heading', { name: /Taller/ }).should('be.visible');

    cy.targetaDe('bici-001').should('contain.text', 'Disponible');
    cy.targetaDe('bici-001')
      .findByRole('button', { name: /Enviar a manteniment/ })
      .click();

    cy.wait('@actualitzarBicicleta').then(({ request, response }) => {
      expect(request.body).to.include({ estat: 'mantenimiento' });
      expect(response.statusCode).to.eq(200);
    });

    cy.findByRole('status').should('contain.text', 'Bicicleta enviada a manteniment');
    cy.targetaDe('bici-001').should('contain.text', 'En manteniment');

    // L'efecte al catàleg públic
    cy.visit('/');
    cy.targetaDe('bici-001')
      .should('contain.text', 'En manteniment')
      .findByRole('button', { name: 'Reservar' })
      .should('be.disabled');

    // I persisteix: el canvi ha arribat al servidor
    cy.reload();
    cy.targetaDe('bici-001').findByRole('button', { name: 'Reservar' }).should('be.disabled');
  });

  it('un client no veu l\'enllaç al taller ni pot entrar', () => {
    cy.accedirCom('usr-01');
    cy.visit('/');

    cy.findByRole('navigation').findByRole('link', { name: /Taller/ }).should('not.exist');

    cy.visit('/taller');
    cy.url().should('include', '/sin-permisos');
  });
});

describe('Crear una reserva', () => {
  beforeEach(() => {
    cy.sembrarDades();
    cy.accedirCom('usr-01');
  });

  it('crea la reserva i confirma el resultat a l\'usuari', () => {
    cy.intercept('POST', '**/reservas').as('crearReserva');

    cy.visit('/reservas/nueva');

    cy.findByLabelText('Bicicleta').select('bici-001');
    cy.findByLabelText('Inici de la reserva').type('2030-06-01T10:00');
    cy.findByLabelText('Durada (hores)').clear().type('2');
    cy.findByRole('checkbox', { name: /Accepto les condicions/ }).check();

    cy.findByRole('button', { name: 'Crear reserva' }).click();

    cy.wait('@crearReserva').its('response.statusCode').should('eq', 201);
    cy.findByRole('status').should('contain.text', 'Reserva creada');
    cy.url().should('include', '/reservas');
  });
});

it('el filtre viu a la URL i sobreviu a la navegació del navegador', () => {
  cy.visit('/');
  cy.get('[data-testid="tarjeta-bicicleta"]').should('have.length', 5);

  // 1) Prémer el filtre canvia la URL REAL del navegador
  cy.findByRole('button', { name: 'Elèctrica' }).click();
  cy.url().should('include', '?tipo=electrica');
  cy.get('[data-testid="tarjeta-bicicleta"]').should('have.length', 2);

  // 2) La vista sobreviu a una recàrrega completa de la pàgina
  cy.reload();
  cy.url().should('include', '?tipo=electrica');
  cy.get('[data-testid="tarjeta-bicicleta"]').should('have.length', 2);
  cy.findByRole('button', { name: 'Elèctrica', pressed: true }).should('exist');

  // 3) El botó enrere del navegador torna al filtre anterior
  cy.findByRole('button', { name: 'De càrrega' }).click();
  cy.url().should('include', '?tipo=carga');

  cy.go('back');
  cy.url().should('include', '?tipo=electrica');
  cy.get('[data-testid="tarjeta-bicicleta"]').should('have.length', 2);
});