Pruebas Unitarias en Angular: Conviértete en un verdadero profesional de la programación

· 3 min de lectura
Pruebas Unitarias en Angular: Conviértete en un verdadero profesional de la programación

En la comunidad de YouTube realizamos una encuesta para saber ¿Cuántos hacemos Pruebas Unitarias o también llamado Unit Testing? Y bueno... una imagen vale más que 1000 palabras 🙄

Evidentemente No hacemos pruebas unitarias (YO también me incluyo) pero ya llego el momento de proponernos a realizar TEST.

"Que pereza además ni entiendo que es un test" Es lo que solemos pensar

¿Qué es una prueba unitaria?

Es una manera de comprobar un "pedazo" de código de manera independiente. Por otro lado también te da una métrica con la cual puedes sustentar la confianza que tienes en tu algoritmo o sistema ✔

¿Debo hacer pruebas unitarias siempre?

Si, o tal vez no. Ok, a ver explico desde mi punto de vista los test aportan mayor valor cuando estamos trabajando en equipo, evidentemente se recomienda en este caso, ya que todo el equipo se beneficiara y sentirá confianza en su código.

Por otro lado existen los casos donde un (1) programador comienza a crear un gran sistema y puede que las cosas empiecen a salirse de control, en este punto es muy buen momento para reflexionar sobre la vida y comenzar a implementar testing.

¿Qué es el reporte de cobertura (Code Coverage)?

¡Fácil! Es la métrica que te indica cuanto código de tu aplicación está siendo afectado con tus pruebas unitarias. El reporte de cobertura se habla mucho, pero en general si tú pasas el 80% de cobertura se puede decir que es aceptable.

Reporte de Cobertura Angular

¿Cómo activar reporte de cobertura en Angular?

Debes ubicar el archivo "angular.json" y luego buscar la propiedad "test" y agregar "codeCoverage:true" te dejo una imagen.

Activar reporte de cobertura en Angular

¿Qué necesito para realizar Unit testing en Angular?

Afortunadamente Angular nos trae todo un pack de herramientas incluidas, estas herramientas son Jasmine y Karma.

Jasmine: Es el framework encargado de probar JavaScript sin necesidad de un DOM, además es el que contiene las sintaxis que vas a usar como son: "describe, it, expect" y muchas más.

Karma: Es la herramienta desarrollada por el equipo de Angular que se encargara de ejecutar todas las pruebas escritas con Jasmine además te mostrara en un navegador el reporte de pruebas que pasaron exitosamente y las que retornaron un error.

¿Cómo ejecuto las pruebas unitarias en Angular?

En un artículo anterior mencionamos 35 comandos de angular que debes de saber, pero para ejecutar las pruebas es tan fácil como escribir en tu consola

ng test

¿Qué son los archivos .spec.ts?

Son los archivos que Angular va a cargar al momento de ejecutar el comando "ng test" estos archivos son los que contienen las pruebas.

Voy a compartir el archivo de prueba que usamos en el curso de testing angular donde estamos haciendo una prueba para saber si el componente sé instancia de manera correcta.

La otra prueba es para determinar que el formulario reactivo realmente este inválido cuando debe. Para entender mejor este ejemplo lo explicamos en vídeo.

  //TODO:Aislado! 
  it('Debe de existir el AppComponent', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance
    expect(app).toBeTruthy(); //TODO: ✔
  });

  //TODO:Aislado! 
  it('Debe retornar formulario invalido', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance
    fixture.detectChanges() //TODO: <---------------

    const email = app.form.controls['email']
    email.setValue('leifer33@gmail.com')

    expect(app.form.invalid).toBeTrue(); //TODO: ✔
  });

¿Dónde consigo cursos de Unit testing en Angular?

Por suerte iniciamos una serie de videos donde explicamos paso a paso a como crear pruebas unitarias a componentes, servicios, filtros, directivas y más

Curso de Angular para principiantes ⭐⭐⭐⭐⭐

Más de 19.000 estudiantes que ya están aprendiendo Angular de manera divertida y sobre todo con el objetivo de crear un proyecto funcional que les sirve para adquirir el conocimiento básico fundamental. Por otra parte nuestro ejercicio se basa en crear un clon de Spotify por lo cual es un excelente portafolio para conseguir tu trabajo como programador junior en angular. Cada mes estoy generando cupones para brindar la oportunidad a todos los que forman parte de la comunidad de Leifer Mendez y angular en general. (Canjear cupón)

Curso de Angular 2022 Gratis para juniors ⭐⭐⭐⭐⭐

Artículos Relacionados

Curso de NGRX desde CERO
· 2 min de lectura
Angular: ¿En decadencia? 🔥
· 4 min de lectura
Angular: El framework del momento 🔥
· 8 min de lectura
Angular Básico: Creando clon de Spotify
· 1 min de lectura
Google dejará de dar soporte a AngularJS
· 2 min de lectura