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

Pruebas de Componentes

Siguiente ►
►

Las pruebas de componentes en Angular son esenciales para asegurar que cada componente de tu aplicación funcione correctamente de manera aislada. En este tema, aprenderás cómo configurar y escribir pruebas unitarias para componentes utilizando Jasmine y Karma, que son las herramientas de prueba predeterminadas en Angular.

Contenido

  1. Configuración del Entorno de Pruebas
  2. Estructura de una Prueba de Componente
  3. Pruebas de Propiedades y Métodos
  4. Pruebas de Interacción con el DOM
  5. Pruebas de Componentes con Dependencias
  6. Ejercicios Prácticos
  7. Conclusión

Configuración del Entorno de Pruebas

Angular CLI configura automáticamente Jasmine y Karma cuando creas un nuevo proyecto Angular. Para ejecutar las pruebas, simplemente usa el siguiente comando:

ng test

Este comando iniciará Karma, que ejecutará todas las pruebas y mostrará los resultados en la consola y en el navegador.

Estructura de una Prueba de Componente

Cada componente en Angular tiene un archivo de prueba asociado con la extensión .spec.ts. A continuación, se muestra un ejemplo básico de una prueba de componente:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent } from './my-component.component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ MyComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Explicación del Código

  • Importaciones: Importamos ComponentFixture, TestBed y el componente que vamos a probar.
  • describe: Define un grupo de pruebas.
  • beforeEach: Configura el entorno de pruebas antes de cada prueba individual.
    • TestBed.configureTestingModule: Configura un módulo de prueba con el componente que vamos a probar.
    • compileComponents: Compila los componentes declarados.
  • beforeEach: Crea una instancia del componente y detecta los cambios.
  • it: Define una prueba individual. En este caso, estamos verificando que el componente se crea correctamente.

Pruebas de Propiedades y Métodos

Puedes probar las propiedades y métodos de un componente de la siguiente manera:

it('should have a default title', () => {
  expect(component.title).toBe('default title');
});

it('should increment value', () => {
  component.increment();
  expect(component.value).toBe(1);
});

Explicación del Código

  • Prueba de Propiedad: Verificamos que la propiedad title tenga el valor por defecto.
  • Prueba de Método: Llamamos al método increment y verificamos que la propiedad value se haya incrementado.

Pruebas de Interacción con el DOM

Para probar la interacción con el DOM, puedes usar fixture.nativeElement o fixture.debugElement:

it('should display the title in a h1 tag', () => {
  const compiled = fixture.nativeElement;
  expect(compiled.querySelector('h1').textContent).toContain('default title');
});

Explicación del Código

  • fixture.nativeElement: Accede al DOM del componente.
  • querySelector: Selecciona el elemento h1 y verifica que su contenido de texto contenga el título por defecto.

Pruebas de Componentes con Dependencias

Si tu componente depende de servicios u otros componentes, puedes usar TestBed para proporcionar dependencias simuladas (mocks):

import { MyService } from './my-service.service';

class MockMyService {
  getValue() {
    return 'mock value';
  }
}

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [ MyComponent ],
    providers: [
      { provide: MyService, useClass: MockMyService }
    ]
  })
  .compileComponents();
});

Explicación del Código

  • MockMyService: Creamos una clase simulada que reemplaza al servicio real.
  • providers: Usamos TestBed para proporcionar la clase simulada en lugar del servicio real.

Ejercicios Prácticos

Ejercicio 1: Prueba de Propiedad

  1. Crea un componente con una propiedad name que tenga un valor por defecto.
  2. Escribe una prueba que verifique que la propiedad name tiene el valor por defecto.

Ejercicio 2: Prueba de Método

  1. Crea un componente con un método add que sume dos números y almacene el resultado en una propiedad result.
  2. Escribe una prueba que verifique que el método add funciona correctamente.

Ejercicio 3: Prueba de Interacción con el DOM

  1. Crea un componente que muestre un mensaje en un p tag.
  2. Escribe una prueba que verifique que el mensaje se muestra correctamente en el DOM.

Soluciones

Solución Ejercicio 1

// Componente
export class MyComponent {
  name: string = 'default name';
}

// Prueba
it('should have a default name', () => {
  expect(component.name).toBe('default name');
});

Solución Ejercicio 2

// Componente
export class MyComponent {
  result: number;

  add(a: number, b: number) {
    this.result = a + b;
  }
}

// Prueba
it('should add two numbers', () => {
  component.add(1, 2);
  expect(component.result).toBe(3);
});

Solución Ejercicio 3

// Componente
export class MyComponent {
  message: string = 'Hello, World!';
}

// Plantilla
<p>{{ message }}</p>

// Prueba
it('should display the message in a p tag', () => {
  const compiled = fixture.nativeElement;
  expect(compiled.querySelector('p').textContent).toContain('Hello, World!');
});

Conclusión

En esta sección, has aprendido cómo configurar y escribir pruebas unitarias para componentes en Angular. Las pruebas de componentes son cruciales para asegurar que cada parte de tu aplicación funcione correctamente de manera aislada. A medida que avances, te encontrarás con componentes más complejos que interactúan con servicios y otros componentes, y las habilidades que has adquirido aquí te ayudarán a mantener la calidad y la fiabilidad de tu código.

En el siguiente tema, exploraremos las pruebas de servicios, donde aprenderás a probar la lógica de negocio y las interacciones con APIs externas.

◄ Anterior
◄
Siguiente ►
►

Curso de Angular 2+

Módulo 1: Introducción a Angular

Módulo 2: Conceptos Básicos de TypeScript

Módulo 3: Componentes y Plantillas

Módulo 4: Directivas y Pipes

Módulo 5: Servicios e Inyección de Dependencias

Módulo 6: Enrutamiento y Navegación

Módulo 7: Formularios en Angular

Módulo 8: Cliente HTTP y Observables

Módulo 9: Gestión de Estado

Módulo 10: Pruebas en Angular

Módulo 11: Temas Avanzados

Módulo 12: Despliegue y Mejores Prácticas

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