Snapshot testing con Jest en Vue.js

Para terminar este Curso de Testing con Vue aplicaremos diseño a nuestra app de gestión de tareas. Para ello instalaremos Bootstrap y aplicaremos algunas de las clases de este framework en algunos componentes. Cuando tengamos un diseño mas o menos convincente realizaremos un test de snapshot para asegurarnos que este diseño es el que queremos y...

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Invocando mutaciones desde una computed property de Vue.js con get y set

En el video anterior dejamos sin hacer la funcionalidad de marcar una tarea como no realizada. A través de una computed, vamos a lanzar una mutación de vuex u otra dependiendo del valor del checkbox. Esto lo conseguiremos sobreescribiendo el setter de la computed. Crearemos tests que comprueben esta lógica....

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Mostrando nuestra App de Vue en el navegador

Durante todo el curso hemos estado implementando funcionalidades a nuestra app de tareas sin abrir el navegador. ¿Creéis que todo estará funcionando? Vamos a montar el componente ToDoList en la raíz y aprovecharemos también para eliminar ciertos tests introductorios. Finalmente haremos un par de ajustes a la interfaz de usuario....

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Probando la integración del state y los getters de Vuex en el componente con vue-test-utils

En la lección anterior probamos unitariamente el state y los getters de nuestra pequeña store. En este video integraremos esta store en nuestro componente TodoList.vue y comprobaremos que hacemos uso de ésta. Lo conseguiremos inyectando el objeto $store dentro del componente a través de mocks....

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Probando router-link y $route de Vue Router con vue-test-utils

Ahora que ya sabemos cómo crear stubs y mocks con vue-test-utils, vamos a montar un router real en nuestra aplicación. Crearemos una prueba que compruebe, a través de un stub,  que router-link apunte hacia la ruta correcta. Además escribiremos otra prueba que compruebe, en el componente de destino de la ruta, que se esté haciendo un uso adecuado de...

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Pruebas de slots con vue-test-utils

Cuando usamos slots en nuestros componentes, necesitamos indicarle a nuestros tests qué estamos pasando como contenido para después comprobar que el slot se esté mostrando. Para conseguir esto vamos a utilizar la opción slots de configuración de mount....

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Comprobar eventos emitidos desde un componente hijo hacia el padre con vue-test-utils

En videos anteriores hemos aprendido a probar una comunicación descendente entre componentes. Nos referimos al paso de props desde el componente padre hacia el hijo. En este video nos centraremos en la comunicación ascendente, es decir, a la emisión de eventos desde el componente hijo para que el componente padre actue en consecuencia. Haremos uso...

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Sustituyendo la implementación de componentes con stubs y shallow con vue-test-utils

En ciertas ocasiones necesitamos que al montar un componente hijo, éste sea sustituido por otro, o simplemente dejarlo sin comportamiento para poder probar el componente padre en completo aislamiento. En esta lección aprenderemos a hacerlo a través de la opción stubs del objeto de configuración de mount. También explicaremos la diferencia entre utilizar shallow en lugar de mount para...

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Comprobar que un componente padre renderiza un componente hijo con vue-test-utils

Para iniciar esta segunda parte del curso aprenderemos a comprobar que un componente padre contiene un componente hijo. Crearemos un componente ToDoList y nos aseguraremos de que se renderizan tantos componentes Task como elementos tengamos en nuestro arreglo de tareas. Los métodos del wrapper que aceptan selectores de CSS como contains, find, findAll etc. también admiten como parámetro...

Regístrate para ver ésta y cientos de lecciones exclusivas.

Ver post

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.

Recibe consejos útiles y múltiples recursos directamente en tu correo