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 herramientas como Jasmine y Karma.

Objetivos de Aprendizaje

  • Comprender la importancia de las pruebas de componentes.
  • Configurar el entorno de pruebas en Angular.
  • Escribir y ejecutar pruebas unitarias para componentes.
  • Utilizar TestBed para configurar y probar componentes.
  • Simular dependencias y eventos en las pruebas.

  1. Importancia de las Pruebas de Componentes

Las pruebas de componentes ayudan a:

  • Verificar que los componentes se comporten como se espera.
  • Detectar errores en el código antes de que lleguen a producción.
  • Facilitar el mantenimiento y la refactorización del código.
  • Asegurar que los cambios en el código no rompan funcionalidades existentes.

  1. Configuración del Entorno de Pruebas

Angular CLI viene preconfigurado con Jasmine y Karma para realizar pruebas unitarias. Para comenzar, asegúrate de que tu proyecto Angular esté configurado correctamente.

Instalación de Dependencias

Si no tienes Jasmine y Karma instalados, puedes instalarlos con los siguientes comandos:

npm install --save-dev jasmine-core karma karma-chrome-launcher karma-jasmine karma-jasmine-html-reporter

Configuración de Karma

El archivo karma.conf.js contiene la configuración de Karma. Asegúrate de que esté configurado correctamente para tu proyecto.

  1. Escribiendo Pruebas Unitarias para Componentes

Estructura Básica de una Prueba de Componente

Cada componente tiene un archivo de prueba asociado con la extensión .spec.ts. Aquí hay 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 (async): Configura el entorno de pruebas. TestBed.configureTestingModule se utiliza para declarar el componente y sus dependencias.
  • beforeEach: Crea una instancia del componente y lo inicializa.
  • it: Define una prueba individual. En este caso, estamos verificando que el componente se crea correctamente.

  1. Utilizando TestBed para Configurar y Probar Componentes

TestBed es una utilidad de Angular que permite configurar y crear un entorno de pruebas para componentes y servicios.

Configuración de TestBed

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [ MyComponent ],
    imports: [ FormsModule ], // Importa módulos necesarios
    providers: [ MyService ] // Provee servicios necesarios
  })
  .compileComponents();
});

Creación de la Instancia del Componente

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

  1. Simulación de Dependencias y Eventos

Simulación de Servicios

Puedes simular servicios utilizando spyOn de Jasmine:

const myService = jasmine.createSpyObj('MyService', ['getData']);
myService.getData.and.returnValue(of(mockData));

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

Simulación de Eventos

Puedes simular eventos utilizando dispatchEvent:

it('should call onClick method', () => {
  spyOn(component, 'onClick');
  let button = fixture.debugElement.nativeElement.querySelector('button');
  button.click();
  expect(component.onClick).toHaveBeenCalled();
});

Ejercicio Práctico

Ejercicio

Crea una prueba para un componente que tenga un botón que incremente un contador al hacer clic.

  1. Crea un componente CounterComponent con un botón y un contador.
  2. Escribe una prueba que verifique que el contador se incrementa al hacer clic en el botón.

Solución

counter.component.ts

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

@Component({
  selector: 'app-counter',
  template: `
    <button (click)="increment()">Increment</button>
    <p>{{ count }}</p>
  `
})
export class CounterComponent {
  count = 0;

  increment() {
    this.count++;
  }
}

counter.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CounterComponent } from './counter.component';

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

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

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

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

  it('should increment count on button click', () => {
    const button = fixture.debugElement.nativeElement.querySelector('button');
    button.click();
    fixture.detectChanges();
    expect(component.count).toBe(1);
  });
});

Conclusión

En esta sección, aprendiste 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. Practica escribiendo pruebas para diferentes componentes y escenarios para fortalecer tus habilidades en pruebas de Angular. En el próximo módulo, exploraremos las pruebas de servicios en Angular.

◄ Anterior
◄
Siguiente ►
►

Curso de Angular

Módulo 1: Introducción a Angular

Módulo 2: Componentes de Angular

Módulo 3: Enlace de Datos y Directivas

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

Módulo 5: Enrutamiento y Navegación

Módulo 6: Formularios en Angular

Módulo 7: Cliente HTTP y Observables

Módulo 8: Gestión de Estado

Módulo 9: Pruebas en Angular

Módulo 10: Conceptos Avanzados de Angular

Módulo 11: Despliegue y Mejores Prácticas

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