VueJS: Testeando nuestros stores

broken-clay-close-up-838981.jpg

Hemos visto cómo configurar nuestro proyecto para que pueda ser testeado, hemos creado nuestro primeros test sobre componentes de VueJS y hemos jugado con diferentes tipos de componentes y complejidades, desde componentes que tenían dependencias hasta componentes que solo eran visuales.

Nos queda para terminar esta sería, ver cómo somos capaces de testear nuestros stores. Si recordamos, los stores son aquellas piezas de código que configuraban vuex  y que nos permitían gestionar el estado global de nuestra aplicación en pequeños estancos bien modularizados y abstraídos.

Tenemos que ver las aproximaciones que podemos llevar a cabo y cómo probar cada uno de los elementos. Vayamos al lío:

Read More

Anuncios

VueJS: Testeando nuestros componentes

ancient-antique-art-277371.jpg

Fotografía de Luo Ying

En el post anterior, explicamos de manera superficial cómo crear pruebas con Jest. Conseguimos configurar el entorno e incluimos todas las librerías necesarias para poder trabajar en un entorno típico de VueJS.

En el post de hoy, entraremos en más detalle de cómo nos va ayudar vue-test-utils  a crear test para VueJS, qué elementos de un componente nos interesa probar y qué peculiaridades vamos a tener a la hora de crear tests para nuestras pequeñas vistas.

Como hemos dicho hasta ahora, por lo general, un test intentará probar unidades de código como si fuesen cajas negras. Creados unos datos de entrada, nuestro código tiene que devolver unos datos de salida, el cómo lo consiga es un problema de implementación.

En nuestro caso, nuestra unidad de código mínima será un componente, un componente visual, un componente con su HTML, CSS y JavaScript. Lo que tendremos que hacer en las pruebas unitarias de componentes es inyectar unos datos de entrada determinados y obtener aquel HTML renderizado de la manera que nosotros deseamos.

También será necesario que lancemos todos aquellos eventos para los que nuestro componentes tienen comportamientos implementados y vigilaremos que el estado se encuentre correcto según nuestras especificaciones de negocio.

Pero bueno… como es mejor verlo que contarlo, empecemos a trabajar con vue-test-utils:

Read More

VueJS: Testeando nuestras aplicaciones

pexels-photo-847236.jpeg

Fotografía de George Desipris

Buenas! Os tenía muy abandonados y abandonadas! Perdonadme, entre una cosas y otras, no he sacado ni el tiempo ni las ganas suficientes para escribir algo que me apeteciera de verdad por aquí. Vengo con las pilas cargadas y nuevos temas de los que hablar.

Os había comentado en post anteriores que nos íbamos a alejar una temporada de VueJS, pero me está siendo difícil… Como sabréis la mayoría, la serie de artículos que escribí aquí en El Abismo sobre VueJS se hizo bastante viral y eso ha hecho que mucha gente preguntase sobre qué pasó con ese gran olvidado de siempre: El testing.

Tengo que contaros que llegué un poco flojo de fuerzas hacia el final de la serie y sacrifiqué la parte de cómo testear una aplicación VueJS. Estaba en la planificación, lo prometo, pero se quedó por el camino.

Como bien me comentó Alberto Moratilla (principal precursor y cabeza pensante del manual de GitBook), no incluir esta parte en la serie da una sensación ‘mala’. Olvidándonos del testing, estamos dando a entender que la calidad del código que estamos desarrollando no nos es importante. Sin embargo, sabemos que esto no es así; testear y probar nuestro código de una manera automática es la clave para que nuestra aplicación resista mejor al tiempo y a los cambios.

Por otra parte, he ido posponiendo la escritura de esta parte porque la comunidad ya cuenta con dos recursos buenísimos sobre testing en VueJS.  Estos son, el libro ‘Testing VueJS components with Jest‘ de Alex Jover y el Curso de Codely ‘Testing con VueJS y Jest‘ de Javi Rubio y Alberto Gualis que puede que sean bastante mejores y amplios que esta serie por el material y la experiencia que tienen los tres en esta materia.

Pero bueno, como las cosas hay que terminarlas y hay que intentar terminarlas bien y con una cobertura aceptable, empecemos, con muchas ganas e ilusión, a hablar de testing y VueJS:

Read More

#BilboStack2018: El gran evento del año

28205316973_9e0f6a470f_b.jpg

Fotografía de lameato feliz

Este fin de semana, nos acercamos varios amigas y amigos desde Madrid a disfrutar de uno de los eventos del año: BilboStack. El cartel de ponentes, la ciudad y la repercusión mediática de las redes sociales fueron la clave para que decidiéramos ir a esta nueva edición.

He escrito una pequeña crónica sobre lo que fue el Sábado. El resumen: pasamos unos días que nos han cargado las pilas totalmente. Un evento único y una ciudad increíble. Un evento para repetir la experiencia durante muchos años más.

Comencemos!

Read More

PWA: Conceptos básicos sobre Service Workers

pexels-photo-213399.jpeg

Foto de portada de FOX

Continuamos con PWA. Creo que ya tenemos una idea de lo que nos enfrentamos en esta serie, por tanto, centrémonos en apartados más técnicos para poder cumplir con los objetivos que Google nos aconseja tener.

Durante algunas semanas nos centraremos en una de las API que quieren revolucionar la forma en la que entendemos el front y en cómo gestionamos y administramos los recursos de nuestro navegador: Los Workers.

En nuestro caso los Workers que más nos interesan son los Service Workers. En el posts de hoy, aprenderemos a diferenciar los tipos de Workers que existen, en qué nos puede ayudar cada uno y cómo les podemos sacar provecho para crear aplicaciones Web que le den guerra a las aplicaciones nativas.

Read More

PWA: Los patrones App Shell y PRPL

pexels-photo-629168.jpeg

Foto de Eberhard

Hola de nuevo. Terminamos con este post la introducción a PWA. Por ahora, lo único que PWA nos está aportando es un lenguaje nuevo y una manera de clasificar todo aquello que un buen equipo front debería tener en cuenta en sus desarrollos.

Una cosa que me gusta de PWA y de lo que está haciendo Google es que está creando un repositorio de funcionalidades transversales que muchas veces, desde negocio, no se dan como importantes por no centrarse en el dominio, pero que pueden afectar mucho a que un producto sea un éxito y que atraiga a más usuarios.

En el post de hoy nos centraremos en solucionar otro punto del checklist. En esta ocasión solucionaremos este:

La primera carga de nuestra aplicación es rápida hasta con 3G

Para solucionarlo, necesitamos explicar qué son el modelo App Shell y el patrón PRPL. Dos términos nuevos que explican algo que, quizá, no nos sea es tan nuevo 🙂

Veamos:

Read More

PWA: El manifiesto de nuestra aplicación

pexels-photo-618915.jpeg

En el post anterior explicamos qué es lo que define a una PWA según Google, nos quitamos un poco de fatiga al ver que el concepto no viene a revolucionar el desarrollo Web y enumeramos una serie de funcionalidades que sí o sí una aplicación tiene que incluir para ser considerada PWA.

Sin embargo, nos quedamos mucho en la teoría y lo abstracto, y no explicamos por dónde tenemos que empezar para que nuestra aplicación empiece a cumplir con el ckecklist de Google.

En el post de hoy, vamos a centrarnos en resolver uno de los requisitos que se nos pedía:

Nuestra aplicación se debe poder incluir en el menú de inicio del dispositivo

¿Cómo podemos hacer esto? Bastante más fácil de lo que a simple vista parece. Veamos:

Read More