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.
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.
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.
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.
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.
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.
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.
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.
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.