// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    // jsdom gives Node a DOM: there's a document, but no real layout or real navigation
    environment: 'jsdom',
    // globals: true lets you use describe/test/expect without importing them in every file
    globals: true,
    // This file runs before every test file
    setupFiles: './src/tests/setup.js',
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html'],
      // There's no point measuring coverage of things that aren't logic
      exclude: ['src/tests/**', 'src/main.jsx', '**/*.module.css'],
    },
  },
});

// src/tests/setup.js
import '@testing-library/jest-dom/vitest';
import { cleanup } from '@testing-library/react';
import { afterAll, afterEach, beforeAll } from 'vitest';
import { server } from './server.js';

// 1. Starts the mock network. onUnhandledRequest: 'error' is the key decision:
//    if a test requests a URL with no handler, it fails instead of hanging.
beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));

afterEach(() => {
  cleanup();               // 2. Unmounts what was rendered
  server.resetHandlers();  // 3. Undoes the server.use() calls from the previous test
  localStorage.clear();    // 4. One test's session doesn't leak into the next
});

afterAll(() => server.close());

// src/tests/utils.jsx
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { createMemoryRouter, RouterProvider } from 'react-router';
import { sessionSlice } from '../features/session/sessionSlice.js';
import { catalogueSlice } from '../features/catalogue/catalogueSlice.js';
import { bookingsSlice } from '../features/bookings/bookingsSlice.js';
import ThemeProvider from '../contexts/ThemeProvider.jsx';
import NoticesProvider from '../contexts/NoticesProvider.jsx';

export function createTestStore(initialState) {
  return configureStore({
    reducer: {
      session: sessionSlice.reducer,
      catalogue: catalogueSlice.reducer,
      bookings: bookingsSlice.reducer,
    },
    preloadedState: initialState,
  });
}

export function createTestClient() {
  return new QueryClient({
    defaultOptions: {
      // No retries: an error test shouldn't have to wait through three failed attempts
      queries: { retry: false, gcTime: Infinity },
      mutations: { retry: false },
    },
  });
}

export function renderWithProviders(element, options = {}) {
  const {
    initialState,
    store = createTestStore(initialState),
    client = createTestClient(),
    route = '/',
    routes = [{ path: '*', element }],
  } = options;

  const router = createMemoryRouter(routes, { initialEntries: [route] });

  const result = render(
    <QueryClientProvider client={client}>
      <Provider store={store}>
        <ThemeProvider>
          <NoticesProvider>
            <RouterProvider router={router} />
          </NoticesProvider>
        </ThemeProvider>
      </Provider>
    </QueryClientProvider>
  );

  return { ...result, store, client, router, user: userEvent.setup() };
}

export * from '@testing-library/react';
export { userEvent };

// src/tests/handlers.js
import { http, HttpResponse } from 'msw';

const API = 'http://localhost:3001';

export const BIKES = [
  { id: 'bici-001', model: 'Classic Urban', type: 'urbana', status: 'disponible', stationId: 'est-01', pricePerHour: 2.5 },
  { id: 'bici-002', model: 'Electric Pro', type: 'electrica', status: 'alquilada', stationId: 'est-01', pricePerHour: 4.0 },
  { id: 'bici-003', model: 'Cargo Max', type: 'carga', status: 'mantenimiento', stationId: 'est-02', pricePerHour: 5.5 },
  { id: 'bici-004', model: 'Classic Urban', type: 'urbana', status: 'disponible', stationId: 'est-03', pricePerHour: 2.5 },
  { id: 'bici-005', model: 'Electric Pro', type: 'electrica', status: 'disponible', stationId: 'est-02', pricePerHour: 4.0 },
];

export const STATIONS = [
  { id: 'est-01', name: 'Main Square', district: 'Downtown', docks: 20 },
  { id: 'est-02', name: 'North Park', district: 'North', docks: 15 },
  { id: 'est-03', name: 'Central Station', district: 'Riverside', docks: 30 },
];

export const USERS = [
  { id: 'usr-01', name: 'Ana Ribera', email: '[email protected]', role: 'cliente' },
  { id: 'usr-02', name: 'Marc Solé', email: '[email protected]', role: 'operario' },
];

export const BOOKINGS = [
  { id: 'res-01', bicicletaId: 'bici-002', user: 'usr-01', startDate: '2026-05-04T09:00', hours: 2, status: 'activa' },
];

export const handlers = [
  http.get(`${API}/bicicletas`, ({ request }) => {
    const params = new URL(request.url).searchParams;
    const type = params.get('tipo');
    const stationId = params.get('stationId');
    let result = BIKES;
    if (type) result = result.filter((b) => b.type === type);
    if (stationId) result = result.filter((b) => b.stationId === stationId);
    return HttpResponse.json(result);
  }),

  http.get(`${API}/bicicletas/:bicicletaId`, ({ params }) => {
    const bike = BIKES.find((b) => b.id === params.bicicletaId);
    // We reproduce json-server's real 404: the custom-404 test depends on this
    if (!bike) return new HttpResponse(null, { status: 404 });
    return HttpResponse.json(bike);
  }),

  http.patch(`${API}/bicicletas/:bicicletaId`, async ({ params, request }) => {
    const changes = await request.json();
    const bike = BIKES.find((b) => b.id === params.bicicletaId);
    return HttpResponse.json({ ...bike, ...changes });
  }),

  http.get(`${API}/estaciones`, () => HttpResponse.json(STATIONS)),

  http.get(`${API}/estaciones/:estacionId`, ({ params }) => {
    const station = STATIONS.find((e) => e.id === params.estacionId);
    if (!station) return new HttpResponse(null, { status: 404 });
    return HttpResponse.json(station);
  }),

  http.get(`${API}/usuarios`, () => HttpResponse.json(USERS)),

  http.get(`${API}/reservas`, ({ request }) => {
    const user = new URL(request.url).searchParams.get('user');
    const result = user ? BOOKINGS.filter((r) => r.user === user) : BOOKINGS;
    return HttpResponse.json(result);
  }),

  http.post(`${API}/reservas`, async ({ request }) => {
    const newBooking = await request.json();
    return HttpResponse.json({ ...newBooking, id: 'res-nueva' }, { status: 201 });
  }),

  http.patch(`${API}/reservas/:reservaId`, async ({ params, request }) => {
    const changes = await request.json();
    const booking = BOOKINGS.find((r) => r.id === params.reservaId);
    return HttpResponse.json({ ...booking, ...changes });
  }),
];

// src/tests/server.js
import { setupServer } from 'msw/node';
import { handlers } from './handlers.js';

export const server = setupServer(...handlers);

// src/utils/validateBooking.test.js
import { describe, test, expect } from 'vitest';
import { validateBooking } from './validateBooking.js';
import { BIKES } from '../tests/handlers.js';

// One clearly future date and one clearly past date, fixed so the test
// doesn't depend on the clock of the day it runs.
const FUTURE = '2027-01-15T10:00';
const PAST = '2020-01-15T10:00';

const VALID = {
  bicicletaId: 'bici-001',
  startDate: FUTURE,
  hours: 2,
  terms: true,
};

describe('validateBooking', () => {
  test('returns no errors with valid data', () => {
    expect(validateBooking(VALID, BIKES)).toEqual({});
  });

  test.each([
    ['no bike selected',        { bicicletaId: '' },                 'bicicletaId'],
    ['nonexistent bike',        { bicicletaId: 'bici-999' },         'bicicletaId'],
    ['bike already rented',     { bicicletaId: 'bici-002' },         'bicicletaId'],
    ['bike under maintenance',  { bicicletaId: 'bici-003' },         'bicicletaId'],
    ['empty date',               { startDate: '' },                  'startDate'],
    ['date in the past',         { startDate: PAST },                'startDate'],
    ['zero hours',                { hours: 0 },                       'hours'],
    ['hours above a full day',   { hours: 25 },                       'hours'],
    ['non-numeric hours',        { hours: 'two' },                    'hours'],
    ['terms not accepted',       { terms: false },                   'terms'],
  ])('flags an error for %s', (_description, changes, expectedField) => {
    const errors = validateBooking({ ...VALID, ...changes }, BIKES);
    // We check WHICH field fails, not the exact wording of the message:
    // the text is copy and will change; the field is the contract.
    expect(errors).toHaveProperty(expectedField);
  });

  test('accepts the valid extremes of the hours range', () => {
    expect(validateBooking({ ...VALID, hours: 1 }, BIKES)).toEqual({});
    expect(validateBooking({ ...VALID, hours: 24 }, BIKES)).toEqual({});
  });

  test('accumulates every error, not just the first one', () => {
    const errors = validateBooking(
      { bicicletaId: '', startDate: PAST, hours: 0, terms: false },
      BIKES
    );
    expect(Object.keys(errors)).toHaveLength(4);
  });
});

// src/features/bookings/bookingsSlice.test.js
import { describe, test, expect } from 'vitest';
import {
  bookingsSlice,
  bookingCreated,
  bookingCancelled,
  selectUserBookings,
  selectBookingsSummary,
} from './bookingsSlice.js';

const { reducer } = bookingsSlice;

const STATE_WITH_ONE = {
  entities: {
    'res-01': { id: 'res-01', bicicletaId: 'bici-002', user: 'usr-01', hours: 2, status: 'activa' },
  },
  ids: ['res-01'],
  submitState: 'idle',
  error: null,
};

describe('bookings reducer', () => {
  test('returns the initial state for an unknown action', () => {
    const state = reducer(undefined, { type: 'action/unknown' });
    expect(state.ids).toEqual([]);
  });

  test('appends the created booking at the end and does not mutate the previous state', () => {
    const newBooking = { id: 'res-02', bicicletaId: 'bici-001', user: 'usr-01', hours: 3, status: 'activa' };
    const next = reducer(STATE_WITH_ONE, bookingCreated(newBooking));

    expect(next.ids).toEqual(['res-01', 'res-02']);
    expect(next.entities['res-02'].hours).toBe(3);
    // Immer lets us write as if we were mutating, but the previous state must stay intact
    expect(STATE_WITH_ONE.ids).toEqual(['res-01']);
  });

  test('cancelling changes the booking status without removing it', () => {
    const next = reducer(STATE_WITH_ONE, bookingCancelled({ id: 'res-01' }));
    expect(next.entities['res-01'].status).toBe('cancelada');
    expect(next.ids).toHaveLength(1);
  });
});

describe('bookings selectors', () => {
  const rootState = { bookings: STATE_WITH_ONE };

  test('filters by user', () => {
    expect(selectUserBookings(rootState, 'usr-01')).toHaveLength(1);
    expect(selectUserBookings(rootState, 'usr-02')).toHaveLength(0);
  });

  test('the summary counts by status', () => {
    expect(selectBookingsSummary(rootState)).toEqual({
      active: 1, confirmed: 0, cancelled: 0,
    });
  });
});

// src/hooks/useDebounce.test.js
import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest';
import { renderHook, act } from '@testing-library/react';
import { useDebounce } from './useDebounce.js';

describe('useDebounce', () => {
  beforeEach(() => vi.useFakeTimers());
  afterEach(() => vi.useRealTimers());

  test('returns the initial value immediately', () => {
    const { result } = renderHook(() => useDebounce('urbana', 300));
    expect(result.current).toBe('urbana');
  });

  test('does not update before the delay and does after', () => {
    const { result, rerender } = renderHook(({ value }) => useDebounce(value, 300), {
      initialProps: { value: 'urb' },
    });

    rerender({ value: 'urbana' });
    // Just before the threshold, the old value still holds
    act(() => vi.advanceTimersByTime(299));
    expect(result.current).toBe('urb');

    act(() => vi.advanceTimersByTime(1));
    expect(result.current).toBe('urbana');
  });

  test('only applies the last value from a burst of changes', () => {
    const { result, rerender } = renderHook(({ value }) => useDebounce(value, 300), {
      initialProps: { value: 'u' },
    });

    rerender({ value: 'ur' });
    act(() => vi.advanceTimersByTime(100));
    rerender({ value: 'urb' });
    act(() => vi.advanceTimersByTime(100));
    rerender({ value: 'urbana' });
    act(() => vi.advanceTimersByTime(300));

    expect(result.current).toBe('urbana');
  });
});

// src/hooks/useLocalStorage.test.js
import { describe, test, expect } from 'vitest';
import { renderHook, act } from '@testing-library/react';
import { useLocalStorage } from './useLocalStorage.js';

describe('useLocalStorage', () => {
  test('uses the default value when the key does not exist', () => {
    const { result } = renderHook(() => useLocalStorage('ciclourbano:tema', 'light'));
    expect(result.current[0]).toBe('light');
  });

  test('persists the value and retrieves it on a later mount', () => {
    const first = renderHook(() => useLocalStorage('ciclourbano:tema', 'light'));
    act(() => first.result.current[1]('dark'));
    first.unmount();

    const second = renderHook(() => useLocalStorage('ciclourbano:tema', 'light'));
    expect(second.result.current[0]).toBe('dark');
  });

  test('does not crash if the stored content is not valid JSON', () => {
    localStorage.setItem('ciclourbano:tema', '{broken');
    const { result } = renderHook(() => useLocalStorage('ciclourbano:tema', 'light'));
    expect(result.current[0]).toBe('light');
  });
});

// src/components/BikeCard.test.jsx
import { describe, test, expect, vi } from 'vitest';
import { renderWithProviders, screen } from '../tests/utils.jsx';
import BikeCard from './BikeCard.jsx';

function bike(id, model, type, status, pricePerHour) {
  return { id, model, type, status, stationId: 'est-01', pricePerHour };
}

const AVAILABLE = bike('bici-001', 'Classic Urban', 'urbana', 'disponible', 2.5);
const IN_MAINTENANCE = bike('bici-003', 'Cargo Max', 'carga', 'mantenimiento', 5.5);

describe('BikeCard', () => {
  test('shows model, status and price per hour', () => {
    renderWithProviders(<BikeCard bike={AVAILABLE} stationName="Main Square" />);

    expect(screen.getByRole('heading', { name: 'Classic Urban' })).toBeInTheDocument();
    expect(screen.getByText('Available')).toBeInTheDocument();
    expect(screen.getByText(/2\.50/)).toBeInTheDocument();
    expect(screen.getByText('Main Square')).toBeInTheDocument();
  });

  test('offers the book button only if the bike is available', () => {
    const { unmount } = renderWithProviders(<BikeCard bike={AVAILABLE} stationName="Main Square" />);
    expect(screen.getByRole('button', { name: /book/i })).toBeInTheDocument();
    unmount();

    renderWithProviders(<BikeCard bike={IN_MAINTENANCE} stationName="North Park" />);
    expect(screen.queryByRole('button', { name: /book/i })).not.toBeInTheDocument();
  });

  test('notifies the parent with the clicked bike', async () => {
    const onBook = vi.fn();
    const { user } = renderWithProviders(
      <BikeCard bike={AVAILABLE} stationName="Main Square" onBook={onBook} />
    );

    await user.click(screen.getByRole('button', { name: /book/i }));

    expect(onBook).toHaveBeenCalledTimes(1);
    expect(onBook).toHaveBeenCalledWith('bici-001');
  });

  test('does not convey status through color alone', () => {
    renderWithProviders(<BikeCard bike={IN_MAINTENANCE} stationName="North Park" />);
    // The status text must exist, not just the CSS class that paints it
    expect(screen.getByText('In maintenance')).toBeInTheDocument();
  });
});

// src/components/TypeSelector.test.jsx
import { describe, test, expect, vi } from 'vitest';
import { renderWithProviders, screen } from '../tests/utils.jsx';
import TypeSelector from './TypeSelector.jsx';

describe('TypeSelector', () => {
  test('marks the type received via props as active', () => {
    renderWithProviders(<TypeSelector selectedType="electrica" onTypeChange={vi.fn()} />);

    expect(screen.getByRole('button', { name: 'Electric' })).toHaveAttribute('aria-pressed', 'true');
    expect(screen.getByRole('button', { name: 'All' })).toHaveAttribute('aria-pressed', 'false');
  });

  test('notifies the clicked type and does not decide anything on its own', async () => {
    const onTypeChange = vi.fn();
    const { user } = renderWithProviders(<TypeSelector selectedType="todos" onTypeChange={onTypeChange} />);

    await user.click(screen.getByRole('button', { name: 'Cargo' }));

    expect(onTypeChange).toHaveBeenCalledWith('carga');
    // The clicked button does NOT become active: the parent decides that.
    // This assertion is what documents that the component is controlled.
    expect(screen.getByRole('button', { name: 'Cargo' })).toHaveAttribute('aria-pressed', 'false');
  });
});

// src/components/BookingForm.test.jsx
import { describe, test, expect, vi } from 'vitest';
import { renderWithProviders, screen } from '../tests/utils.jsx';
import { BIKES } from '../tests/handlers.js';
import BookingForm from './BookingForm.jsx';

describe('BookingForm', () => {
  test('does not submit and shows the errors associated with each field', async () => {
    const onCreateBooking = vi.fn();
    const { user } = renderWithProviders(
      <BookingForm bikes={BIKES} onCreateBooking={onCreateBooking} />
    );

    await user.click(screen.getByRole('button', { name: /confirm booking/i }));

    expect(onCreateBooking).not.toHaveBeenCalled();

    // The error isn't floating loose on the page: it's tied to the field via aria-describedby,
    // which is what makes a screen reader announce it on focus.
    const bikeField = screen.getByLabelText(/bike/i);
    expect(bikeField).toHaveAttribute('aria-invalid', 'true');
    expect(bikeField).toHaveAccessibleDescription(/choose a bike/i);
  });

  test('prevents booking a bike that is not available', async () => {
    const onCreateBooking = vi.fn();
    const { user } = renderWithProviders(
      <BookingForm bikes={BIKES} onCreateBooking={onCreateBooking} />
    );

    await user.selectOptions(screen.getByLabelText(/bike/i), 'bici-003');
    await user.type(screen.getByLabelText(/start/i), '2027-01-15T10:00');
    await user.click(screen.getByLabelText(/terms/i));
    await user.click(screen.getByRole('button', { name: /confirm booking/i }));

    expect(onCreateBooking).not.toHaveBeenCalled();
    expect(screen.getByRole('alert')).toHaveTextContent(/not available/i);
  });

  test('submits the complete data when everything is valid', async () => {
    const onCreateBooking = vi.fn();
    const { user } = renderWithProviders(
      <BookingForm bikes={BIKES} onCreateBooking={onCreateBooking} />
    );

    await user.selectOptions(screen.getByLabelText(/bike/i), 'bici-001');
    await user.type(screen.getByLabelText(/start/i), '2027-01-15T10:00');
    await user.clear(screen.getByLabelText(/hours/i));
    await user.type(screen.getByLabelText(/hours/i), '3');
    await user.click(screen.getByLabelText(/terms/i));
    await user.click(screen.getByRole('button', { name: /confirm booking/i }));

    expect(onCreateBooking).toHaveBeenCalledWith(
      expect.objectContaining({ bicicletaId: 'bici-001', hours: 3, status: 'activa' })
    );
  });
});

// src/pages/CataloguePage.test.jsx
import { describe, test, expect } from 'vitest';
import { http, HttpResponse } from 'msw';
import { renderWithProviders, screen, waitFor, waitForElementToBeRemoved } from '../tests/utils.jsx';
import { server } from '../tests/server.js';
import CataloguePage from './CataloguePage.jsx';

const API = 'http://localhost:3001';

describe('CataloguePage', () => {
  test('shows the skeleton and then the five bikes', async () => {
    renderWithProviders(<CataloguePage />);

    // First state: skeleton, not a "Loading…" text
    expect(screen.getByTestId('esqueleto-pagina')).toBeInTheDocument();
    await waitForElementToBeRemoved(() => screen.queryByTestId('esqueleto-pagina'));

    // Second state: the rendered list
    expect(await screen.findAllByTestId('tarjeta-bicicleta')).toHaveLength(5);
    expect(screen.getByRole('heading', { name: 'Electric Pro' })).toBeInTheDocument();
  });

  test('filters by the type that comes in through the URL', async () => {
    renderWithProviders(<CataloguePage />, { route: '/?tipo=electrica' });

    const cards = await screen.findAllByTestId('tarjeta-bicicleta');
    expect(cards).toHaveLength(2);
    expect(screen.getByRole('button', { name: 'Electric' })).toHaveAttribute('aria-pressed', 'true');
  });

  test('offers a retry on a server error, and the retry works', async () => {
    let attempts = 0;
    server.use(
      http.get(`${API}/bicicletas`, () => {
        attempts += 1;
        // The first attempt fails; the second, now with the default handler, succeeds
        if (attempts === 1) return new HttpResponse(null, { status: 500 });
        return HttpResponse.json([
          { id: 'bici-001', model: 'Classic Urban', type: 'urbana', status: 'disponible', stationId: 'est-01', pricePerHour: 2.5 },
        ]);
      })
    );

    const { user } = renderWithProviders(<CataloguePage />);

    // Third state: visible, actionable error
    expect(await screen.findByRole('alert')).toHaveTextContent(/could not be loaded/i);
    await user.click(screen.getByRole('button', { name: /retry/i }));

    expect(await screen.findByRole('heading', { name: 'Classic Urban' })).toBeInTheDocument();
    await waitFor(() => expect(attempts).toBe(2));
  });

  test('search combines with the filter without asking the server again', async () => {
    const { user } = renderWithProviders(<CataloguePage />, { route: '/?tipo=urbana' });
    await screen.findAllByTestId('tarjeta-bicicleta');

    await user.type(screen.getByRole('searchbox', { name: /search/i }), 'Classic');

    await waitFor(() => expect(screen.getAllByTestId('tarjeta-bicicleta')).toHaveLength(2));
  });
});

// src/pages/NewBookingPage.test.jsx
import { describe, test, expect } from 'vitest';
import { http, HttpResponse } from 'msw';
import { renderWithProviders, screen, waitFor } from '../tests/utils.jsx';
import { server } from '../tests/server.js';
import NewBookingPage from './NewBookingPage.jsx';
import BookingsPage from './BookingsPage.jsx';

const API = 'http://localhost:3001';
const CUSTOMER_SESSION = { session: { user: { id: 'usr-01', name: 'Ana Ribera', role: 'cliente' } } };

describe('NewBookingPage', () => {
  test('submits the booking and redirects to my bookings', async () => {
    let receivedBody = null;
    server.use(
      http.post(`${API}/reservas`, async ({ request }) => {
        receivedBody = await request.json();
        return HttpResponse.json({ ...receivedBody, id: 'res-nueva' }, { status: 201 });
      })
    );

    const { user, router } = renderWithProviders(null, {
      initialState: CUSTOMER_SESSION,
      route: '/reservas/nueva',
      routes: [
        { path: '/reservas', element: <BookingsPage /> },
        { path: '/reservas/nueva', element: <NewBookingPage /> },
      ],
    });

    await user.selectOptions(await screen.findByLabelText(/bike/i), 'bici-001');
    await user.type(screen.getByLabelText(/start/i), '2027-01-15T10:00');
    await user.click(screen.getByLabelText(/terms/i));
    await user.click(screen.getByRole('button', { name: /confirm booking/i }));

    // 1. What was sent to the server
    await waitFor(() => expect(receivedBody).toMatchObject({
      bicicletaId: 'bici-001', user: 'usr-01', status: 'activa',
    }));

    // 2. The redirect, checked against the real router
    await waitFor(() => expect(router.state.location.pathname).toBe('/reservas'));

    // 3. The success notice
    expect(screen.getByTestId('aviso')).toHaveTextContent(/booking created/i);
  });

  test('a server failure leaves the form filled in and shows the error', async () => {
    server.use(http.post(`${API}/reservas`, () => new HttpResponse(null, { status: 500 })));

    const { user, router } = renderWithProviders(<NewBookingPage />, {
      initialState: CUSTOMER_SESSION, route: '/reservas/nueva',
    });

    await user.selectOptions(await screen.findByLabelText(/bike/i), 'bici-001');
    await user.type(screen.getByLabelText(/start/i), '2027-01-15T10:00');
    await user.click(screen.getByLabelText(/terms/i));
    await user.click(screen.getByRole('button', { name: /confirm booking/i }));

    expect(await screen.findByRole('alert')).toHaveTextContent(/could not be created/i);
    // What was typed isn't lost: that's the difference between a tolerable error and an unbearable one
    expect(screen.getByLabelText(/bike/i)).toHaveValue('bici-001');
    expect(router.state.location.pathname).toBe('/reservas/nueva');
  });
});

// src/pages/WorkshopPage.test.jsx
import { describe, test, expect } from 'vitest';
import { renderWithProviders, screen } from '../tests/utils.jsx';
import WorkshopPage from './WorkshopPage.jsx';
import ForbiddenPage from './ForbiddenPage.jsx';
import RequireRole from '../components/RequireRole.jsx';

const routes = [
  { path: '/sin-permisos', element: <ForbiddenPage /> },
  {
    path: '/taller',
    element: (
      <RequireRole allowedRoles={['operario']}>
        <WorkshopPage />
      </RequireRole>
    ),
  },
];

describe('access to /taller', () => {
  test('the operator sees the panel', async () => {
    renderWithProviders(null, {
      initialState: { session: { user: { id: 'usr-02', name: 'Marc Solé', role: 'operario' } } },
      route: '/taller', routes,
    });

    expect(await screen.findByRole('heading', { name: /workshop/i })).toBeInTheDocument();
  });

  test('a customer who navigates in via URL gets "forbidden", not a 404 or a blank screen', async () => {
    renderWithProviders(null, {
      initialState: { session: { user: { id: 'usr-01', name: 'Ana Ribera', role: 'cliente' } } },
      route: '/taller', routes,
    });

    expect(await screen.findByRole('heading', { name: /you do not have permission/i })).toBeInTheDocument();
    expect(screen.queryByRole('heading', { name: /workshop/i })).not.toBeInTheDocument();
  });
});

// cypress/e2e/booking.cy.js
describe('booking a bike', () => {
  beforeEach(() => {
    cy.seedData();              // Resets db.json from the seed
    cy.signInAs('usr-01');      // Wrapped in cy.session: doesn't repeat the form
  });

  it('creates the booking and shows it in my bookings', () => {
    cy.intercept('GET', '**/bicicletas*').as('catalogue');
    cy.intercept('POST', '**/reservas').as('createBooking');

    cy.visit('/');
    cy.wait('@catalogue');

    // We wait for the element, never for a fixed time
    cy.cardFor('bici-001').findByRole('button', { name: /book/i }).click();

    cy.location('pathname').should('eq', '/reservas/nueva');
    cy.findByLabelText(/start/i).type('2027-01-15T10:00');
    cy.findByLabelText(/hours/i).clear().type('3');
    cy.findByLabelText(/terms/i).check();
    cy.findByRole('button', { name: /confirm booking/i }).click();

    cy.wait('@createBooking').its('response.statusCode').should('eq', 201);

    cy.location('pathname').should('eq', '/reservas');
    cy.byTestId('aviso').should('contain.text', 'Booking created');
    cy.byTestId('fila-reserva').should('have.length', 2);
    cy.byTestId('total-reserva').first().should('contain.text', '7.50');
  });
});

// cypress/e2e/cancel.cy.js
describe('cancelling a booking', () => {
  beforeEach(() => {
    cy.seedData();
    cy.signInAs('usr-01');
  });

  it('asks for confirmation, reflects the change, and persists it after a reload', () => {
    cy.intercept('PATCH', '**/reservas/res-01').as('cancel');

    cy.visit('/reservas');
    cy.byTestId('fila-reserva').should('have.length', 1);
    cy.findByRole('button', { name: /cancel/i }).click();

    // Without confirming, nothing happens: confirmation is part of H6's contract
    cy.findByRole('button', { name: /back/i }).click();
    cy.contains('Active').should('exist');

    cy.findByRole('button', { name: /cancel/i }).click();
    cy.findByRole('button', { name: /yes, cancel/i }).click();

    cy.wait('@cancel');
    cy.contains('Cancelled').should('exist');

    // The reload is what distinguishes a real change from an optimistic illusion
    cy.reload();
    cy.contains('Cancelled').should('exist');
  });
});

npm run cobertura
# → report in the console and in coverage/index.html

File                        | % Stmts | % Branch | Uncovered lines
----------------------------|---------|----------|----------------
src/utils/                  |   98.1  |   96.4   |
src/features/               |   91.7  |   84.2   |
src/components/             |   78.3  |   71.0   |
src/pages/                  |   72.6  |   64.8   |
src/hooks/                  |   88.9  |   80.0   |
src/api/client.js           |   61.2  |   45.0   | 48-53, 67-71
----------------------------|---------|----------|----------------
All files                   |   80.4  |   73.1   |

# .github/workflows/tests.yml
name: Tests

on:
  push:
    branches: [main]
  pull_request:

jobs:
  static-and-unit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm            # Speeds things up a lot; npm's cache is half the job's time
      # ci instead of install: installs exactly what's in package-lock.json
      - run: npm ci
      - run: npm run lint
      - run: npm run formato:comprobar
      - run: npm run cobertura
      - uses: actions/upload-artifact@v4
        if: always()           # Uploads the report even if the tests fail
        with:
          name: coverage
          path: coverage/

  end-to-end:
    runs-on: ubuntu-latest
    needs: static-and-unit   # Don't spend six minutes on e2e if the linter already failed
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: npm }
      - run: npm ci
      # We test the BUILT application, not the dev server:
      # it's the closest thing to production we can run here.
      - run: npm run build
      - uses: cypress-io/github-action@v6
        with:
          install: false
          start: npm run api, npm run preview
          wait-on: 'http://localhost:4173, http://localhost:3001/bicicletas'
          wait-on-timeout: 90
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: cypress-screenshots
          path: |
            cypress/screenshots
            cypress/videos

// src/features/bookings/useCancelBooking.js
onSettled: (_data, _error, variables) => {
  client.invalidateQueries({ queryKey: keys.bookings.byUser(variables.userId) });
- client.invalidateQueries({ queryKey: keys.bikes.all() });
}

test('after cancelling, the catalogue reflects that the bike is available again', async () => {
  const { user } = renderWithProviders(null, {
    initialState: CUSTOMER_SESSION,
    route: '/reservas',
    routes: [
      { path: '/reservas', element: <BookingsPage /> },
      { path: '/', element: <CataloguePage /> },
    ],
  });

  await user.click(await screen.findByRole('button', { name: /cancel/i }));
  await user.click(screen.getByRole('button', { name: /yes, cancel/i }));
  await screen.findByText('Cancelled');

  // We go back to the catalogue: if the bikes cache wasn't invalidated,
  // it will still show "Rented" here and the test fails.
  await user.click(screen.getByRole('link', { name: /catalogue/i }));
  const card = (await screen.findAllByTestId('tarjeta-bicicleta'))
    .find((t) => t.dataset.bicicleta === 'bici-002');
  await waitFor(() => expect(card).toHaveTextContent('Available'));
});

// src/pages/BikeDetailPage.test.jsx
import { describe, test, expect } from 'vitest';
import { renderWithProviders, screen } from '../tests/utils.jsx';
import BikeDetailPage from './BikeDetailPage.jsx';
import CataloguePage from './CataloguePage.jsx';

describe('BikeDetailPage', () => {
  test('a nonexistent id shows a custom 404 with a way out', async () => {
    const { user, router } = renderWithProviders(null, {
      route: '/bicicletas/bici-999',
      routes: [
        { path: '/', element: <CataloguePage /> },
        { path: '/bicicletas/:bicicletaId', element: <BikeDetailPage /> },
      ],
    });

    // Custom message, in a heading: it's a screen, not a stray notice
    expect(await screen.findByRole('heading', { name: /we could not find that bike/i })).toBeInTheDocument();
    // And no technical information leaks to the user
    expect(screen.queryByText(/404/)).not.toBeInTheDocument();
    expect(screen.queryByText(/HttpError/)).not.toBeInTheDocument();

    await user.click(screen.getByRole('link', { name: /back to catalogue/i }));
    expect(router.state.location.pathname).toBe('/');
  });

  test('a valid id shows the detail page', async () => {
    renderWithProviders(<BikeDetailPage />, {
      route: '/bicicletas/bici-001',
      routes: [{ path: '/bicicletas/:bicicletaId', element: <BikeDetailPage /> }],
    });

    expect(await screen.findByRole('heading', { name: 'Classic Urban' })).toBeInTheDocument();
    expect(screen.getByText('Main Square')).toBeInTheDocument();
  });
});

// cypress/e2e/workshop.cy.js
describe('the operator changes a bike status', () => {
  beforeEach(() => {
    cy.seedData();
    cy.signInAs('usr-02');   // operator
  });

  it('sends a bike to maintenance and it shows in the catalogue', () => {
    cy.intercept('PATCH', '**/bicicletas/bici-001').as('changeStatus');
    cy.intercept('GET', '**/bicicletas*').as('catalogue');

    cy.visit('/taller');
    cy.findByRole('row', { name: /Classic Urban/ })
      .findByRole('button', { name: /send to workshop/i })
      .click();

    cy.wait('@changeStatus').its('request.body').should('deep.include', { status: 'mantenimiento' });

    // The invalidation must bring in a fresh catalogue without reloading the page
    cy.findByRole('link', { name: /catalogue/i }).click();
    cy.wait('@catalogue');
    cy.cardFor('bici-001').should('contain.text', 'In maintenance');
    cy.cardFor('bici-001').findByRole('button', { name: /book/i }).should('not.exist');
  });

  it('a customer never even sees the panel', () => {
    cy.signInAs('usr-01');
    cy.visit('/taller');
    cy.findByRole('heading', { name: /you do not have permission/i }).should('exist');
    cy.byTestId('menu-usuario').should('not.contain.text', 'Workshop');
  });
});

// src/queries/useBikes.test.jsx
import { describe, test, expect, vi, afterEach } from 'vitest';
import { http } from 'msw';
import { delay } from 'msw';
import { renderWithProviders, screen } from '../tests/utils.jsx';
import { server } from '../tests/server.js';
import CataloguePage from '../pages/CataloguePage.jsx';

const API = 'http://localhost:3001';

describe('API client timeout', () => {
  afterEach(() => vi.useRealTimers());

  test('if the request exceeds the limit, an understandable error is shown and can be retried', async () => {
    // The handler never responds in time: the client's AbortController must cut it off
    server.use(
      http.get(`${API}/bicicletas`, async () => {
        await delay('infinite');
      })
    );

    vi.useFakeTimers({ shouldAdvanceTime: true });
    const { user } = renderWithProviders(<CataloguePage />);

    expect(screen.getByTestId('esqueleto-pagina')).toBeInTheDocument();

    // We advance past the limit configured in client.js (8 s)
    await vi.advanceTimersByTimeAsync(8500);

    const notice = await screen.findByRole('alert');
    // A message for people, not the exception name
    expect(notice).toHaveTextContent(/taking too long/i);
    expect(notice).not.toHaveTextContent(/AbortError/);
    expect(screen.getByRole('button', { name: /retry/i })).toBeInTheDocument();

    // And retrying returns to the normal path
    vi.useRealTimers();
    server.resetHandlers();
    await user.click(screen.getByRole('button', { name: /retry/i }));
    expect(await screen.findAllByTestId('tarjeta-bicicleta')).toHaveLength(5);
  });
});