Pruebas de Entradas y Salidas en Componentes Vue
Clase 5 de 12 • Curso de Testing con Vue.js 2
Contenido del curso
Clase 5 de 12 • Curso de Testing con Vue.js 2
Contenido del curso
En un proyecto de Vue las piezas fundamentales del desarrollo son las vistas y los componentes. Tan fácil como eso. Del lado de los componentes lo que debemos tener en cuenta es lo siguiente:
Probar la interfaz pública
Como estamos hablando de componentes, en este caso nos vamos a enfocar en qué parte de estos debemos probar.
Es imperativo enfocarnos a probar el QUÉ y no el CÓMO, esto quiere decir que no vamos a probar cómo es que llegamos al resultado, sino el resultado en sí. Más adelante veremos algunos ejemplos.
A nivel de componente tenemos dos elementos que van a ser la base para las pruebas, y son:
Entradas
Las entradas de un componente están definidas por:
data() del componente entra en la categoría de entrada y salida.Salidas
Estas son:
Ya conociendo esto, nos podemos enfocar solamente en lo que necesitamos y nos evitamos pensar en la lógica del negocio o preocupándonos si la implementación que se hizo linea por linea de código fue la adecuada.
Vamos a ver unos ejemplos de esto:
<template> <div> <button class="btn" v-show="loggedIn">Logout</button> </div> </template> <script> export default { data() { return { loggedIn: false } } } </script>
En este ejemplo, nuestro valor de entrada es data(), esta puede venir de una acción externa o interna.
Y nuestro valor de salida es el botón que se renderiza o no.
Menciona en los comentarios más ejemplos de entradas y salidas en los que puedes aplicar las pruebas.