Contenido del curso
Jose Daniel Barría Reyes
student•
hace 6 años
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.
Jose Daniel Barría Reyes
Carlos Eduardo Gomez García
Juan Esteban Galvis
Supongo que de entrada, cuando el usuario presiona el boton de logout Y de salida cuando se dispara el evento click.
Vale, las pruebas no se basan en el cómo se hacen, sino en el qué se hace, lo que nos interesa con las entradas y las salidas, nos interesa ver si esas salidas que recibimos corresponde con lo que nosotros teníamos previsto con respecto a la entrada que nosotros le dimos.
Otros ejemplos podrían ser realmente cualquier componente, por ejemplo, un componente loading, el cuál podría recibir en prrop si se debe renderizar o no, lo cual sería su entrada, y su salida sería el componente renderizado o no:D!
De pronto el qué se esta mostrando cuando llamamos a una API, por ejemplo necesitamos mostrar nombre, edad y foto entonces validar qué el nombres sea un texto, edad número y foto string que termine en .png o .jpg puede ser? Además que ninguno sea undefine.