Jest vs. Jasmine: entornos de testing para Angular

Clase 2 de 25 • Curso de Angular: Unit Testing para Servicios

Daniel Meza

student•

Nico. Excelente labor que han hecho con este set de cursos con Angular. Y ahora este set de testing de igual manera con Angular. Sin duda los estoy aprovechando completamente. Y es la primera vez que experimentaré con pruebas... 🙌

Eloy Ortiz

student•

En Angular 15 puede generar la configuración que falta haciendo

ng generate config karma

y luego modificarla según sus necesidades.

Este comando actualiza automáticamente el archivo de configuración angular.json.

Pol Valle

student•

Gracias <3

Cesar Elías Armendariz Ruano

student•

Jasmine: es un framework de pruebas Karma: es un test runner (corre las pruebas)

Karme corre por detras por lo que solo debemos pooner atención en Jasmine donde escribiremos las pruebas.

El framework más famoso de pruebas actualmente es Jest

¿Porqué no se hacen las pruebas en Jest? Angular viene preconfigurado para hacer las pruebas en Jasmine por lo que no se deben preocupar por nada.

Angular maneja muchos patrones por si mismo, por ejemplo con un comando puedes instalar una PWA (progressive web app) o puedes confirgurar un service side rendering.

En framework de testing manejan la misma estructura por lo que no hay que procuparse del framework a utilizar. En especial cuando hablamos de código JS

Para poder inciar seguiremos los siguientes pasos

Crear un proyecto desde el cmd
1. Verifica si tienes instalado el CLI de Angular

	ng --version

Crear el nuevo proyecto

ng new ng-testing-services

//respuesta a las preguntas
yes
scss

Ingresamos al proyecto y lo abrimos en visual studio code

cd ng-testing-services

code .

Nos vamos a fijar en archivos que no nos habiamos fijado previamente
karma.config.js: Es la configuración del test running, por eso tiene un paquete para jasmine y uno para chrome, debido a que las pruebas se realizan contra un navegador, por lo que karma lanza las pruebas contra un navegador. Cabe reslatar que se puede cambiar de navegador
Karma automaticamente va a leer todos los archvios .spec.ts por que son especificaciones de como ese servicio o componente debería funcionar. Aqui se puede encontrar varias pruebas que ya corren

Como correr pruebas

Vamos a la terminal y corremos el siguiente comando

ng test

posteriormente observamos las pruebas corridas en karma

WSL

Si estamos en wsl dentro de windows es necesario instalar la versión estable más reciente de google chrome y hacer unos cambios en el archivo karme.conf.js

dentro del terminar de wsl con el usuario root corremos los siguientes códigos uno por uno

sudo apt update && sudo apt -y upgrade && sudo apt -y autoremove

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt -y install ./google-chrome-stable_current_amd64.deb

google-chrome --version

cambiamos el código de karma.conf.js

    browsers: ['ChromeHeadless'],

corremos las pruebas y visualizamos si funciona

Victor Alfredo Matzar Say

student•

Que tal :), En la versión 15 de Angular se eliminaron algunos archivos de configuración para hacer más fácil el entendimiento del framework para nuevos desarrolladores. Karma.conf.js ya no se crea por default con el ng new, sin embargo lo podemos agregar manualmente, acá el archivo: https://github.com/platzi/curso-angular-unit-testing-servicios/blob/step-1/karma.conf.js . También deberiamos agregarlo al Angular.json en la sección de tests:

"test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js", //Add this line :)
            "inlineStyleLanguage": "scss",

Kevin Bueno

student•

Gracias, pienso que fue muy mala decisión la eliminación de estos archivos, al menos deberían agregar un comando al CLI para crearlos automáticamente porque son muy necesarios e importantes

Juan Luna

student•

una cosa, no se si es solo a mi, yo no tengo esos archivos, añadidos ni el WSL, pero con la v15.0 como decis yo hago ng test y los tests se ejecutan, sin problemas en el chrome, y repito no tengo WSL, ni karma.conf.js, sil os han eliminado de todas formas los tests se ejecutan, los habrán integrado de otra forma...

Cristian Danilo Motta Herrera

student•

en windows con wsl en 25 de mayo del 2022, sin problema

Brayan Piñeros Bolivar

student•

Hola , no me corre esos comandos en windows, hay problema por sudo.

Manuel Alberto Goicochea Medina

student•

Recuerda que si usas NVM (node version manager ) en windows debes utilizar estos comandos :

Para crear el proyecto :

npm init @angular@latest [project-name]

Para iniciar el proyecto :

npm start

Para testing :

npm test

Teofilo David Fernandez Ochoa

student•

en mi caso no me genera ese archivo :S de karma.config en angular@15, pero me toco descargar la version 14 y si lo crea, existe alguna forma de ver por q ocurre ?

Jorge Luis Silva Medina

student•

Hola David **Angular ** a partir de la version 15 ya no lo genera. Nos da la libertar de configurarlo a nuestro gusto, puedes usar la versión 15 de Angular y tomar el archivo de configuración del proyecto en el step 1 ó configurarlo por ti mismo. https://karma-runner.github.io/6.4/config/configuration-file.html Estas son los nuevos features que se agregaron a la versión 15. https://levelup.gitconnected.com/angular-15-new-must-know-features-ae392a2baf2d

Este es el archivo usado en el proyecto https://github.com/platzi/curso-angular-unit-testing-servicios/blob/step-1/karma.conf.js

Neo TRAN

student•

Vengo del mundo de react con Testing Library, ¿Habría algún inconveniente de compatibilidad al querer usarlo en Angular?

¿O se recomienda mejor usar Jasmine que ya viene por defecto en Angular?

Allan Alexis Orellana Orellana

student•

Si estan usando angular 15 o superior el ng new ya no incluye ciertos archivos por defecto. Seguir la guia de para añadirlos

Reinaldo Mendoza

student•

Al fin conozco el significado de spec

Sebastian Arrieta Villarreal

student•

¡Hola!

Estoy usando Angular 15 y WSL. Al ejecutar ng test, sale una ventana de Chrome, así sea que le haya colocado en el archivo de configuración como ChromeHeadless.

Josué Eliezer Gómez Soto

student•

Para la parte de los navegadores a utilizar en la configuración de Karma, veo que es un arreglo, por ello me pregunto si puedo utilizarlo como se muestra continuación:

Andrés Quintero Arias

student•

En cuanto a rendimiento de jest vs jasmine hay alguna diferencia? o es solo por uso de mercado que jest es más popular?

Norma Natalia Moreno Espinoza

student•

Hola!

Mira esta tabla de comparación entre ambos. Realmente hay muchas similutudes en lo que ofrecen, dime ¿tú cuál eliges?

¡Nunca pares de aprender! 💚

Yadira Rodriguez Lemus

student•

como se ejecuta en una version de node 12.18.3?

Jessica Silvia Payano Castro

student•

Si al ejecutar ng test tienen este error:

Ejecutar el siguiente comando:

export CHROME_BIN="/mnt/c/Program Files/Google/Chrome/Application/chrome.exe"
```Luego vuelve a ejecutar `ng test` .

José Luis Jiménez

student•

23 04 2024 22:41:58.453:ERROR [launcher]: Cannot start Chrome

Can not find the binary /mnt/c/Program\ Files/Google/Chrome/Application/chrome.exe

Please set env variable CHROME_BIN

23 04 2024 22:41:58.453:ERROR [launcher]: Chrome stdout:

23 04 2024 22:41:58.453:ERROR [launcher]: Chrome stderr:

Hola Comunidad.. estoy teniendo este problema con wsl2.. agradecería cualquier ayuda.

Marcel Solera

student•

Porque se debe usar wsl o una distribución de linux, si puedo correr en node en la terminal de windows

Fernando Rocha Olivera

student•

en javascript manejan la misma estructura, pero el tema no es eso, el tema es que angular maneja formularios, inyección de dependencias, estados entre otros. Por esa razón si el curso es de angular debe ser con Jasmine debido a que es la suit de testing que provee Angular.

Josué Eliezer Gómez Soto

student•

tengo una mac... pero lo siento chicos... prefero mil veces windows y uso la mac solo para ver los videos y uso windows (a veces WSL) para tirar código

Marcel Marin

student•

Si tuvieron el error de 20 11 2023 14:29:37.358:ERROR [launcher]: Cannot start ChromeHeadless

[1120/142937.341178:ERROR:exception_handler_server.cc(361)] getsockopt: Invalid argument (22)

[1120/142937.341904:ERROR:socket.cc(153)] unhandled cmsg -1431655766, -1431655766

la solución está aquí

https://github.com/karma-runner/karma-chrome-launcher/issues/214

Deben de usar el chromo de windows y enlazarlo al wsl, en link explican los comados y recuerden cambiar la dirección del chrome de windows por la de ustedes ajustando username y program file

Jest vs. Jasmine: entornos de testing para Angular

Introducción

Unit testing para servicios en Angular

Jest vs. Jasmine: entornos de testing para Angular

Fundamentos de unit testing en Angular

Tu primera prueba en Angular

Explorando matchers

Reporte de coverage

Mocha Report

Testing en servicios

Pruebas unitarias para servicios

Servicios con dependencias

Spies

Angular TestBed

TestBed + Spies

Proyecto

Setup y maquetación del proyecto

Product Service Http

Testing en consultas HTTP

HttpClientTestingModule

Generando Mocks

Pruebas para GET

Pruebas maliciosas para GET

Pruebas para POST

Pruebas para PUT y DELETE

Bonus

Pruebas a errores

Pruebas con interceptores

Pruebas al login

Pruebas a la API del navegador

GitHub Actions

Próximos pasos

Toma el Curso de Angular: Unit Testing para Componentes