Desarrollo web: Control de calidad automatizado

Unitesting de código con CasperJS

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aunque no lo creas, con CasperJS podemos hacer no solo análisis de funcionalidad en el navegador, sino realizar pruebas unitarias en cada uno de los elementos del código. De este modo puedes garantizar la funcionalidad granular de cada elemento de tu código, incluso de elementos con los que el usuario no interactúa directamente desde el navegador.
07:53

Transcripción

Tanto en PhantomJS como en CasperJS nos enfocamos, básicamente, a las pruebas funcionales. Por ejemplo, asegurarnos que un formulario trabaje correctamente o que un botón muestre el resultado que esperamos. Pero también podemos realizar pruebas de Unit testing básico. Por ejemplo, acá, estoy trabajando en un documento que tiene una función llamada "calculadora". Vamos a crear, por ejemplo, una variable que se va a llamar "prueba" y vamos a crear una nueva instancia que se va a llamar "Calculadora". Todo esto lo estoy trabajando dentro de la "Consola" del navegador, la cual he desplegado a través de la función "Inspect". Ahora, he creado una variable llamada "prueba" y acá estoy desplegando la "calculadora" y si llamo "prueba.sumar" y le pongo dos parámetros (10 y 10) me va a dar 20. Esto, básicamente, lo estoy haciendo porque quiero realizar una prueba de código. Por ejemplo, esto me puede servir para realizar procesos dentro de mi página, pero que no necesariamente van a estar disponibles todo el tiempo. Si aplico Unit testing puedo asegurarme de que la funcionalidad de calculadora siempre me dé los resultados correctos dentro de los parámetros deseados. Vamos a aplicar esto dentro de CasperJS. Acá, tengo un código en el cual estoy ejecutando el documento que te acabo de mostrar, que se encuentra funcionando dentro de mi servidor local. Voy a agregarle un paso adicional a los que tiene acá y voy a incluir una opción llamada "casper.waitForResource". Esto lo que va a hacer es que va a esperar a que se cargue efectivamente un archivo. En este caso, el archivo se llama "script/calculadora.js" que es donde se encuentra el código de la calculadora que te acabo de mostrar. Ahora, vamos a evaluar que esta calculadora pueda realizar el proceso, siguiendo las condiciones en la cuales hemos probado, dentro de la consola en el navegador. Así que, para hacer eso, voy a necesitar utilizar una propiedad muy específica de Casper que se llama "evaluate". Te voy a mostrar cómo funciona. Vamos a crear una variable en la cual vamos a evaluar cómo se hace la suma, así que, se va a llamar "variable suma". Quiero que notes que este código se está ejecutando dentro del "waitForResource" porque dentro de la evaluación que realiza CasperJS la ejecución del código se va a detener hasta que tengamos, verificadamente, disponible el archivo de calculadora. Así, vamos a tener acceso al código que se encuentra dentro de este archivo JavaScript. Ahora, estoy utilizando acá "suma" y le voy a decir que "suma = casper.evaluate". Dentro de esta función, voy a tener acceso a mi documento, esto es un punto importante. Básicamente, "evaluate" dentro de Casper nos va a permitir ejecutar una microtarea dentro del navegador. El detalle está, en que el resultado de esa tarea que realizamos no lo vamos a tener disponible dentro de Casper, sino, únicamente, dentro de esta variable. Así que, voy a entrar al navegador, voy a realizar un proceso y voy a regresar. En este caso, voy a definir acá dos parámetros, vamos a poner "a" y "b", podemos ponerle cualquier nombre, en este caso, simplemente es valores que voy a ingresar dentro de esta evaluación. Vamos a corregir el código y estamos incluyendo "evaluate", voy a poner acá una función, para que todo se ejecute correctamente, listo. Dentro de esta función, vamos a incluir estos dos parámetros. También vamos a incluir cuáles van a ser los valores que van a tener estos parámetros, en este caso, "10" y "10". Vamos a ingresar a la página, vamos a ejecutar esta función y le vamos a inyectar estos valores, que, en este caso, vamos a trabajar como "a" y "b". Ahora, sabiendo eso, vamos a crear una instancia de la calculadora, es como si estuviéramos trabajando dentro del navegador, así que, voy a crear una variable que se va a llamar "calculadora" que va a ser una instancia de calculadora y voy a devolver un valor dentro de esta evaluación que estoy realizando y voy a devolver, utilizando el comando "return" el valor "calculadora", que, recordemos, es una instancia de mi calculadora y, en este caso, realizamos el proceso "sumar" de los valores "a" y "b" que, en este caso, es "10" y "10". Como te decía, "evaluate" entra al navegador, ejecuta un proceso, en este caso inyectamos estos valores, y me devuelve el resultado de este proceso. En este punto lo que vamos a tener es el resultado de sumar "10 y 10". Ahora, vamos a evaluar que todo esto haya funcionado correctamente. Vamos a realizar una prueba sobre este proceso. Para realizar esta prueba, simplemente, vamos a crear una condicional y vamos a examinar que el resultado sea el que esperamos. Por ejemplo, en este caso "suma" debería tener el valor de que mi calculadora sume ambos dígitos, que, en este caso, sería "10 y 10" que tendríamos un resultado de "20". Así que, vamos a evaluar que si "suma = 20" entonces, me muestre un resultado de que la prueba fue exitosa, para eso vamos a utilizar el comando "casper.test.pass", esto significa que la prueba funcionó correctamente, pasamos la prueba y vamos a asignarle de nombre a la prueba "suma calculadora". En caso contrario, de que el resultado no sea "20", y que, de alguna forma, la calculadora no esté funcionando correctamente o que nos dé un error o que devuelva cualquier resultado que no sea específicamente "20" que es lo que esperamos, nos va a dar un error y nos va a decir que la "Suma calculadora", a través del comando "casper.test.fail" no nos está funcionando. Vamos a guardar y ahora vamos a ejecutar este código, vamos a abrir nuestro documento y vamos a ejecutar la prueba llamada "Evaluar Calculadora", tal cual la define acá. Realizamos la suma de la calculadora y, efectivamente, todo está funcionando bien. Vamos a cambiar este número y vamos a decir que evaluamos que sea "21" número que está incorrecto en este punto, nada más vamos a hacer que falle la prueba. Y vemos que acá nos dice que tenemos un error, que estamos realizando un Unit testing incorrecto, que nos da un resultado que no es el que esperábamos. De esta forma, podemos evaluar específicamente, funciones, ya no habilidades del navegador, utilizando CasperJS.

Desarrollo web: Control de calidad automatizado

Aprende a emplear herramientas para controlar la calidad en tus desarrollos web de forma automática y anticiparte a las posibles incidencias del código que puedan surgir.

2:53 horas (21 Videos)
Actualmente no hay comentarios.
 
Fecha de publicación:16/05/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.