1
00:00:04,767 --> 00:00:08,967
En esta lección, vamos a configurar
nuestro proyecto desde cero.

2
00:00:09,267 --> 00:00:12,340
Si ya tienes experiencia
trabajando con Vite

3
00:00:12,500 --> 00:00:16,900
y configurando Vue Test Utils
con Vue y TypeScript,

4
00:00:17,200 --> 00:00:22,333
siéntase libre de descargar el zip
o clonar el repositorio en la descripción

5
00:00:22,358 --> 00:00:24,300
y pasar a la siguiente lección.

6
00:00:25,313 --> 00:00:29,314
Poner en marcha un proyecto
y funcionando con pruebas, TypeScript,

7
00:00:29,339 --> 00:00:34,110
y un marco de front-end
solía ser una tarea bastante desalentadora.

8
00:00:34,347 --> 00:00:35,856
Afortunadamente hoy en día,

9
00:00:35,881 --> 00:00:40,567
gran parte de este trabajo se ha simplificado
gracias a recursos como Vite.

10
00:00:41,040 --> 00:00:43,667
Vite es una moderna herramienta de desarrollo web

11
00:00:43,733 --> 00:00:48,433
que no sólo nos dará
una plantilla lista para usar en nuestro proyecto,

12
00:00:48,726 --> 00:00:55,100
sino que también será nuestro bundler
y nuestro servidor de desarrollo.

13
00:00:55,833 --> 00:01:00,000
Para usarlo, tienes que tener Node
instalado en tu sistema.

14
00:01:01,963 --> 00:01:07,833
Para obtener el boilerplate de nuestro proyecto
necesitamos escribir pnpm create vite.

15
00:01:09,267 --> 00:01:12,300
Tenga en cuenta
que aunque estoy usando pnpm

16
00:01:12,533 --> 00:01:15,500
cualquier gestor de paquetes Node
debería funcionar perfectamente.

17
00:01:15,567 --> 00:01:19,800
Si prefieres usar npm o Yarn,
siéntete libre de hacerlo.

18
00:01:20,400 --> 00:01:23,900
Ahora podemos ver que el asistente
me pregunta por el nombre de mi proyecto.

19
00:01:23,967 --> 00:01:25,400
Voy a llamarlo Wordle.

20
00:01:25,907 --> 00:01:28,933
Y el marco,
vamos a utilizar Vue hoy.

21
00:01:29,626 --> 00:01:31,267
Para la selección de variantes,

22
00:01:31,293 --> 00:01:34,633
Me gusta usar
la personalización de crear Vue.

23
00:01:35,180 --> 00:01:40,620
Nos permitirá tener Vue test Utils
y Vitest, ya preconfigurados para nosotros.

24
00:01:42,093 --> 00:01:46,967
No exploraremos Vue Router,
Pinia, y soportes JSX en este curso

25
00:01:46,967 --> 00:01:51,191
porque mi intención es mantener
nuestra aplicación lo más sencilla posible

26
00:01:51,216 --> 00:01:55,367
para que podamos centrarnos en los elementos centrales,
que es pruebas.

27
00:01:55,940 --> 00:01:57,433
Con respecto a las pruebas,

28
00:01:57,458 --> 00:02:02,300
Vitest nos permitirá escribir
tanto pruebas unitarias como funcionales.

29
00:02:02,533 --> 00:02:05,423
Las pruebas de características
serán el motor principal

30
00:02:05,448 --> 00:02:10,033
para los criterios deseados
que nuestro código deberá cumplir.

31
00:02:10,753 --> 00:02:14,900
Por último, no vamos a escribir
pruebas E2E para este proyecto,

32
00:02:15,200 --> 00:02:19,067
pero quiero mencionar
que las pruebas E2E son geniales

33
00:02:19,092 --> 00:02:21,900
para proteger
tus historias de usuario más importantes.

34
00:02:22,067 --> 00:02:25,260
Hablaremos de
diferentes tipos de pruebas

35
00:02:25,299 --> 00:02:28,633
y sus respectivos propósitos
en la jerarquía de pruebas

36
00:02:28,859 --> 00:02:31,400
con más detalle en el próximo episodio.

37
00:02:32,367 --> 00:02:35,467
Ahora que el proyecto
ha sido creado, vamos a abrirlo.

38
00:02:36,757 --> 00:02:40,533
He estado trabajando
con JetBrains IDEs desde hace años.

39
00:02:40,558 --> 00:02:43,300
En este caso, estoy usando PhpStorm,

40
00:02:43,479 --> 00:02:46,533
pero siéntete libre de usar
cualquier IDE que prefieras.

41
00:02:46,800 --> 00:02:50,400
Esto no debería afectar
tu experiencia con este curso.

42
00:02:51,033 --> 00:02:52,933
Si estás usando VS Code,

43
00:02:53,033 --> 00:03:00,200
tenga en cuenta que el equipo de Vue
ha puesto a disposición una configuración recomendada

44
00:03:00,225 --> 00:03:02,933
justo en el README de este boilerplate.

45
00:03:04,073 --> 00:03:06,833
Veamos si nuestra configuración
funciona correctamente.

46
00:03:07,066 --> 00:03:12,743
Comenzaremos instalando
nuestras dependencias con pnpm install.

47
00:03:15,583 --> 00:03:20,600
Luego inicializaremos
nuestro repositorio con git init.

48
00:03:22,973 --> 00:03:25,773
Finalmente, vamos a hacer nuestro primer commit.

49
00:03:25,833 --> 00:03:30,067
Empezaremos haciendo
git add . para añadir todos los archivos,

50
00:03:30,272 --> 00:03:35,263
y luego git commit -m
con el respectivo mensaje de commit.

51
00:03:40,563 --> 00:03:42,800
Intentemos ejecutar nuestras pruebas.

52
00:03:42,826 --> 00:03:46,067
Dado que vamos a escribir
pruebas de funcionalidad con Vitest,

53
00:03:46,200 --> 00:03:50,367
Sugiero renombrar
el script en la línea 9 a sólo test.

54
00:03:52,533 --> 00:03:55,567
Ahora si ejecutamos pnpm test

55
00:03:58,743 --> 00:04:03,233
podemos ver que ya
tenemos una prueba escrita para nosotros.

56
00:04:03,579 --> 00:04:09,010
Está en HelloWorld.spec.ts
dentro de nuestra carpeta tests.

57
00:04:09,133 --> 00:04:10,267
Vamos a buscarlo.

58
00:04:11,920 --> 00:04:16,633
Vamos a source, components, tests,

59
00:04:16,853 --> 00:04:20,133
HelloWorld.spec.ts está justo ahí.

60
00:04:25,389 --> 00:04:28,167
Parece que la prueba de ejemplo que tenemos

61
00:04:28,260 --> 00:04:31,700
está comprobando
si un mensaje que pasamos

62
00:04:31,733 --> 00:04:34,150
al componente HelloWorld como prop

63
00:04:34,363 --> 00:04:36,367
se renderiza en la página.

64
00:04:36,500 --> 00:04:38,300
Vamos a ese componente.

65
00:04:39,712 --> 00:04:42,775
Ahora que pasaría

66
00:04:42,800 --> 00:04:46,663
si tuviéramos que codificar un texto

67
00:04:46,688 --> 00:04:49,700
que no tiene nada que ver con el mensaje
que estamos pasando al usuario?

68
00:04:54,730 --> 00:05:00,667
Podemos ver que Vitest inmediatamente
nos ha hecho saber que nuestra prueba está fallando.

69
00:05:00,933 --> 00:05:04,602
Esta retroalimentación instantánea
es una de las razones

70
00:05:04,627 --> 00:05:10,667
por las que nos esforzaremos en tener
un robusto conjunto de pruebas en nuestro proyecto.

71
00:05:11,700 --> 00:05:14,777
Ten en cuenta que normalmente los IDEs

72
00:05:14,800 --> 00:05:18,867
ofrecen una vue dedicada
para visualizar tus pruebas.

73
00:05:19,000 --> 00:05:22,200
En el caso de WebStorm o PhpStorm,

74
00:05:22,967 --> 00:05:26,067
podemos ir a editar configuraciones,

75
00:05:27,806 --> 00:05:29,833
pulsamos sobre el icono más,

76
00:05:31,086 --> 00:05:33,999
y finalmente selecciona Vitest.

77
00:05:36,705 --> 00:05:41,467
Si estás usando VS Code,
He incluido enlaces a un plugin

78
00:05:41,492 --> 00:05:45,833
que se puede instalar para obtener apoyo
para Vitest en VS Code también.

79
00:05:48,070 --> 00:05:53,650
Bien, vamos a cancelar nuestro proceso
que está ejecutando pruebas en la terminal.

80
00:05:53,675 --> 00:05:55,967
También podemos cerrar la terminal.

81
00:05:56,033 --> 00:05:57,700
Ahora pulsando play,

82
00:05:58,367 --> 00:06:03,733
podemos ver que tenemos una interfaz de usuario muy agradable
para la ejecución de nuestras pruebas.

83
00:06:04,433 --> 00:06:07,530
Muy bien, así que estamos en el rojo
en rojo.

84
00:06:07,533 --> 00:06:11,700
Vamos a deshacer los cambios que hemos hecho
haciendo git research hard.

85
00:06:13,183 --> 00:06:16,800
Esto ha deshecho
todos los cambios que no hemos confirmado,

86
00:06:16,833 --> 00:06:21,167
y podemos ver que nuestras pruebas
están de nuevo en verde.

87
00:06:21,917 --> 00:06:26,333
También debemos asegurarnos de que la
aplicación está siendo servida correctamente

88
00:06:26,333 --> 00:06:28,133
en nuestro entorno de desarrollo.

89
00:06:28,200 --> 00:06:31,967
Para ello, vamos a ejecutar pnpm dev.

90
00:06:34,577 --> 00:06:40,133
¡Perfecto! Tenemos una aplicación Vue TypeScript
con pruebas.

91
00:06:40,800 --> 00:06:45,667
A continuación, debemos eliminar todo el exceso de código
que tenemos en nuestro boilerplate,

92
00:06:45,833 --> 00:06:47,933
sólo para que podamos tener un comienzo más limpio.

93
00:06:48,367 --> 00:06:51,133
Vamos a deshacernos
de todos los componentes sobrantes.

94
00:06:51,167 --> 00:06:55,600
Quiero mantener sólo app.vue
y HelloWorld.

95
00:06:55,625 --> 00:06:59,133
Así que vamos a deshacernos de estos dos de aquí.

96
00:07:01,490 --> 00:07:06,967
Vamos a eliminar todos los iconos,
así que borrando la carpeta de iconos.

97
00:07:07,867 --> 00:07:10,933
Y vamos a borrar
la carpeta de activos también.

98
00:07:12,767 --> 00:07:18,733
A continuación, si vamos a app.vue,
ya no tenemos un componente de bienvenida.

99
00:07:19,186 --> 00:07:21,542
Y vamos a simplificar la plantilla

100
00:07:21,567 --> 00:07:25,200
para tener sólo
el componente HelloWorld.

101
00:07:25,400 --> 00:07:27,933
Todo lo demás puede ser eliminado.

102
00:07:30,006 --> 00:07:32,533
El estilo también se puede eliminar.

103
00:07:32,558 --> 00:07:36,367
Vamos a preocuparnos
del estilo en el futuro.

104
00:07:37,367 --> 00:07:39,100
Ya casi hemos llegado.

105
00:07:39,125 --> 00:07:41,300
Echemos un vistazo también al principal.

106
00:07:41,700 --> 00:07:46,500
assets/main.css ya no existe, así que...

107
00:07:47,140 --> 00:07:48,487
vamos a eliminarlo.

108
00:07:50,926 --> 00:07:56,733
De acuerdo. Si echamos un vistazo
a nuestras pruebas, todavía estamos pasando.

109
00:07:57,672 --> 00:07:59,470
Otra cosa que quiero hacer

110
00:07:59,500 --> 00:08:04,133
finalmente es el HelloWorld
puede ser simplificado.

111
00:08:04,373 --> 00:08:11,333
Hagamos que renderice un párrafo
que contenga el mensaje prop.

112
00:08:12,630 --> 00:08:17,967
También, una vez más,
los estilos no nos importan por el momento.

113
00:08:19,076 --> 00:08:20,833
Y seguimos pasando.

114
00:08:21,863 --> 00:08:23,200
Si volvemos al navegador,

115
00:08:23,225 --> 00:08:26,800
podemos ver que nuestra aplicación
parece mucho más simple ahora.

116
00:08:27,490 --> 00:08:30,167
De acuerdo. Vamos a confirmar estos cambios.

117
00:08:30,500 --> 00:08:34,296
Para hacer esto, volvamos al IDE
y hagamos otro commit.

118
00:08:34,827 --> 00:08:38,233
Esta vez, vamos a llamarlo eliminar desorden

119
00:08:38,393 --> 00:08:43,267
porque estamos eliminando un montón de código
que no nos importa.

120
00:08:44,433 --> 00:08:47,167
Estupendo. Otra cosa
que quiero hacer también,

121
00:08:47,192 --> 00:08:49,042
como un toque final,

122
00:08:49,067 --> 00:08:55,100
es vamos a cambiar el nombre
nuestro componente HelloWorld a WordleBoard.

123
00:08:56,013 --> 00:08:59,833
En PhpStorm,
Puedo hacer esto haciendo shift+F6

124
00:09:00,300 --> 00:09:08,110
y simplemente cambiar esto
a WordleBoard vector.

125
00:09:08,679 --> 00:09:10,933
Ok. Lo mismo por aquí.

126
00:09:14,283 --> 00:09:16,467
WordleBoard.

127
00:09:19,676 --> 00:09:23,483
Por último, quiero reemplazar
cada referencia de texto

128
00:09:23,508 --> 00:09:27,000
a HelloWorld también
sea WordleBoard, para que pueda

129
00:09:27,133 --> 00:09:31,067
encontrar y reemplazar
con command+shift+R en Mac.

130
00:09:37,737 --> 00:09:41,333
Genial. Y es mi preferencia personal,

131
00:09:41,358 --> 00:09:46,467
Yo prefiero tenerlo kebab caso
para mis componentes vue.

132
00:09:47,020 --> 00:09:49,742
Ten en cuenta que si estás usando VS Code,

133
00:09:49,767 --> 00:09:52,467
También he incluido un enlace
a una guía oficial

134
00:09:52,533 --> 00:09:54,733
sobre cómo se puede aprovechar VS Código de

135
00:09:54,758 --> 00:09:58,200
herramientas de refactorización para hacer su vida
más fácil para usted también.

136
00:09:58,833 --> 00:10:00,233
Vamos a hacer un commit.

137
00:10:00,379 --> 00:10:02,467
Nuestro commit esta vez

138
00:10:02,500 --> 00:10:06,967
va a ser renombrar
componente a WordleBoard.

139
00:10:09,936 --> 00:10:12,600
Observa que estamos haciendo
commits bastante a menudo.

140
00:10:12,633 --> 00:10:17,067
Vamos a estar practicando
este principio a lo largo de este curso.

141
00:10:17,879 --> 00:10:22,533
En este episodio, cubrimos
cómo podemos aprovechar herramientas como Vite

142
00:10:22,533 --> 00:10:26,767
para ahorrar mucho tiempo
configurar aplicaciones modernas con pruebas.

143
00:10:27,240 --> 00:10:30,767
También empezamos a sumergir
en la refactorización,

144
00:10:30,833 --> 00:10:32,833
ya que hemos eliminado el desorden

145
00:10:32,867 --> 00:10:37,467
y renombrado los componentes para
para representar mejor su propósito.

146
00:10:38,019 --> 00:10:42,691
Ahora estamos listos para empezar a convertir
esta aplicación en un verdadero juego worlde.