1
00:00:00,000 --> 00:00:04,858
[MUSICA]

2
00:00:04,858 --> 00:00:09,967
Il profumo del gelsomino di tutte quelle ghirlande di fiori

3
00:00:09,967 --> 00:00:14,218
sulla via del tempio che si diffondono nell'aria.

4
00:00:14,218 --> 00:00:17,684
Che sensazione di assestamento.

5
00:00:17,684 --> 00:00:20,510
Dev' essere il karma buono della mia vita passata.

6
00:00:23,749 --> 00:00:25,857
Scusa, dov'ero?

7
00:00:25,857 --> 00:00:29,703
Ti parlavo di test angolari, giusto?

8
00:00:29,703 --> 00:00:34,743
E useremo la regolazione del karma per fare i nostri test angolari.

9
00:00:34,743 --> 00:00:37,769
Quindi andiamo avanti con esso.

10
00:00:37,769 --> 00:00:45,571
Una buona cosa dell'utilizzo della CLI angolare è che imposta tutti gli scaffolding

11
00:00:45,571 --> 00:00:49,869
per includere automaticamente il supporto per

12
00:00:49,869 --> 00:00:53,393
testare l'applicazione Angular.

13
00:00:53,393 --> 00:00:59,108
Quindi noterai che ogni volta che generi un componente o

14
00:00:59,108 --> 00:01:03,454
un servizio insieme ai file ts del componente,

15
00:01:03,454 --> 00:01:08,942
noterai anche un file chiamato component.spect.ts

16
00:01:08,942 --> 00:01:13,422
già incluso nelle cartelle del tuo progetto.

17
00:01:13,422 --> 00:01:17,423
Inoltre, se vai al file package.json,

18
00:01:17,423 --> 00:01:24,434
vedrai che esiste già il supporto per il test angolare incluso lì.

19
00:01:24,434 --> 00:01:30,640
Quindi, se vai nelle dipendenze di sviluppo vedrai che il core del gelsomino,

20
00:01:30,640 --> 00:01:34,201
il reporter delle specifiche del gelsomino, i

21
00:01:34,201 --> 00:01:39,394
moduli npm relativi al karma e al karma sono già installati all'interno della tua

22
00:01:39,394 --> 00:01:44,414
applicazione angolare che è impalcatura da Angular CLI.

23
00:01:44,414 --> 00:01:47,716
Quindi, abbiamo tutte le cose e il posto per

24
00:01:47,716 --> 00:01:53,538
noi per andare avanti con il nostro test per la nostra applicazione angolare.

25
00:01:53,538 --> 00:01:58,617
Quindi, se ti guardi intorno vedrai che c'è

26
00:01:58,617 --> 00:02:03,572
un file chiamato test.ts nella tua cartella sorgente,

27
00:02:03,572 --> 00:02:07,269
quindi apriamo il file test.ts.

28
00:02:07,269 --> 00:02:11,518
Vedrai anche che c'è un'altra cartella qui chiamata a e2e.

29
00:02:11,518 --> 00:02:16,409
Torneremo su questo nel prossimo esercizio.

30
00:02:16,409 --> 00:02:21,232
Ma nella cartella test.ts, vedrai che questo è dove

31
00:02:21,232 --> 00:02:25,084
il tuo supporto karma viene configurato qui.

32
00:02:25,084 --> 00:02:29,551
Quindi, andando in questo file test.ts, per impostazione predefinita,

33
00:02:29,551 --> 00:02:33,907
quando si utilizza il supporto CLS angolare per il test,

34
00:02:33,907 --> 00:02:38,261
eseguirà i test per tutti i componenti e

35
00:02:38,261 --> 00:02:43,750
i servizi inclusi nella tua applicazione angolare.

36
00:02:43,750 --> 00:02:49,017
Ora, ho intenzione di illustrarvi come fare test per

37
00:02:49,017 --> 00:02:53,516
un componente specifico, il MenuComponent.

38
00:02:53,516 --> 00:03:00,469
Quindi voglio limitarmi a usare solo il file.spec del componente del menu e

39
00:03:00,469 --> 00:03:04,696
fare il test solo per il componente del menu.

40
00:03:04,696 --> 00:03:07,823
Quindi, vai nel file test.ts.

41
00:03:07,823 --> 00:03:16,388
Un modo per configurare il test CLI Angular per eseguire il test solo per

42
00:03:16,388 --> 00:03:22,397
un componente specifico è quello di andare a questa riga qui,

43
00:03:22,397 --> 00:03:29,308
che dice const context e quindi cambiare questo in menu, è

44
00:03:29,308 --> 00:03:36,088
possibile vedere /menu\ .component e spec.ts file.

45
00:03:36,088 --> 00:03:41,615
In precedenza era solo/\ .spec.ts file, il che significava che

46
00:03:41,615 --> 00:03:47,992
eseguirai tutti i file di specifiche presenti nella cartella di origine del progetto.

47
00:03:47,992 --> 00:03:51,379
Quindi, in questo momento, specificando questo qui,

48
00:03:51,379 --> 00:03:57,225
sono interessato a eseguire il test solo per il file delle specifiche del componente del menu qui.

49
00:03:57,225 --> 00:04:02,285
Ora questo lo capisco cercando nell'

50
00:04:02,285 --> 00:04:08,268
overflow dello stack in cui ho trovato qualcuno che mi dà la risposta a questo,

51
00:04:08,268 --> 00:04:12,985
puntando a qualche risorsa su Angular CLI, ed

52
00:04:12,985 --> 00:04:18,393
è così che ho capito che questo è il modo per limitare

53
00:04:18,393 --> 00:04:23,019
il test al file di test di un componente specifico.

54
00:04:23,019 --> 00:04:28,465
Quindi, dopo aver apportato una modifica al file test.ts, salviamo la modifica.

55
00:04:28,465 --> 00:04:32,622
Ora, cercheremo di eseguire il nostro test sul componente menu.

56
00:04:32,622 --> 00:04:37,198
Quindi, come vedi, nel componente menu, abbiamo già il

57
00:04:37,198 --> 00:04:42,051
file.spec.ts componente menu, che contiene già del codice.

58
00:04:42,051 --> 00:04:45,631
Proviamo a eseguire questo test e vediamo cosa succede.

59
00:04:45,631 --> 00:04:50,650
Andando al terminale, aggiungere il prompt, digitare ng test, e questo

60
00:04:50,650 --> 00:04:56,644
si tradurrà in una CLI angolare che avvia il test per il componente menu.

61
00:04:56,644 --> 00:04:59,875
Quindi, quando digiti questo e premi Return, la

62
00:04:59,875 --> 00:05:05,216
CLI angolare inizierà a compilare la tua applicazione angolare.

63
00:05:05,216 --> 00:05:10,129
Si aprirà anche una finestra del browser, nel mio caso aprirà una

64
00:05:10,129 --> 00:05:13,874
finestra del browser Chrome e quindi utilizzerà quella finestra del browser per eseguire il test.

65
00:05:13,874 --> 00:05:20,992
E si vede che nella parte posteriore, si ha la finestra del browser Chrome in esecuzione ed

66
00:05:20,992 --> 00:05:25,980
è tutto pieno di rosso e un sacco di parole lì.

67
00:05:25,980 --> 00:05:30,937
Le stesse informazioni verranno stampate anche nella finestra della console

68
00:05:30,937 --> 00:05:34,980
e da questo posso vedere che il mio test non è stato eseguito correttamente.

69
00:05:34,980 --> 00:05:41,070
C' è qualcosa che non è configurato correttamente nel mio file di test, quindi dovrò andare a

70
00:05:41,070 --> 00:05:47,272
modificare il mio file di test per includere il supporto appropriato per eseguire correttamente questo test.

71
00:05:47,272 --> 00:05:51,425
Quindi andiamo al file spec.ts componente del menu e

72
00:05:51,425 --> 00:05:54,430
quindi preparare il nostro test di conseguenza.

73
00:05:54,430 --> 00:06:00,134
Ora possiamo lasciare il test ng in esecuzione proprio qui.

74
00:06:00,134 --> 00:06:04,337
Ogni volta che si apportano modifiche al file mini component.ts o

75
00:06:04,337 --> 00:06:07,169
al file mini component.spec.ts e si

76
00:06:07,169 --> 00:06:12,078
salvano le modifiche, questo test verrà eseguito automaticamente a quel punto.

77
00:06:12,078 --> 00:06:17,011
Quindi, andiamo al file MenuComponent.spect.ts.

78
00:06:17,011 --> 00:06:21,882
Passando al file MenuComponent.spect.ts,

79
00:06:21,882 --> 00:06:30,417
sappiamo che il file spect utilizza la sintassi Jasmine per descrivere il test.

80
00:06:30,417 --> 00:06:33,478
Quindi hai già notato che c'è qualcosa qui

81
00:06:33,478 --> 00:06:38,118
che inizia con description e poi c'è una funzione definita lì.

82
00:06:38,118 --> 00:06:43,174
Quindi questo è ciò a cui mi riferivo quando ho parlato della sintassi di Jasmine prima.

83
00:06:43,174 --> 00:06:47,961
E anche se scorri verso il basso vedrai un esso o giù di lì dentro.

84
00:06:47,961 --> 00:06:53,922
E in aggiunta, vedrai qualcosa chiamato primaEach, qui.

85
00:06:53,922 --> 00:06:59,594
Esaminiamo questo file in modo più dettagliato per capire come questo

86
00:06:59,594 --> 00:07:05,794
file è configurato e come questo test è impostato in questo particolare file.

87
00:07:05,794 --> 00:07:10,843
Quindi all'interno di questo file di test, noterete che

88
00:07:10,843 --> 00:07:17,979
stiamo importando qui una serie di classi da test core angolari.

89
00:07:17,979 --> 00:07:22,874
Quindi questo modulo consente di fornire il supporto di test per

90
00:07:22,874 --> 00:07:29,603
l'applicazione angolare e consente di progettare il test per il componente.

91
00:07:29,603 --> 00:07:33,304
Quindi vedi che sto importando async e

92
00:07:33,304 --> 00:07:39,105
ComponentFixture e TestBed da questa libreria di test.

93
00:07:39,105 --> 00:07:40,955
Lo chiamerò libreria di test.

94
00:07:40,955 --> 00:07:44,783
Inoltre si vede che il MenuComponent è anche importato qui.

95
00:07:44,783 --> 00:07:47,220
Ora, una volta che abbiamo capito questi due,

96
00:07:47,220 --> 00:07:51,788
andiamo giù il codice per capire cosa stiamo cercando di fare qui.

97
00:07:51,788 --> 00:07:56,358
Quindi, qui, come ci si aspetta, questa descrizione qui sta

98
00:07:56,358 --> 00:08:02,330
specificando che questa particolare funzione sta descrivendo,

99
00:08:02,330 --> 00:08:08,129
Un test basato su Jasmine che stiamo specificando per la nostra applicazione angolare.

100
00:08:08,129 --> 00:08:11,056
Quindi, quando guardi la descrizione qui,

101
00:08:11,056 --> 00:08:15,181
vedrai che questo include tutto questo codice qui.

102
00:08:15,181 --> 00:08:19,950
Quindi questo fa parte di un singolo insieme di test che stiamo eseguendo sono il nostro

103
00:08:19,950 --> 00:08:21,670
componente di menu.

104
00:08:21,670 --> 00:08:26,670
Quindi all'interno della descrizione, vedrai che c'è una stringa qui.

105
00:08:26,670 --> 00:08:32,120
Questo specifica questo particolare insieme di test che stai eseguendo qui.

106
00:08:32,120 --> 00:08:34,130
Quindi, dice sul componente del menu.

107
00:08:34,130 --> 00:08:36,770
Quindi qui puoi specificare qualsiasi stringa vuoi.

108
00:08:36,770 --> 00:08:39,930
È possibile utilizzare questo come descrizione per

109
00:08:39,930 --> 00:08:43,610
specificare cosa sta facendo questo particolare insieme di test.

110
00:08:43,610 --> 00:08:46,930
Quindi qui, sto per stare con una cosa prima.

111
00:08:46,930 --> 00:08:49,380
Stiamo cercando di testare il componente del menu.

112
00:08:49,380 --> 00:08:53,320
E dopo di che, si vede che stiamo specificando una funzione addo qui.

113
00:08:53,320 --> 00:08:57,036
All' interno di questa funzione addo, stiamo andando a costruire il test.

114
00:08:57,036 --> 00:09:00,700
Per il nostro MenuComponent qui.

115
00:09:00,700 --> 00:09:05,670
Quindi, dopo questo, vedrete che stiamo dichiarando una variabile chiamata componente,

116
00:09:05,670 --> 00:09:08,080
che è del tipo MenuComponent. Di

117
00:09:08,080 --> 00:09:11,950
tanto in tanto, stiamo anche dichiarando una variabile fixture,

118
00:09:11,950 --> 00:09:14,140
che è del tipo ComponentFixture.

119
00:09:15,390 --> 00:09:19,060
Quale è del tipo MenuComponent.

120
00:09:19,060 --> 00:09:21,180
Ora, perché è interessante?

121
00:09:21,180 --> 00:09:24,450
Ora, all'interno della nostra applicazione angolare,

122
00:09:24,450 --> 00:09:27,130
abbiamo il MenuComponent che abbiamo già progettato.

123
00:09:27,130 --> 00:09:29,990
Quindi, in questo file di test,

124
00:09:29,990 --> 00:09:35,310
stiamo andando a creare quel MenuComponent utilizzando il TestBed angolare,

125
00:09:35,310 --> 00:09:38,110
e poi abbiamo intenzione di effettuare i test sul MenuComponent.

126
00:09:38,110 --> 00:09:40,580
Quindi abbiamo intenzione di isolare il MenuComponent, e

127
00:09:40,580 --> 00:09:45,760
quindi eseguire test unitari su quel componente specifico.

128
00:09:45,760 --> 00:09:50,470
Ora, questo è dove le utilità di test angolari

129
00:09:50,470 --> 00:09:54,900
che vengono fornite con il supporto utilizzando TestBed.

130
00:09:54,900 --> 00:09:58,890
Il TestBed mi consente di impostare l'ambiente all'interno del quale

131
00:09:58,890 --> 00:10:01,280
posso testare il mio componente angolare.

132
00:10:01,280 --> 00:10:04,935
Quindi qui, vedete che stiamo dicendo TestBed e

133
00:10:04,935 --> 00:10:11,049
poi chiamando il metodo del modulo di test di configurazione della classe TestBed qui.

134
00:10:11,049 --> 00:10:14,233
E all'interno di questo modulo di test di configurazione,

135
00:10:14,233 --> 00:10:19,406
puoi dichiarare un sacco di cose, e mi vedrai aggiungere di più qui.

136
00:10:19,406 --> 00:10:24,296
Questo agisce esattamente come la configurazione del modulo NG

137
00:10:24,296 --> 00:10:27,714
che fai per il nostro modulo lì.

138
00:10:27,714 --> 00:10:30,950
Quindi tutte le informazioni di cui hai bisogno per

139
00:10:30,950 --> 00:10:35,375
impostare il MenuComponent saranno dichiarate qui.

140
00:10:35,375 --> 00:10:40,022
Quindi la parte del modello NG che hai visto nel modulo app,

141
00:10:40,022 --> 00:10:45,999
simile tipo di sintassi può essere usata qui per dichiarare il supporto per

142
00:10:45,999 --> 00:10:49,690
testare il MenuComponent qui.

143
00:10:49,690 --> 00:10:55,849
E anche dopo questo, vedrai questa funzione chiamata a compileComponents.

144
00:10:55,849 --> 00:11:00,205
Quindi questo metodo compilerà il MenuComponent e

145
00:11:00,205 --> 00:11:03,427
lo renderà pronto per fare il test.

146
00:11:03,427 --> 00:11:08,852
Nota anche, che tutta questa cosa, questa funzione qui,

147
00:11:08,852 --> 00:11:14,250
è racchiusa all'interno di qualcosa chiamato asincrono qui.

148
00:11:14,250 --> 00:11:16,548
Ora, perché abbiamo bisogno di questo asincrono?

149
00:11:16,548 --> 00:11:21,315
Ora, poiché la preparazione dei componenti che utilizzano questo

150
00:11:21,315 --> 00:11:25,711
metodo compileComponents richiede una certa quantità di tempo.

151
00:11:25,711 --> 00:11:30,643
E fino a quando questo non sarà completato, non possiamo procedere con i test.

152
00:11:30,643 --> 00:11:34,583
Quindi, usando il modulo asincrono, stiamo essenzialmente specificando che

153
00:11:34,583 --> 00:11:39,432
aspetterò il completamento di questa intera cosa prima di procedere in avanti.

154
00:11:39,432 --> 00:11:42,107
Quindi il modulo asincrono come vedi,

155
00:11:42,107 --> 00:11:47,690
avvolge una funzione di test all'interno di una zona di test asincrona.

156
00:11:47,690 --> 00:11:52,510
Quindi, ciò significa che questo test verrà completato automaticamente

157
00:11:52,510 --> 00:11:56,830
quando vengono eseguite tutte le chiamate asincrone all'interno di questa zona.

158
00:11:56,830 --> 00:12:03,755
Quindi questo è ciò che fa l'uso dell'asincrono che abbiamo qui.

159
00:12:03,755 --> 00:12:08,206
Quindi ciò significa che è possibile utilizzare questa funzione di sincronizzazione,

160
00:12:08,206 --> 00:12:14,442
sia nel prima di ciascuno o anche in esso, quindi all'interno di esso, la nostra dichiarazione.

161
00:12:14,442 --> 00:12:20,032
Quindi, quando vedi anche all'interno di esso, vedrai che puoi usare l'asincrono.

162
00:12:20,032 --> 00:12:24,160
Quindi, nel caso in cui tu abbia delle operazioni qui eseguite in modo asincrono.

163
00:12:24,160 --> 00:12:29,500
Quindi è necessario attendere il completamento di tali operazioni per il completamento di tale test.

164
00:12:29,500 --> 00:12:33,996
Quindi, ad esempio, se stai chiamando un servizio e attendi che

165
00:12:33,996 --> 00:12:37,070
il servizio restituisca il valore, allora.

166
00:12:37,070 --> 00:12:41,997
Tutto ciò che deve essere completato prima di poter procedere in avanti.

167
00:12:41,997 --> 00:12:48,603
Quindi quelli sono abilitati usando questo asincrono, per circondare questa funzione qui.

168
00:12:48,603 --> 00:12:53,726
Ora, in aggiunta, il secondo primaOgni, ora abbiamo separato

169
00:12:53,726 --> 00:12:59,592
questo in due separati primaOgni qui, perché vogliamo che questo completi.

170
00:12:59,592 --> 00:13:04,592
E questo CompileComponents sta per richiedere un certo periodo di tempo,

171
00:13:04,592 --> 00:13:09,000
soprattutto se il componente sta usando un modello esterno,

172
00:13:09,000 --> 00:13:11,570
come facciamo nel nostro MenuComponent.

173
00:13:11,570 --> 00:13:16,850
Quindi, richiede un po 'di tempo affinché il modello esterno si prepari per

174
00:13:16,850 --> 00:13:19,430
il mio test per procedere in avanti.

175
00:13:19,430 --> 00:13:22,210
Quindi, dobbiamo aspettare che tutto questo finisca.

176
00:13:22,210 --> 00:13:25,634
Ecco perché dopo che questo è completo,

177
00:13:25,634 --> 00:13:30,449
arriveremo alla seconda parte dove avremo alcuni

178
00:13:30,449 --> 00:13:35,710
riferimenti ad alcuni valori dal banco di prova.

179
00:13:35,710 --> 00:13:40,752
Ora, cos'è questa funzione beforeEach che stai facendo qui?

180
00:13:40,752 --> 00:13:45,718
Ciò che BeforeEach significa è che qualunque cosa tu dichiari qui dentro,

181
00:13:45,718 --> 00:13:49,313
quella funzione verrà eseguita BeforeEach test,

182
00:13:49,313 --> 00:13:53,012
che specificherai in seguito usando il suo.

183
00:13:53,012 --> 00:13:57,734
Quindi, utilizzando questo beforeEach, è possibile impostare la

184
00:13:57,734 --> 00:14:02,253
configurazione iniziale per il test per procedere in avanti.

185
00:14:02,253 --> 00:14:05,923
Quindi significa che qui, stiamo impostando il nostro TestBed,

186
00:14:05,923 --> 00:14:10,330
preparando il nostro componente di menu e poi impostando alcune cose per

187
00:14:10,330 --> 00:14:14,752
il nostro componente di menu, prima di procedere per eseguire il test.

188
00:14:14,752 --> 00:14:19,292
Quindi, per ciascuno dei test che hai intenzione di specificare usando un qui,

189
00:14:19,292 --> 00:14:23,428
questi prima di ogni cosa tu specifichi in questo prima di ogni,

190
00:14:23,428 --> 00:14:26,692
verranno eseguiti prima che il test sia condotto.

191
00:14:26,692 --> 00:14:30,008
Quindi qui, come puoi vedere, sto preparando il TestBed.

192
00:14:30,008 --> 00:14:34,980
Poi, dopo, avro' accesso all'apparecchio.

193
00:14:34,980 --> 00:14:39,143
Quindi sto usando TestBed, sto dicendo CreateComponent e MenuComponent.

194
00:14:39,143 --> 00:14:43,782
Quindi questo mi restituirà un riferimento al MenuComponent che

195
00:14:43,782 --> 00:14:47,215
sto creando all'interno del mio script di test qui e

196
00:14:47,215 --> 00:14:52,130
poi otterrà un riferimento a questo, perché avrò bisogno di un riferimento

197
00:14:52,130 --> 00:14:57,178
a quello per fare alcune manipolazioni su quel componente lì.

198
00:14:57,178 --> 00:15:02,608
Inoltre, dallo staffaggio, sto ottenendo un accesso all'

199
00:15:02,608 --> 00:15:07,324
istanza del componente che viene creata dal mio staffaggio componente qui.

200
00:15:07,324 --> 00:15:12,828
Quindi, come puoi vedere, l'apparecchio componente del tipo MenuComponent e

201
00:15:12,828 --> 00:15:18,799
quindi chiamare componentInstance, mi dà accesso a quel

202
00:15:18,799 --> 00:15:25,259
componente di menu specifico che ho creato all'interno del TestBed per eseguire i test unitari.

203
00:15:25,259 --> 00:15:30,004
Ora, dopo questo chiamiamo questo questo DetectChanges.

204
00:15:30,004 --> 00:15:35,482
Ora, ciò che significa è che questo procederà in avanti solo dopo che tutte le modifiche

205
00:15:35,482 --> 00:15:40,254
sono state completate, e quindi riconoscerà che le modifiche sono state completate.

206
00:15:40,254 --> 00:15:45,686
Quindi questo attiverà un ciclo di rilevamento delle modifiche per questo componente.

207
00:15:45,686 --> 00:15:50,323
Quindi ciò significa che questo ti assicurerà di aver apportato tutte le

208
00:15:50,323 --> 00:15:54,086
modifiche in precedenza, tutte le modifiche vengono rilevate e

209
00:15:54,086 --> 00:16:00,170
tutto è stabilizzato prima di poter procedere con il test.

210
00:16:00,170 --> 00:16:07,500
Ora, dopo questo, useremo il nostro per configurare il nostro primo test qui.

211
00:16:07,500 --> 00:16:10,500
Qual è il primo test che stiamo facendo qui?

212
00:16:10,500 --> 00:16:11,520
Il primo test,

213
00:16:11,520 --> 00:16:15,670
quello che stiamo per testare è quello di assicurarsi che il componente è stato creato.

214
00:16:15,670 --> 00:16:21,848
Quindi, all'interno di questo qui, sto usando la sintassi Jasmin e lo sto dicendo.

215
00:16:21,848 --> 00:16:27,035
E poi qui puoi dare una descrizione sotto forma di una stringa

216
00:16:27,035 --> 00:16:31,760
per specificare su cosa sta effettivamente testando questo test.

217
00:16:31,760 --> 00:16:33,640
Quindi, quello che stiamo dicendo è,

218
00:16:33,640 --> 00:16:37,540
stiamo testando per vedere se il componente è stato creato o meno.

219
00:16:37,540 --> 00:16:40,810
Quindi, per farlo, sto dicendo che dovrebbe creare il significato che,

220
00:16:40,810 --> 00:16:44,610
questa configurazione qui dovrebbe aver creato correttamente il componente.

221
00:16:44,610 --> 00:16:49,350
Ecco perché qui dentro, sto usando questo metodo chiamato aspettare.

222
00:16:49,350 --> 00:16:53,760
Quindi il metodo atteso qui dentro prende un valore qui, e

223
00:16:53,760 --> 00:16:57,840
quindi puoi testare per vedere se questo valore soddisfa qualcosa.

224
00:16:57,840 --> 00:17:04,640
Quindi qui stiamo dicendo toBetruthy, il che significa che questo particolare valore dovrebbe essere vero. Questo

225
00:17:04,640 --> 00:17:09,950
è ciò che viene specificato da questo metodo chiamato qui chiamato toBetruthy.

226
00:17:09,950 --> 00:17:15,010
Puoi anche dire tobeFalsy, il che significa che dovrebbe valutare falso.

227
00:17:15,010 --> 00:17:15,873
Ma in questo caso,

228
00:17:15,873 --> 00:17:19,510
stiamo testando per assicurarci che il componente sia stato creato correttamente.

229
00:17:19,510 --> 00:17:24,000
Quindi e' per questo che stiamo dicendo che aspettatevi Tbetruthy qui.

230
00:17:24,000 --> 00:17:28,877
Quindi questo è un semplice test che stiamo facendo per assicurarci che il nostro

231
00:17:28,877 --> 00:17:32,404
componente venga creato correttamente.

232
00:17:32,404 --> 00:17:37,713
Ma come ci rendiamo conto quando eseguo questo test, non funziona correttamente.

233
00:17:37,713 --> 00:17:42,638
Diamo rapidamente un'occhiata e vediamo qual è il problema all'interno della

234
00:17:42,638 --> 00:17:47,770
nostra creazione di componenti nella finestra della console lì.

235
00:17:47,770 --> 00:17:51,390
Tornando alla finestra della console, lasciami solo sfogliare indietro e

236
00:17:51,390 --> 00:17:54,840
vedere dove si trova il problema.

237
00:17:54,840 --> 00:17:59,820
E sto iniziando a notare che questo sta specificando che non

238
00:17:59,820 --> 00:18:04,480
sembra riconoscere alcune delle cose che il mio componente sta usando.

239
00:18:04,480 --> 00:18:09,065
In particolare, sta dicendo che MDSpinach

240
00:18:09,065 --> 00:18:13,191
è qualcosa che non riconosce,

241
00:18:13,191 --> 00:18:17,330
MDGetGridList e alcune altre cose. Questo

242
00:18:17,330 --> 00:18:21,289
mi suggerisce immediatamente che ho bisogno di fare alcune altre

243
00:18:21,289 --> 00:18:26,170
configurazioni all'interno del mio file di test prima che il mio test possa funzionare correttamente.

244
00:18:26,170 --> 00:18:30,994
Quindi, torniamo al nostro file di specifiche e apportiamo alcune modifiche ad esso.

245
00:18:30,994 --> 00:18:34,142
Tornando al nostro file di specifiche,

246
00:18:34,142 --> 00:18:40,182
dal nostro ricordo di come abbiamo creato il modello.

247
00:18:40,182 --> 00:18:44,865
Sappiamo che all'interno del modello avevamo un collegamento router nel

248
00:18:44,865 --> 00:18:45,605
modello di MenuComponent.

249
00:18:45,605 --> 00:18:50,325
Quindi ho bisogno di supporto per il routing per riconoscere quel

250
00:18:50,325 --> 00:18:54,698
collegamento router che abbiamo usato all'interno del file MenuComponent.html.

251
00:18:54,698 --> 00:18:59,640
Quindi questo è dove ho intenzione di importare

252
00:18:59,640 --> 00:19:03,926
un altro supporto di test fornito

253
00:19:03,926 --> 00:19:09,199
chiamato come RouterTestingModule,

254
00:19:09,199 --> 00:19:18,615
che è disponibile dalla libreria Angular/router/testing qui.

255
00:19:18,615 --> 00:19:21,625
Quindi questo modulo di test del router mi permetterà di

256
00:19:21,625 --> 00:19:24,135
configurare alcuni aspetti sul mio router.

257
00:19:24,135 --> 00:19:28,235
Vedremo che il modo in cui usiamo questo è un po 'diverso dal modulo router

258
00:19:28,235 --> 00:19:30,195
che abbiamo usato nella nostra applicazione.

259
00:19:30,195 --> 00:19:34,835
Quindi importeremo il modulo di test di routing, inoltre si nota

260
00:19:34,835 --> 00:19:39,640
che stiamo usando alcune animazioni, e

261
00:19:39,640 --> 00:19:45,660
anche utilizzando il componente materiale angolare all'interno del nostro modello.

262
00:19:45,660 --> 00:19:49,410
Quindi ho bisogno di importare

263
00:19:49,410 --> 00:19:57,079
BrowserAnimationsModule nel mio file di test.

264
00:19:58,490 --> 00:20:05,070
Quindi questo viene dal angolare/piattaforma/browser.

265
00:20:05,070 --> 00:20:09,619
Ora noterai che dobbiamo farlo esplicitamente qui semplicemente perché,

266
00:20:10,700 --> 00:20:16,960
nell'effettiva applicazione Angular tutto questo era nel modulo app,

267
00:20:16,960 --> 00:20:20,310
e quindi era disponibile per i componenti. In questo

268
00:20:20,310 --> 00:20:24,340
momento stiamo testando questo componente, il MenuComponent in isolamento, quindi

269
00:20:24,340 --> 00:20:27,500
è per questo che non conosce tutte queste cose, quindi

270
00:20:27,500 --> 00:20:31,190
dobbiamo specificare esplicitamente tutte queste cose qui.

271
00:20:31,190 --> 00:20:38,569
Quindi lo importerò dall'animazione del browser della piattaforma IM qui.

272
00:20:38,569 --> 00:20:43,358
Quindi animazioni angular.platform.browser che importano il

273
00:20:43,358 --> 00:20:44,220
modulo di animazioni del browser qui.

274
00:20:44,220 --> 00:20:47,300
Permettetemi di includere il modulo di livello flessibile, quindi

275
00:20:47,300 --> 00:20:53,060
includerò Angular FlexLayout.

276
00:20:53,060 --> 00:20:58,525
Quindi questi sono necessari perché ne ho bisogno nel modello,

277
00:20:58,525 --> 00:21:02,605
ho intenzione di importare anche quel piatto da,

278
00:21:06,495 --> 00:21:09,348
condiviso/piatto perché come vedrai più avanti,

279
00:21:09,348 --> 00:21:14,125
ho bisogno di configurare, A,

280
00:21:20,002 --> 00:21:26,070
DishService perché il mio MenuComponent

281
00:21:26,070 --> 00:21:31,033
dipende dal DishService quindi

282
00:21:31,033 --> 00:21:35,170
ho bisogno che anche sul posto.

283
00:21:35,170 --> 00:21:39,170
Anche se vedrai che ho intenzione di fermarlo.

284
00:21:39,170 --> 00:21:44,860
Lo spiegherò in breve tempo, e anche ho bisogno di importare alcune altre cose.

285
00:21:44,860 --> 00:21:47,410
Importerò piatti da,

286
00:21:48,530 --> 00:21:53,260
si ricorda che usiamo questa costante chiamata PIATES

287
00:21:56,870 --> 00:22:01,640
che abbiamo esportato dal file condiviso/dishes.ts.

288
00:22:01,640 --> 00:22:05,650
Ne avrò bisogno per configurare alcune altre cose.

289
00:22:05,650 --> 00:22:09,702
Ho anche intenzione di importare il BaseURL.

290
00:22:11,343 --> 00:22:19,105
Che ho dichiarato nel

291
00:22:21,057 --> 00:22:23,368
file url condiviso/base.

292
00:22:23,368 --> 00:22:28,692
E anche, ho bisogno di importare

293
00:22:28,692 --> 00:22:33,294
Observable da,

294
00:22:35,992 --> 00:22:41,319
rxjs, slash, Perché

295
00:22:41,319 --> 00:22:47,220
userò anche Observable un po 'più tardi, quando configurerò alcune cose.

296
00:22:47,220 --> 00:22:50,806
Così ora, ho importato tutte queste cose.

297
00:22:50,806 --> 00:22:56,157
Entrando nella configurazione TestBed, si vede che questa

298
00:22:56,157 --> 00:23:02,813
parte è esattamente come il decoratore del modulo motore che abbiamo nel modulo app.

299
00:23:02,813 --> 00:23:07,450
Quindi questo è dove posso anche usare le importazioni proprio

300
00:23:07,450 --> 00:23:11,000
come ho fatto con il modulo motore.

301
00:23:11,000 --> 00:23:16,900
E all'interno delle importazioni, ho intenzione di importare il

302
00:23:16,900 --> 00:23:21,765
modulo BrowserAnimation perché questo è qualcosa che richiede, e

303
00:23:21,765 --> 00:23:25,090
quindi anche importare il modulo FlexLayout.

304
00:23:26,660 --> 00:23:32,690
E anche il RouterTestingModule perché

305
00:23:32,690 --> 00:23:36,540
avrei bisogno di RouterTestingModule per configurare alcune cose.

306
00:23:36,540 --> 00:23:40,705
Ora, quando si utilizza il routerTestingModule, è necessario utilizzare questo metodo

307
00:23:40,705 --> 00:23:46,950
chiamato WithRoutes invece di usare forRoot come abbiamo usato con il modulo router qui.

308
00:23:46,950 --> 00:23:52,400
Quindi all'interno di questo withRoutes puoi specificare alcuni

309
00:23:52,400 --> 00:23:58,460
percorsi predefiniti di cui hai bisogno per la tua applicazione specifica qui.

310
00:23:58,460 --> 00:24:03,737
Ho solo intenzione di configurare solo un singolo percorso qui,

311
00:24:03,737 --> 00:24:09,359
e questo è abbastanza buono per me per testare questo modulo qui.

312
00:24:09,359 --> 00:24:14,497
Quindi sto solo andando a dire percorso: 'menu',

313
00:24:14,497 --> 00:24:19,021
e componente: menuComponent.

314
00:24:19,021 --> 00:24:24,235
Poiché i modelli MenuComponent utilizzano determinati componenti di materiale,

315
00:24:24,235 --> 00:24:26,523
andiamo avanti e importarli.

316
00:24:26,523 --> 00:24:35,263
Quindi importeremo il MatGridListModule

317
00:24:35,263 --> 00:24:45,034
da @angular /material/grid-list e

318
00:24:45,034 --> 00:24:54,033
anche il MatProgressSpinnerModule da

319
00:24:54,033 --> 00:25:03,747
@angular /material/progress-spinner.

320
00:25:04,327 --> 00:25:09,123
E una volta che li abbiamo importati, allora andiamo avanti e

321
00:25:09,123 --> 00:25:13,322
includerli nelle importazioni qui sotto.

322
00:25:13,322 --> 00:25:19,568
Quindi aggiungiamo il MatGridListModule e MatProgressSpinnerModule.

323
00:25:19,568 --> 00:25:23,047
E questo è tutto ciò di cui ho bisogno per

324
00:25:23,047 --> 00:25:28,997
queste importazioni particolari da configurare qui.

325
00:25:28,997 --> 00:25:34,422
Quindi, insieme alle importazioni, abbiamo le dichiarazioni in cui ho

326
00:25:34,422 --> 00:25:41,067
il MenuComponent usato qui, posso anche configurare i provider qui.

327
00:25:41,067 --> 00:25:43,295
Quindi ho bisogno di configurare i provider qui.

328
00:25:43,295 --> 00:25:47,998
Ora questo è dove stiamo andando

329
00:25:47,998 --> 00:25:52,898
a creare alcuni stub qui, quindi

330
00:25:52,898 --> 00:25:58,779
dirò fornire: DishService.

331
00:25:58,779 --> 00:26:02,825
Ora, il DishService che useremo qui non sarà il vero

332
00:26:02,825 --> 00:26:03,713
DishService.

333
00:26:03,713 --> 00:26:08,422
Quando si esegue il test di un componente, non si desidera utilizzare un servizio reale.

334
00:26:08,422 --> 00:26:12,750
Invece, si rischia di eliminare il servizio e

335
00:26:12,750 --> 00:26:19,262
quindi utilizzare uno stub DishService, che chiamerò come DishServiceStub.

336
00:26:19,262 --> 00:26:27,040
Quindi dirò, useValue: DishServiceStub.

337
00:26:27,040 --> 00:26:32,018
Quindi questa sarebbe una funzione stub che userò

338
00:26:32,018 --> 00:26:34,904
per contrassegnare il DishService qui.

339
00:26:34,904 --> 00:26:38,272
Quindi questo è uno di cui farò uso.

340
00:26:38,272 --> 00:26:42,776
E anche il secondo che

341
00:26:42,776 --> 00:26:47,455
userò è BaseURL,

342
00:26:47,455 --> 00:26:54,040
che userò il valore come BaseURL

343
00:26:54,040 --> 00:26:59,951
che abbiamo già importato in precedenza.

344
00:26:59,951 --> 00:27:06,280
Quindi, ora, con questo, ho effettivamente configurato il mio modulo di test,

345
00:27:06,280 --> 00:27:11,644
quindi noti che il modo in cui specifichiamo questo è esattamente come il modo in cui

346
00:27:11,644 --> 00:27:17,160
specifichiamo il decoratore del modulo NG per il nostro modulo app.

347
00:27:17,160 --> 00:27:22,250
E qui, stiamo solo configurando quelli che sono richiesti dal MenuComponent, quindi

348
00:27:22,250 --> 00:27:27,890
non ho gli altri che usiamo nel modulo app stesso.

349
00:27:27,890 --> 00:27:32,220
Quindi questo è il modo in cui configureremo il modulo di test.

350
00:27:32,220 --> 00:27:36,600
Ora l'unica cosa che manca è questo DishServiceStub.

351
00:27:36,600 --> 00:27:41,718
Quindi quello che ho intenzione di fare è

352
00:27:41,718 --> 00:27:47,283
implementare una funzione qui e

353
00:27:47,283 --> 00:27:53,072
chiamare che lascia che DishServiceStub

354
00:27:53,072 --> 00:27:59,973
sia un semplice oggetto JavaScript qui,

355
00:27:59,973 --> 00:28:05,537
che lascerò agire al

356
00:28:05,537 --> 00:28:10,679
posto del servizio reale.

357
00:28:10,679 --> 00:28:13,067
Possiamo stupire servizi come questo, come si vede qui.

358
00:28:13,067 --> 00:28:17,807
Quindi qui dentro, ho solo intenzione di

359
00:28:17,807 --> 00:28:21,846
fornire una semplice funzione,

360
00:28:21,846 --> 00:28:26,412
la funzione getDises qui,

361
00:28:26,412 --> 00:28:33,803
che restituirà Observable del tipo di array Dish.

362
00:28:33,803 --> 00:28:38,133
Quindi è esattamente come il valore di ritorno è stato configurato lì.

363
00:28:38,133 --> 00:28:42,776
E ho intenzione di restituire

364
00:28:42,776 --> 00:28:48,819
un osservabile di piatti qui.

365
00:28:48,819 --> 00:28:51,692
Quindi, usando questa funzione stub qui,

366
00:28:51,692 --> 00:28:56,349
quello che sto facendo è che sto stubbing il DishService, e

367
00:28:56,349 --> 00:29:00,906
quindi configurarlo con questo metodo di cui ho bisogno per

368
00:29:00,906 --> 00:29:06,158
la mia cache, dicendo getDises, e quando questo metodo viene chiamato,

369
00:29:06,158 --> 00:29:09,355
restituirò questo valore.

370
00:29:09,355 --> 00:29:11,334
La costante PIATTI, qui.

371
00:29:11,334 --> 00:29:16,740
Quindi in questo modo, ora puoi vedere come sto controllando ciò che viene

372
00:29:16,740 --> 00:29:23,449
fornito al componente da uno stub DishService che ho appena creato qui.

373
00:29:23,449 --> 00:29:27,333
Quindi questo è il modo in cui creerai stub per il tuo DishService.

374
00:29:27,333 --> 00:29:30,570
L' altro approccio che possiamo usare per i

375
00:29:30,570 --> 00:29:35,910
casi in cui stiamo usando i servizi è chiamato come usando la spia.

376
00:29:37,300 --> 00:29:42,840
Jasmine supporta qualcosa chiamato Spy, che ci permette di spiare le chiamate di funzione,

377
00:29:42,840 --> 00:29:47,040
e quindi catturare le chiamate di funzione, e quindi rispondere a quelle chiamate di funzione.

378
00:29:47,040 --> 00:29:52,981
Quindi questo è un altro modo di usare un servizio falso al posto del servizio reale.

379
00:29:52,981 --> 00:29:59,778
Così ora siamo in grado di controllare ciò che viene fornito al nostro componente menu.

380
00:29:59,778 --> 00:30:04,410
Quindi, dopo queste modifiche, allora

381
00:30:04,410 --> 00:30:09,424
andremo giù nel nostro prima di ogni metodo qui.

382
00:30:09,424 --> 00:30:14,172
Dopo l'asincrono, quello che

383
00:30:14,172 --> 00:30:19,085
farò è entrare in possesso del DishService.

384
00:30:19,085 --> 00:30:24,187
Quindi vedi che sto usando il banco di prova e quindi usando il

385
00:30:24,187 --> 00:30:31,415
metodo get del banco di prova per entrare in possesso del dishService che è stato creato qui,

386
00:30:31,415 --> 00:30:37,819
da questo particolare stub che abbiamo dichiarato qui nei provider.

387
00:30:39,520 --> 00:30:43,140
Quindi questo mi dà un riferimento al DishService in

388
00:30:43,140 --> 00:30:47,870
modo da poter chiamare i metodi di DishService ovunque ne abbia bisogno qui.

389
00:30:47,870 --> 00:30:52,453
Quindi, dopo aver fatto queste modifiche, salviamo le modifiche e

390
00:30:52,453 --> 00:30:57,679
poi vediamo come la nostra CLI angolare eseguirà questo test dopo queste modifiche,

391
00:30:57,679 --> 00:31:02,369
e se il nostro test avrà successo a questo punto o meno.

392
00:31:02,369 --> 00:31:04,462
Quindi salviamo le modifiche.

393
00:31:04,462 --> 00:31:09,412
Nel momento in cui salverai le modifiche noterai che il tuo

394
00:31:09,412 --> 00:31:13,060
test NG riavvierà nuovamente il nostro test.

395
00:31:13,060 --> 00:31:16,310
Quindi compilerà l'applicazione e quindi rieseguirà il test.

396
00:31:16,310 --> 00:31:21,450
E voilà, il nostro test è passato con successo dopo

397
00:31:22,540 --> 00:31:27,574
aver apportato le modifiche al nostro file component.spec.ts.

398
00:31:27,574 --> 00:31:33,270
Quindi il nostro primo test, il che significa che ora siamo in grado di creare un componente di menu

399
00:31:33,270 --> 00:31:37,950
dal nostro menu, component.spec.ts file lì.

400
00:31:37,950 --> 00:31:40,990
Quindi la nostra configurazione di test funziona bene.

401
00:31:40,990 --> 00:31:48,460
Ora posso entrare e fare test più intensi all'interno del mio componente di test.

402
00:31:48,460 --> 00:31:53,790
Tornando a quel file component.spec del menu, lasciami aggiungere un altro test.

403
00:31:53,790 --> 00:32:00,420
Ora vedi che perché ora ho un servizio stabilito qui

404
00:32:00,420 --> 00:32:07,292
che sta restituendo questo valore PIATS, posso quindi utilizzare il mio DishService,

405
00:32:07,292 --> 00:32:11,290
a cui ho ottenuto il riferimento qui.

406
00:32:11,290 --> 00:32:15,934
All' interno era prima di ciascuno, quindi chiama il metodo

407
00:32:15,934 --> 00:32:18,830
getDishes e poi sarò in grado di ottenere il valore.

408
00:32:18,830 --> 00:32:23,800
E questo sarà disponibile all'interno del mio componente di menu che ho appena creato.

409
00:32:23,800 --> 00:32:28,615
Quindi il mio MenuComponent ora dovrebbe avere accesso alla costante dei piatti che

410
00:32:28,615 --> 00:32:32,856
è stata fornita di nuovo attraverso questa fermata di stoviglie.

411
00:32:32,856 --> 00:32:37,608
Quindi ora posso testare per vedere se la variabile piatti all'interno del mio

412
00:32:37,608 --> 00:32:43,642
MenuComponent sta effettivamente ricevendo i valori correttamente o meno.

413
00:32:43,642 --> 00:32:46,982
Quindi, entrando, fammi creare un altro test qui.

414
00:32:46,982 --> 00:32:52,413
Quindi creerò un test qui, Con il esso,

415
00:32:52,413 --> 00:32:57,228
come hai visto prima, così proprio come il precedente.

416
00:32:57,228 --> 00:33:03,447
Questo secondo test ho intenzione di chiamare che come esso e

417
00:33:03,447 --> 00:33:09,460
piatti, Gli articoli dovrebbero essere 4,

418
00:33:09,460 --> 00:33:14,605
perché la costante piatti che abbiamo dichiarato

419
00:33:14,605 --> 00:33:21,562
nel file shared.dish ha quattro piatti nella costante lì.

420
00:33:21,562 --> 00:33:26,232
Quindi, quando la mia variabile piatti all'interno del mio

421
00:33:26,232 --> 00:33:31,018
file MenuComponent o ts viene inizializzata chiamando il dishservice.

422
00:33:31,018 --> 00:33:34,632
Avrebbe dovuto ricevere quei quattro piatti ed essere

423
00:33:34,632 --> 00:33:37,970
inizializzato con quei quattro piatti.

424
00:33:37,970 --> 00:33:43,182
Quindi ho intenzione di effettuare alcuni test su quella variabile piatti lì.

425
00:33:43,182 --> 00:33:46,492
Quindi, come posso accedere alla variabile piatti qui?

426
00:33:46,492 --> 00:33:50,431
Quindi direi che gli articoli piatti dovrebbero essere 4, e

427
00:33:50,431 --> 00:33:54,171
poi dichiarerò una funzione freccia qui.

428
00:33:54,171 --> 00:33:59,453
E all'interno di questa funzione freccia ho intenzione di specificare

429
00:33:59,453 --> 00:34:04,024
i vari test che ho intenzione di eseguire.

430
00:34:04,024 --> 00:34:10,348
Quindi qui ho intenzione di dire aspettare (componente. ,

431
00:34:10,348 --> 00:34:15,378
e notare che mi dà automaticamente

432
00:34:15,378 --> 00:34:22,290
accesso a questa proprietà piatti da MenuComponent.

433
00:34:22,290 --> 00:34:27,400
Quindi posso dire che component.dish, e quindi posso testare

434
00:34:27,400 --> 00:34:34,053
per vedere che la lunghezza di quell'array di oggetti JavaScript dovrebbe essere.

435
00:34:34,053 --> 00:34:38,367
Quindi questo è dove uso il metodo ToBe di Jasmine qui.

436
00:34:38,367 --> 00:34:41,517
E poi posso specificare il valore 4,

437
00:34:41,517 --> 00:34:46,347
perché stavo fornendo 4 piatti nei miei piatti costanti

438
00:34:46,347 --> 00:34:51,284
che ho dichiarato nel file shared.dish lì.

439
00:34:51,284 --> 00:34:54,709
Quindi questo è il primo test che eseguirò,

440
00:34:54,709 --> 00:34:56,867
questo dovrebbe rivelarsi vero.

441
00:34:56,867 --> 00:35:01,096
Altrimenti l'installazione non ha funzionato correttamente, quindi

442
00:35:01,096 --> 00:35:05,120
so che il mio codice non funziona correttamente.

443
00:35:05,120 --> 00:35:09,891
Ma so per certo che questo test dovrebbe funzionare correttamente.

444
00:35:09,891 --> 00:35:11,547
Se vuoi essere sicuro,

445
00:35:11,547 --> 00:35:16,011
salviamo le modifiche e poi andiamo a vedere il nostro test in esecuzione.

446
00:35:16,011 --> 00:35:18,084
Andando a quel terminale,

447
00:35:18,084 --> 00:35:23,323
vedi che ora la mia app viene ricompilata e il test viene eseguito.

448
00:35:23,323 --> 00:35:27,941
E nota tutti i verdi nella finestra del terminale.

449
00:35:27,941 --> 00:35:32,355
Dice eseguito 1 di 2 successo, eseguito 2 di 2 successo.

450
00:35:32,355 --> 00:35:36,021
Il che significa che entrambi i miei test sono stati eseguiti correttamente.

451
00:35:36,021 --> 00:35:41,221
Se guardo il mio browser, in modo da vedere che il MenuComponent,

452
00:35:41,221 --> 00:35:44,031
entrambi i test hanno successo.

453
00:35:44,031 --> 00:35:46,189
Permettetemi di crearne altri e

454
00:35:46,189 --> 00:35:51,994
aggiungerli a quel set di secondo gruppo di test che sto creando lì.

455
00:35:51,994 --> 00:35:58,106
Andando al file menu_component_spec.ts, aggiungerò un altro.

456
00:35:58,106 --> 00:36:05,535
Dirò aspetto componente. ,

457
00:36:05,535 --> 00:36:12,420
e dirò piatti [1].

458
00:36:12,420 --> 00:36:16,105
Ricordiamo che il nome del primo piatto era,

459
00:36:18,858 --> 00:36:22,552
Quindi questo è quello che ho intenzione di testare, i piatti [1] .name.

460
00:36:22,552 --> 00:36:26,774
Quindi questo è il modo in cui posso testare per vedere se sta ricevendo i valori correttamente.

461
00:36:26,774 --> 00:36:28,431
Quali sono tutti i modi in cui posso testare?

462
00:36:28,431 --> 00:36:34,594
Se metto un puntino lì, mi darà un suggerimento di tutte le possibilità qui.

463
00:36:34,594 --> 00:36:42,862
Quindi dirò, userò anche di nuovo il metodo ToBe qui.

464
00:36:42,862 --> 00:36:45,623
E poi il nome del secondo piatto è,

465
00:36:51,916 --> 00:36:55,779
solo che lì, quindi quella è la seconda caster che ho intenzione di eseguire.

466
00:36:55,779 --> 00:36:59,819
Quindi, se il mio codice è stato eseguito correttamente, anche questo dovrebbe passare.

467
00:36:59,819 --> 00:37:03,389
Allo stesso modo, lasciatemi mettere in un altro qui.

468
00:37:03,389 --> 00:37:06,072
Quindi dirò aspettarsi,

469
00:37:09,579 --> 00:37:16,457
componente.Piatti e dirò 3.

470
00:37:16,457 --> 00:37:21,520
E qui, la

471
00:37:21,520 --> 00:37:26,819
proprietà in primo piano dovrebbe essere Falsy.

472
00:37:26,819 --> 00:37:33,572
Che tu debba essere falso, non è vero in questo caso, permettetemi di aggiungere un altro.

473
00:37:33,572 --> 00:37:35,748
Puoi iniziare ad aggiungere di più se vuoi,

474
00:37:35,748 --> 00:37:38,405
giocare con esso fino a quando non sei soddisfatto.

475
00:37:38,405 --> 00:37:40,936
Anche quelle aggiunte. Lasciami salvare le modifiche che ho apportato

476
00:37:40,936 --> 00:37:44,292
qui, andiamo a vedere se questo test viene eseguito correttamente.

477
00:37:44,292 --> 00:37:50,041
E tornando al mio terminale, vedete che il mio test e' di nuovo in esecuzione.

478
00:37:50,041 --> 00:37:52,720
Vedete che entrambi i test hanno avuto successo,

479
00:37:52,720 --> 00:37:55,551
ora farò fallire una di quelle cose.

480
00:37:55,551 --> 00:37:59,754
Quindi entrero' e cambiero' la situazione in verita'.

481
00:37:59,754 --> 00:38:03,950
Vedi, questo e' il divertimento di giocare con il codice.

482
00:38:03,950 --> 00:38:08,111
Cambierò la situazione in verità e so che questo test fallirà.

483
00:38:08,111 --> 00:38:10,186
Quindi salviamo le modifiche.

484
00:38:10,186 --> 00:38:15,977
Dando un'occhiata al terminale, ci si vede che il test è fallito.

485
00:38:15,977 --> 00:38:23,603
Vedi tutto questo rosso qui, il che significa che il secondo test non è passato correttamente.

486
00:38:23,603 --> 00:38:30,750
E se si scorre all'indietro, si vedrebbe questo particolare test fallito,

487
00:38:30,750 --> 00:38:36,295
perché da qualche parte laggiù dirà che non è stato così.

488
00:38:36,295 --> 00:38:42,119
Ok, vedi questa affermazione qui dice che si aspettava falso essere veritiero,

489
00:38:42,119 --> 00:38:44,378
quindi è per questo che ha fallito.

490
00:38:44,378 --> 00:38:47,978
Quindi non doveva essere vero, ma ho detto che dovrebbe essere vero, e

491
00:38:47,978 --> 00:38:51,393
ovviamente il test è sbagliato, quindi è per questo che il test è fallito.

492
00:38:51,393 --> 00:38:55,865
Quindi questo è il modo in cui puoi anche testare per vedere se il test fallisce,

493
00:38:55,865 --> 00:38:59,086
se hai chiesto anche le cose sbagliate.

494
00:38:59,086 --> 00:39:04,107
Ma ancora una volta, lasciami tornare indietro e correggerlo ancora una volta.

495
00:39:04,107 --> 00:39:09,068
Quindi tornando al mio, File li cambierò

496
00:39:09,068 --> 00:39:13,529
di nuovo in falsy, perché voglio che questo test funzioni correttamente.

497
00:39:13,529 --> 00:39:15,517
Ora non siamo ancora soddisfatti.

498
00:39:15,517 --> 00:39:20,117
Ora in questo particolare test sto testando solo la

499
00:39:20,117 --> 00:39:23,825
variabile piatti che si trova all'interno del mio MenuComponent.

500
00:39:23,825 --> 00:39:29,777
Come faccio a giocare con il modello stesso?

501
00:39:29,777 --> 00:39:35,454
Quindi questo è dove abbiamo bisogno di un po 'più di aiuto da Angular.

502
00:39:35,454 --> 00:39:40,216
Per eseguire alcuni test sul modello, ho intenzione di entrare e

503
00:39:40,216 --> 00:39:42,972
tirare un altro paio di importazioni qui.

504
00:39:42,972 --> 00:39:49,896
Quindi andando alla mia parte superiore di questo file, menu_component_spec.tsfile.

505
00:39:49,896 --> 00:39:55,105
Ho intenzione di importare, Un

506
00:39:55,105 --> 00:40:00,594
altro chiamato da, che è un metodo.

507
00:40:00,594 --> 00:40:03,044
Mi vedrai usare questo tra poco.

508
00:40:03,044 --> 00:40:10,855
Questo dovrebbe essere importato da, Angular,

509
00:40:15,209 --> 00:40:18,863
/platform-browser.

510
00:40:18,863 --> 00:40:27,301
E anche, ho intenzione di importare un altro che è un elemento di debug.

511
00:40:27,301 --> 00:40:32,009
L' elemento di debug mi consente di ottenere l'accesso al DOM in

512
00:40:32,009 --> 00:40:37,040
modo da poter eseguire test sugli elementi DOM direttamente.

513
00:40:37,040 --> 00:40:44,548
Quindi è lì che ho intenzione di importare questo da, il codice angolare qui, quindi questi due.

514
00:40:44,548 --> 00:40:49,580
Quindi aggiungi il By e il DebugElement alle importazioni, e

515
00:40:49,580 --> 00:40:54,947
poi una volta che lo fai, cammineremo nel codice qui.

516
00:40:54,947 --> 00:40:59,338
E poi aggiungeremo in un altro test dove andremo nel DOM e

517
00:40:59,338 --> 00:41:01,690
recuperare uno degli elementi dal doc.

518
00:41:01,690 --> 00:41:06,404
Quindi lo direi, quindi un altro test qui,

519
00:41:06,404 --> 00:41:09,889
cosa farà questo test?

520
00:41:09,889 --> 00:41:14,970
Per questo test, specificherò

521
00:41:14,970 --> 00:41:22,903
il test come dovrebbe usare piatti nel modello.

522
00:41:22,903 --> 00:41:25,838
Sto solo dicendo qualcosa in modo casuale qui,

523
00:41:25,838 --> 00:41:29,804
perché voglio solo verificare che la variabile piatti,

524
00:41:29,804 --> 00:41:34,905
qualunque cosa stia rendendo disponibile, viene utilizzata correttamente nel modello.

525
00:41:34,905 --> 00:41:38,412
Quindi questa è la parte che sto impostando, e

526
00:41:38,412 --> 00:41:42,104
poi la seconda parte è la funzione freccia, e

527
00:41:42,104 --> 00:41:47,760
all'interno di questa funzione freccia fornirò il codice per il prossimo test.

528
00:41:47,760 --> 00:41:52,734
Quindi all'interno di questa funzione freccia quello che ho

529
00:41:52,734 --> 00:41:58,008
intenzione di fare è prima chiamare l'apparecchio e

530
00:41:58,008 --> 00:42:00,880
quindi rilevare le modifiche.

531
00:42:00,880 --> 00:42:05,990
E poi dopo che dirò let de:,

532
00:42:12,226 --> 00:42:13,908
È un DebugElement.

533
00:42:13,908 --> 00:42:20,748
Attraverso questo ho intenzione di ottenere l'accesso al DOM e

534
00:42:20,748 --> 00:42:26,566
quindi l'elemento sarebbe HTMLElement.

535
00:42:26,566 --> 00:42:33,243
Quindi voglio avere accesso a uno degli HTMLElements dal mio DOM.

536
00:42:33,243 --> 00:42:35,369
Quindi quale elemento voglio?

537
00:42:35,369 --> 00:42:38,846
Quindi, per farlo, otterrò l'accesso a,

538
00:42:41,533 --> 00:42:48,138
DebugElement dicendo fixture e DebugElement.

539
00:42:48,138 --> 00:42:54,933
Quindi questo mi permette di ottenere l'accesso agli elementi dal mio DOM qui in modo debugElement.

540
00:42:54,933 --> 00:43:02,220
E poi posso interrogare e poi scegliere solo quelli che mi interesseranno.

541
00:43:02,220 --> 00:43:08,690
Quindi ho intenzione di interrogare e poi chiederò utilizzando il By.

542
00:43:08,690 --> 00:43:15,908
Quindi nota dove sto usando il By che ho incluso importandolo.

543
00:43:15,908 --> 00:43:20,780
Quindi By, The By supporta un sacco di metriche con cui posso

544
00:43:20,780 --> 00:43:25,020
chiedere di accedere a particolari elementi nel DOM.

545
00:43:25,020 --> 00:43:31,824
Quindi, come puoi vedere, mi dirà cosa posso importare e

546
00:43:31,824 --> 00:43:36,846
quindi il.css mi permette di ottenere l'accesso

547
00:43:36,846 --> 00:43:43,018
agli elementi corrispondenti dal selettore css specificato.

548
00:43:43,018 --> 00:43:45,789
Quindi qual è il selettore css che userò?

549
00:43:45,789 --> 00:43:50,503
So che c'è un elemento h1, un elemento html nel DOM e

550
00:43:50,503 --> 00:43:55,750
che ho intenzione di ottenere l'accesso al primo elemento h1 dal DOM.

551
00:43:55,750 --> 00:44:00,764
E uno degli elementi h1 in là è quello che

552
00:44:00,764 --> 00:44:05,670
sta per mostrare il nome di ogni piatto lì.

553
00:44:05,670 --> 00:44:10,459
Guardate indietro e vedete che all'interno della griglia timeline usando un h1 e

554
00:44:10,459 --> 00:44:13,839
che h1 contiene il nome del piatto lì.

555
00:44:13,839 --> 00:44:16,723
Quindi ho intenzione di entrare in possesso di questo e

556
00:44:16,723 --> 00:44:21,198
poi ho intenzione di ottenere un elemento e poi direi de,

557
00:44:21,198 --> 00:44:26,385
dall'elemento di debug, e poi direi nativeElement.

558
00:44:26,385 --> 00:44:31,572
E questo mi dà accesso all'elemento specificamente nel DOM

559
00:44:31,572 --> 00:44:37,873
a cui mi riferisco e ho selezionato usando questa affermazione in precedenza.

560
00:44:37,873 --> 00:44:43,091
Quindi, quando interrogo il DOM e poi dico, restituitemi tutti

561
00:44:43,091 --> 00:44:48,964
quelli che stanno usando il tag h1 per l'elemento HTML.

562
00:44:48,964 --> 00:44:54,077
E ottengo l'accesso a questo, e posso interrogare e

563
00:44:54,077 --> 00:44:58,349
dire aspettatevi (el.textContent).

564
00:44:58,349 --> 00:45:02,869
Quindi sto cercando il contenuto all'interno di questo h1 nel mio

565
00:45:02,869 --> 00:45:07,718
modello di contenuto fisso e poi dirò toContain.

566
00:45:07,718 --> 00:45:12,596
Quindi questo è un altro metodo, toContain, questo è un metodo Jasmine chiamato toContain.

567
00:45:12,596 --> 00:45:18,352
Questo controlla se contiene un valore particolare,

568
00:45:18,352 --> 00:45:23,262
e quindi controllerò i piatti (0) .name.

569
00:45:23,262 --> 00:45:29,360
Quindi il primo piatto è stato creato nel DOM e aggiunto nel DOM?

570
00:45:29,360 --> 00:45:33,981
Se il mio modello funziona correttamente, allora deve essere presente nel DOM.

571
00:45:33,981 --> 00:45:38,626
Quindi questo è quello che controllerò per vedere se la tessera della griglia corrispondente

572
00:45:38,626 --> 00:45:42,658
al primo DISH è stata creata e aggiunta nel DOM o meno.

573
00:45:42,658 --> 00:45:47,521
Quindi dico PIATTI (0) .name e dico in maiuscolo.

574
00:45:47,521 --> 00:45:52,395
Ricordiamo che ho usato la pipe maiuscola per visualizzare il nome

575
00:45:52,395 --> 00:45:56,647
del DISH convertendo il nome del piatto in

576
00:45:56,647 --> 00:46:01,450
tutte le maiuscole nella tessera della griglia nel componente del menu.

577
00:46:01,450 --> 00:46:05,830
Quindi e' quello che controllero', ok? Quindi sto solo controllando

578
00:46:05,830 --> 00:46:07,200
uno di loro.

579
00:46:07,200 --> 00:46:10,983
È possibile eseguire molti di questi test, è possibile controllare per

580
00:46:10,983 --> 00:46:16,016
PIATTI (1) .name e poi PIATES (2) .name e altro se si desidera.

581
00:46:16,016 --> 00:46:21,683
Sto solo illustrando un esempio di come accederesti agli elementi del DOM e

582
00:46:21,683 --> 00:46:24,783
poi controllerai cosa contengono lì dentro.

583
00:46:24,783 --> 00:46:29,585
Quindi questo è un test che condurrò qui, quindi lasciami salvare le modifiche

584
00:46:29,585 --> 00:46:32,930
e poi vedere se il test viene eseguito correttamente.

585
00:46:32,930 --> 00:46:35,951
Vai in quel terminale e quando il test viene eseguito,

586
00:46:35,951 --> 00:46:41,039
vedi che il mio primo test ha avuto successo, il secondo test ha avuto successo,

587
00:46:41,039 --> 00:46:44,635
e anche il terzo test ha avuto successo, meraviglioso.

588
00:46:44,635 --> 00:46:48,374
Ora, lascia che il terzo test fallisca.

589
00:46:48,374 --> 00:46:52,273
Andando al file menucomponentspec.ts,

590
00:46:52,273 --> 00:46:58,818
rimuoverò questo in maiuscolo e quindi eseguirò lo stesso test.

591
00:46:58,818 --> 00:47:02,269
Vedrai che questo test fallirà, salva le modifiche.

592
00:47:02,269 --> 00:47:06,941
E quando il test viene eseguito, vedrai che il terzo test fallirà.

593
00:47:06,941 --> 00:47:11,251
Perché sto causando il fallimento controllando la cosa sbagliata

594
00:47:11,251 --> 00:47:13,894
lì e ci si va, il terzo test è fallito qui.

595
00:47:13,894 --> 00:47:18,490
Quindi questo è il modo in cui puoi verificare se certe cose che

596
00:47:18,490 --> 00:47:22,471
dovrebbero essere lì ci sono correttamente o meno.

597
00:47:22,471 --> 00:47:28,360
Perché è questo caso, così puoi vedere qui, il motivo per cui questo test non è riuscito.

598
00:47:28,360 --> 00:47:34,750
Si aspetta che questo sia nel DOM,

599
00:47:34,750 --> 00:47:40,670
ma invece questo è ciò che è nel DOM nell'elemento h1 nel DOM.

600
00:47:40,670 --> 00:47:43,929
Quindi questo è il motivo per cui il test è fallito qui.

601
00:47:43,929 --> 00:47:47,718
Quindi tornando indietro fammi correggere l'errore e

602
00:47:47,718 --> 00:47:53,922
poi quando rieseguo il test dovresti vedere che il test passa con successo.

603
00:47:53,922 --> 00:47:58,757
Tornando al terminale vedrai che quando questo test viene eseguito ora

604
00:47:58,757 --> 00:47:59,875
funzionerà correttamente.

605
00:48:03,610 --> 00:48:08,670
Ed ecco, tutti e tre i test sono passati dalla mia domanda.

606
00:48:08,670 --> 00:48:13,970
Inoltre, guardando il browser, è possibile vedere che i tre test

607
00:48:13,970 --> 00:48:19,770
sono stati eseguiti con successo sul file modello dei componenti del menu e

608
00:48:19,770 --> 00:48:22,571
anche il componente del menu stesso.

609
00:48:22,571 --> 00:48:28,398
Ora, ovviamente, questo non è necessariamente il test più completo, ma

610
00:48:28,398 --> 00:48:32,407
volevo solo darti un

611
00:48:32,407 --> 00:48:37,398
assaggio di come andresti a costruire test all'interno della tua applicazione Angular.

612
00:48:37,398 --> 00:48:42,025
Se ti lasci trasportare puoi andare in tutti i file spec.ts che hai e

613
00:48:42,025 --> 00:48:44,194
quindi scrivere il tuo test per

614
00:48:44,194 --> 00:48:49,580
ognuno di questi componenti usando le conoscenze che hai acquisito qui.

615
00:48:49,580 --> 00:48:55,150
Inoltre, è possibile leggere ulteriori informazioni sui test nella documentazione Angular e

616
00:48:55,150 --> 00:49:00,590
quindi imparare altri modi per eseguire test sull'applicazione Angular.

617
00:49:00,590 --> 00:49:05,190
Il test è un campo da solo quindi se ho bisogno di insegnarti tutto sul

618
00:49:05,190 --> 00:49:10,410
test che verrà un intero corso in sé per Angular.

619
00:49:10,410 --> 00:49:14,500
E in questo corso, volevo solo darti un assaggio di come

620
00:49:14,500 --> 00:49:17,820
eseguirai i test nella tua applicazione Angular.

621
00:49:17,820 --> 00:49:21,585
E questo è un esempio di come possiamo configurare ed

622
00:49:21,585 --> 00:49:27,441
eseguire un test unitario su uno dei componenti nella nostra applicazione angolare.

623
00:49:27,441 --> 00:49:33,901
Questo è un buon momento per fare un buon commento con il test dei componenti del messaggio.

624
00:49:33,901 --> 00:49:37,750
[ MUSIC]