Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

0D
10H
40M
46S

Jest vs. Jasmine: entornos de testing para Angular

2/25
Recursos

Aportes 17

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渃hrome_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