Un buen developer mobile debe exigirse siempre ser lo más eficiente posible a la hora de crear una app. En los desarrollos de hoy en día ya no podemos invertir mucho tiempo buscando bugs, errores o simplemente funcionalidad que no funciona como debería. Para que esto no ocurra, es importante tener nuestro código limpio y haberlo probado con anterioridad. Una forma de probar nuestras aplicaciones es ir ejecutando y realizando los pasos necesarios para comprobar que todo está como se había definido. Pero, ¿y si pudiéramos automatizar nuestras pruebas E2E y no tener que ejecutar las pruebas de forma manual?
Como ya sabréis, las pruebas son esenciales para saber cómo funciona la aplicación. Vamos a ver cómo configurar y automatizar nuestras pruebas de extremo a extremo comprobando que todo nuestro sistema funciona como debería hacerlo. Para esto vamos a utilizar Protractor como framework de pruebas E2E. Protractor está construido sobre Selenium WebDriver y utiliza el framework Jasmine.
INSTALACIÓN
Usaremos npm para instalar Protractor de forma global:
Esto nos instalará dos herramientas: Protractor y Webdriver-Manager. La herramienta Webdriver-Manager nos proporciona una forma sencilla de obtener una instancia del servidor de Selenium. Nos descargamos los binarios necesarios:
Arrancamos el servidor con el siguiente comando:
Esto levantará el servidor de Selenium en el que vamos a probar.
CONFIGURACIÓN
Protractor necesita un fichero de configuración que le indica cómo ejecutar, cómo conectar con Selenium, etc. Una buena práctica es crearnos un directorio dentro de nuestro proyecto donde estarán todos los tests y configuraciones. En nuestro caso nos creamos un directorios llamado “tests”. Dentro del cual, crearemos un fichero llamado conf.js que será el fichero de configuración que utilizará Protractor. Una vez creado, dentro de nuestro fichero añadiremos:
Como vemos en el fichero, en este caso le indicamos el framework que utilizará, la dirección del servidor Selenium y los ficheros de tests que vamos a ejecutar. Nuestro fichero de test para este ejemplo se llamará login.js. Además, se pueden configurar muchas más cosas, por ejemplo, el navegador en donde queremos que se ejecuten las pruebas, la url base de nuestro proyecto, etc. Si queremos añadir directamente en que navegador queremos ejecutar las pruebas sólo necesitaremos agregarlo al fichero de conf.js
TEST
Para escribir nuestros test, vamos a crearnos un fichero llamado login.js donde introduciremos las pruebas que deberá pasar nuestra aplicación. En nuestro caso, nosotros separamos las pruebas por funcionalidad, al igual que se separa las funcionalidad de nuestro proyecto. Para esta prueba simplemente nos crearemos el fichero login.js. En este ejemplo nos vamos a basar en que nuestra aplicación tendrá una vista de login en la cual deberemos introducir el username, un password y pulsar un botón para loguearnos.
Dentro de nuestro fichero introduciremos:
Vamos a ver el código escrito. Como vemos utilizamos Jasmine para escribir nuestros tests, cada test deberá contener describe.
En nuestro caso definimos tres variables que utilizaremos para los distintos casos de pruebas que vamos a realizar.
Utilizando beforeEach le estamos diciendo que ejecute el código dentro antes de comenzar a validar las pruebas.
Le estamos indicando que se sitúe en la url “/login” y asigne a nuestras variables los elementos de la vista. Tendremos los elementos de username y password, los cuales hemos identificado en la vista con ng- model=‘username’ y ng-model=‘password’. Nuestro botón para loguearnos lo definimos de esta forma en la vista <button ng- click=‘login()’>Entrar</button>
Una vez hemos obtenido los elementos de nuestra vista, vamos a definir la prueba que debemos pasar. El primer caso que vamos a comprobar es que intente logarse con un usuario y contraseña incorrecto y en tal caso muestre un popup con un error.
Nuestra prueba deberá contener it que definirá la prueba que estamos comprobando y un expect que será lo que esperamos de esa prueba. Dentro de cada prueba se puede definir varios expect, pero hacer esto nos dificultará a la hora de ver cuando algo no se ha realizado correctamente.
Dentro de nuestra prueba asignamos los valores para realizar la prueba. Introducimos para el username “admin” y para el password “fail” para que no sea capaz de loguearse. Una vez asignados estos valores, le indicaremos al botón que haga click y esperamos a que aparezca un popup con el error.
Para el caso contrario, es decir, donde se loguea correctamente:
Vemos que asignamos los datos correctos tanto para el username y el password y una vez hacemos click en el botón comprobamos que se ha logueado y ha navegado a la url “/home”
Al finalizar de configurar y escribir los tests que necesitamos que pase nuestra aplicación deberemos ejecutarlas. Teniendo el servidor de Selenium iniciado ejecutaremos el comando:
Esto iniciará las pruebas en el navegador que le hayamos indicado y podremos ver en la consola el resultado de las pruebas realizadas.
Con esto hemos visto un ejemplo de cómo crear, con Protractor, nuestras pruebas E2E con AngularJS. Protractor es un framework muy potente y con una gran comunidad detrás que nos hace pensar que acabará convirtiéndose en el framework oficial de pruebas E2E para AngularJS.
Y vosotros ¿os unís a la comunidad de Protractor?
