1
00:00:00,000 --> 00:00:04,858
[MÚSICA]

2
00:00:04,858 --> 00:00:09,967
A fragrância de jasmim de todas aquelas guirlandas de flores

3
00:00:09,967 --> 00:00:14,218
na rua do templo flutuando pelo ar.

4
00:00:14,218 --> 00:00:17,684
Que sentimento de assentamento.

5
00:00:17,684 --> 00:00:20,510
Deve ser o bom karma da minha vida passada.

6
00:00:23,749 --> 00:00:25,857
Desculpe, onde eu estava?

7
00:00:25,857 --> 00:00:29,703
Eu estava falando com você sobre testes angulares, certo?

8
00:00:29,703 --> 00:00:34,743
E vamos usar o ajuste do karma para fazer nossos testes angulares.

9
00:00:34,743 --> 00:00:37,769
Então vamos continuar com isso.

10
00:00:37,769 --> 00:00:45,571
Uma coisa boa sobre o uso do Angular CLI é que ele configura todos os andaimes para

11
00:00:45,571 --> 00:00:49,869
você para incluir automaticamente o suporte para

12
00:00:49,869 --> 00:00:53,393
testar seu aplicativo Angular.

13
00:00:53,393 --> 00:00:59,108
Então você notará que sempre que você gerar um componente ou

14
00:00:59,108 --> 00:01:03,454
um serviço junto com os arquivos ts do componente,

15
00:01:03,454 --> 00:01:08,942
você também notará um arquivo chamado component.spect.ts

16
00:01:08,942 --> 00:01:13,422
já incluído em suas pastas do projeto.

17
00:01:13,422 --> 00:01:17,423
E também, se você for para o arquivo package.json,

18
00:01:17,423 --> 00:01:24,434
você verá que já existe suporte para o teste Angular incluído lá.

19
00:01:24,434 --> 00:01:30,640
Então, se você entrar nas dependências dev você verá que o núcleo de jasmim,

20
00:01:30,640 --> 00:01:34,201
o repórter de especificação de jasmim, o karma e

21
00:01:34,201 --> 00:01:39,394
karma relacionados módulos npm já estão instalados dentro de sua aplicação angular

22
00:01:39,394 --> 00:01:44,414
que é andaime fora pela Angular CLI.

23
00:01:44,414 --> 00:01:47,716
Então, nós temos todas as coisas e lugar para

24
00:01:47,716 --> 00:01:53,538
nós para apenas começar com o nosso teste para a nossa aplicação angular.

25
00:01:53,538 --> 00:01:58,617
Então, se você olhar ao redor você verá que há

26
00:01:58,617 --> 00:02:03,572
um arquivo chamado test.ts em sua pasta de origem,

27
00:02:03,572 --> 00:02:07,269
então vamos abrir o arquivo test.ts.

28
00:02:07,269 --> 00:02:11,518
Você também verá que há outra pasta aqui chamada para e2e.

29
00:02:11,518 --> 00:02:16,409
Voltaremos a isso no próximo exercício.

30
00:02:16,409 --> 00:02:21,232
Mas na pasta test.ts, você verá que aqui é onde

31
00:02:21,232 --> 00:02:25,084
seu suporte para karma está sendo configurado aqui.

32
00:02:25,084 --> 00:02:29,551
Então, indo para este arquivo test.ts, por padrão,

33
00:02:29,551 --> 00:02:33,907
quando você usar o suporte CLS angular para teste,

34
00:02:33,907 --> 00:02:38,261
ele vai executar os testes para todos os componentes e serviços

35
00:02:38,261 --> 00:02:43,750
que estão incluídos em sua aplicação angular.

36
00:02:43,750 --> 00:02:49,017
Agora, eu vou ilustrar para vocês como fazer testes para

37
00:02:49,017 --> 00:02:53,516
um componente específico, o MenuComponent.

38
00:02:53,516 --> 00:03:00,469
Então eu quero me restringir a usar apenas o componente de menu arquivo.spec e

39
00:03:00,469 --> 00:03:04,696
fazer o teste apenas para o componente de menu.

40
00:03:04,696 --> 00:03:07,823
Então, vá para o arquivo test.ts.

41
00:03:07,823 --> 00:03:16,388
Uma maneira que podemos configurar o teste de CLIs angulares para executar o teste apenas para

42
00:03:16,388 --> 00:03:22,397
um componente específico é ir para esta linha aqui,

43
00:03:22,397 --> 00:03:29,308
que diz contexto const e, em seguida, mudar isso para o menu,

44
00:03:29,308 --> 00:03:36,088
você pode ver /menu\ .component e spec.ts arquivo.

45
00:03:36,088 --> 00:03:41,615
Anteriormente era apenas/\ .spec.ts arquivo, o que significava que você

46
00:03:41,615 --> 00:03:47,992
executará todos os arquivos de especificação que estão lá na pasta de código-fonte do projeto.

47
00:03:47,992 --> 00:03:51,379
Então, agora, especificando isso aqui,

48
00:03:51,379 --> 00:03:57,225
Estou interessado em executar o teste apenas para o arquivo de especificação do componente de menu aqui.

49
00:03:57,225 --> 00:04:02,285
Agora isso eu descobri pesquisando ao redor na pilha

50
00:04:02,285 --> 00:04:08,268
estouro onde eu encontrei alguém me dando a resposta para isso,

51
00:04:08,268 --> 00:04:12,985
apontando para algum recurso na Angular CLI, e então

52
00:04:12,985 --> 00:04:18,393
foi assim que eu descobri que esta é a maneira de restringir

53
00:04:18,393 --> 00:04:23,019
o teste para um arquivo de teste de um componente específico.

54
00:04:23,019 --> 00:04:28,465
Então, depois de fazer uma alteração no arquivo test.ts, vamos salvar a alteração.

55
00:04:28,465 --> 00:04:32,622
Agora, vamos tentar executar nosso teste no componente de menu.

56
00:04:32,622 --> 00:04:37,198
Então, como você vê, no componente de menu, já temos o arquivo de componente

57
00:04:37,198 --> 00:04:42,051
do menu .spec.ts, que contém algum código já.

58
00:04:42,051 --> 00:04:45,631
Vamos tentar executar este teste e ver o que acontece.

59
00:04:45,631 --> 00:04:50,650
Indo para o terminal, adicione o prompt, digite ng test, e este

60
00:04:50,650 --> 00:04:56,644
resultará em um Angular CLI iniciando o teste para o componente de menu.

61
00:04:56,644 --> 00:04:59,875
Então, quando você digita isso e aperta o Return,

62
00:04:59,875 --> 00:05:05,216
então Angular CLI começará a compilar sua aplicação angular.

63
00:05:05,216 --> 00:05:10,129
Ele também abrirá uma janela do navegador, no meu caso, abrirá uma janela do navegador Chrome

64
00:05:10,129 --> 00:05:13,874
e usará essa janela do navegador para executar o teste.

65
00:05:13,874 --> 00:05:20,992
E você vê que na parte de trás, você tem a janela do navegador Chrome rodando e

66
00:05:20,992 --> 00:05:25,980
está toda cheia de vermelho e um monte de palavras lá.

67
00:05:25,980 --> 00:05:30,937
A mesma informação também será impressa na janela do seu console,

68
00:05:30,937 --> 00:05:34,980
e a partir disso eu posso ver que meu teste não foi executado corretamente.

69
00:05:34,980 --> 00:05:41,070
Há algo que não está configurado corretamente no meu arquivo de teste, então eu vou precisar ir e

70
00:05:41,070 --> 00:05:47,272
editar meu arquivo de teste para incluir o suporte apropriado para executar este teste corretamente.

71
00:05:47,272 --> 00:05:51,425
Então vamos para o arquivo spec.ts componente menu e

72
00:05:51,425 --> 00:05:54,430
, em seguida, preparar nosso teste de acordo.

73
00:05:54,430 --> 00:06:00,134
Agora podemos deixar o teste ng em execução aqui.

74
00:06:00,134 --> 00:06:04,337
Sempre que você fizer alterações no arquivo mini component.ts ou

75
00:06:04,337 --> 00:06:07,169
no arquivo mini component.spec.ts e

76
00:06:07,169 --> 00:06:12,078
salvar as alterações, esse teste será executado automaticamente nesse ponto.

77
00:06:12,078 --> 00:06:17,011
Então, vamos para o arquivo MenuComponent.spect.ts.

78
00:06:17,011 --> 00:06:21,882
Indo para o arquivo MenuComponent.spect.ts,

79
00:06:21,882 --> 00:06:30,417
entendemos que o arquivo spect usa a sintaxe Jasmine para descrever o teste.

80
00:06:30,417 --> 00:06:33,478
Então você já notou que há algo aqui

81
00:06:33,478 --> 00:06:38,118
que começa com descrever e então há uma função definida lá.

82
00:06:38,118 --> 00:06:43,174
Então isso é o que eu estava me referindo quando eu falei sobre a sintaxe Jasmine anteriormente.

83
00:06:43,174 --> 00:06:47,961
E também se você rolar para baixo você verá um ou mais lá dentro.

84
00:06:47,961 --> 00:06:53,922
Além disso, você verá algo chamado BeforeEach, aqui.

85
00:06:53,922 --> 00:06:59,594
Vamos examinar este arquivo um pouco mais detalhadamente para entender como esse arquivo

86
00:06:59,594 --> 00:07:05,794
está configurado e como esse teste é configurado neste arquivo específico.

87
00:07:05,794 --> 00:07:10,843
Assim, dentro deste arquivo de teste, você vai notar que

88
00:07:10,843 --> 00:07:17,979
estamos importando aqui um conjunto de classes de teste de núcleo angular.

89
00:07:17,979 --> 00:07:22,874
Portanto, este módulo permite que você forneça o suporte de teste para

90
00:07:22,874 --> 00:07:29,603
sua aplicação angular, e permite que você projete o teste para seu componente.

91
00:07:29,603 --> 00:07:33,304
Então você vê que estou importando assíncrono e

92
00:07:33,304 --> 00:07:39,105
ComponentFixture e TestBed desta biblioteca de testes.

93
00:07:39,105 --> 00:07:40,955
Eu vou chamá-lo de biblioteca de testes.

94
00:07:40,955 --> 00:07:44,783
Além disso, você vê que o MenuComponent também é importado aqui.

95
00:07:44,783 --> 00:07:47,220
Agora, uma vez que entendemos esses dois,

96
00:07:47,220 --> 00:07:51,788
vamos descer o código para entender o que estamos tentando fazer aqui.

97
00:07:51,788 --> 00:07:56,358
Então, aqui, como você espera, esta descrição aqui é

98
00:07:56,358 --> 00:08:02,330
especificando que esta função particular está descrevendo,

99
00:08:02,330 --> 00:08:08,129
Um teste baseado em Jasmine que estamos especificando para nossa aplicação Angular.

100
00:08:08,129 --> 00:08:11,056
Então, quando você olhar para a descrição aqui,

101
00:08:11,056 --> 00:08:15,181
você verá que isso inclui todo esse código aqui.

102
00:08:15,181 --> 00:08:19,950
Então, isso é parte de um único conjunto de testes que estamos executando são o nosso componente de menu

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

104
00:08:21,670 --> 00:08:26,670
Então, dentro da descrição, você verá que há uma string aqui.

105
00:08:26,670 --> 00:08:32,120
Especifica este conjunto específico de testes que você está executando aqui.

106
00:08:32,120 --> 00:08:34,130
Então, ele diz no componente de menu.

107
00:08:34,130 --> 00:08:36,770
Então aqui você pode especificar qualquer string que você quiser.

108
00:08:36,770 --> 00:08:39,930
Você pode usar isso como uma descrição para

109
00:08:39,930 --> 00:08:43,610
especificar o que este conjunto específico de testes está fazendo.

110
00:08:43,610 --> 00:08:46,930
Então aqui, eu vou ficar com uma coisa antes.

111
00:08:46,930 --> 00:08:49,380
Estamos tentando testar o componente de menu.

112
00:08:49,380 --> 00:08:53,320
E depois disso, você vê que estamos especificando uma função addo aqui.

113
00:08:53,320 --> 00:08:57,036
Dentro desta função addo, vamos construir o teste.

114
00:08:57,036 --> 00:09:00,700
Para o nosso menuComponent aqui.

115
00:09:00,700 --> 00:09:05,670
Então, depois disso, você verá que estamos declarando uma variável chamada componente,

116
00:09:05,670 --> 00:09:08,080
que é do tipo menuComponent.

117
00:09:08,080 --> 00:09:11,950
De vez em quando, também estamos declarando uma variável de fixture,

118
00:09:11,950 --> 00:09:14,140
que é do tipo ComponentFixture.

119
00:09:15,390 --> 00:09:19,060
Que é do tipo MenuComponent.

120
00:09:19,060 --> 00:09:21,180
Agora, por que isso é interessante?

121
00:09:21,180 --> 00:09:24,450
Agora, dentro da nossa aplicação Angular,

122
00:09:24,450 --> 00:09:27,130
temos o MenuComponent que já projetamos.

123
00:09:27,130 --> 00:09:29,990
Então, neste arquivo de teste,

124
00:09:29,990 --> 00:09:35,310
vamos criar esse menuComponent usando o testBed angular,

125
00:09:35,310 --> 00:09:38,110
e então vamos realizar os testes no menuComponent.

126
00:09:38,110 --> 00:09:40,580
Então vamos isolar o MenuComponent, e

127
00:09:40,580 --> 00:09:45,760
então realizar testes unitários nesse componente específico.

128
00:09:45,760 --> 00:09:50,470
Agora, este é o lugar onde os utilitários de teste angular

129
00:09:50,470 --> 00:09:54,900
que vêm com suporte usando TestBed.

130
00:09:54,900 --> 00:09:58,890
O TestBed permite-me configurar o ambiente dentro do qual

131
00:09:58,890 --> 00:10:01,280
posso testar meu componente angular.

132
00:10:01,280 --> 00:10:04,935
Então aqui, você vê que estamos dizendo TestBed e

133
00:10:04,935 --> 00:10:11,049
, em seguida, chamando o método configure test module da classe TestBed aqui.

134
00:10:11,049 --> 00:10:14,233
E dentro deste módulo configure testing,

135
00:10:14,233 --> 00:10:19,406
você pode declarar um monte de coisas, e você vai me ver adicionando mais aqui.

136
00:10:19,406 --> 00:10:24,296
Isso age exatamente como a configuração do módulo NG

137
00:10:24,296 --> 00:10:27,714
que você faz para o nosso módulo at lá.

138
00:10:27,714 --> 00:10:30,950
Assim, todas as informações necessárias para

139
00:10:30,950 --> 00:10:35,375
configurar o MenuComponent serão declaradas aqui.

140
00:10:35,375 --> 00:10:40,022
Então, a parte do modelo NG que você viu no módulo do aplicativo,

141
00:10:40,022 --> 00:10:45,999
tipo semelhante de sintaxe pode ser usado aqui para declarar o suporte para

142
00:10:45,999 --> 00:10:49,690
testar o menuComponent aqui.

143
00:10:49,690 --> 00:10:55,849
E também depois disso, você verá esta função chamada para compileComponents.

144
00:10:55,849 --> 00:11:00,205
Então este método irá compilar o MenuComponent e

145
00:11:00,205 --> 00:11:03,427
torná-lo pronto para fazer o teste.

146
00:11:03,427 --> 00:11:08,852
Note também, que esta coisa toda, esta função aqui,

147
00:11:08,852 --> 00:11:14,250
está dentro de algo chamado assíncrono aqui.

148
00:11:14,250 --> 00:11:16,548
Agora, por que precisamos desse assíncrono?

149
00:11:16,548 --> 00:11:21,315
Agora, porque a preparação dos componentes usando este método

150
00:11:21,315 --> 00:11:25,711
CompileComponents leva algum tempo.

151
00:11:25,711 --> 00:11:30,643
E até que isso seja concluído, não podemos prosseguir com os testes.

152
00:11:30,643 --> 00:11:34,583
Então, usando o módulo assíncrono, estamos essencialmente especificando que

153
00:11:34,583 --> 00:11:39,432
eu vou esperar que toda essa coisa para completar antes de prosseguir.

154
00:11:39,432 --> 00:11:42,107
Assim, o módulo assíncrono como você vê,

155
00:11:42,107 --> 00:11:47,690
envolve uma função de teste dentro de uma zona de teste assíncrona.

156
00:11:47,690 --> 00:11:52,510
Então, o que isso significa é que este teste completará automaticamente

157
00:11:52,510 --> 00:11:56,830
quando todas as chamadas assíncronas dentro desta zona forem feitas.

158
00:11:56,830 --> 00:12:03,755
Então isso é o que o uso do assíncrono que temos aqui, faz.

159
00:12:03,755 --> 00:12:08,206
Então o que isso significa é que você pode usar essa função de sincronização,

160
00:12:08,206 --> 00:12:14,442
quer no antes de cada um ou no ele também, então dentro dele, nossa declaração.

161
00:12:14,442 --> 00:12:20,032
Então, quando você vê dentro do ele também, você verá que você pode usar o assíncrono.

162
00:12:20,032 --> 00:12:24,160
Então, no caso de você ter alguma operação aqui que feito de forma assíncrona.

163
00:12:24,160 --> 00:12:29,500
Então você precisa esperar que essas operações sejam concluídas para que o teste seja concluído.

164
00:12:29,500 --> 00:12:33,996
Assim, por exemplo, se você estiver chamando um serviço e esperar por

165
00:12:33,996 --> 00:12:37,070
o serviço para retornar o valor então.

166
00:12:37,070 --> 00:12:41,997
Tudo o que precisa ser concluído antes que você possa prosseguir.

167
00:12:41,997 --> 00:12:48,603
Então, esses são habilitados usando este assíncrono, para cercar esta função aqui.

168
00:12:48,603 --> 00:12:53,726
Agora, além disso, o segundo antesEach, agora nós separamos

169
00:12:53,726 --> 00:12:59,592
isso em dois separados antesEach aqui, porque queremos que isso seja concluído.

170
00:12:59,592 --> 00:13:04,592
E este CompileComponents vai levar uma certa quantidade de tempo,

171
00:13:04,592 --> 00:13:09,000
especialmente se seu componente estiver usando um modelo externo,

172
00:13:09,000 --> 00:13:11,570
como fazemos em nosso menuComponent.

173
00:13:11,570 --> 00:13:16,850
Então, requer algum tempo para que o modelo externo se prepare para

174
00:13:16,850 --> 00:13:19,430
meu teste para prosseguir.

175
00:13:19,430 --> 00:13:22,210
Então, precisamos esperar que essa coisa toda termine.

176
00:13:22,210 --> 00:13:25,634
Então é por isso que depois que isso está completo,

177
00:13:25,634 --> 00:13:30,449
então vamos chegar à segunda parte onde estamos indo para

178
00:13:30,449 --> 00:13:35,710
obter algumas referências a alguns valores do leito de teste.

179
00:13:35,710 --> 00:13:40,752
Agora, o que é essa função antesEach que você está fazendo aqui?

180
00:13:40,752 --> 00:13:45,718
O que o BeforeEach significa é que o que quer que você declare aqui dentro,

181
00:13:45,718 --> 00:13:49,313
essa função será executada antesEach teste,

182
00:13:49,313 --> 00:13:53,012
que você vai especificar mais tarde em usá-la.

183
00:13:53,012 --> 00:13:57,734
Então, usando este BeforeEach, você pode configurar a configuração

184
00:13:57,734 --> 00:14:02,253
inicial para o seu teste para prosseguir.

185
00:14:02,253 --> 00:14:05,923
Então, o que significa que aqui, estamos configurando nosso TestBed,

186
00:14:05,923 --> 00:14:10,330
preparando nosso componente de menu e, em seguida, configurando algumas coisas para

187
00:14:10,330 --> 00:14:14,752
nosso componente de menu, antes de prosseguir para realizar o teste.

188
00:14:14,752 --> 00:14:19,292
Então, para cada um dos testes que você vai especificar usando um aqui,

189
00:14:19,292 --> 00:14:23,428
estes antes de cada o que você especificar neste antes de cada,

190
00:14:23,428 --> 00:14:26,692
será executado antes do teste ser conduzido.

191
00:14:26,692 --> 00:14:30,008
Então aqui, como você pode ver, estou preparando o TestBed.

192
00:14:30,008 --> 00:14:34,980
Então, depois, eu estou recebendo acesso ao dispositivo.

193
00:14:34,980 --> 00:14:39,143
Então eu estou usando o TestBed, estou dizendo CreateComponent e MenuComponent.

194
00:14:39,143 --> 00:14:43,782
Então isso vai me retornar uma referência para o MenuComponent que

195
00:14:43,782 --> 00:14:47,215
estou criando dentro do meu script de teste aqui e

196
00:14:47,215 --> 00:14:52,130
então obter uma referência para isso, porque eu vou precisar de uma referência para

197
00:14:52,130 --> 00:14:57,178
que a fim de fazer algumas manipulações nesse componente lá.

198
00:14:57,178 --> 00:15:02,608
Além disso, a partir do fixture, estou recebendo um acesso à instância do componente

199
00:15:02,608 --> 00:15:07,324
que está sendo criada pelo meu componente fixture aqui.

200
00:15:07,324 --> 00:15:12,828
Então, como você pode ver, o componente fixture do tipo MenuComponent e

201
00:15:12,828 --> 00:15:18,799
, em seguida, chamando o ComponentInstance, dá-me acesso a esse componente de menu específico

202
00:15:18,799 --> 00:15:25,259
que criei dentro do TestBed para realizar os testes de unidade.

203
00:15:25,259 --> 00:15:30,004
Agora, depois disso chamamos isso de DetectChanges.

204
00:15:30,004 --> 00:15:35,482
Agora, o que isso significa é que isso irá prosseguir somente após todas as alterações

205
00:15:35,482 --> 00:15:40,254
serem concluídas, e então reconhecer que as alterações foram concluídas.

206
00:15:40,254 --> 00:15:45,686
Então isso acionará um ciclo de detecção de alterações para este componente.

207
00:15:45,686 --> 00:15:50,323
Então o que isso significa é que isso irá garantir que você tenha feito quaisquer alterações

208
00:15:50,323 --> 00:15:54,086
mais cedo, todas as alterações são detectadas e

209
00:15:54,086 --> 00:16:00,170
tudo está estabilizado antes que você possa prosseguir com seu teste.

210
00:16:00,170 --> 00:16:07,500
Agora, depois disso, vamos usar o nosso para configurar o nosso primeiro teste aqui.

211
00:16:07,500 --> 00:16:10,500
Qual é o primeiro teste que estamos fazendo aqui?

212
00:16:10,500 --> 00:16:11,520
O primeiro teste,

213
00:16:11,520 --> 00:16:15,670
o que vamos testar é certificar-se de que o componente foi criado.

214
00:16:15,670 --> 00:16:21,848
Então, dentro deste aqui, eu estou usando a sintaxe Jasmin e eu estou dizendo isso.

215
00:16:21,848 --> 00:16:27,035
E então aqui você pode dar uma descrição na forma de uma string

216
00:16:27,035 --> 00:16:31,760
para especificar o que este teste está realmente testando.

217
00:16:31,760 --> 00:16:33,640
Então, o que estamos dizendo é,

218
00:16:33,640 --> 00:16:37,540
estamos testando para ver se o componente foi criado ou não.

219
00:16:37,540 --> 00:16:40,810
Então, para fazer isso, eu estou dizendo que ele deve criar o significado que,

220
00:16:40,810 --> 00:16:44,610
esta configuração aqui deve ter criado o componente corretamente.

221
00:16:44,610 --> 00:16:49,350
Então é por isso que aqui dentro, eu estou usando este método chamado expect.

222
00:16:49,350 --> 00:16:53,760
Então o método de espera aqui tem um valor aqui, e

223
00:16:53,760 --> 00:16:57,840
então você pode testar para ver se esse valor satisfaz alguma coisa.

224
00:16:57,840 --> 00:17:04,640
Então aqui estamos dizendo toBeTruthy, o que significa que este valor específico deve ser verdadeiro.

225
00:17:04,640 --> 00:17:09,950
Isso é o que é especificado por este método chamado aqui ToBeTruthy.

226
00:17:09,950 --> 00:17:15,010
Você também pode dizer toBefalsy, o que significa que deve ser avaliado como falso.

227
00:17:15,010 --> 00:17:15,873
Mas neste caso,

228
00:17:15,873 --> 00:17:19,510
estamos testando para garantir que o componente foi criado corretamente.

229
00:17:19,510 --> 00:17:24,000
Então é por isso que estamos dizendo esperar para ser Truthy aqui.

230
00:17:24,000 --> 00:17:28,877
Então este é um teste simples que estamos fazendo para garantir que nosso componente

231
00:17:28,877 --> 00:17:32,404
está sendo criado corretamente.

232
00:17:32,404 --> 00:17:37,713
Mas como percebemos quando eu executar este teste, ele não está funcionando corretamente.

233
00:17:37,713 --> 00:17:42,638
Vamos rapidamente olhar e ver qual é o problema dentro

234
00:17:42,638 --> 00:17:47,770
nossa criação de componentes na janela do console lá.

235
00:17:47,770 --> 00:17:51,390
Voltando para a janela do console, deixe-me apenas navegar para trás e

236
00:17:51,390 --> 00:17:54,840
ver onde está o problema.

237
00:17:54,840 --> 00:17:59,820
E estou começando a notar que isso está especificando que não parece

238
00:17:59,820 --> 00:18:04,480
estar reconhecendo algumas das coisas que meu componente está usando.

239
00:18:04,480 --> 00:18:09,065
Em particular, ele está dizendo que o MDSpinach

240
00:18:09,065 --> 00:18:13,191
é algo que ele não reconhece,

241
00:18:13,191 --> 00:18:17,330
o MDGetGridList e algumas outras coisas.

242
00:18:17,330 --> 00:18:21,289
Isso imediatamente me sugere que eu preciso fazer mais algumas configurações

243
00:18:21,289 --> 00:18:26,170
dentro do meu arquivo de teste antes que meu teste possa ser executado corretamente.

244
00:18:26,170 --> 00:18:30,994
Então, vamos voltar ao nosso arquivo de especificações e fazer algumas alterações nele.

245
00:18:30,994 --> 00:18:34,142
Voltando ao nosso arquivo de especificações,

246
00:18:34,142 --> 00:18:40,182
da nossa lembrança de como criamos o modelo.

247
00:18:40,182 --> 00:18:44,865
Sabemos que dentro do modelo tínhamos um link de roteador no template

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

249
00:18:45,605 --> 00:18:50,325
Então eu preciso de suporte para roteamento para reconhecer o link do roteador

250
00:18:50,325 --> 00:18:54,698
que usamos no arquivo MenuComponent.html.

251
00:18:54,698 --> 00:18:59,640
Então este é o lugar onde eu vou importar

252
00:18:59,640 --> 00:19:03,926
outro suporte de teste fornecido

253
00:19:03,926 --> 00:19:09,199
chamado como RouterTestingModule,

254
00:19:09,199 --> 00:19:18,615
que está disponível a partir Angular/Router/biblioteca de testes aqui.

255
00:19:18,615 --> 00:19:21,625
Então, este módulo de teste de roteador me permitirá

256
00:19:21,625 --> 00:19:24,135
configurar alguns aspectos sobre o meu roteador.

257
00:19:24,135 --> 00:19:28,235
Veremos que a maneira como usamos isso é um pouco diferente do módulo de roteador

258
00:19:28,235 --> 00:19:30,195
que usamos em nossa aplicação.

259
00:19:30,195 --> 00:19:34,835
Então, vamos importar o módulo de teste de roteamento, também você nota

260
00:19:34,835 --> 00:19:39,640
que estamos usando algumas animações, e

261
00:19:39,640 --> 00:19:45,660
também usando o componente de material Angular dentro do nosso modelo.

262
00:19:45,660 --> 00:19:49,410
Então eu preciso importar

263
00:19:49,410 --> 00:19:57,079
o BrowserAnimationsModule para o meu arquivo de teste.

264
00:19:58,490 --> 00:20:05,070
Então isso vem do angular/plataforma/navegador.

265
00:20:05,070 --> 00:20:09,619
Agora você vai notar que precisamos fazer isso explicitamente aqui simplesmente porque,

266
00:20:10,700 --> 00:20:16,960
no aplicativo Angular real tudo isso estava no módulo do aplicativo,

267
00:20:16,960 --> 00:20:20,310
e assim que estava disponível para os componentes.

268
00:20:20,310 --> 00:20:24,340
Agora estamos testando esse componente, o MenuComponent isoladamente, então

269
00:20:24,340 --> 00:20:27,500
é por isso que ele não sabe sobre todas essas coisas então

270
00:20:27,500 --> 00:20:31,190
precisamos especificar explicitamente todas essas coisas aqui.

271
00:20:31,190 --> 00:20:38,569
Então eu vou importar isso da animação do navegador da plataforma IM aqui.

272
00:20:38,569 --> 00:20:43,358
Então animações angular.platform.browser importando as animações do navegador

273
00:20:43,358 --> 00:20:44,220
módulo aqui.

274
00:20:44,220 --> 00:20:47,300
Deixe-me incluir o módulo de camada flexível, então

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

276
00:20:53,060 --> 00:20:58,525
Então, estes são necessários porque eu preciso deles no modelo,

277
00:20:58,525 --> 00:21:02,605
Eu também vou importar esse prato de,

278
00:21:06,495 --> 00:21:09,348
compartilhado/prato porque como você verá mais tarde,

279
00:21:09,348 --> 00:21:14,125
Eu preciso configurar, A,

280
00:21:20,002 --> 00:21:26,070
DishService porque meu menuComponent

281
00:21:26,070 --> 00:21:31,033
depende do DishService então

282
00:21:31,033 --> 00:21:35,170
eu preciso que também no lugar.

283
00:21:35,170 --> 00:21:39,170
Embora você vai ver que eu vou parar isso.

284
00:21:39,170 --> 00:21:44,860
Vou explicar isso em pouco tempo, e também preciso importar mais algumas coisas.

285
00:21:44,860 --> 00:21:47,410
Eu importarei pratos de,

286
00:21:48,530 --> 00:21:53,260
você se lembra que usamos essa constante chamada DATES

287
00:21:56,870 --> 00:22:01,640
que exportamos do arquivo compartilhado/dishes.ts.

288
00:22:01,640 --> 00:22:05,650
Vou precisar disso para configurar mais algumas coisas.

289
00:22:05,650 --> 00:22:09,702
Também vou importar o BaseURL.

290
00:22:11,343 --> 00:22:19,105
Que eu declarei no arquivo, compartilhado/base

291
00:22:21,057 --> 00:22:23,368
url.

292
00:22:23,368 --> 00:22:28,692
E também, Eu preciso importar

293
00:22:28,692 --> 00:22:33,294
o Observável de,

294
00:22:35,992 --> 00:22:41,319
rxjs, barra, Porque eu

295
00:22:41,319 --> 00:22:47,220
também estará usando Observable um pouco mais tarde, quando eu configurar algumas coisas.

296
00:22:47,220 --> 00:22:50,806
Então, agora, eu importei todas essas coisas.

297
00:22:50,806 --> 00:22:56,157
Entrando na configuração TestBed, você vê que esta parte

298
00:22:56,157 --> 00:23:02,813
é exatamente como o decorador do módulo do motor que temos no módulo do aplicativo.

299
00:23:02,813 --> 00:23:07,450
Então este é o lugar onde eu também posso usar as importações apenas

300
00:23:07,450 --> 00:23:11,000
como eu fiz com o módulo do motor.

301
00:23:11,000 --> 00:23:16,900
E dentro das importações, eu vou importar o módulo BrowserAnimation

302
00:23:16,900 --> 00:23:21,765
porque isso é algo que eu preciso, e

303
00:23:21,765 --> 00:23:25,090
então também importar módulo FlexLayout.

304
00:23:26,660 --> 00:23:32,690
E também o RouterTestingModule porque

305
00:23:32,690 --> 00:23:36,540
eu precisaria do RouterTestingModule para configurar algumas coisas.

306
00:23:36,540 --> 00:23:40,705
Agora, quando você usa o RouterTestingModule, você precisa usar esse método

307
00:23:40,705 --> 00:23:46,950
calledWithRoutes em vez de usar ForRoot como usamos com o módulo roteador aqui.

308
00:23:46,950 --> 00:23:52,400
Assim, dentro deste WithRoutes você pode especificar algumas rotas

309
00:23:52,400 --> 00:23:58,460
padrão que você precisa para sua aplicação específica aqui.

310
00:23:58,460 --> 00:24:03,737
Eu só vou configurar apenas um único caminho aqui,

311
00:24:03,737 --> 00:24:09,359
e isso é bom o suficiente para mim para testar este módulo aqui.

312
00:24:09,359 --> 00:24:14,497
Então eu só vou dizer caminho: 'menu',

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

314
00:24:19,021 --> 00:24:24,235
Como os modelos de MenuComponent estão usando determinados componentes de material,

315
00:24:24,235 --> 00:24:26,523
vamos ir em frente e importá-los.

316
00:24:26,523 --> 00:24:35,263
Então, vamos importar o MatgridListModule

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

318
00:24:45,034 --> 00:24:54,033
também o MatProgressSpinnerModule de

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

320
00:25:04,327 --> 00:25:09,123
E uma vez que os importamos, então vamos em frente e

321
00:25:09,123 --> 00:25:13,322
incluí-los nas importações abaixo.

322
00:25:13,322 --> 00:25:19,568
Então vamos adicionar o MatgridListModule e o MatProgressSpinnerModule.

323
00:25:19,568 --> 00:25:23,047
E isso é tudo o que eu preciso para

324
00:25:23,047 --> 00:25:28,997
essas importações em particular para ser configurado aqui.

325
00:25:28,997 --> 00:25:34,422
Assim, juntamente com as importações, temos as declarações onde eu tenho

326
00:25:34,422 --> 00:25:41,067
o menuComponent sendo usado aqui, eu também posso configurar os provedores aqui.

327
00:25:41,067 --> 00:25:43,295
Então eu preciso configurar os provedores aqui.

328
00:25:43,295 --> 00:25:47,998
Agora é aqui que estamos indo

329
00:25:47,998 --> 00:25:52,898
para criar alguns stubs aqui, então

330
00:25:52,898 --> 00:25:58,779
eu vou dizer fornecer: DishService.

331
00:25:58,779 --> 00:26:02,825
Agora, o DishService que vamos usar aqui não vai ser o verdadeiro

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

333
00:26:03,713 --> 00:26:08,422
Quando você está testando um componente, você não deseja usar um serviço real.

334
00:26:08,422 --> 00:26:12,750
Em vez disso, você corre o risco de eliminar o serviço, e

335
00:26:12,750 --> 00:26:19,262
em seguida, usar um stub DishService, que eu vou chamar como DishServiceStub.

336
00:26:19,262 --> 00:26:27,040
Então vou dizer, UseValue: DisishServiceStub.

337
00:26:27,040 --> 00:26:32,018
Então esta seria uma função stub que eu usarei na ordem

338
00:26:32,018 --> 00:26:34,904
para marcar o DishService aqui.

339
00:26:34,904 --> 00:26:38,272
Então esse é um que eu vou fazer uso.

340
00:26:38,272 --> 00:26:42,776
E também o segundo que eu estou

341
00:26:42,776 --> 00:26:47,455
indo fazer uso é BaseURL,

342
00:26:47,455 --> 00:26:54,040
que eu vou usar o valor como o BaseURL

343
00:26:54,040 --> 00:26:59,951
que já importamos anteriormente.

344
00:26:59,951 --> 00:27:06,280
Então, agora, com isso, eu realmente configurei meu módulo de teste,

345
00:27:06,280 --> 00:27:11,644
então observe que a maneira que especificamos isso é exatamente como a maneira

346
00:27:11,644 --> 00:27:17,160
especificamos o decorador do módulo NG para o nosso módulo de aplicativo.

347
00:27:17,160 --> 00:27:22,250
E aqui, estamos apenas configurando aqueles que são exigidos pelo MenuComponent, então

348
00:27:22,250 --> 00:27:27,890
Eu não tenho os outros que usamos no próprio módulo do aplicativo.

349
00:27:27,890 --> 00:27:32,220
Então é assim que vamos configurar o módulo de teste.

350
00:27:32,220 --> 00:27:36,600
Agora, a única coisa que falta é este DishServiceStub.

351
00:27:36,600 --> 00:27:41,718
Então o que eu vou fazer é

352
00:27:41,718 --> 00:27:47,283
implementar uma função aqui e

353
00:27:47,283 --> 00:27:53,072
chamar que deixe DishServiceStub

354
00:27:53,072 --> 00:27:59,973
ser um simples objeto JavaScript aqui,

355
00:27:59,973 --> 00:28:05,537
que eu vou deixá-lo agir em

356
00:28:05,537 --> 00:28:10,679
lugar do serviço real.

357
00:28:10,679 --> 00:28:13,067
Nós podemos stub fora serviços como este como visto aqui.

358
00:28:13,067 --> 00:28:17,807
Então aqui dentro, eu estou indo apenas para

359
00:28:17,807 --> 00:28:21,846
fornecer uma função simples,

360
00:28:21,846 --> 00:28:26,412
a função GetDish aqui,

361
00:28:26,412 --> 00:28:33,803
que vai retornar Observável do tipo de matriz Dish.

362
00:28:33,803 --> 00:28:38,133
Então é exatamente assim que o valor de retorno foi configurado lá.

363
00:28:38,133 --> 00:28:42,776
E eu vou devolver

364
00:28:42,776 --> 00:28:48,819
um observável de pratos aqui.

365
00:28:48,819 --> 00:28:51,692
Então, usando esta função stub aqui,

366
00:28:51,692 --> 00:28:56,349
o que eu estou fazendo é eu estou estupindo o DishService, e

367
00:28:56,349 --> 00:29:00,906
então configurando-o com este método que eu preciso para

368
00:29:00,906 --> 00:29:06,158
meu cache, dizendo getDishDishService, e quando esse método é chamado,

369
00:29:06,158 --> 00:29:09,355
eu vou apenas retornar esse valor.

370
00:29:09,355 --> 00:29:11,334
A constante de pratos, aqui.

371
00:29:11,334 --> 00:29:16,740
Então, desta forma, agora você pode ver que como eu estou controlando o que está sendo

372
00:29:16,740 --> 00:29:23,449
fornecido para o componente a partir de um stub DishService que eu acabei de criar aqui.

373
00:29:23,449 --> 00:29:27,333
Então é assim que você criará stubs para o seu DishService.

374
00:29:27,333 --> 00:29:30,570
A outra abordagem que podemos usar para

375
00:29:30,570 --> 00:29:35,910
casos em que estamos usando serviços é chamado como usando o espião.

376
00:29:37,300 --> 00:29:42,840
Jasmine suporta algo chamado Spy, que nos permite espionar chamadas de função,

377
00:29:42,840 --> 00:29:47,040
e, em seguida, capturar as chamadas de função e, em seguida, responder a essas chamadas de função.

378
00:29:47,040 --> 00:29:52,981
Então essa é outra maneira de usar um serviço falso no lugar do serviço real.

379
00:29:52,981 --> 00:29:59,778
Então, agora somos capazes de controlar o que está sendo fornecido ao nosso componente de menu.

380
00:29:59,778 --> 00:30:04,410
Então, após essas modificações, então estamos

381
00:30:04,410 --> 00:30:09,424
indo para ir para baixo em nosso antes de cada método aqui.

382
00:30:09,424 --> 00:30:14,172
Após o assíncrono, o que eu vou fazer

383
00:30:14,172 --> 00:30:19,085
é eu vou obter o DishService.

384
00:30:19,085 --> 00:30:24,187
Então você vê que eu estou usando o leito de teste e, em seguida, usando o método get

385
00:30:24,187 --> 00:30:31,415
do leito de teste para obter ahold do DishService que foi criado aqui,

386
00:30:31,415 --> 00:30:37,819
a partir deste stub particular que declaramos aqui nos provedores.

387
00:30:39,520 --> 00:30:43,140
Então isso me dá uma referência ao DishService para

388
00:30:43,140 --> 00:30:47,870
que eu posso chamar os métodos do DishService onde eu precisar aqui.

389
00:30:47,870 --> 00:30:52,453
Então, depois de fazer essas alterações, vamos salvar as alterações e

390
00:30:52,453 --> 00:30:57,679
em seguida, ver como nosso Angular CLI irá executar este teste após essas alterações,

391
00:30:57,679 --> 00:31:02,369
e se nosso teste será bem-sucedido neste ponto ou não.

392
00:31:02,369 --> 00:31:04,462
Então vamos salvar as alterações.

393
00:31:04,462 --> 00:31:09,412
No momento em que você salvar as alterações, você notará que seu teste NG

394
00:31:09,412 --> 00:31:13,060
começará a executar novamente nosso teste.

395
00:31:13,060 --> 00:31:16,310
Então ele irá compilar o aplicativo e, em seguida, executar novamente o teste.

396
00:31:16,310 --> 00:31:21,450
E voila, nosso teste passou com sucesso depois de

397
00:31:22,540 --> 00:31:27,574
fazer as alterações em nosso arquivo component.spec.ts.

398
00:31:27,574 --> 00:31:33,270
Então, nosso primeiro teste, o que significa que agora somos capazes de criar um componente de menu

399
00:31:33,270 --> 00:31:37,950
do nosso arquivo component.spec.ts lá.

400
00:31:37,950 --> 00:31:40,990
Portanto, nossa configuração de teste está funcionando corretamente.

401
00:31:40,990 --> 00:31:48,460
Agora eu posso entrar e fazer testes mais intensos dentro do meu componente de teste.

402
00:31:48,460 --> 00:31:53,790
Voltando para esse arquivo component.spec do menu, deixe-me adicionar outro teste.

403
00:31:53,790 --> 00:32:00,420
Agora você vê que porque eu agora tenho um serviço estabelecido aqui

404
00:32:00,420 --> 00:32:07,292
que está devolvendo este valor PRASIOS eu posso então agora fazer uso do meu DishService,

405
00:32:07,292 --> 00:32:11,290
para o qual eu tenho a referência aqui.

406
00:32:11,290 --> 00:32:15,934
Inside foi antes de cada, e, em seguida, chamar o método getDistes e

407
00:32:15,934 --> 00:32:18,830
então eu vou ser capaz de obter o valor.

408
00:32:18,830 --> 00:32:23,800
E isso estará disponível dentro do meu componente de menu que acabei de criar.

409
00:32:23,800 --> 00:32:28,615
Então meu menuComponent agora deve ter acesso à constante de pratos que

410
00:32:28,615 --> 00:32:32,856
foi fornecido de volta a ele através desta parada de serviço.

411
00:32:32,856 --> 00:32:37,608
Então agora eu posso testar para ver se a variável de pratos dentro do meu

412
00:32:37,608 --> 00:32:43,642
menuComponent está realmente recebendo os valores corretamente ou não.

413
00:32:43,642 --> 00:32:46,982
Então, entrando, deixe-me criar outro teste aqui.

414
00:32:46,982 --> 00:32:52,413
Então eu vou criar um teste aqui, Com o it,

415
00:32:52,413 --> 00:32:57,228
como você viu anteriormente, assim como o anterior.

416
00:32:57,228 --> 00:33:03,447
Este segundo teste eu vou chamar isso como ele e

417
00:33:03,447 --> 00:33:09,460
pratos, Itens devem ser 4,

418
00:33:09,460 --> 00:33:14,605
porque os pratos constantes que declaramos em

419
00:33:14,605 --> 00:33:21,562
o arquivo compartilhado.pratos tem quatro pratos na constante lá.

420
00:33:21,562 --> 00:33:26,232
Então, quando minha variável de pratos dentro do meu menuComponent ou

421
00:33:26,232 --> 00:33:31,018
ts arquivo é inicializado chamando o dishservice.

422
00:33:31,018 --> 00:33:34,632
Devia ter recebido os quatro pratos e

423
00:33:34,632 --> 00:33:37,970
foi inicializado com os quatro pratos.

424
00:33:37,970 --> 00:33:43,182
Então eu vou realizar alguns testes em que pratos variável lá.

425
00:33:43,182 --> 00:33:46,492
Então, como faço para obter acesso à variável pratos aqui?

426
00:33:46,492 --> 00:33:50,431
Então eu diria que pratos itens devem ser 4, e

427
00:33:50,431 --> 00:33:54,171
então eu vou declarar uma função de seta aqui.

428
00:33:54,171 --> 00:33:59,453
E dentro desta função de seta eu vou especificar

429
00:33:59,453 --> 00:34:04,024
os vários testes que eu vou realizar.

430
00:34:04,024 --> 00:34:10,348
Então aqui eu vou agora dizer esperar (componente.,

431
00:34:10,348 --> 00:34:15,378
e observe que ele automaticamente me dá acesso

432
00:34:15,378 --> 00:34:22,290
a esta propriedade de pratos do menuComponent.

433
00:34:22,290 --> 00:34:27,400
Então eu posso dizer que component.pratos, e então eu posso testar

434
00:34:27,400 --> 00:34:34,053
para ver que o comprimento de que pratos matriz objeto JavaScript deve ser.

435
00:34:34,053 --> 00:34:38,367
Então é aqui que eu uso o método ToBe da Jasmine aqui.

436
00:34:38,367 --> 00:34:41,517
E então eu posso especificar o valor 4,

437
00:34:41,517 --> 00:34:46,347
porque eu estava fornecendo 4 pratos em meus pratos constante

438
00:34:46,347 --> 00:34:51,284
que eu declarei no arquivo shared.pratos lá.

439
00:34:51,284 --> 00:34:54,709
Então esse é o primeiro teste que eu vou realizar,

440
00:34:54,709 --> 00:34:56,867
isso deve se tornar verdade.

441
00:34:56,867 --> 00:35:01,096
Caso contrário, a configuração não funcionou corretamente, então

442
00:35:01,096 --> 00:35:05,120
Eu sei que meu código não está funcionando corretamente.

443
00:35:05,120 --> 00:35:09,891
Mas eu sei com certeza que este teste deve funcionar corretamente.

444
00:35:09,891 --> 00:35:11,547
Se você quiser ter certeza,

445
00:35:11,547 --> 00:35:16,011
vamos salvar as alterações e, em seguida, ir e ver o nosso teste em execução.

446
00:35:16,011 --> 00:35:18,084
Indo para aquele terminal,

447
00:35:18,084 --> 00:35:23,323
você vê que agora meu aplicativo está sendo recompilado e o teste é executado.

448
00:35:23,323 --> 00:35:27,941
E observe todos os verdes na janela do terminal.

449
00:35:27,941 --> 00:35:32,355
Ele diz executado 1 de 2 sucesso, executado 2 de 2 sucesso.

450
00:35:32,355 --> 00:35:36,021
O que significa que ambos os meus testes foram executados com sucesso.

451
00:35:36,021 --> 00:35:41,221
Se eu olhar para o meu navegador, para que você veja que o MenuComponent,

452
00:35:41,221 --> 00:35:44,031
ambos os testes são bem-sucedidos.

453
00:35:44,031 --> 00:35:46,189
Deixe-me criar mais alguns e

454
00:35:46,189 --> 00:35:51,994
adicioná-los a esse conjunto de segundo grupo de testes que estou criando lá.

455
00:35:51,994 --> 00:35:58,106
Indo para o arquivo menu_component_spec.ts, adicionarei mais um.

456
00:35:58,106 --> 00:36:05,535
Eu vou dizer esperar componente.,

457
00:36:05,535 --> 00:36:12,420
e eu vou dizer pratos [1].

458
00:36:12,420 --> 00:36:16,105
Lembre-se que o nome do primeiro prato era,

459
00:36:18,858 --> 00:36:22,552
Então é isso que eu vou testar, os pratos [1] .name.

460
00:36:22,552 --> 00:36:26,774
Então é assim que eu posso testar para ver se ele está recebendo os valores corretamente.

461
00:36:26,774 --> 00:36:28,431
Quais são todas as maneiras que posso testar?

462
00:36:28,431 --> 00:36:34,594
Se eu colocar um ponto lá, ele vai me dar uma sugestão de todas as possibilidades aqui.

463
00:36:34,594 --> 00:36:42,862
Então eu vou dizer, Eu também vou usar novamente o método ToBe aqui.

464
00:36:42,862 --> 00:36:45,623
E então o segundo nome do prato é,

465
00:36:51,916 --> 00:36:55,779
Só que lá, então esse é o segundo lançador que eu vou levar a cabo.

466
00:36:55,779 --> 00:36:59,819
Então, se meu código foi executado corretamente, então isso também deve passar.

467
00:36:59,819 --> 00:37:03,389
Da mesma forma, deixe-me colocar em mais um aqui.

468
00:37:03,389 --> 00:37:06,072
Então eu vou dizer esperar,

469
00:37:09,579 --> 00:37:16,457
component.Pratos e eu vou dizer 3.

470
00:37:16,457 --> 00:37:21,520
E aqui, a propriedade

471
00:37:21,520 --> 00:37:26,819
em destaque deve ser Falsy.

472
00:37:26,819 --> 00:37:33,572
Que você deve ser falso, não é verdade neste caso, então deixe-me adicionar mais um.

473
00:37:33,572 --> 00:37:35,748
Você pode começar a adicionar mais se quiser,

474
00:37:35,748 --> 00:37:38,405
brincar com ele até ficar satisfeito.

475
00:37:38,405 --> 00:37:40,936
Assim como essas adições. Deixe-me salvar as alterações que fiz

476
00:37:40,936 --> 00:37:44,292
aqui, vamos ver se este teste é executado corretamente.

477
00:37:44,292 --> 00:37:50,041
E voltando ao meu terminal, você vê que meu teste está rodando novamente.

478
00:37:50,041 --> 00:37:52,720
Você vê que ambos os testes foram bem sucedidos,

479
00:37:52,720 --> 00:37:55,551
agora eu vou fazer uma dessas coisas falhar.

480
00:37:55,551 --> 00:37:59,754
Então eu vou entrar e mudar isso para verdadeiro.

481
00:37:59,754 --> 00:38:03,950
Veja, essa é a diversão de brincar com código.

482
00:38:03,950 --> 00:38:08,111
Eu vou mudar isso para verdadeiro e eu sei que este teste vai falhar.

483
00:38:08,111 --> 00:38:10,186
Então vamos salvar as alterações.

484
00:38:10,186 --> 00:38:15,977
Olhando para o terminal, lá você vê que o teste falhou.

485
00:38:15,977 --> 00:38:23,603
Você vê todo este vermelho aqui, o que significa que o segundo teste não passou corretamente.

486
00:38:23,603 --> 00:38:30,750
E se você rolar para trás, você veria este teste em particular falhou,

487
00:38:30,750 --> 00:38:36,295
porque em algum lugar lá embaixo ele vai dizer que não aconteceu.

488
00:38:36,295 --> 00:38:42,119
Ok, veja esta declaração aqui diz que falso esperado para ser verdadeiro,

489
00:38:42,119 --> 00:38:44,378
então é por isso que ele falhou.

490
00:38:44,378 --> 00:38:47,978
Então não era suposto ser verdade, mas eu disse que deveria ser verdade, e

491
00:38:47,978 --> 00:38:51,393
obviamente o teste está errado, então é por isso que o teste falhou.

492
00:38:51,393 --> 00:38:55,865
Então é assim que você pode até testar para ver se o teste falha,

493
00:38:55,865 --> 00:38:59,086
se você pediu as coisas erradas também.

494
00:38:59,086 --> 00:39:04,107
Mas novamente, deixe-me voltar e corrigir isso mais uma vez.

495
00:39:04,107 --> 00:39:09,068
Então, voltando para o meu, File Eu vou alterá-los

496
00:39:09,068 --> 00:39:13,529
de volta para falsy, porque eu quero que este teste para executar corretamente.

497
00:39:13,529 --> 00:39:15,517
Agora não estamos satisfeitos ainda.

498
00:39:15,517 --> 00:39:20,117
Agora, neste teste particular eu estou apenas testando os pratos

499
00:39:20,117 --> 00:39:23,825
variável que está dentro do meu menuComponent.

500
00:39:23,825 --> 00:39:29,777
Como faço para brincar com o próprio modelo?

501
00:39:29,777 --> 00:39:35,454
Então é aqui que precisamos de mais ajuda da Angular.

502
00:39:35,454 --> 00:39:40,216
Para realizar alguns testes no modelo, eu vou entrar e

503
00:39:40,216 --> 00:39:42,972
puxar mais algumas importações aqui.

504
00:39:42,972 --> 00:39:49,896
Então, indo para o meu topo deste arquivo, menu_component_spec.tsfile.

505
00:39:49,896 --> 00:39:55,105
Eu vou importar, Um

506
00:39:55,105 --> 00:40:00,594
mais chamado por, que é um método.

507
00:40:00,594 --> 00:40:03,044
Você vai me ver usando isso em pouco tempo.

508
00:40:03,044 --> 00:40:10,855
Isso deve ser importado de, Angular,

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

510
00:40:18,863 --> 00:40:27,301
E também, eu vou importar mais um que é um elemento de depuração.

511
00:40:27,301 --> 00:40:32,009
O elemento de depuração me permite obter acesso ao DOM para

512
00:40:32,009 --> 00:40:37,040
que eu possa realizar testes nos elementos DOM diretamente.

513
00:40:37,040 --> 00:40:44,548
Então é de onde eu vou importar isso, o código Angular aqui, então esses dois.

514
00:40:44,548 --> 00:40:49,580
Então adicione o By e o DebugeLement às importações, e

515
00:40:49,580 --> 00:40:54,947
então, uma vez que você fizer isso, nós entraremos no código aqui.

516
00:40:54,947 --> 00:40:59,338
E então vamos adicionar em mais um teste onde vamos para o DOM e

517
00:40:59,338 --> 00:41:01,690
buscar um dos itens do doc.

518
00:41:01,690 --> 00:41:06,404
Então eu diria isso, então mais um teste aqui,

519
00:41:06,404 --> 00:41:09,889
o que esse teste vai fazer?

520
00:41:09,889 --> 00:41:14,970
Para este teste, vou especificar

521
00:41:14,970 --> 00:41:22,903
o teste como deve usar pratos no modelo.

522
00:41:22,903 --> 00:41:25,838
Eu estou apenas dizendo aleatoriamente algo aqui,

523
00:41:25,838 --> 00:41:29,804
porque eu só quero verificar para ver que a variável pratos,

524
00:41:29,804 --> 00:41:34,905
o que quer que esteja disponibilizando, está sendo usado no modelo corretamente.

525
00:41:34,905 --> 00:41:38,412
Então essa é a parte que eu estou configurando, e

526
00:41:38,412 --> 00:41:42,104
então a segunda parte é a função de seta, e

527
00:41:42,104 --> 00:41:47,760
dentro desta função de seta eu vou fornecer o código para o próximo teste.

528
00:41:47,760 --> 00:41:52,734
Então, dentro desta função de seta o que eu estou

529
00:41:52,734 --> 00:41:58,008
vai fazer é eu vou primeiro chamar fixture e

530
00:41:58,008 --> 00:42:00,880
, em seguida, detectar alterações.

531
00:42:00,880 --> 00:42:05,990
E depois disso eu vou dizer let de:,

532
00:42:12,226 --> 00:42:13,908
É uma DebugeLement.

533
00:42:13,908 --> 00:42:20,748
Através disso eu vou ter acesso ao DOM e

534
00:42:20,748 --> 00:42:26,566
então o elemento seria HTMLElement.

535
00:42:26,566 --> 00:42:33,243
Então eu quero ter acesso a um dos HTMLElements do meu DOM.

536
00:42:33,243 --> 00:42:35,369
Então, qual elemento eu quero?

537
00:42:35,369 --> 00:42:38,846
Então, para fazer isso, eu vou ter acesso ao,

538
00:42:41,533 --> 00:42:48,138
DebugeLement dizendo fixture e DebugeLement.

539
00:42:48,138 --> 00:42:54,933
Então isso me permite obter acesso a itens do meu DOM aqui para DebugeLement.

540
00:42:54,933 --> 00:43:02,220
E então eu posso consultar e, em seguida, escolher apenas aqueles que serão de interesse para mim.

541
00:43:02,220 --> 00:43:08,690
Então eu vou consultar e, em seguida, vou pedir usando o By.

542
00:43:08,690 --> 00:43:15,908
Então, observe onde estou usando o By que eu incluí importando.

543
00:43:15,908 --> 00:43:20,780
So By, o By suporta um monte de métricas pelas quais eu posso

544
00:43:20,780 --> 00:43:25,020
pedir para acessar elementos específicos no DOM.

545
00:43:25,020 --> 00:43:31,824
Então, como você pode ver, ele vai me dizer o que eu posso importar e

546
00:43:31,824 --> 00:43:36,846
então o .css me permite obter acesso

547
00:43:36,846 --> 00:43:43,018
para combinar elementos pelo seletor css dado.

548
00:43:43,018 --> 00:43:45,789
Então, qual é o seletor de css que eu vou usar?

549
00:43:45,789 --> 00:43:50,503
Eu sei que há um elemento h1, elemento html no DOM e

550
00:43:50,503 --> 00:43:55,750
que eu vou ter acesso ao primeiro elemento h1 do DOM.

551
00:43:55,750 --> 00:44:00,764
E um dos elementos h1 lá é aquele que

552
00:44:00,764 --> 00:44:05,670
vai mostrar o nome de cada prato lá.

553
00:44:05,670 --> 00:44:10,459
Olhe para trás e você vê que dentro da linha do tempo da grade usando um h1 e

554
00:44:10,459 --> 00:44:13,839
que h1 contém o nome do prato lá.

555
00:44:13,839 --> 00:44:16,723
Então eu vou pegar isso e

556
00:44:16,723 --> 00:44:21,198
então eu vou obter um elemento e então eu diria de,

557
00:44:21,198 --> 00:44:26,385
do elemento de depuração, e então eu diria NativeElement.

558
00:44:26,385 --> 00:44:31,572
E isso me dá acesso ao elemento especificamente no DOM

559
00:44:31,572 --> 00:44:37,873
que eu estou me referindo e eu selecionei usando esta instrução anteriormente.

560
00:44:37,873 --> 00:44:43,091
Então, quando eu consultar o DOM e, em seguida, dizer, me devolva todos

561
00:44:43,091 --> 00:44:48,964
aqueles que estão usando a tag h1 para o elemento HTML.

562
00:44:48,964 --> 00:44:54,077
E eu tenho acesso a isso, e eu posso consultar e

563
00:44:54,077 --> 00:44:58,349
dizer esperar (el.TextContent).

564
00:44:58,349 --> 00:45:02,869
Então eu estou procurando o conteúdo dentro deste h1 no meu template

565
00:45:02,869 --> 00:45:07,718
conteúdo fixo e, em seguida, eu vou dizer paraContain.

566
00:45:07,718 --> 00:45:12,596
Então este é outro método, toContain, este é um método Jasmine chamado toContain.

567
00:45:12,596 --> 00:45:18,352
Isto verifica se isso contém um valor específico,

568
00:45:18,352 --> 00:45:23,262
e, em seguida, vou verificar se DATES (0) .name.

569
00:45:23,262 --> 00:45:29,360
Então é o primeiro prato foi criado no DOM e adicionado ao DOM?

570
00:45:29,360 --> 00:45:33,981
Se meu modelo funcionar corretamente, então isso deve estar presente no DOM.

571
00:45:33,981 --> 00:45:38,626
Então isso é o que eu vou verificar para ver se o bloco de grade correspondente a

572
00:45:38,626 --> 00:45:42,658
o primeiro DISH foi criado e adicionado ao DOM ou não.

573
00:45:42,658 --> 00:45:47,521
Então eu digo pratos (0) .name, e digo para maiúsculas.

574
00:45:47,521 --> 00:45:52,395
Lembre-se de que eu usei o tubo em maiúsculas para exibir o nome

575
00:45:52,395 --> 00:45:56,647
do DISH, convertendo o nome do prato em

576
00:45:56,647 --> 00:46:01,450
todos os maiúsculas no bloco de grade no componente de menu.

577
00:46:01,450 --> 00:46:05,830
Então é isso que eu vou verificar, ok, então eu estou apenas verificando por

578
00:46:05,830 --> 00:46:07,200
apenas um deles.

579
00:46:07,200 --> 00:46:10,983
Você pode realizar muitos desses testes, você pode verificar por

580
00:46:10,983 --> 00:46:16,016
pratos (1) .name e, em seguida, pratos (2) .name e muito mais se quiser.

581
00:46:16,016 --> 00:46:21,683
Estou apenas ilustrando um exemplo de como você acessaria elementos do DOM e

582
00:46:21,683 --> 00:46:24,783
e verificaria o que eles contêm lá dentro.

583
00:46:24,783 --> 00:46:29,585
Então este é um teste que eu vou realizar aqui, então deixe-me salvar as alterações,

584
00:46:29,585 --> 00:46:32,930
e depois ver se o teste é executado corretamente.

585
00:46:32,930 --> 00:46:35,951
Vá para aquele terminal e quando o teste for executado,

586
00:46:35,951 --> 00:46:41,039
você vê que meu primeiro teste foi bem sucedido, o segundo teste foi bem sucedido,

587
00:46:41,039 --> 00:46:44,635
eo terceiro teste também foi bem sucedido, maravilhoso.

588
00:46:44,635 --> 00:46:48,374
Agora, deixe-me fazer o terceiro teste falhar.

589
00:46:48,374 --> 00:46:52,273
Indo para o arquivo menucomponentspec.ts,

590
00:46:52,273 --> 00:46:58,818
Vou remover isso em maiúsculas e, em seguida, realizar o mesmo teste.

591
00:46:58,818 --> 00:47:02,269
Você verá que este teste falhará, salve as alterações.

592
00:47:02,269 --> 00:47:06,941
E quando o teste for executado, você verá que o terceiro teste falhará.

593
00:47:06,941 --> 00:47:11,251
Porque eu estou fazendo com que ele falhe verificando a coisa errada lá e

594
00:47:11,251 --> 00:47:13,894
lá vai você, o terceiro teste falhou aqui.

595
00:47:13,894 --> 00:47:18,490
Então é assim que você pode verificar se certas coisas que

596
00:47:18,490 --> 00:47:22,471
deveriam estar lá estão corretamente ou não.

597
00:47:22,471 --> 00:47:28,360
Por que esse caso é, então você pode ver aqui, a razão pela qual este teste falhou.

598
00:47:28,360 --> 00:47:34,750
Ele está esperando que isso seja no DOM,

599
00:47:34,750 --> 00:47:40,670
mas em vez disso isso é o que está no DOM no elemento h1 no DOM.

600
00:47:40,670 --> 00:47:43,929
Então essa é a razão pela qual o teste falhou aqui.

601
00:47:43,929 --> 00:47:47,718
Então, novamente voltando deixe-me corrigir o erro e

602
00:47:47,718 --> 00:47:53,922
então, quando eu executar novamente o teste você deve agora ver que o teste passa com sucesso.

603
00:47:53,922 --> 00:47:58,757
Voltando para o terminal, você verá que quando este teste for executado agora, ele será

604
00:47:58,757 --> 00:47:59,875
executado corretamente.

605
00:48:03,610 --> 00:48:08,670
E lá vai você, todos os três testes são passados pela minha aplicação.

606
00:48:08,670 --> 00:48:13,970
Além disso, olhando para o navegador, você pode ver que os três testes

607
00:48:13,970 --> 00:48:19,770
foram executados com sucesso no arquivo de modelo de componentes de menu e

608
00:48:19,770 --> 00:48:22,571
também o próprio componente de menu.

609
00:48:22,571 --> 00:48:28,398
Agora, obviamente, este não é necessariamente o teste mais abrangente, mas

610
00:48:28,398 --> 00:48:32,407
Eu só queria dar-lhe um sabor de como você iria

611
00:48:32,407 --> 00:48:37,398
sobre a construção de testes dentro da sua aplicação Angular.

612
00:48:37,398 --> 00:48:42,025
Se você se empolgar, você pode entrar em todos os arquivos spec.ts que você tem e

613
00:48:42,025 --> 00:48:44,194
então escrever seu próprio teste para cada e

614
00:48:44,194 --> 00:48:49,580
cada um desses componentes usando o conhecimento que você ganhou aqui.

615
00:48:49,580 --> 00:48:55,150
Além disso, você pode ler mais sobre testes na documentação Angular e

616
00:48:55,150 --> 00:49:00,590
em seguida, aprender mais maneiras de realizar testes em seu aplicativo Angular.

617
00:49:00,590 --> 00:49:05,190
Testing é um campo por si só, então se eu precisar ensinar-lhe tudo sobre

618
00:49:05,190 --> 00:49:10,410
testes que virá um curso inteiro em si para Angular.

619
00:49:10,410 --> 00:49:14,500
E neste curso, eu só queria dar-lhe um sabor de como

620
00:49:14,500 --> 00:49:17,820
você vai realizar testes em sua aplicação Angular.

621
00:49:17,820 --> 00:49:21,585
E este é um exemplo de como podemos configurar e

622
00:49:21,585 --> 00:49:27,441
realizar um teste unitário em um dos componentes da nossa aplicação Angular.

623
00:49:27,441 --> 00:49:33,901
Este é um bom momento para você fazer um bom comentário com o teste de componentes de mensagem.

624
00:49:33,901 --> 00:49:37,750
[MÚSICA]