Este proyecto es la solución al desafío "Shopping Cart" del apartado de React de The Odin Project. Es una Single Page Application (SPA) que simula un e-commerce de indumentaria, demostrando el manejo de enrutamiento del lado del cliente, consumo de APIs externas, estado global y pruebas unitarias aisladas.
- Navegación SPA: Transiciones fluidas sin recarga de página mediante
react-router-dom(v6+). - Estado Global: Manejo del carrito de compras (agregar, eliminar, modificar cantidades) a través de
Context API, evitando el prop drilling. - Consumo de API: Integración asíncrona con FakeStore API para obtener el catálogo de productos y los detalles individuales.
- Filtros Dinámicos: Clasificación de productos por categoría (Hombre/Mujer) procesada en el cliente.
- Diseño Responsivo: Interfaz moderna y adaptable construida con un sistema de diseño propio en CSS (Flexbox/Grid).
- Framework: React 18 (Inicializado con Vite)
- Enrutamiento: React Router DOM (createBrowserRouter)
- Estado: React Context API + Custom Hooks
- Estilos: CSS3
- Testing: Vitest, React Testing Library, user-event
- Clona este repositorio:
git clone https://github.com/Tomas2439/shopping-cart.git
- Navega al directorio del proyecto:
cd shopping-cart
- Instala las dependencias:
npm install
- Inicia el servidor de desarrollo:
npm run dev
Las pruebas de esta aplicación fueron construidas utilizando Vitest y React Testing Library. Siguiendo las mejores prácticas, la estrategia se centró en probar el comportamiento de los componentes de forma aislada, simulando la interacción del usuario sin depender de servicios externos ni probar librerías de terceros (como el funcionamiento interno del enrutador).
Para ejecutar la suite de pruebas:
npm run test
Para probar los componentes UI que dependen del contexto global (carrito) y del enrutamiento, se utilizaron "wrappers" falsos (MemoryRouter y un CartContext.Provider mockeado).
- Se evaluó el correcto renderizado de la información (título, precio).
- Mediante
@testing-library/user-event, se simuló la escritura del usuario en el input numérico y el evento de clic en el botón "Agregar". - Se utilizó
vi.fn()para espiar y afirmar que la funciónaddToCartdel contexto es llamada exactamente con los argumentos correctos (el objeto del producto y la cantidad definida por el usuario).
Para probar el componente del catálogo que consume la FakeStore API, se implementó un mock de la función global fetch.
- Por qué: Esto evita realizar peticiones de red reales, garantizando que las pruebas sean rápidas, predecibles y no fallen por problemas de conectividad o caídas de la API.
- Se validó que el componente muestre correctamente los estados de carga ("Cargando...") antes de que se resuelva la promesa.
- Una vez resuelta, se confirmó mediante métodos asíncronos (
findByText) que los componentes de los productos son renderizados en la pantalla basados en la respuesta simulada.
La aplicación está desplegada en Netlify.
Dado que es una aplicación renderizada del lado del cliente (SPA), se configuró un archivo _redirects en el directorio public/ con la regla /* /index.html 200. Esto asegura que cuando un usuario visita una ruta directa (ej. /shop o /cart) o recarga la página, el servidor de Netlify redirija correctamente la petición a index.html para que React Router tome el control y evite un error 404.