Pruebas de Entradas y Salidas en Componentes Vue

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: La propiedad data() del componente entra en la categoría de entrada y salida.
• Props: Las propiedades de los componentes son los atributos a nivel de etiqueta.
• Interacción con el usuario: Esto se puede ver como todos los eventos que dispara el usuario y las acciones que ejecuta.
• Ciclos de vida del componente: Estos están en entrada por el comportamiento que tienen, son los inicializadores de muchas características del componente.

Salidas

Estas son:

• Data renderizada: Lo que se renderiza en el DOM, después del proceso de rendering.
• Eventos: Nativos o personalizados.
• Conexión con sus nodos hijos: Esto es la salida de este componente, pero puede ser entrada para los hijos, es decir, la comunicación del componente con cualquier nodo hijo que tenga.

---

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.