En esta lección, vamos a configurar nuestro proyecto desde cero.
Si ya tienes experiencia trabajando con Vite
y configurando Vue Test Utils con Vue y TypeScript,
siéntase libre de descargar el zip o clonar el repositorio en la descripción
y pasar a la siguiente lección.
Poner en marcha un proyecto y funcionando con pruebas, TypeScript,
y un marco de front-end solía ser una tarea bastante desalentadora.
Afortunadamente hoy en día,
gran parte de este trabajo se ha simplificado gracias a recursos como Vite.
Vite es una moderna herramienta de desarrollo web
que no sólo nos dará una plantilla lista para usar en nuestro proyecto,
sino que también será nuestro bundler y nuestro servidor de desarrollo.
Para usarlo, tienes que tener Node instalado en tu sistema.
Para obtener el boilerplate de nuestro proyecto necesitamos escribir pnpm create vite.
Tenga en cuenta que aunque estoy usando pnpm
cualquier gestor de paquetes Node debería funcionar perfectamente.
Si prefieres usar npm o Yarn, siéntete libre de hacerlo.
Ahora podemos ver que el asistente me pregunta por el nombre de mi proyecto.
Voy a llamarlo Wordle.
Y el marco, vamos a utilizar Vue hoy.
Para la selección de variantes,
Me gusta usar la personalización de crear Vue.
Nos permitirá tener Vue test Utils y Vitest, ya preconfigurados para nosotros.
No exploraremos Vue Router, Pinia, y soportes JSX en este curso
porque mi intención es mantener nuestra aplicación lo más sencilla posible
para que podamos centrarnos en los elementos centrales, que es pruebas.
Con respecto a las pruebas,
Vitest nos permitirá escribir tanto pruebas unitarias como funcionales.
Las pruebas de características serán el motor principal
para los criterios deseados que nuestro código deberá cumplir.
Por último, no vamos a escribir pruebas E2E para este proyecto,
pero quiero mencionar que las pruebas E2E son geniales
para proteger tus historias de usuario más importantes.
Hablaremos de diferentes tipos de pruebas
y sus respectivos propósitos en la jerarquía de pruebas
con más detalle en el próximo episodio.
Ahora que el proyecto ha sido creado, vamos a abrirlo.
He estado trabajando con JetBrains IDEs desde hace años.
En este caso, estoy usando PhpStorm,
pero siéntete libre de usar cualquier IDE que prefieras.
Esto no debería afectar tu experiencia con este curso.
Si estás usando VS Code,
tenga en cuenta que el equipo de Vue ha puesto a disposición una configuración recomendada
justo en el README de este boilerplate.
Veamos si nuestra configuración funciona correctamente.
Comenzaremos instalando nuestras dependencias con pnpm install.
Luego inicializaremos nuestro repositorio con git init.
Finalmente, vamos a hacer nuestro primer commit.
Empezaremos haciendo git add . para añadir todos los archivos,
y luego git commit -m con el respectivo mensaje de commit.
Intentemos ejecutar nuestras pruebas.
Dado que vamos a escribir pruebas de funcionalidad con Vitest,
Sugiero renombrar el script en la línea 9 a sólo test.
Ahora si ejecutamos pnpm test
podemos ver que ya tenemos una prueba escrita para nosotros.
Está en HelloWorld.spec.ts dentro de nuestra carpeta tests.
Vamos a buscarlo.
Vamos a source, components, tests,
HelloWorld.spec.ts está justo ahí.
Parece que la prueba de ejemplo que tenemos
está comprobando si un mensaje que pasamos
al componente HelloWorld como prop
se renderiza en la página.
Vamos a ese componente.
Ahora que pasaría
si tuviéramos que codificar un texto
que no tiene nada que ver con el mensaje que estamos pasando al usuario?
Podemos ver que Vitest inmediatamente nos ha hecho saber que nuestra prueba está fallando.
Esta retroalimentación instantánea es una de las razones
por las que nos esforzaremos en tener un robusto conjunto de pruebas en nuestro proyecto.
Ten en cuenta que normalmente los IDEs
ofrecen una vue dedicada para visualizar tus pruebas.
En el caso de WebStorm o PhpStorm,
podemos ir a editar configuraciones,
pulsamos sobre el icono más,
y finalmente selecciona Vitest.
Si estás usando VS Code, He incluido enlaces a un plugin
que se puede instalar para obtener apoyo para Vitest en VS Code también.
Bien, vamos a cancelar nuestro proceso que está ejecutando pruebas en la terminal.
También podemos cerrar la terminal.
Ahora pulsando play,
podemos ver que tenemos una interfaz de usuario muy agradable para la ejecución de nuestras pruebas.
Muy bien, así que estamos en el rojo en rojo.
Vamos a deshacer los cambios que hemos hecho haciendo git research hard.
Esto ha deshecho todos los cambios que no hemos confirmado,
y podemos ver que nuestras pruebas están de nuevo en verde.
También debemos asegurarnos de que la aplicación está siendo servida correctamente
en nuestro entorno de desarrollo.
Para ello, vamos a ejecutar pnpm dev.
¡Perfecto! Tenemos una aplicación Vue TypeScript con pruebas.
A continuación, debemos eliminar todo el exceso de código que tenemos en nuestro boilerplate,
sólo para que podamos tener un comienzo más limpio.
Vamos a deshacernos de todos los componentes sobrantes.
Quiero mantener sólo app.vue y HelloWorld.
Así que vamos a deshacernos de estos dos de aquí.
Vamos a eliminar todos los iconos, así que borrando la carpeta de iconos.
Y vamos a borrar la carpeta de activos también.
A continuación, si vamos a app.vue, ya no tenemos un componente de bienvenida.
Y vamos a simplificar la plantilla
para tener sólo el componente HelloWorld.
Todo lo demás puede ser eliminado.
El estilo también se puede eliminar.
Vamos a preocuparnos del estilo en el futuro.
Ya casi hemos llegado.
Echemos un vistazo también al principal.
assets/main.css ya no existe, así que...
vamos a eliminarlo.
De acuerdo. Si echamos un vistazo a nuestras pruebas, todavía estamos pasando.
Otra cosa que quiero hacer
finalmente es el HelloWorld puede ser simplificado.
Hagamos que renderice un párrafo que contenga el mensaje prop.
También, una vez más, los estilos no nos importan por el momento.
Y seguimos pasando.
Si volvemos al navegador,
podemos ver que nuestra aplicación parece mucho más simple ahora.
De acuerdo. Vamos a confirmar estos cambios.
Para hacer esto, volvamos al IDE y hagamos otro commit.
Esta vez, vamos a llamarlo eliminar desorden
porque estamos eliminando un montón de código que no nos importa.
Estupendo. Otra cosa que quiero hacer también,
como un toque final,
es vamos a cambiar el nombre nuestro componente HelloWorld a WordleBoard.
En PhpStorm, Puedo hacer esto haciendo shift+F6
y simplemente cambiar esto a WordleBoard vector.
Ok. Lo mismo por aquí.
WordleBoard.
Por último, quiero reemplazar cada referencia de texto
a HelloWorld también sea WordleBoard, para que pueda
encontrar y reemplazar con command+shift+R en Mac.
Genial. Y es mi preferencia personal,
Yo prefiero tenerlo kebab caso para mis componentes vue.
Ten en cuenta que si estás usando VS Code,
También he incluido un enlace a una guía oficial
sobre cómo se puede aprovechar VS Código de
herramientas de refactorización para hacer su vida más fácil para usted también.
Vamos a hacer un commit.
Nuestro commit esta vez
va a ser renombrar componente a WordleBoard.
Observa que estamos haciendo commits bastante a menudo.
Vamos a estar practicando este principio a lo largo de este curso.
En este episodio, cubrimos cómo podemos aprovechar herramientas como Vite
para ahorrar mucho tiempo configurar aplicaciones modernas con pruebas.
También empezamos a sumergir en la refactorización,
ya que hemos eliminado el desorden
y renombrado los componentes para para representar mejor su propósito.
Ahora estamos listos para empezar a convertir esta aplicación en un verdadero juego worlde.