Jest vs. Jasmine: entornos de testing para Angular
Contenido del curso
Fundamentos de unit testing en Angular
Testing en servicios
Proyecto
Testing en consultas HTTP
Bonus
Próximos pasos
Jest vs. Jasmine: entornos de testing para Angular
Jest vs. Jasmine: entornos de testing para Angular
Contenido del curso
Daniel Meza
Eloy Ortiz
Pol Valle
Cesar Elías Armendariz Ruano
Victor Alfredo Matzar Say
Kevin Bueno
Juan Luna
Cristian Danilo Motta Herrera
Brayan Piñeros Bolivar
Manuel Alberto Goicochea Medina
Teofilo David Fernandez Ochoa
Jorge Luis Silva Medina
Neo TRAN
Allan Alexis Orellana Orellana
Reinaldo Mendoza
Sebastian Arrieta Villarreal
Josué Eliezer Gómez Soto
Andrés Quintero Arias
Norma Natalia Moreno Espinoza
Yadira Rodriguez Lemus
Jessica Silvia Payano Castro
José Luis Jiménez
Marcel Solera
Fernando Rocha Olivera
Josué Eliezer Gómez Soto
Marcel Marin
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... 🙌
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.
Gracias <3
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
ng --version
ng new ng-testing-services //respuesta a las preguntas yes scss
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
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
browsers: ['ChromeHeadless'],
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",
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
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...
en windows con wsl en 25 de mayo del 2022, sin problema
Hola , no me corre esos comandos en windows, hay problema por sudo.
Recuerda que si usas NVM (node version manager ) en windows debes utilizar estos comandos :
npm init @angular@latest [project-name]
npm start
npm test
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 ?
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
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?
Al fin conozco el significado de spec
¡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.
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:
En cuanto a rendimiento de jest vs jasmine hay alguna diferencia? o es solo por uso de mercado que jest es más popular?
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! 💚
como se ejecuta en una version de node 12.18.3?
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` .
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.
Porque se debe usar wsl o una distribución de linux, si puedo correr en node en la terminal de windows
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.
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
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í
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