Angular 21 de Cero a Experto / Nivel producción

Reto: la suite de tests de Mi Bolsillo

Reto35 min60 XP

Antes del proyecto final, vas a tejer la red de seguridad: la suite de tests de la lógica de "Mi Bolsillo". Probarás el store, los validadores y los derivados con casos normales Y casos límite —los que de verdad cazan bugs—. Cuando esté verde, podrás construir el proyecto final con la confianza de que si rompes algo, un test te avisa al instante.

Reto

Tests de la lógica del store, casos límite incluidos

Media35 min60 XP(×2 sin mirar la solución)

Qué debes construir

Una suite de tests (con un mini describe/it/expect) que cubra la lógica de "Mi Bolsillo":

calcularTotal: suma correcta, lista vacía (borde), un solo gasto.
saldo: presupuesto − total, incluyendo saldo negativo (gastaste de más).
validarGasto: acepta un gasto válido, rechaza nombre vacío, rechaza monto ≤ 0, rechaza monto excesivo.
porCategoria: agrupa correctamente, categoría inexistente devuelve vacío.

Enfócate en los CASOS LÍMITE (vacío, cero, negativo, valores extremos): ahí viven los bugs.

Reglas

Prueba comportamiento (entrada → salida esperada), no internos.
Incluye al menos un caso límite por función.
Todos los tests deben pasar (verde) al final.

35:00

Cuando estés listo, arranca el reloj.

El razonamiento. Una buena suite de tests no repite el caso feliz mil veces: cubre los BORDES, que es donde se esconden los bugs. Lista vacía, cero, negativo, valores extremos, la categoría que no existe. Cada test prueba UNA cosa y tiene un nombre que dice qué —así, cuando uno se pone rojo, sabes exactamente qué se rompió sin depurar—. Y prueba comportamiento (entrada → salida), no cómo está hecho por dentro, para que sobreviva a los refactors. Esta suite es la red que te deja construir el proyecto final sin miedo: cambias la lógica, corres los tests, y si algo se rompe, lo sabes en segundos.

Qué observar:

Cada función tiene su describe, y cada caso su it con un nombre claro —si algo falla, el nombre te dice qué sin depurar—.
Los CASOS LÍMITE están marcados: lista vacía, saldo negativo, monto cero/negativo/excesivo, categoría inexistente. Ahí es donde los bugs se esconden, y por eso son los tests más valiosos.
Cada test prueba UNA cosa (una regla de validación por test), así el rojo es específico.
Al final, "TODO VERDE": la red de seguridad está tejida.

En Angular real, esto correría con Vitest (mismos describe/it/expect, muchas más afirmaciones), y añadirías tests de componente con Angular Testing Library para la UI. Pero el grueso del valor está aquí, en la lógica pura: rápida de testear, y donde vive el comportamiento de tu app. Con esta red, el proyecto final es un salto con confianza.

Qué sigue

Terminaste el módulo de nivel producción: tu app puede renderizarse en servidor, cargar bajo demanda, y está probada y lista para el mundo real. Has recorrido TODO el arco de Angular moderno —de los componentes standalone a las señales, la DI, el routing, los formularios, RxJS, los datos, el estado a gran escala y el tiempo real—. Solo queda coronarlo: el proyecto final, un tablero colaborativo en tiempo real que integra todo lo que sabes. La prueba de que eres, de verdad, desarrollador Angular.