1
00:00:04,626 --> 00:00:11,267
Hasta ahora, nuestro juego ha sido contenido
dentro de este único componente wordleboard.

2
00:00:11,479 --> 00:00:15,433
Ha estado funcionando muy bien,
pero desde que nuestra aplicación empezó a crecer,

3
00:00:15,653 --> 00:00:18,233
este componente creció con ella.

4
00:00:18,733 --> 00:00:21,933
Este componente es actualmente
responsable de dos cosas,

5
00:00:22,453 --> 00:00:27,700
mostrar la información
y recoger la información del usuario.

6
00:00:28,733 --> 00:00:30,776
Este puede ser un buen momento para

7
00:00:30,801 --> 00:00:35,000
para extraer una de estas preocupaciones
en un componente dedicado.

8
00:00:36,306 --> 00:00:39,175
Observa que no empezamos este proyecto

9
00:00:39,200 --> 00:00:41,033
predeterminando

10
00:00:41,058 --> 00:00:44,767
que componentes vue nuestra aplicación
va a necesitar.

11
00:00:45,220 --> 00:00:49,367
En su lugar, hemos optado por
esperar a estos componentes

12
00:00:49,400 --> 00:00:53,167
aparezcan de forma natural
a medida que evolucione la aplicación.

13
00:00:54,563 --> 00:00:58,600
Bien, vamos a mover todo lo relacionado
con la recogida de datos del usuario

14
00:00:58,633 --> 00:01:01,867
en un componente dedicado a la entrada de conjeturas.

15
00:01:02,413 --> 00:01:04,680
Dado que la mayor parte de esta lógica aquí

16
00:01:04,705 --> 00:01:07,067
va a estar relacionada
con la recopilación de la entrada de conjeturas,

17
00:01:07,100 --> 00:01:11,867
Creo que deberíamos ser capaces de
duplicar este tablero de palabras

18
00:01:12,140 --> 00:01:14,137
en un componente de entrada de conjeturas

19
00:01:14,162 --> 00:01:18,100
y luego eliminar cualquier cosa
que esté relacionado con la representación de la conjetura.

20
00:01:19,210 --> 00:01:26,470
Así que esta parte de aquí
no pertenece a la entrada guess.

21
00:01:28,670 --> 00:01:32,342
Tampoco necesitamos recibir
la palabra del día.

22
00:01:34,463 --> 00:01:37,722
Y no necesitamos llevar la cuenta
de las conjeturas presentadas.

23
00:01:37,800 --> 00:01:42,467
Lo que vamos a hacer
es comunicarnos con el padre

24
00:01:42,653 --> 00:01:46,333
cada vez que el usuario realmente envía una conjetura.

25
00:01:47,199 --> 00:01:51,500
La forma más común en que un componente hijo
se comunica con un padre

26
00:01:51,525 --> 00:01:54,133
es a través de la emisión de eventos.

27
00:01:54,700 --> 00:01:59,667
Para emitir un evento en este componente,
podemos hacer uso de defineEmit.

28
00:02:00,067 --> 00:02:04,167
Y vamos a definir
que emita un evento llamado guess-submitted

29
00:02:04,400 --> 00:02:07,517
que contiene una cadena como la carga útil

30
00:02:07,533 --> 00:02:11,300
que va a representar
la conjetura que el usuario está enviando.

31
00:02:12,127 --> 00:02:14,233
Podemos hacerlo así

32
00:02:18,653 --> 00:02:21,633
A través de esto,
estamos determinando que nuestro componente

33
00:02:21,667 --> 00:02:23,663
emite un evento guess-submitted

34
00:02:24,333 --> 00:02:27,897
que tiene una carga útil que contiene
sólo un elemento de adivinar

35
00:02:27,900 --> 00:02:29,233
que es de tipo cadena.

36
00:02:31,223 --> 00:02:32,674
Muy bonito, ¿verdad?

37
00:02:32,699 --> 00:02:34,567
Definiendo emits así,

38
00:02:34,592 --> 00:02:39,100
estamos aprovechando TypeScript
para darnos un buen intellisense.

39
00:02:39,125 --> 00:02:40,403
Mira esto.

40
00:02:43,290 --> 00:02:47,767
Si intento emitir un evento que no ha sido
definido, por ejemplo, foobar,

41
00:02:51,417 --> 00:02:54,400
se puede ver que estoy recibiendo
un error de tipo, porque foobar,

42
00:02:54,500 --> 00:02:56,640
no es un evento que he determinado.

43
00:02:57,393 --> 00:03:02,700
Y si proporciono el evento correcto
con una carga no válida,

44
00:03:02,933 --> 00:03:07,233
También obtengo un error porque el payload
debe ser de tipo string.

45
00:03:08,366 --> 00:03:14,033
Esta es una manera muy simple pero eficaz
de hacer nuestro código base más robusto.

46
00:03:22,730 --> 00:03:27,003
Bien, parece que estamos bien
en el componente guessInput.

47
00:03:27,028 --> 00:03:30,128
Ahora vamos a hacer uso de ella
en el worldeboard.

48
00:03:39,557 --> 00:03:42,167
Ya no necesitamos este método onSubmit.

49
00:03:42,300 --> 00:03:45,367
Ya no necesitamos
el método formattedGuessInProgress,

50
00:03:46,903 --> 00:03:48,600
ni el guessInProgress,

51
00:03:49,989 --> 00:03:52,500
y podemos eliminar las importaciones no utilizadas.

52
00:03:52,567 --> 00:03:54,600
Muy bien, vamos a ejecutar nuestras pruebas.

53
00:03:55,212 --> 00:03:56,510
Y estamos pasando.

54
00:03:56,533 --> 00:03:59,500
Genial, creo que estamos en un buen punto
para hacer un commit.

55
00:04:01,417 --> 00:04:06,533
Extraer GuessInput
en un componente dedicado.

56
00:04:08,870 --> 00:04:10,803
Ahora podría ser un buen momento

57
00:04:10,828 --> 00:04:13,600
para poner un poco de estilo
a nuestro componente.

58
00:04:14,437 --> 00:04:17,533
Siéntase libre de hacer esto
de la forma que prefieras.

59
00:04:18,657 --> 00:04:22,305
Lo haré por aquí
y luego te mostraré lo que tengo.

60
00:04:23,287 --> 00:04:25,667
Esto es lo que tengo hasta ahora.

61
00:04:25,813 --> 00:04:28,679
Dado que el estilo
no es el objetivo de la lección,

62
00:04:28,704 --> 00:04:31,133
Voy a explicar brevemente lo que he hecho.

63
00:04:31,633 --> 00:04:34,167
Pero si quieres discutir
más sobre esto,

64
00:04:34,267 --> 00:04:37,667
no dude en
en ponerte en contacto conmigo en Twitter.

65
00:04:38,367 --> 00:04:44,567
Para el estilo, decidí que quería
para ocultar el tipo de entrada nativa elemento de texto

66
00:04:44,667 --> 00:04:51,067
y en su lugar hacer
una conjetura con formato como una lista de letras.

67
00:04:52,867 --> 00:04:55,667
Pero antes de empezar a estilizar nada

68
00:04:55,692 --> 00:05:01,567
Quería asegurarme de que nuestra entrada
de entrada estuviera siempre enfocado.

69
00:05:02,703 --> 00:05:05,300
Esta prueba de aquí es como lo he hecho.

70
00:05:05,733 --> 00:05:11,567
Y maneja un par
de conceptos avanzados de vue test utils,

71
00:05:11,646 --> 00:05:14,133
pero te daré una breve explicación.

72
00:05:16,810 --> 00:05:20,433
Una forma de evaluar
si un elemento está enfocado

73
00:05:20,458 --> 00:05:24,033
es comprobando
el elemento activo del documento.

74
00:05:25,000 --> 00:05:30,467
Sin embargo, tus pruebas no funcionarán
para el elemento activo

75
00:05:30,492 --> 00:05:33,733
si no defines explícitamente
un attachTo.

76
00:05:34,890 --> 00:05:35,988
Déjame demostrártelo.

77
00:05:36,013 --> 00:05:39,546
Si ejecuto esta prueba de aquí,
puedes ver que está pasando,

78
00:05:39,600 --> 00:05:42,928
pero si quito el attachTo
de las opciones de montaje,

79
00:05:43,972 --> 00:05:45,652
la prueba ahora falla.

80
00:05:46,731 --> 00:05:52,700
Y la razón del fallo
es que el elemento activo es el cuerpo,

81
00:05:52,833 --> 00:05:54,267
no la entrada.

82
00:05:58,670 --> 00:06:00,737
Por eso es necesario el attachTo.

83
00:06:04,670 --> 00:06:09,333
Y como puedes ver aquí,
Estoy tratando de difuminar lejos de la entrada,

84
00:06:09,367 --> 00:06:12,200
pero la entrada debe permanecer
siendo el elemento activo.

85
00:06:12,367 --> 00:06:15,800
También quiero que la entrada
esté autoenfocada al principio.

86
00:06:19,217 --> 00:06:20,967
Para pasar esta prueba,

87
00:06:21,633 --> 00:06:25,300
He asignado el atributo
de autoenfoque a la entrada,

88
00:06:25,325 --> 00:06:28,433
y también he definido
un manejador de eventos para el desenfoque

89
00:06:28,567 --> 00:06:34,267
que el foco de nuevo en la entrada,
para que el usuario no pueda perder el foco.

90
00:06:36,128 --> 00:06:37,717
Para dar un poco de sabor,

91
00:06:37,733 --> 00:06:41,100
También he creado esta propiedad
llamada letra de datos,

92
00:06:41,167 --> 00:06:43,767
que mantiene un registro de la letra

93
00:06:43,800 --> 00:06:46,833
que el cuadrado de la letra
está representando en ese momento.

94
00:06:46,833 --> 00:06:49,500
La razón por la que quería
hacer un seguimiento de la letra

95
00:06:49,525 --> 00:06:55,233
es sólo que yo quería una animación pop
cada vez que una letra

96
00:06:55,433 --> 00:06:58,733
pasara de vacía a otra cosa.

97
00:06:58,758 --> 00:07:00,463
Así que esto es lo que está pasando aquí.

98
00:07:00,488 --> 00:07:04,070
Estoy buscando todos los elementos de la lista
que no tienen una letra de datos

99
00:07:04,126 --> 00:07:05,833
de un espacio vacío.

100
00:07:06,166 --> 00:07:09,533
Y si eso ocurre
entonces la animación pop se dispara.

101
00:07:15,123 --> 00:07:19,233
Por último, una clave para llevar
de este estilo de aquí

102
00:07:19,326 --> 00:07:21,967
es esta palabra clave de alcance.

103
00:07:22,300 --> 00:07:25,167
Me gusta usar esto
por defecto en mis proyectos

104
00:07:25,192 --> 00:07:28,833
porque fuerza todos los estilos
definidos en este componente

105
00:07:28,867 --> 00:07:31,833
sólo se apliquen a este componente.

106
00:07:34,610 --> 00:07:38,463
Bueno, estos son los principales puntos clave
que quería cubrir con respecto al estilo.

107
00:07:38,488 --> 00:07:41,067
Pero si quieres profundizar en esto,

108
00:07:41,426 --> 00:07:44,400
el enlace al repositorio
está en la descripción.

109
00:07:44,567 --> 00:07:47,733
Y de nuevo, no dudes en ponerte en contacto.

110
00:07:49,067 --> 00:07:53,600
El worldeboard en sí también tenía
un poco de aspecto renovado.

111
00:07:54,800 --> 00:07:57,900
He añadido una pequeña animación
para el pasaje de retroalimentación

112
00:07:58,133 --> 00:07:59,833
aparezca en la pantalla,

113
00:08:00,073 --> 00:08:03,867
y también centralicé
los elementos del worldeboard.

114
00:08:07,737 --> 00:08:11,133
Y aquí está una cosa realmente agradable
de todo esto.

115
00:08:11,200 --> 00:08:15,767
No tuve que alterar
ninguna de nuestras pruebas existentes,

116
00:08:15,807 --> 00:08:17,700
pero mira esto.

117
00:08:19,273 --> 00:08:21,700
Todos están pasando.

118
00:08:23,326 --> 00:08:27,133
Hicimos una renovación completa
en el aspecto de la aplicación,

119
00:08:27,167 --> 00:08:30,600
pero la funcionalidad básica
permanece sin cambios.

120
00:08:31,059 --> 00:08:32,406
Desde que escribimos nuestras pruebas

121
00:08:32,431 --> 00:08:35,633
centrándonos en el comportamiento
en lugar de la implementación,

122
00:08:35,700 --> 00:08:38,400
nuestras pruebas siguen pasando.

123
00:08:38,433 --> 00:08:39,767
Muy bonito, ¿verdad?

124
00:08:40,033 --> 00:08:44,667
También quiero hacer hincapié en que hice
mi restyling de la aplicación en pequeños trozos.

125
00:08:44,767 --> 00:08:48,133
Hacía algo y luego ejecutaba las pruebas,

126
00:08:48,133 --> 00:08:51,067
vería que todas pasaban,
y entonces haría un commit.

127
00:08:51,767 --> 00:08:55,033
Y a veces si el commit
estaba relacionado con el estilo,

128
00:08:55,067 --> 00:08:58,733
Me limitaría a modificar con el anterior
anterior de ese componente.

129
00:08:59,186 --> 00:09:01,333
Haznos la vida más fácil.

130
00:09:01,358 --> 00:09:04,367
Confirmar a menudo. Prueba a menudo.

131
00:09:04,967 --> 00:09:11,133
Estupendo. Juntos, hemos visto de primera mano
los beneficios de escribir tests flexibles.

132
00:09:11,400 --> 00:09:13,433
Esfuérzate siempre por escribir tests

133
00:09:13,467 --> 00:09:16,267
que no estén atadas
a detalles de implementación,

134
00:09:16,267 --> 00:09:19,400
sino al comportamiento y la funcionalidad.

135
00:09:19,967 --> 00:09:23,267
Escribir pruebas que estén estrechamente
a la implementación

136
00:09:23,300 --> 00:09:26,267
resultará en un interruptor de prueba frágil,

137
00:09:26,467 --> 00:09:30,433
que tiene una mayor probabilidad
de dar falsos negativos,

138
00:09:30,500 --> 00:09:34,100
es decir
pruebas que fallan cuando no deberían.

139
00:09:34,767 --> 00:09:38,633
Si ves que tus pruebas
demasiado en las propiedades internas

140
00:09:38,658 --> 00:09:40,400
y atributos de un componente,

141
00:09:40,425 --> 00:09:44,367
podría ser una señal
de que tu prueba debería ser refactorizada.

142
00:09:45,133 --> 00:09:49,400
Centrarse en el comportamiento
conduce a un interruptor de prueba que es robusto,

143
00:09:49,646 --> 00:09:51,400
y no frágil,

144
00:09:51,867 --> 00:09:55,967
que acoja
y facilitará futuros cambios

145
00:09:55,992 --> 00:10:00,900
y refactorizaciones a su código base,
en lugar de crear desgaste.