Introducció

Des de fa temps, ens trobem amb un problema a l’hora d’implementar aplicacions: el temps que dediquem a fer tests és massa gran i cada modificació que fem, per petita que sigui, implica tornar a testejar l’app pràcticament en la seva totalitat.

Aquest és un problema que volíem solucionar per tal de que el nostre treball sigués més productiu. Per a això hi ha una solució molt eficaç: els tests unitaris. Són proves automatitzades, programades per a testejar el codi i que recorren la totalitat de les funcionalitats en qüestió d’un parell de minuts.

Ara, en el cas de fer un canvi, només tindríem que adaptar aquesta part del test i tornar-ho a executar sense el problema d’haver afectat la resta del codi.

En aquest article us parlarem dels tests per a Angular i us compartirem el document que hem elaborat per fer aquests tests de manera més ràpida i eficient. Avui en dia es bàsic mantenir un control dels possibles errors que poden succeir en l’ús de la nostra app, tant dins del codi, com en l’experiència d’usuari. 
 

Prova d’alternatives

Durant la nostra recerca ens vam trobar amb Karma i Jasmine; un entorn per fer proves sobre la funcionalitat del nostre codi.

Amb Karma i Jasmine vam fer molts progressos, ens permetia testejar la resposta i els possibles errors de les nostres funcions, però teníem problemes amb les crides asíncrones ja que no les avalua com cal. Per a poder testejar aquestes promeses teníem que simular les seves respostes i això, al cap i a la fi, no és el que buscàvem.

Per altra banda, els tests unitaris ens ofereixen el que s’anomena tests end-2-end, proves que avaluen l’experiència del usuari, es a dir, “quan faig clic aquí, m’ha de fer això”.

Així va ser quan vam descobrir Selenium, un entorn que simula les accions que executaria l’usuari en fer ús de l’app. I per al nostre cas, Protractor era el framework, que treballant amb Selenium per darrera, ens donava l’oportunitat de fer aquests tests per a Angular.
 

Què és Protractor?

Protractor es un framework que mitjançant una instància al servidor de Selenium accedeix a la nostra app a través del navegador i executa un seguit de funcionalitats prèviament definides.

Podem programar un seguit d’accions i comprovar la correcta resposta d’aquestes execucions; és a dir, si accedim a la pantalla de login i introduïm les dades correctament, en fer clic al botó de login hauria d’accedir a la pantalla d’inici correctament.

 

Com s’utilitza Protractor?

Protractor funciona amb dos fitxers:

  • Un fitxer de configuració on li passarem l’adreça del nostre servidor de Selenium i un apartat amb els specs, és a dir, els fitxers on escriurem els nostres tests.

  • El fitxer dels tests.
     

Els fitxers dels tests s’estructuren d’una manera molt senzilla:

  • Primer de tot hem de definir des d’on accedirà el navegador a la nostra app, en el nostre cas, el localhost.

  • Tot seguit podem començar a implementar les nostres proves; definirem variables per a identificar els elements als que volem accedir o donar ús, i mitjançant unes funcionalitats predefinides de Protractor comprovarem el funcionament de la nostra app.
     

Les possibilitats amb Protractor són molt amples i li podem treure molt de suc, a diferència dels tests unitaris amb Karma, Protractor ens permet testejar crides asíncrones. És molt útil per a comprovar crides a bases de dades, logins i promeses varies.

El més important és que amb els tests unitaris reduïm el temps de proves de dies a pocs minuts i evitem l’error humà.

 

Exemple

En la captura següent podem veure el test en execució. Com podem comprovar, saber que tot funciona correctament és qüestió de segons.
 

 

 

Instal·lació i ús de Protractor

Tot seguit podeu accedir al PDF de la instal·lació i ús de Protractor que hem preparat com a resultat després d’aquest treball de recerca:

Foto de capçalera: Quora
Animació del cos: BaseTIS

 

Angular,Medalla Blogger,Open,Protractor,