El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Pruebas Unitarias en Ionic

Siguiente ►
►

Las pruebas unitarias son una parte esencial del desarrollo de software, ya que permiten verificar que cada unidad de código funcione correctamente. En el contexto de Ionic, las pruebas unitarias se realizan principalmente utilizando herramientas y bibliotecas de Angular, como Jasmine y Karma.

¿Qué son las Pruebas Unitarias?

Las pruebas unitarias son pruebas automatizadas que verifican el comportamiento de pequeñas unidades de código, como funciones o métodos. El objetivo es asegurarse de que cada unidad funcione correctamente de manera aislada.

Beneficios de las Pruebas Unitarias

  • Detección temprana de errores: Permiten identificar errores en el código de manera temprana.
  • Facilitan el mantenimiento: Ayudan a mantener el código limpio y comprensible.
  • Documentación: Actúan como documentación viva del comportamiento esperado del código.
  • Refactorización segura: Permiten realizar cambios en el código con la confianza de que no se romperá la funcionalidad existente.

Configuración del Entorno de Pruebas

Antes de comenzar a escribir pruebas unitarias, es necesario configurar el entorno de pruebas en tu proyecto Ionic.

Instalación de Dependencias

Ionic viene preconfigurado con Jasmine y Karma para realizar pruebas unitarias. Sin embargo, asegúrate de que las dependencias necesarias estén instaladas:

npm install --save-dev @angular/core @angular/cli @angular/compiler-cli jasmine-core karma karma-chrome-launcher karma-jasmine karma-jasmine-html-reporter

Configuración de Karma

Karma es un ejecutor de pruebas que se utiliza para ejecutar las pruebas unitarias en diferentes navegadores. Asegúrate de que el archivo karma.conf.js esté configurado correctamente:

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, './coverage/your-app-name'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
  });
};

Escribiendo Pruebas Unitarias

Estructura de una Prueba Unitaria

Las pruebas unitarias en Jasmine siguen una estructura básica:

  1. Describe: Define un conjunto de pruebas relacionadas.
  2. It: Define una prueba individual.
  3. Expect: Define una expectativa sobre el resultado de la prueba.

Ejemplo de Prueba Unitaria

Supongamos que tenemos un servicio CalculatorService con un método add que suma dos números. Vamos a escribir una prueba unitaria para este método.

Código del Servicio

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CalculatorService {
  constructor() {}

  add(a: number, b: number): number {
    return a + b;
  }
}

Prueba Unitaria

import { TestBed } from '@angular/core/testing';
import { CalculatorService } from './calculator.service';

describe('CalculatorService', () => {
  let service: CalculatorService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(CalculatorService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should add two numbers correctly', () => {
    const result = service.add(2, 3);
    expect(result).toBe(5);
  });
});

Explicación del Código

  • TestBed.configureTestingModule: Configura el entorno de pruebas para el servicio.
  • TestBed.inject: Inyecta el servicio que se va a probar.
  • expect(service).toBeTruthy(): Verifica que el servicio se haya creado correctamente.
  • expect(result).toBe(5): Verifica que el método add devuelva el resultado correcto.

Ejecutando las Pruebas

Para ejecutar las pruebas unitarias, utiliza el siguiente comando:

ng test

Este comando ejecutará Karma, que abrirá un navegador y ejecutará todas las pruebas unitarias. Los resultados se mostrarán en la consola y en el navegador.

Ejercicio Práctico

Ejercicio

Crea un servicio MathService con los siguientes métodos:

  • multiply(a: number, b: number): number - Multiplica dos números.
  • divide(a: number, b: number): number - Divide dos números.

Escribe pruebas unitarias para estos métodos.

Solución

Código del Servicio

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MathService {
  constructor() {}

  multiply(a: number, b: number): number {
    return a * b;
  }

  divide(a: number, b: number): number {
    if (b === 0) {
      throw new Error('Division by zero');
    }
    return a / b;
  }
}

Pruebas Unitarias

import { TestBed } from '@angular/core/testing';
import { MathService } from './math.service';

describe('MathService', () => {
  let service: MathService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(MathService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should multiply two numbers correctly', () => {
    const result = service.multiply(2, 3);
    expect(result).toBe(6);
  });

  it('should divide two numbers correctly', () => {
    const result = service.divide(6, 3);
    expect(result).toBe(2);
  });

  it('should throw an error when dividing by zero', () => {
    expect(() => service.divide(6, 0)).toThrow(new Error('Division by zero'));
  });
});

Explicación del Código

  • multiply: Verifica que el método multiply devuelva el resultado correcto.
  • divide: Verifica que el método divide devuelva el resultado correcto.
  • divide by zero: Verifica que el método divide lance un error cuando se intenta dividir por cero.

Conclusión

En esta sección, hemos aprendido sobre la importancia de las pruebas unitarias y cómo configurarlas y escribirlas en un proyecto Ionic. Las pruebas unitarias son una herramienta poderosa para garantizar la calidad y la estabilidad del código. En el próximo tema, exploraremos las pruebas de extremo a extremo para verificar el comportamiento de la aplicación en su totalidad.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados