GUia de pruebas Unitarias universida coope

Es unas priwhewbe
sdsd
sd
sd
s
ds
fd
f
sd
f
sfs

1. Pruebas Unitarias con Jest
Autor: Gustavo Sánchez Rodríguez
Fecha: 2025-04-02
1

2. ¿Qué es Jest?
Framework de pruebas unitarias para JavaScript.
Desarrollado por Meta (Facebook).
Ideal para proyectos Node.js y React.
Rápido, sencillo y con configuración mínima.
2

3. ¿Por qué usar Jest?
Automatiza pruebas
Detecta errores antes de producción
Aumenta la calidad del código
Permite pruebas de funciones y componentes
3

4. Instalación
Abre tu terminal y ejecuta:
npm init -y
npm install --save-dev jest
En el archivo package.json, agrega:
"scripts": {
"test": "jest"
}
4

5. Creamos una función
Archivo: suma.js
function suma(a, b) {
return a + b;
}
module.exports = suma;
5

6. Escribimos la prueba
Archivo: suma.test.js
const suma = require('./suma');
test('Suma de 2 + 3 debe ser 5', () => {
expect(suma(2, 3)).toBe(5);
});
6

7. Ejecutamos la prueba
En la terminal:
npm test
Verás un resultado como:
PASS ./suma.test.js
✓ Suma de 2 + 3 debe ser 5
7

8. Buenas prácticas
Nombrar los archivos de prueba: nombre.test.js
Escribir pruebas pequeñas y específicas
Ejecutar las pruebas antes de cada entrega
8

9. ¿Qué es un Pipeline en Jenkins?
Un Pipeline en Jenkins es un conjunto de etapas automatizadas que definen el flujo
completo para compilar, probar, construir y desplegar un software.
Básicamente, es un proceso automático paso a paso que te permite controlar y
orquestar todo el ciclo de vida de tu aplicación:
Desde que haces un commit en GitHub → hasta que la app queda publicada en un
servidor.
9

10. ¿Para qué se utiliza?
Se usa para:
Automatizar el proceso de integración y despliegue continuo (CI/CD)
Evitar hacer manualmente tareas repetitivas como:
Descargar código
Compilar
Ejecutar pruebas
Generar artefactos
Subir a un servidor o nube
Reducir errores humanos
Asegurar que el software pase por pruebas antes de ser publicado
Acelerar el proceso de entrega de software
10

11. Ejemplo de flujo de un Pipeline típico
Un pipeline sencillo podría tener estas etapas:
1. Checkout: Descarga el código del repositorio GitHub.
2. Build: Compila el proyecto.
3. Test: Ejecuta las pruebas unitarias.
4. Package: Empaqueta el proyecto (ejemplo: archivo .jar, .zip, etc.).
5. Deploy: Sube la app a un servidor de pruebas o producción.
11

12. ¿Cómo se escribe un Pipeline?
En Jenkins, se usa un archivo llamado Jenkinsfile con una sintaxis declarativa
parecida a esta:
pipeline {
agent any
stages {
stage('Checkout') {
steps {
git 'https://github.com/tu-repo.git'
}
}
stage('Build') {
steps {
sh 'npm install'
}
}
12

13. stage('Test') {
steps {
sh 'npm test'
}
}
stage('Deploy') {
steps {
echo 'Desplegando la aplicación...'
}
}
}
}
13

14. ¿En qué escenarios se usa un Pipeline?
Proyectos de software profesional: Para asegurar que todo cambio pase por
pruebas y revisión.
Desarrollo en equipo: Para evitar que un mal commit dañe la app en producción.
Entornos educativos: Para que estudiantes aprendan buenas prácticas de
despliegue automatizado.
Proyectos personales: Para tener el control y la automatización del proceso de
desarrollo.
14

15. Resumen
Concepto Descripción
Pipeline
Flujo automático de pasos para construir, probar y desplegar
software.
Usos CI/CD, automatización, evitar errores humanos, agilizar entregas.
ComponentesStages (etapas), Steps (pasos), Agent (dónde se ejecuta).
15

16. Análisis de la App: Comparando Axios vs Fetch
16

17. Bloque 1: Importación de dependencias
import { useState, useCallback } from 'react';
import Person from './components/Person';
import SearchForm from './components/SearchForm';
import './App.css';
import axios from 'axios';
import VisualizarTiempos from './components/VisualizarTiempos';
Se importan:
Hooks (useState, useCallback)
Componentes visuales
Librería Axios para peticiones
Estilos CSS
17

18. Bloque 2: Declaración de estados
const [timeAxios, setTimeAxios] = useState(...);
const [timeFetch, setTimeFetch] = useState(...);
const [people, setPeople] = useState({ axios: [], fetch: [] });
const [gender, setGender] = useState('');
const [country, setCountry] = useState('US');
const [isLoading, setIsLoading] = useState(false);
const [loadingType, setLoadingType] = useState('');
Manejan el estado de:
Tiempos de respuesta
Datos obtenidos
Filtros (género y país)
Estado de carga
18

19. Bloque 3: Construcción de la URL
const url = `https://randomuser.me/api/?results=12&gender=${gender}&nat=${country}`;
Genera dinámicamente la URL para la API usando los filtros seleccionados.
19

20. Bloque 4: Función para buscar con Axios
const findPeopleAxios = useCallback(async () => {
if (isLoading) return;
setIsLoading(true);
setLoadingType('axios');
setPeople({ axios: [], fetch: [] });
try {
const { data: { results } } = await axios.get(url);
setPeople(prev => ({ ...prev, axios: results }));
} catch (error) {
console.error(`Error en Axios: ${error.message}`);
} finally {
setTimeout(() => setIsLoading(false), 500);
}
}, [gender, country, isLoading, url]);
Hace la petición con Axios y actualiza el estado.
20

21. Bloque 5: Función para buscar con Fetch
const findPeopleFetch = useCallback(async () => {
if (isLoading) return;
setIsLoading(true);
setLoadingType('fetch');
setPeople({ axios: [], fetch: [] });
try {
const response = await fetch(url);
if (!response.ok) throw new Error(`Error HTTP: ${response.status}`);
const { results } = await response.json();
setPeople(prev => ({ ...prev, fetch: results }));
} catch (error) {
console.error(`Error en Fetch: ${error.message}`);
} finally {
setTimeout(() => setIsLoading(false), 500);
}
}, [gender, country, isLoading, url]);
Hace la petición con Fetch y actualiza el estado. 21

22. Bloque 6: Comparar tiempos de respuesta
const compareRequests = useCallback(async () => {
if (isLoading) return;
setIsLoading(true);
setLoadingType('compare');
setPeople({ axios: [], fetch: [] });
try {
const axiosStart = performance.now();
const axiosPromise = axios.get(url).then(res => {
const time = parseFloat((performance.now() - axiosStart).toFixed(2));
localStorage.setItem('axiosTime', time);
setTimeAxios(time);
return res.data.results;
});
22

23. const fetchStart = performance.now();
const fetchPromise = fetch(url)
.then(async res => {
if (!res.ok) throw new Error(`Error HTTP: ${res.status}`);
const data = await res.json();
const time = parseFloat((performance.now() - fetchStart).toFixed(2));
localStorage.setItem('fetchTime', time);
setTimeFetch(time);
return data.results;
});
const [axiosResponse, fetchResponse] = await Promise.all([axiosPromise, fetchPromise]);
setPeople({ axios: axiosResponse, fetch: fetchResponse });
} catch (error) {
console.error(`Error en comparación: ${error.message}`);
} finally {
setTimeout(() => setIsLoading(false), 500);
}
}, [gender, country, isLoading, url]);
Hace ambas peticiones y mide el tiempo que tarda cada una.
23

24. Bloque 7: Manejadores de los formularios
const handleGender = (event) => setGender(event.target.value);
const handleCountry = (event) => setCountry(event.target.value);
Actualizan los filtros según la selección del usuario.
24

25. Bloque 8: Renderizado de la aplicación
return (
<div className="App">
<h1>Random People</h1>
<SearchForm handleGender={handleGender} handleCountry={handleCountry} country={country} />

<div className="App-controls">
<button onClick={findPeopleAxios}>Buscar con Axios</button>
<button onClick={findPeopleFetch}>Buscar con Fetch</button>
<button onClick={compareRequests}>Comparar Axios vs Fetch</button>
</div>
25

26. <VisualizarTiempos timeAxios={timeAxios} timeFetch={timeFetch} />
<div className="App-results">
<div className="result-section">
<h2>Resultados con Axios</h2>
{people.axios.map(person => <Person key={person.login.uuid} person={person} />)}
</div>
<div className="result-section">
<h2>Resultados con Fetch</h2>
{people.fetch.map(person => <Person key={person.login.uuid} person={person} />)}
</div>
</div>
</div>
);
26

27. Construye la interfaz:
Formulario de búsqueda
Botones de acción
Visualización de tiempos
Resultados de la búsqueda
27

28. Resumen de bloques
Bloque Función principal
1. Importación de dependenciasPreparar librerías y componentes.
2. Declaración de estados Controlar datos, filtros y tiempos.
3. URL dinámica Construir la URL de la API.
4-5. Funciones de búsqueda Obtener datos con Axios o Fetch.
6. Comparación de tiempos Medir y guardar tiempos de respuesta.
7. Manejadores de formulariosCapturar entradas del usuario.
8. Renderizado Mostrar formulario, botones, tiempos y datos.
28