Desarrollo web: Control de calidad automatizado

Integrar pruebas de PhantomJS en Gulp

¡Prueba gratis durante 10 días

nuestros 1246 cursos !

Prueba gratis Mostrar modalidades de suscripción
Cuando tu proyecto crezca y tengas decenas de revisiones por hacer antes de presentar el producto final vas a necesitar agilizar el proceso, y ejecutar una por una todas las pruebas puede tomar horas que puedes ocupar en cosas más importantes. En esta lección te voy a mostrar cómo ejecutar todas las pruebas de tu sitio con un solo comando de Gulp.
08:50

Transcripción

En esta lección vamos a aprender como integrar las pruebas de Phantom dentro del administrador de tareas Gulp. Acá yo estoy trabajando un proyecto en el cual tengo un archivo llamado "gulpfile.js" donde estoy desarrollando algunas tareas. Básicamente estoy instalando un servidor web y estoy desplegando el navegador para que se muestre cada vez que yo arranco este servidor y también tengo una tarea llamada "watch" que hace que se reinicie el servidor cada vez que yo hago algún cambio y se despliega de manera inmediata en el navegador. Vamos a integrar algunos elementos dentro de este archivo para poder automatizar las tareas de Phantom. Para eso yo he creado una carpeta llamada "phantom" dentro de la raíz de mi proyecto. El nombre de la carpeta puede ser cualquiera que desees, en este caso he utilizado este nombre simplemente para que sea fácil de comprender que es la información que tenemos acá. Dentro de esta carpeta he instalado dos diferentes pruebas. Vamos a revisar estas pruebas desde la terminal, en este caso, trabajando desde Visual Studio Code. Vamos a escribir acá el comando "ls" dentro de Mac o "dirw" dentro de Windows, en mi caso, estoy trabajando en Mac y podemos ver acá los archivos con los que estamos trabajando. Yo voy a entrar a la carpeta "phantom", así que voy a escribir "cd phantom" y voy a llamar uno de estos comandos, por ejemplo vamos a llamar "phantomjs evaluar_titulo.js". Esto va a tratar de examinar mi archivo. En este momento no me está dando ningún resultado porque no he inicializado el servidor. Vamos a inicializar el servidor. El detalle es que, en este momento, ya estoy trabajando con la consola. Para eso nosotros vamos a levantar una nueva terminal dentro de Visual Studio. Vamos a buscar el ícono que aparece acá con el signo de "+". Voy a abrir una nueva terminal. En este caso, si yo escribo "ls" en el caso de Mac o "dirw" en el caso de Windows, vamos a ver que estamos desde la raíz de este documento. Entonces yo voy a ejecutar la tarea "gulp". En este caso va a activar el servidor, va a ejecutar la información que se encuentra dentro de "gulpfile". Vamos a ejecutarla. Y esto va a abrir un servidor web donde voy a poder ver la información de mi página web, en este caso, estamos trabajando con la página web ubicada en la carpeta "app". Ahora, trabajando dentro de este sistema yo tengo dos terminales abiertas, vamos a dejar esta pantalla acá y vamos a poner el editor en primer plano para que podamos ver la información. Tenemos una terminal donde se está mostrando el servidor y yo puedo acceder a la primera terminal donde estoy realizando las pruebas. Vamos a volver a repetir esta prueba. Vemos que se está mostrando el resultado de nuestra prueba y ahora tenemos acá, el título del sitio está "OK". Ya vemos que está funcionando la prueba. Ahora, lo que vamos a hacer, es que vamos a integrar esta prueba dentro de Gulp para que podamos hacerlo todo desde el mismo lugar centralizado. Vamos a, para hacer esto, instalar un paquete llamado "npm install gulp-phantom" y a esto vamos a incluirle el parámetro "--save" para que quede instalado en el sistema y se almacene en el archivo "package.json". Ahora ya tenemos disponible un nuevo paquete que nos va a permitir a nosotros trabajar Phantom dentro de Gulp. El segundo paso que vamos a realizar, es que vamos a insertar una variable que nos va a permitir a nosotros trabajar con este módulo que acabamos de instalar. Para eso, vamos a incluir una variable, en este caso llamada "phantom" donde vamos a importar el módulo "gulp-phantom" que es el que acabamos de instalar. Una vez que lo tengamos instalado, vamos a agregar una nueva tarea. Vamos a incluir "gulp.task" y vamos a crear una nueva tarea que se va a llamar en este caso "phantom", pero puedes ponerle cualquier nombre. Y vamos a ejecutar una función cada vez que llamemos esta tarea. En este caso, vamos a utilizar "gulp.src" y vamos a definir, dentro del parámetro de "src" dónde van a encontrarse los archivos con los que vamos a trabajar, en este caso la carpeta "phantom". Así que, vamos a definir que todos los archivos que tengan la extensión "js" dentro de esta carpeta van a funcionar como fuente para poder trabajar dentro de esta tarea. Una vez que la tenemos definida, también vamos a incluir un "pipe", donde vamos a invocar por cada uno de los archivos que se encuentren ahí un método llamado "phantom" que básicamente va a ejecutar la prueba que nosotros estamos solicitando. Finalmente, y te voy a mostrar un detalle interesante, vamos a agregar un nuevo comando que se va a llamar "pipe", vamos a mejorar esta sintaxis, ahora sí, vamos a incluir este comando que se va a llamar "pipe", "gulp.dest", o sea el destino donde va a ir la información que nosotros vamos a guardar y voy a definir acá una carpeta; ya te voy a decir que es lo que vamos a hacer con este destino. Voy a guardar esta nueva tarea y ahora voy a irme. Recordemos que tenemos acá una cejilla donde se está ejecutando nuestro servidor y tenemos otra donde vamos a realizar nuestras tareas. Así que, voy a incluir acá "gulp", voy a llamar a "gulp" y voy a llamar a la tarea que acabamos de crear, en este caso "phantom". Quiero que notes que se van a ejecutar dos diferentes tareas de Gulp. Pueden realizarse de manera paralela, no afectarnos de ninguna forma el servidor y podemos trabajarlo todo dentro de Visual Studio. Ahora, mientras yo te decía eso, se ejecutaron las pruebas y tenemos acá una nueva carpeta que se llama "test_data". ¿Qué es lo que acaba de suceder? Bueno. ¿Recuerdas que hace unos segundos acabo de hacer unas pruebas y las pruebas nos mostraban los resultados dentro de la terminal por ejemplo, título del sitio OK. Ahora, en este caso se ejecutaron las pruebas, pero no se mostró nada. Pero, como yo acabo de definir que tenemos una carpeta de destino, si revisamos acá, acaban de pasar dos cosas. Primero, se ejecutaron todas las pruebas que se encontraban dentro de la carpeta "phantom", todas y cada una de las pruebas que estaban acá se ejecutaron automáticamente, yo no tuve que definir cada una de ellas. Puede tener cualquier nombre, automáticamente Gulp se va a encargar de ejecutar cada archivo que se encuentre dentro de esta carpeta. Así que podemos tener una cantidad indefinida de pruebas para realizar en nuestro sitio. Y lo segundo es que esta carpeta "test_data" que definí acá, tiene archivos de texto donde se muestra el mensaje que nosotros teníamos en la consola. Así, por ejemplo, si evalúo al título revisamos acá, me dice que título del sitio OK. Vamos a ponerle acá parámetro, le agregamos "+ Date()", vamos a poner la fecha, guardamos y volvemos a ejecutar la prueba. Se van a volver a ejecutar todas las pruebas y esta vez vamos a revisar que tenemos los resultados y tenemos que el título del sitio está "OK" y además se está incluyendo la fecha en que se realiza la prueba. Así, es que nosotros vamos a poder integrar dentro de Gulp todas las pruebas de Phantom y las vamos a poder realizar en una sola tarea, una cantidad indefinida de pruebas.

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.
 
Formadores:
Fecha de publicación:16/05/2017
Duración:2:53 horas (21 Videos)

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.