Cesar Elías Armendariz Ruano
0:00/13:39
Jest vs. Jasmine: entornos de testing para Angular
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.
Cesar Elías Armendariz Ruano
Victor Alfredo Matzar Say
Kevin Bueno
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
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
en windows con wsl en 25 de mayo del 2022, sin problema
Brayan Piñeros Bolivar
Hola , no me corre esos comandos en windows, hay problema por sudo.
Manuel Alberto Goicochea Medina
Recuerda que si usas NVM (node version manager ) en windows debes utilizar estos comandos :
npm init @angular@latest [project-name]
npm start
npm test
Teofilo David Fernandez Ochoa
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
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
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
Reinaldo Mendoza
Al fin conozco el significado de spec
Sebastian Arrieta Villarreal
¡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
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
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
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
como se ejecuta en una version de node 12.18.3?
Jessica Silvia Payano Castro
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
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
Porque se debe usar wsl o una distribución de linux, si puedo correr en node en la terminal de windows
Fernando Rocha Olivera
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
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
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
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",