👽
3ntr0 Apuntes
  • 📚Principios SOLID y Clean Code
    • 💲Deuda Técnica
    • 📌Mejorar Nombres
      • 📄Nombre según Tipo
      • 🚗Nombre Clases
      • ⚙️Nombres Funciones
    • ☑️Mejorar Funciones
    • ➿Principio DRY
    • 🧼Clean Code en Clases (POO)
      • 📘 Principio de Responsabilidad Única (SRP)
    • 🤮🇸 🇹 🇺 🇵 🇮 🇩 - Code Smells
      • 🚫Singleton
      • 🙏Tight Coupling
      • 🥸U P I D
      • 🚩Más Code Smells
  • 💕Angular
    • 🏍️Standalone
    • 🆚ngClass vs [class.clase]
    • 🩻Directivas
    • 🚩ElementRef
    • 🎀Decoradores
      • @HostListener
    • 🔄OnChanges
    • 🧪Testing - Jasmine y Karma
      • 🚀Módulo 1: Introducción a las pruebas unitarias
      • 🧫Módulo 2: Introducción a Jasmine
      • ⚒️Módulo 3: Introducción a Karma
      • 🔬Módulo 4: Pruebas unitarias en Angular
        • Código comentado Paso a Paso
      • 🕵️‍♂️Módulo 5: Técnicas avanzadas en Jasmine
      • 📚Módulo 6: Técnicas avanzadas en Karma
  • 🖼️HTML y CSS
    • 🖌️Custom Properties
    • Trucos
    • Brakepoints
  • 🧋Javascript
    • 🛠️Funciones
    • 📦Arrays
      • Every y Some
      • Map
      • Reduce
    • 😎Hoisting
    • 🪚Desestructuración
    • 🛻Programación Asincrona
      • 📞Callbacks
      • 🌟Promises
      • 🆚Promise.all Y Promise.any
      • 🚀Async/Await
    • Respuestas HTTP
    • 🧐Dudas Básicas
      • NodeList
      • 🧐Contextos de .this
      • 💭Parametro Rest
      • 🗨️arguments
      • 🙀JavaScript no tiene clases
      • 🆚Null vs Undefined
      • 🔎Operador in
      • 🟨Operador Spread
      • ❓Encadenamiento Opcional
      • 🔲Notación de Corchetes
      • ⛓️Coalescencia Nula (??)
      • 🆚Shallow Copy vs Deep Copy
      • 🆚.json VS JSON.parse
      • ⚙️Fetch wrapper
      • Sets
      • Maps
  • 📒Terminología
    • 💎Esenciales
    • Web
    • Javascript
  • 🌐GIT
    • Source Tree
  • 🧬React
    • 🫂Babel
  • 🔧 Fundamentos de C#
    • 🎛️General
      • 🧐Diferencia Equals y ==
      • 🧐Diferencia entre typeof y .GetType()
      • 📐Convenciones de Nomenclatura
    • 💠Summary
    • 📇.resx
    • 📄Strings
      • ⛓️Comparación de cadenas
    • 🧲Regex
    • 📦POO
      • 🚙Clases
        • ✏️Clase String
        • 📥Métodos de Acceso
        • ⚗️Métodos de Extensión
    • 🖇️Pattern Matching
    • 🚩Excepciones
    • Programación Asíncrona
    • 🔎LINQ
      • 🅿️PLINQ
  • 🌐 Desarrollo Web con ASP.NET
    • 🧬Modelos
      • 🗒️Data Annotations
        • 📑Lista
        • 🧪Atributos
          • 🛠️Atributos Personalizados
          • 🧰AttributeUsage
          • 📥Acceso a los atributos
        • 📚Documentación
    • 👷Servicios
      • ⭐Servicios Singleton
    • ⏳Sesiones
      • 🧭Temp Data
    • DbContext
      • 🔄Eager Loading
    • 🥽Manejo de Datos
      • 🗃️Archivos
        • 📤Subida de Archivos
        • ✏️Leer y Escribir
        • 🕓Manejo de Archivos Temporales
        • 🛡️Validación de Archivos en ASP.NET Core
      • Colecciones
        • 🪜Pila (Stack)
        • 🏇Cola (Queue)
      • 🩻Manejo de XMLs
        • 📂XmlDocument
          • 🎯XPath
        • 🧿XmlReader
    • ❤️Tips y Utilities
      • 🟰StringComparison
    • 🧰Debug Tools
      • 🧭Stopwatch
  • 🚀Razor
    • 🧱Configuración de Proyecto
    • 📃Pages
      • 🔸Método OnGet
      • 🔸Carpeta Models
      • 🔸Partial Pages
    • 🎨Layouts
      • Aplicar CSS A UNA PAGE
    • 🚴‍♂️Routing
    • 🏢_ViewImports
    • ✒️Sintaxis Razor
      • 😀Introducción
      • 📔Expresiones Implícitas
      • 📕Expresiones Explícitas
      • ✍️Renderizar Texto
      • 🧑‍🔬Class Page Model
      • 🔖Tag Helpers
        • 🔹asp-page
        • 🔹asp-append-version
        • 🔹asp-for
        • 🔹asp-items
        • 🔹asp-action y asp-controller
  • 🔮LUA
    • 🎯Fundamentos
    • ⌨️Entrada por Consola
    • 🔗Estructuras de Control
    • ⚒️Funciones
    • 📦Tablas
    • 📚Funciones y Librerías Estándar
    • 🦖POO
Con tecnología de GitBook
En esta página
  • 🧩 Tabla de Funciones de Jasmine
  • ✅ Tabla de Matchers en Jasmine
  • 🕵️‍♂️ Tabla de Métodos de Spies en Jasmine
  1. Angular
  2. Testing - Jasmine y Karma

Módulo 2: Introducción a Jasmine

🌟 2.1. ¿Qué es Jasmine?

Jasmine es un framework de pruebas unitarias para JavaScript, comúnmente utilizado en aplicaciones Angular. Proporciona una sintaxis clara para definir pruebas, permitiendo verificar si el código funciona como se espera. Jasmine no depende de otros frameworks ni navegadores, lo que lo hace versátil para diferentes entornos.

⚙️ 2.2. Instalación y configuración de Jasmine

En proyectos Angular, Jasmine viene preconfigurado cuando se utiliza el Angular CLI. Esto significa que no necesitas instalarlo manualmente. Al crear un proyecto con Angular CLI, se configuran automáticamente Jasmine y Karma para ejecutar las pruebas.

Pasos básicos para trabajar con Jasmine:

  1. Para generar un nuevo proyecto Angular: ng new mi-proyecto

  2. Para ejecutar las pruebas en el proyecto: ng test

Este comando abrirá un navegador donde se ejecutarán las pruebas automáticamente con Jasmine y Karma, mostrando los resultados en tiempo real.

🏗️ 2.3. Estructura básica de una prueba en Jasmine

Una prueba en Jasmine sigue una estructura clara y concisa que consta de tres partes:

  • describe(): Agrupa un conjunto de pruebas relacionadas.

  • it(): Define una prueba específica, describiendo qué comportamiento estás validando.

  • expect(): Es el validador que define lo que esperas que ocurra. Usa "matchers" (validadores) para verificar los resultados.

Ejemplo de estructura básica:

// Suite de pruebas para una calculadora
describe('Pruebas de la calculadora', () => {
  
  // Prueba para la suma
  it('debería sumar correctamente dos números', () => {
    const resultado: number = 5 + 3;  // Tipo explícito como número

    // Se espera que la suma sea 8
    expect(resultado).toBe(8);  // Verifica que el resultado sea igual a 8
  });
});

🔍 2.4. Especificaciones (Specs) y Suites de pruebas

En Jasmine, un conjunto de pruebas se denomina suite y se define con describe(). Cada suite puede tener una o más especificaciones o specs, que son las pruebas individuales definidas con it(). Esta estructura te permite organizar y agrupar las pruebas de manera lógica.

Por ejemplo, si tienes una suite que agrupa las pruebas para una calculadora, cada spec validará una operación matemática (suma, resta, multiplicación, etc.).

🧩 2.5. Funciones más importantes de Jasmine

Algunas de las funciones más comunes que ofrece Jasmine para estructurar y gestionar las pruebas son:

  • describe(): Agrupa las pruebas en una suite.

  • it(): Define una prueba individual dentro de la suite.

  • beforeEach() y afterEach(): Se ejecutan antes y después de cada prueba, útiles para configurar o limpiar el entorno de prueba.

  • expect(): Define las expectativas para verificar los resultados esperados.

Ejemplo usando beforeEach():

// Suite de pruebas para operaciones matemáticas
describe('Pruebas de operaciones matemáticas', () => {
  let valorA: number;  // Definimos el tipo como number
  
  // Antes de cada prueba, asignamos un valor inicial a valorA
  beforeEach(() => {
    valorA = 10;
  });

  // Prueba para verificar la suma
  it('debería sumar correctamente', () => {
    const resultado: number = valorA + 5;
    expect(resultado).toBe(15);  // Se espera que 10 + 5 sea 15
  });
});

🧩 Tabla de Funciones de Jasmine

Función
Descripción

describe()

Agrupa un conjunto de pruebas relacionadas. Es el contenedor principal de una suite de pruebas.

it()

Define una prueba individual. Se usa para describir el comportamiento esperado de una función o método.

beforeEach()

Se ejecuta antes de cada prueba dentro de una suite. Ideal para preparar el entorno de pruebas.

afterEach()

Se ejecuta después de cada prueba dentro de una suite. Útil para limpiar recursos o restablecer valores.

beforeAll()

Se ejecuta una vez antes de todas las pruebas de una suite.

afterAll()

Se ejecuta una vez después de todas las pruebas de una suite.

expect()

Define la expectativa sobre el resultado de una prueba. Se combina con "matchers" para validar resultados.

spyOn()

Crea un espía (spy) sobre una función o método para observar su comportamiento en las pruebas.

✅ 2.6. Expectativas (Matchers) en Jasmine

Los matchers son validadores que se usan con expect() para definir los resultados esperados. Jasmine proporciona una serie de matchers predeterminados como:

  • toBe(): Verifica si el resultado es exactamente igual (comparación estricta).

  • toEqual(): Verifica si el resultado es equivalente, pero permite ciertas diferencias en el tipo.

  • toBeTruthy(): Verifica si el resultado es verdadero.

  • toBeFalsy(): Verifica si el resultado es falso.

  • toHaveBeenCalled(): Comprueba si una función fue llamada.

Ejemplo con diferentes matchers:

// Pruebas con diferentes matchers de Jasmine
describe('Matchers de Jasmine', () => {
  
  it('debería verificar que el resultado sea verdadero', () => {
    const resultado: boolean = true;
    expect(resultado).toBeTruthy();  // Se espera que el resultado sea verdadero
  });

  it('debería verificar que los objetos sean iguales', () => {
    const obj1 = { nombre: 'Laura' };
    const obj2 = { nombre: 'Laura' };
    expect(obj1).toEqual(obj2);  // Verifica que los objetos sean equivalentes
  });
}); 

✅ Tabla de Matchers en Jasmine

Matcher
Descripción

toBe()

Verifica si el valor es estrictamente igual al esperado (usa === para la comparación).

toEqual()

Verifica si el valor es equivalente, permitiendo que el tipo de datos pueda diferir ligeramente.

toBeTruthy()

Verifica si el valor es verdadero (true o algo que evalúe a true).

toBeFalsy()

Verifica si el valor es falso (false o algo que evalúe a false).

toContain()

Verifica si un array o string contiene un valor específico.

toBeNull()

Verifica si el valor es null.

toBeUndefined()

Verifica si el valor es undefined.

toBeDefined()

Verifica que el valor no sea undefined.

toHaveBeenCalled()

Verifica si un espía (spy) ha sido llamado.

toHaveBeenCalledWith()

Verifica si un espía (spy) ha sido llamado con los parámetros específicos.

toThrow()

Verifica si una función arroja cualquier error o excepción.

toThrowError()

Verifica si una función arroja un error específico (puede ser por mensaje o tipo de error).

🕵️‍♂️ 2.7. Creación de Spies (Espías) en Jasmine

Los spies o espías son una funcionalidad poderosa de Jasmine que permite "espiar" el comportamiento de funciones o métodos, sin tener que modificar su implementación. Con ellos puedes:

  • Verificar si una función ha sido llamada.

  • Simular el comportamiento de una función con valores predefinidos.

Ejemplo básico de un spy:

// Definimos una función para ser espiada
function usuario() {
  return 'Laura';
}

// Definimos una función para ser espiada
function usuario(): string {
  return 'Laura';
}

describe('Spies en Jasmine', () => {

  // Espiamos la función usuario
  it('debería espiar la función usuario', () => {
    spyOn(window, 'usuario').and.returnValue('Carlos');  // Simulamos que devuelve 'Carlos'
    
    expect(usuario()).toBe('Carlos');  // Verificamos que el valor sea 'Carlos'
  });
});

Con los spies, puedes también simular funciones asíncronas y manejar respuestas de promesas o setTimeout(), lo que los hace ideales para probar funciones que interactúan con APIs o dependencias externas.

🕵️‍♂️ Tabla de Métodos de Spies en Jasmine

Método
Descripción

spyOn()

Crea un espía sobre una función existente, observando su comportamiento sin modificarlo.

and.callThrough()

Permite que la función original sea llamada junto con el espía (comportamiento predeterminado).

and.returnValue()

Simula una función devolviendo un valor específico en lugar de ejecutar el código original.

and.callFake()

Reemplaza la función original por una implementación falsa definida en la prueba.

and.throwError()

Hace que la función simulada arroje un error específico.

and.stub()

Detiene la ejecución de la función original, simulando que no realiza ninguna acción.

calls.any()

Verifica si el espía ha sido llamado al menos una vez.

calls.count()

Devuelve el número de veces que el espía ha sido llamado.

calls.argsFor()

Devuelve los argumentos con los que el espía fue llamado en una llamada específica.

calls.allArgs()

Devuelve una lista de todos los argumentos con los que el espía ha sido llamado.

calls.reset()

Restablece el historial de llamadas del espía.

AnteriorMódulo 1: Introducción a las pruebas unitariasSiguienteMódulo 3: Introducción a Karma

Última actualización hace 9 meses

💕
🧪
🧫