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

VueJS: El sistema reactivo

32161531614_de543d116e_o.jpg

Ultimo post sobre Vue. Tenía pensado escribir sobre TypeScript con Vue y de Testing con Vue pero creo que es mejor que dediquéis el tiempo al gran trabajo que está haciendo Alex Jover justamente en estos dos apartados 🙂

Dedicamos el último post a entender el sistema interno reactivo de Vue y a cómo funciona su auténtica magia. Como un cambio de un dato por parte del usuario, puede suponer un cambio en la interfaz sin que yo como desarrollador tenga que indicar esta acción directamente.

Read More

VueJS: Diferentes formas de reutilizar código

28005407566_d887d45bea_o.jpg

Foto de Zh. B

Una de las promesas que nos hacen cuando nos venden los frameworks orientados a componentes es que el nivel de reutilización de código es muy alto. No vamos a negar que las arquitecturas en componentes son un gran aliciente para tener código más utilizable, pero lo que muchas veces nos pasa es que no sacamos todo el partido que un framework nos proporciona y nos quedamos en esa visión de componente visual.

Es decir, está muy bien que podamos encapsular nuestro HTML, CSS y JS en piezas aisladas que pueda usar en diferentes contextos, pero aun existe un mayor número de funcionalidad que tiene que ver más con la lógica de nuestra aplicación, que también puede ser reutilizable y refactorizada en componentes más genéricos.

El post de hoy trata de exponer todas las posibilidades que nos ofrece Vue a la hora de hacer un código menos repetitivo y más genérico. No solo nos centraremos en la visión de componentes, sino que también hablaremos de cómo crear funcionalidad mucho más transversal o de poder extraer lógica que pueda ser útil para más de un componente.

Read More

VueJS: Cómo crear un plugin

35684019921_23be5f8210_o.jpg

Foto de portadaa de phaminhduy

Aunque la serie de Vue haya terminado, no significa que dejemos el tema de Vue por ahora. Lo que en esa serie aprendimos es una guía con los temas más generales y que más uso vas a poder dar.

Sin embargo, existe mucha funcionalidad transversal que puede que no utilices en tu día a día, pero que en cualquier momento tengas que hacer uso de ella. Entramos en una sección de “Otras funcionalidades que quizá te sea útil conocerlas”.

Hoy empezamos con la creación de plugins en Vue:

Read More

VueJS: Aplicaciones universales con Nuxt

33109943776_dab3b6d829_o.jpg

Fotografía de portada de Chris Garcia

Si has llegado hasta aquí, ¡Enhorabuena! Estamos al final de camino. Hemos aprendido muchas cosas sobre Vue en general y sobre SSR en particular durante estas últimas semanas.

La sensación que nos dejaba vue-server-renderer era la de ser una librería con la que tener que lidiar con demasiada configuración engorrosa, que no nos ayudaba a centrarnos en lo importante: desarrollar aplicaciones.

Como os he ido prometiendo, esto, a día de hoy, tiene solución: el proyecto Nuxt ha nacido para encargarse de toda esa fontanería y ayudarnos en que focalicemos y aportemos valor lo antes posible. Por todo lo probado y leído, Nuxt me parece un proyecto con mucho futuro, por tanto creo que este post será un buen punto y final a la serie de VueJS.

Terminemos lo empezado:

Read More