Jest vs. Jasmine: entornos de testing para Angular

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… 🙌

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

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

	ng --version

1. Crear el nuevo proyecto

ng new ng-testing-services

//respuesta a las preguntas
yes
scss

1. Ingresamos al proyecto y lo abrimos en visual studio code

cd ng-testing-services

code .

1. Nos vamos a fijar en archivos que no nos habiamos fijado previamente

2. 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

3. 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

1. 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

1. cambiamos el código de karma.conf.js

    browsers: ['ChromeHeadless'],

1. corremos las pruebas y visualizamos si funciona

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",

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

Instale todo bien, solo que tuve que ejecutar un paso mas despues del segundo, para que pudiera installar y asi ver la versión:

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

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

3. sudo apt -y install ./google-chrome-stable_current_amd64.deb

luego del tercer paso si funciono perfecto

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.

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

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, que han eliminado el archivo de configuración de karma, 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…???

Los que depronto estén en este curso con windows sin una pc configurada para angular como me pasó a mi, les recomiendo instalar node con paquetes npm para que no les falle.

Para los que tienen Edge pueden utilizar este paquete:
https://github.com/ChiragRupani/karma-chromiumedge-launcher
A mi me funciono correctamente!

En mi instalación (ubuntu 20.04) no se encontraba definida la variable de ambiente CHROME_BIN (error: set “chrome_bin” env variable).

Busqué el ejecutable:

whereis chromium

chromium: /etc/chromium /snap/bin/chromium.chromedriver /snap/bin/chromium

Definí la variable de ambiente:

export CHROME_BIN=/snap/bin/chromium

ng test

Tembién probé con brave, ya que se encuentra basado en Chromium:

export CHROME_BIN=/opt/brave.com/brave/brave

ng test

Si tienen Firefox instalado pueden instalar y configurar este launcher, solo tienen que agregarlo a los arreglos de plugins y browsers, así:

plugins: [
  ...
  require('karma-firefox-launcher')
  ...
],
...,
browsers: [
  'Firefox'
]

A mí me funciono a la primera y creo que es una alternativa sin tanta configuración.

Lo desplegué usando safari en macOS

vamoss

Nicoo!!! Gracias, muchas gracias. El paquete de cursos de Angular me han ayudado bastante y estoy super animada con el paquete de cursos de testing!

Buen aporte para la parte final de las pruebas, los desarrolladores podrán aplicar a sus pruebas de código y modulares, también ayuda a los Testers a verificar si los resultados de las pruebas de desarrollo son las correctas para que un producto inicie las pruebas de Testing.

Tengo mac os, funcionó sin problemas