1
00:00:00,000 --> 00:00:07,245
Agora, temos uma compreensão rápida dos testes

2
00:00:07,245 --> 00:00:10,140
de ponta a ponta e qual o papel

3
00:00:10,140 --> 00:00:15,555
de ponta a ponta na estratégia geral para testes de aplicações angulares.

4
00:00:15,555 --> 00:00:18,929
Além disso, uma breve introdução ao transferidor.

5
00:00:18,929 --> 00:00:22,835
Vamos prosseguir com o próximo exercício onde poderíamos empregar

6
00:00:22,835 --> 00:00:26,825
transferidor e projetar nossos testes de ponta a ponta.

7
00:00:26,825 --> 00:00:30,960
É uma sorte que a CLI angular

8
00:00:30,960 --> 00:00:35,050
automaticamente configura tudo o que precisamos para realizar testes de ponta a ponta,

9
00:00:35,050 --> 00:00:37,935
como veremos quando prosseguirmos com o exercício.

10
00:00:37,935 --> 00:00:43,430
Então, é uma questão de implementar os vários testes e

11
00:00:43,430 --> 00:00:50,035
, em seguida, realizar o teste usando transferidor neste exercício.

12
00:00:50,035 --> 00:00:53,865
Indo para a nossa aplicação angular no Visual Studio,

13
00:00:53,865 --> 00:00:56,305
se você olhar para o pacote do nosso arquivo JSON,

14
00:00:56,305 --> 00:00:59,965
você verá que já encontramos

15
00:00:59,965 --> 00:01:05,640
a CLI angular configurou tudo o que precisamos para realizar os testes de ponta a ponta.

16
00:01:05,640 --> 00:01:07,295
Então, ao rolar para baixo,

17
00:01:07,295 --> 00:01:10,550
você veria que o transferidor já foi instalado no

18
00:01:10,550 --> 00:01:16,110
nosso computador dentro do projeto angular.

19
00:01:16,110 --> 00:01:23,420
Além disso, notamos que há uma pasta separada aqui

20
00:01:23,420 --> 00:01:26,780
chamada e2e que contém alguns arquivos

21
00:01:26,780 --> 00:01:30,350
que já foram configurados para a realização de teste de ponta a ponta.

22
00:01:30,350 --> 00:01:33,890
Agora, se você precisa realizar extensos testes de ponta a ponta,

23
00:01:33,890 --> 00:01:36,620
então é uma boa idéia criar

24
00:01:36,620 --> 00:01:41,985
um arquivo separado para cada conjunto de testes de ponta a ponta que você deseja realizar.

25
00:01:41,985 --> 00:01:43,785
Agora, neste exercício em particular,

26
00:01:43,785 --> 00:01:47,090
Eu estou apenas ilustrando para vocês como realizar testes de ponta a ponta.

27
00:01:47,090 --> 00:01:51,670
Então, eu vou ficar com o que já foi configurado pela CLI angular.

28
00:01:51,670 --> 00:01:55,710
Trabalharemos com os arquivos que temos disponíveis.

29
00:01:55,710 --> 00:02:01,405
Então, vamos dar uma olhada rápida nesses dois arquivos aqui, o app.e2e-spec.ts,

30
00:02:01,405 --> 00:02:09,070
e você verá que algum código já foi andaimes neste arquivo por angular.

31
00:02:09,070 --> 00:02:14,035
Além disso, este outro arquivo chamado app.po.ts,

32
00:02:14,035 --> 00:02:17,780
isso não é nada além de uma classe JavaScript padrão

33
00:02:17,780 --> 00:02:21,170
que foi configurada com alguns métodos aqui.

34
00:02:21,170 --> 00:02:24,380
Agora, o que vamos fazer é adicionar mais alguns métodos para

35
00:02:24,380 --> 00:02:31,375
esta classe JavaScript e também atualizar alguns desses métodos que são dados aqui.

36
00:02:31,375 --> 00:02:40,095
Vamos configurar nossos testes no arquivo app.e2e-spec.ts.

37
00:02:40,095 --> 00:02:41,860
Então, para prosseguir,

38
00:02:41,860 --> 00:02:44,875
vamos para o aplicativo.

39
00:02:44,875 --> 00:02:49,890
arquivo Po.ts e, em seguida, dentro deste arquivo, vamos atualizar isso.

40
00:02:49,890 --> 00:02:55,140
Então, aqui, você vê que temos dois métodos que já foram configurados aqui.

41
00:02:55,140 --> 00:03:01,160
Vou atualizar esses métodos para permitir que eles tomem um parâmetro aqui.

42
00:03:01,160 --> 00:03:05,250
Então, eu vou dizer, NavigateTo com um link,

43
00:03:05,250 --> 00:03:06,760
que é fornecido como uma string,

44
00:03:06,760 --> 00:03:10,970
e, em seguida, eu vou atualizar este navegador chegar a

45
00:03:10,970 --> 00:03:15,615
usar o link que é o parâmetro para este método.

46
00:03:15,615 --> 00:03:17,090
Então, o que isso faz?

47
00:03:17,090 --> 00:03:18,330
Então, como você pode ver,

48
00:03:18,330 --> 00:03:22,490
estamos fazendo uso da sintaxe transferidor aqui.

49
00:03:22,490 --> 00:03:26,450
Então, isso diz retorno navegador obter link.

50
00:03:26,450 --> 00:03:32,075
Então, esta chamada particular para este navegador obter método permitirá

51
00:03:32,075 --> 00:03:41,440
nosso aplicativo para navegar para este link particular que é fornecido como um parâmetro aqui.

52
00:03:41,440 --> 00:03:43,650
Então, antes desta atualização,

53
00:03:43,650 --> 00:03:47,200
você viu que o link fornecido aqui era barra,

54
00:03:47,200 --> 00:03:50,595
o que significa que a raiz da nossa aplicação angular.

55
00:03:50,595 --> 00:03:54,650
Agora, eu atualizei isso para tomar um parâmetro aqui.

56
00:03:54,650 --> 00:04:00,490
Da mesma forma, o segundo método que você vê é chamado getParagraphText.

57
00:04:00,490 --> 00:04:08,685
Agora, este método é usado para obter o conteúdo interno de um elemento HTML aqui.

58
00:04:08,685 --> 00:04:11,680
Então, para isso, também,

59
00:04:11,680 --> 00:04:14,770
Eu vou configurar um parâmetro chamado seletor,

60
00:04:14,770 --> 00:04:20,260
que é um seletor CSS que vou fornecer aqui.

61
00:04:20,260 --> 00:04:22,430
Então, você vê que aqui,

62
00:04:22,430 --> 00:04:28,775
Eu vou mudar isso para tomar o seletor como o parâmetro.

63
00:04:28,775 --> 00:04:32,885
Agora, a partir da experiência anterior com o teste de unidade,

64
00:04:32,885 --> 00:04:37,285
você vê o que por e.css significa.

65
00:04:37,285 --> 00:04:40,130
Esta é a mesma coisa que estamos usando aqui também.

66
00:04:40,130 --> 00:04:47,820
Este método aqui sendo usado agora é importado da biblioteca transferidor aqui.

67
00:04:47,820 --> 00:04:52,610
O método do elemento também é importado da biblioteca de transferidor.

68
00:04:52,610 --> 00:04:56,915
Então, este método de elemento permite que você obtenha acesso a um elemento HTML

69
00:04:56,915 --> 00:05:02,510
, fornecendo essa seleção para o elemento HTML como um parâmetro aqui.

70
00:05:02,510 --> 00:05:05,760
Então, você pode dizer por css, byID,

71
00:05:05,760 --> 00:05:11,855
e muitos outros métodos disponíveis para o por classe aqui.

72
00:05:11,855 --> 00:05:13,935
Em seguida, o método getText,

73
00:05:13,935 --> 00:05:19,580
obtém como vemos o texto interno visível deste elemento particular.

74
00:05:19,580 --> 00:05:22,985
Então, esta é uma maneira de recuperar informações de

75
00:05:22,985 --> 00:05:28,520
o elemento HTML particular dentro da janela do nosso navegador,

76
00:05:28,520 --> 00:05:33,780
e, em seguida, verificar se ele corresponde a um padrão que estamos especificando aqui.

77
00:05:33,780 --> 00:05:37,035
Então, com esta atualização para o app.po.ts,

78
00:05:37,035 --> 00:05:43,060
vamos passar para o arquivo app.e2e-spec.ts.

79
00:05:43,060 --> 00:05:44,755
Então, dentro deste arquivo,

80
00:05:44,755 --> 00:05:48,630
você notará que estamos usando a sintaxe Jasmine.

81
00:05:48,630 --> 00:05:54,730
Então, aqui, você me vê usando descrever e, em seguida, que diz deixar página AppPage.

82
00:05:54,730 --> 00:06:01,725
Então, aqui, a página é onde estamos criando esta nova classe chamada AppPage,

83
00:06:01,725 --> 00:06:08,330
que declaramos no arquivo app.po.ts como uma classe JavaScript aqui.

84
00:06:08,330 --> 00:06:13,540
Agora, esta é apenas uma maneira conveniente de configurar todas as coisas em um único local,

85
00:06:13,540 --> 00:06:18,950
e depois ser capaz de fazer uso delas no meu próprio código de teste.

86
00:06:18,950 --> 00:06:24,445
Então, aqui, eu estou declarando a página para se referir a esta AppPage,

87
00:06:24,445 --> 00:06:26,809
e assim que me permitirá acessar

88
00:06:26,809 --> 00:06:30,230
os métodos que eu construí nessa classe aqui.

89
00:06:30,230 --> 00:06:37,680
Então, o primeiro teste que eu vou fazer é navegar para

90
00:06:37,680 --> 00:06:42,140
a raiz da minha aplicação angular

91
00:06:42,140 --> 00:06:46,440
e, em seguida, verificar para ver se há um padrão específico nisso.

92
00:06:46,440 --> 00:06:51,375
Você vai notar que na minha página inicial,

93
00:06:51,375 --> 00:06:56,170
você terá a string

94
00:06:56,170 --> 00:07:03,550
chamada Ristorante Con Fusion

95
00:07:03,550 --> 00:07:06,480
dentro de um elemento H1 na minha página.

96
00:07:06,480 --> 00:07:14,370
Então, o que eu vou fazer é navegar para a raiz do meu elemento HTML.

97
00:07:14,370 --> 00:07:18,340
Então, lá, eu vou procurar por

98
00:07:18,340 --> 00:07:23,955
a rota do aplicativo e, em seguida, procurar a tag H1 dentro da rota do aplicativo.

99
00:07:23,955 --> 00:07:28,210
Então, isto deve ser igual a esta string em particular aqui.

100
00:07:28,210 --> 00:07:29,620
Então, eu vou apenas copiar

101
00:07:29,620 --> 00:07:34,530
a string Ristorante Con Fusion lá e, em seguida, fornecer isso como um parâmetro aqui.

102
00:07:34,530 --> 00:07:37,000
Então, estou apenas atualizando o teste para verificar por

103
00:07:37,000 --> 00:07:41,585
exatamente o que temos dentro da nossa aplicação angular atualizada.

104
00:07:41,585 --> 00:07:43,200
Então, com esta configuração,

105
00:07:43,200 --> 00:07:48,860
agora vou realizar meu primeiro teste da minha aplicação angular.

106
00:07:48,860 --> 00:07:55,454
Então, vamos salvar todas as alterações e, em seguida, voltar para o nosso terminal.

107
00:07:55,454 --> 00:08:00,715
Dentro do terminal, na pasta do meu projeto,

108
00:08:00,715 --> 00:08:05,965
no prompt vou digitar ng e2e.

109
00:08:05,965 --> 00:08:11,010
Você notará que isso iniciará um navegador.

110
00:08:11,010 --> 00:08:19,445
No meu caso, ele iniciará uma janela do Chrome e, em seguida, realizará o teste nessa janela.

111
00:08:19,445 --> 00:08:21,710
Então, vamos realizar o primeiro teste.

112
00:08:21,710 --> 00:08:27,100
Você verá que quando o teste for executado depois de compilar minha aplicação angular,

113
00:08:27,100 --> 00:08:28,705
quando o teste for executado,

114
00:08:28,705 --> 00:08:33,725
então ele irá garantir que o teste seja bem-sucedido.

115
00:08:33,725 --> 00:08:36,295
Você vê que na parte de trás,

116
00:08:36,295 --> 00:08:42,055
meu navegador é aberto pelo ng e2e,

117
00:08:42,055 --> 00:08:46,880
e, em seguida, o teste foi realizado naquela janela do navegador.

118
00:08:46,880 --> 00:08:52,025
Diz que o teste foi realizado com sucesso aqui.

119
00:08:52,025 --> 00:08:54,390
Então, você percebe que, mesmo neste caso,

120
00:08:54,390 --> 00:08:56,485
precisa iniciar o navegador,

121
00:08:56,485 --> 00:08:59,310
carregar na minha aplicação angular no navegador,

122
00:08:59,310 --> 00:09:02,370
toda a aplicação angular no navegador.

123
00:09:02,370 --> 00:09:07,210
Em seguida, realizar o teste fora da minha aplicação angular.

124
00:09:07,210 --> 00:09:12,595
Neste ponto, certifique-se de que seu servidor,

125
00:09:12,595 --> 00:09:15,025
o servidor JSON está funcionando,

126
00:09:15,025 --> 00:09:16,510
caso contrário, seu teste falhará,

127
00:09:16,510 --> 00:09:18,915
porque quando o teste tiver sido realizado,

128
00:09:18,915 --> 00:09:22,140
ele tentará acessar o servidor JSON também.

129
00:09:22,140 --> 00:09:25,300
Então, isso é algo que você precisa garantir.

130
00:09:25,300 --> 00:09:28,035
A continuar com os nossos testes.

131
00:09:28,035 --> 00:09:29,915
Na segunda etapa,

132
00:09:29,915 --> 00:09:35,290
vamos adicionar mais alguns métodos a esta AppPage.Classe

133
00:09:35,290 --> 00:09:41,330
aqui. Então, eu usaria um novo método

134
00:09:41,330 --> 00:09:50,730
chamado getElement e, em seguida, tomando um parâmetro de um seletor.

135
00:09:51,160 --> 00:09:58,520
Este método permite-me obter acesso ao elemento,

136
00:09:58,520 --> 00:10:04,500
que é selecionado usando o mesmo pelo seletor CSS.

137
00:10:04,500 --> 00:10:06,545
Então, eu só vou copiar isso.

138
00:10:06,545 --> 00:10:09,785
Então, neste caso, em vez de apenas obter o texto,

139
00:10:09,785 --> 00:10:13,750
ele realmente retornará a referência ao elemento em si,

140
00:10:13,750 --> 00:10:17,290
e, em seguida, para que você possa adicionar de maneiras adicionais

141
00:10:17,290 --> 00:10:20,910
de acessar informações dentro desse elemento como exigimos.

142
00:10:20,910 --> 00:10:25,340
Neste caso, o get-text é usado apenas para buscar o texto específico.

143
00:10:25,340 --> 00:10:28,470
Podemos usar outros métodos em

144
00:10:28,470 --> 00:10:31,520
este elemento para buscar informações adicionais a partir desses elementos.

145
00:10:31,520 --> 00:10:37,220
Então, essa é a razão pela qual estou criando este método aqui.

146
00:10:37,220 --> 00:10:45,595
Da mesma forma, vou implementar outro método chamado obter todos os elementos.

147
00:10:45,595 --> 00:10:52,040
Agora, isso também usa um parâmetro chamado seletor como antes.

148
00:10:52,040 --> 00:10:56,115
O que o método getAll faz é selecionar

149
00:10:56,115 --> 00:11:01,910
todos os elementos e, em seguida, devolvê-los ao colarinho,

150
00:11:01,910 --> 00:11:03,720
de modo que, por exemplo,

151
00:11:03,720 --> 00:11:08,310
se sua página contém muitos elementos h1 em

152
00:11:08,310 --> 00:11:12,990
referência a todos eles será devolvido ao meu colar.

153
00:11:12,990 --> 00:11:16,790
Então, que lá, eu posso então decidir fazer

154
00:11:16,790 --> 00:11:20,940
uma chamada para um específico dentro desta lista de elementos.

155
00:11:20,940 --> 00:11:22,505
Então, para fazer isso,

156
00:11:22,505 --> 00:11:25,525
vamos usar o mesmo retorno, mas aqui,

157
00:11:25,525 --> 00:11:28,395
em vez de dizer seletor de elemento,

158
00:11:28,395 --> 00:11:33,165
deixe-me apenas copiar isso e, em seguida, temos outro método chamado

159
00:11:33,165 --> 00:11:37,340
element.all que nos permite

160
00:11:37,340 --> 00:11:41,750
acessar todos os elementos que correspondem a este seletor particular.

161
00:11:41,750 --> 00:11:45,790
O primeiro retornará o primeiro elemento que corresponde a esse seletor.

162
00:11:45,790 --> 00:11:55,805
Após essas atualizações, agora vamos mudar para o nosso arquivo de teste e adicionar um novo teste aqui.

163
00:11:55,805 --> 00:12:01,755
Então, aqui novamente, eu estou usando a sintaxe Jasmine para adicionar no novo teste aqui.

164
00:12:01,755 --> 00:12:06,980
Então, eu vou dizer isso e, em seguida, dar uma descrição para este teste.

165
00:12:06,980 --> 00:12:13,510
Vai dizer que deve navegar para cerca de

166
00:12:13,510 --> 00:12:22,645
nos página clicando no link.

167
00:12:22,645 --> 00:12:25,705
Agora, se você olhar para trás para o seu aplicativo Angular,

168
00:12:25,705 --> 00:12:28,530
você notaria que dentro do seu aplicativo Angular,

169
00:12:28,530 --> 00:12:36,735
você tem os links de navegação na parte superior da página.

170
00:12:36,735 --> 00:12:40,680
Então, o que vamos fazer neste teste é automaticamente

171
00:12:40,680 --> 00:12:45,500
ir e acessar um desses links de navegação e clicar neles.

172
00:12:45,500 --> 00:12:49,545
Agora, é claro, como você espera isso vai ser feito de forma programática,

173
00:12:49,545 --> 00:12:54,320
em vez de clicar manualmente no link.

174
00:12:54,320 --> 00:12:55,630
Então, para fazer isso,

175
00:12:55,630 --> 00:13:05,325
o que eu vou fazer é navegar para a raiz do meu aplicativo Angular e, em seguida,

176
00:13:05,325 --> 00:13:08,490
Eu vou acessar

177
00:13:15,040 --> 00:13:23,430
os links na minha barra de navegação no topo.

178
00:13:23,430 --> 00:13:27,850
Ao dizer página, getAllElements e

179
00:13:27,850 --> 00:13:32,815
então eu vou obter todos os elementos que têm a tag lá.

180
00:13:32,815 --> 00:13:40,994
Agora, obviamente, você terá muitas dessas tags em nossa página, mas os quatro primeiros,

181
00:13:40,994 --> 00:13:44,950
são os quatro links em

182
00:13:44,950 --> 00:13:52,100
a barra de navegação no topo da nossa página lá no componente de cabeçalho.

183
00:13:52,100 --> 00:13:54,420
Então, obtendo acesso a esses

184
00:13:54,420 --> 00:14:00,710
uma nota agora que eu estou usando obter todos os elementos então eu vou obter um número de elementos.

185
00:14:00,710 --> 00:14:01,770
Neste caso particular,

186
00:14:01,770 --> 00:14:07,850
acaba por ser cerca de 16 tags diferentes que usarão naquela página lá.

187
00:14:07,850 --> 00:14:10,640
Então, eu vou ir e selecionar.

188
00:14:10,640 --> 00:14:15,800
Então, este é o lugar onde eu uso este método chamado get e, em seguida, eu posso especificar

189
00:14:15,800 --> 00:14:20,490
um índice para o elemento específico que eu quero.

190
00:14:20,490 --> 00:14:26,460
Então, Eu verifiquei se você olhar para o arquivo de modelo de componentes de cabeçalho,

191
00:14:26,460 --> 00:14:30,840
você vai notar que o segundo uma tag em

192
00:14:30,840 --> 00:14:38,950
página HTML do componente de cabeçalho está se referindo ao link sobre nós lá.

193
00:14:38,950 --> 00:14:42,905
Então, isso é o que eu estou recebendo acesso dizendo obter um.

194
00:14:42,905 --> 00:14:46,410
Zero, é claro, refere-se ao link inicial em

195
00:14:46,410 --> 00:14:51,155
o componente de cabeçalho onde criamos nossa barra de ferramentas no topo lá.

196
00:14:51,155 --> 00:14:55,745
Então, eu tenho acesso ao segundo, então este é o link sobre lá.

197
00:14:55,745 --> 00:14:59,100
Agora, uma vez que você se apossar deste link,

198
00:14:59,100 --> 00:15:03,030
há um método que transferidor suporta

199
00:15:03,030 --> 00:15:08,045
em um elemento com um link lá chamado de clique.

200
00:15:08,045 --> 00:15:11,335
Então, isso, como você vê programaticamente,

201
00:15:11,335 --> 00:15:17,160
faz com que um clique nesse elemento específico na janela do meu navegador lá.

202
00:15:17,160 --> 00:15:21,840
Então, programaticamente, estamos realizando o que você normalmente executaria

203
00:15:21,840 --> 00:15:27,160
manualmente acessando fisicamente esse link e clicando nele usando o mouse.

204
00:15:27,160 --> 00:15:29,790
Agora, uma vez que clicamos no link, obviamente,

205
00:15:29,790 --> 00:15:33,400
você vai navegar para a página Sobre nós.

206
00:15:33,400 --> 00:15:35,020
Agora, dentro da página Sobre nós,

207
00:15:35,020 --> 00:15:37,780
se você olhar para o modelo da página Sobre nós,

208
00:15:37,780 --> 00:15:45,105
você vai descobrir que há um elemento h3 que contém o nome dessa página.

209
00:15:45,105 --> 00:15:46,810
Dentro desse elemento h3,

210
00:15:46,810 --> 00:15:51,640
você verá um texto chamado Sobre o espaço Us lá.

211
00:15:51,640 --> 00:15:53,990
Então, isso é o que eu vou verificar agora.

212
00:15:53,990 --> 00:15:58,440
A razão pela qual eu vou verificar isso é para ter certeza de que eu realmente navegou para

213
00:15:58,440 --> 00:16:04,200
a página Sobre nós fazendo estas etapas em meu aplicativo Angular.

214
00:16:04,200 --> 00:16:07,685
Então, este é o lugar onde eu vou usar o esperado.

215
00:16:07,685 --> 00:16:14,375
Nós já vimos o uso de esperar e esperar página.

216
00:16:14,375 --> 00:16:18,990
GetParagraphText e eu vou obter o texto do parágrafo de

217
00:16:18,990 --> 00:16:25,365
h3 e isso eu espero ToBe.

218
00:16:25,365 --> 00:16:33,430
Observe o uso da sintaxe Jasmine aqui e isso deve ser Sobre Nós.

219
00:16:34,460 --> 00:16:42,895
Então, introduzindo este segundo teste em nosso arquivo de teste aqui,

220
00:16:42,895 --> 00:16:48,950
vamos salvar as alterações que fizemos e, em seguida, ir e executar este teste.

221
00:16:49,510 --> 00:16:52,915
Indo para o terminal.

222
00:16:52,915 --> 00:16:57,680
Novamente, deixe-me executar o teste dizendo ng e2e

223
00:16:57,680 --> 00:17:03,220
e você vai notar que isso irá novamente passar pelo mesmo conjunto de etapas,

224
00:17:03,220 --> 00:17:09,880
e, em seguida, realizar ambos os testes que agora eu tenho no arquivo de teste.

225
00:17:09,880 --> 00:17:15,110
É interessante assistir ao teste sendo realizado no navegador.

226
00:17:15,110 --> 00:17:17,390
Então, você vê que estamos na página inicial,

227
00:17:17,390 --> 00:17:22,595
você agora navega para a página Sobre e, em seguida, sucesso.

228
00:17:22,595 --> 00:17:25,840
Então, nós navegamos com sucesso de

229
00:17:25,840 --> 00:17:29,290
a página inicial para a página Sobre e, em seguida, verificamos que você tem

230
00:17:29,290 --> 00:17:31,450
navegou para a página Sobre, realizando

231
00:17:31,450 --> 00:17:34,250
o teste específico onde nós verificamos para ter certeza de que

232
00:17:34,250 --> 00:17:39,515
o Sobre nós está em uma tag h3 dentro da página Sobre nós lá.

233
00:17:39,515 --> 00:17:43,270
Então, este é mais um teste de ponta a ponta que podemos realizar,

234
00:17:43,270 --> 00:17:46,320
e você realmente viu o teste sendo realizado bem na frente

235
00:17:46,320 --> 00:17:49,855
de seus olhos sem sua intervenção manual.

236
00:17:49,855 --> 00:17:53,840
Espero que você esteja gostando de realizar esses testes de ponta a ponta.

237
00:17:53,840 --> 00:17:55,725
Vamos ficar um pouco mais ambiciosos.

238
00:17:55,725 --> 00:18:00,280
Agora, o que vamos fazer é navegar para um prato específico,

239
00:18:00,280 --> 00:18:04,615
e, em seguida, tentar inserir um comentário nesse prato.

240
00:18:04,615 --> 00:18:09,155
Agora, este é o lugar onde eu vou pegar a ajuda do suporte Transtractor,

241
00:18:09,155 --> 00:18:13,020
e você vai me ver usando mais alguns métodos de

242
00:18:13,020 --> 00:18:17,675
Transtractor para navegar para a página do prato,

243
00:18:17,675 --> 00:18:23,570
vamos navegar para o primeiro prato em nosso menu usando

244
00:18:23,570 --> 00:18:30,185
o link para a página de detalhes do prato com o parâmetro de aquele prato em particular,

245
00:18:30,185 --> 00:18:31,995
o ID do prato em particular.

246
00:18:31,995 --> 00:18:39,385
Em seguida, vamos identificar os elementos de entrada do formulário,

247
00:18:39,385 --> 00:18:42,990
e, em seguida, vamos digitar automaticamente as informações em

248
00:18:42,990 --> 00:18:47,425
esses elementos de entrada e, em seguida, tentar enviar o formulário e ver o que acontece.

249
00:18:47,425 --> 00:18:49,975
Então, para realizar este teste, novamente,

250
00:18:49,975 --> 00:18:52,830
entrar e usar a sintaxe Jasmine,

251
00:18:52,830 --> 00:18:59,595
Vou introduzir um aqui e então vou identificar o que este teste está tentando fazer.

252
00:18:59,595 --> 00:19:07,904
Eu diria, “Ele deve inserir um novo comentário para o primeiro

253
00:19:07,904 --> 00:19:15,470
prato” e função de seta

254
00:19:15,470 --> 00:19:20,450
e você vê que dentro desta função de seta,

255
00:19:20,450 --> 00:19:27,985
vamos fazer nossa primeira página navigateTo,

256
00:19:27,985 --> 00:19:35,660
vamos navegar para o dishdetail zero.

257
00:19:35,660 --> 00:19:39,235
Então, este é o primeiro prato em nosso menu.

258
00:19:39,235 --> 00:19:43,060
Agora, uma vez que navegarmos para a página dishdetail, diremos,

259
00:19:43,060 --> 00:19:52,030
“deixar NewAuthor é igual à página getElement.”

260
00:19:52,030 --> 00:19:56,860
Então, vamos encontrar esse elemento que é

261
00:19:56,860 --> 00:20:03,990
entrada e texto de texto aqui,

262
00:20:03,990 --> 00:20:10,010
então isso vai me ajudar a identificar esse elemento de entrada onde o nome do autor é

263
00:20:10,010 --> 00:20:17,115
digitado na forma que criamos em nossa página dishdetail.

264
00:20:17,115 --> 00:20:19,885
Se você está curioso,

265
00:20:19,885 --> 00:20:21,380
vá e dê uma olhada nesse formulário,

266
00:20:21,380 --> 00:20:23,645
e então você verá que há de fato

267
00:20:23,645 --> 00:20:27,730
esse elemento de entrada naquela página dishdetail lá.

268
00:20:27,730 --> 00:20:33,700
Então, acessando isso, eu vou digitar o nome do autor

269
00:20:33,700 --> 00:20:39,890
naquele campo de entrada lá.

270
00:20:39,890 --> 00:20:47,590
Então, é aqui que o método dos SendKeys que é suportado em nosso elemento vem em nosso auxílio,

271
00:20:47,590 --> 00:20:50,170
o método dos SendKeys suportado pelo Protractor.

272
00:20:50,170 --> 00:20:56,805
Então aqui, eu vou digitar o nome do autor como autor de teste.

273
00:20:56,805 --> 00:21:01,750
Então, no final dessas duas etapas,

274
00:21:01,750 --> 00:21:07,105
o autor do teste deve ser digitado no elemento de entrada no meu formulário.

275
00:21:07,105 --> 00:21:11,475
Agora, além disso, eu também preciso digitar o comentário para esse formulário.

276
00:21:11,475 --> 00:21:14,660
Nós também podemos configurar o valor da classificação,

277
00:21:14,660 --> 00:21:16,770
mas eu não vou fazer isso neste teste específico,

278
00:21:16,770 --> 00:21:21,530
Eu vou apenas digitar o valor do comentário usando uma abordagem semelhante.

279
00:21:21,530 --> 00:21:26,250
Então, eu vou dizer, “deixe NewComment”,

280
00:21:26,250 --> 00:21:29,650
novamente, vai obter página,

281
00:21:29,660 --> 00:21:34,690
GetElement, e então é aqui que eu procuro

282
00:21:34,690 --> 00:21:42,080
o textarea e NewComment,

283
00:21:43,170 --> 00:21:52,340
SendKeys e digite “Teste Comentário”.

284
00:21:52,650 --> 00:21:59,990
Então, isso irá preencher as palavras Teste Comentário na área de texto

285
00:21:59,990 --> 00:22:02,380
que contém os comentários que

286
00:22:02,380 --> 00:22:07,130
o autor deve enviar para esse prato em particular.

287
00:22:07,130 --> 00:22:12,530
Depois disso, vamos encontrar o SubmitButton.

288
00:22:12,990 --> 00:22:15,430
Então, para fazer isso, vamos dizer

289
00:22:15,430 --> 00:22:33,050
page.getElement botão tipo enviar,

290
00:22:33,570 --> 00:22:44,390
e, em seguida, uma vez que se apossar do botão que apenas dizer, NewSubmitButton.Click.

291
00:22:44,390 --> 00:22:46,330
Então, uma vez que clicamos no botão,

292
00:22:46,330 --> 00:22:48,610
o comentário irá reenviá-lo.

293
00:22:48,610 --> 00:22:55,930
Agora, vou usar outro método que o Transtractor suporta.

294
00:22:55,930 --> 00:23:00,200
Eu vou pausar o teste nesse ponto.

295
00:23:00,200 --> 00:23:06,170
Isso me permitirá passar no teste e, em seguida, realizar o teste ou a planta,

296
00:23:06,170 --> 00:23:09,160
assim diz, navegador é indefinido,

297
00:23:09,160 --> 00:23:14,210
então eu preciso voltar aqui e, em seguida, importar

298
00:23:18,930 --> 00:23:32,155
navegador da biblioteca Transtractor lá,

299
00:23:32,155 --> 00:23:35,840
e então você vê que a linha vermelha rabiscada desapareceu,

300
00:23:35,840 --> 00:23:39,175
então meu teste deve todos ser configurados corretamente lá.

301
00:23:39,175 --> 00:23:40,935
Então, deixe-me salvar as alterações,

302
00:23:40,935 --> 00:23:44,320
vamos executar este terceiro teste também,

303
00:23:44,320 --> 00:23:48,505
juntamente com os dois testes restantes que já introduzimos.

304
00:23:48,505 --> 00:23:54,375
Indo para o navegador, deixe-me novamente executar o teste de ponta a ponta,

305
00:23:54,375 --> 00:23:57,765
quando o navegador abre, lá vamos nós,

306
00:23:57,765 --> 00:24:02,810
o primeiro teste foi realizado e que deve ter sucesso,

307
00:24:02,810 --> 00:24:08,780
o segundo teste foi realizado e o terceiro teste onde navegamos detalhe prato,

308
00:24:08,780 --> 00:24:18,145
e você vê que o comentário do teste foi submetido corretamente pelo nosso teste.

309
00:24:18,145 --> 00:24:21,195
Então, com isso, completamos este exercício.

310
00:24:21,195 --> 00:24:27,730
Neste exercício, você realizou três testes diferentes usando o suporte de

311
00:24:27,730 --> 00:24:35,430
Transtractor e descobriu que nossa aplicação passa todos esses três testes de ponta a ponta.

312
00:24:35,430 --> 00:24:39,075
Este é um bom momento para você salvar as alterações em

313
00:24:39,075 --> 00:24:46,420
seu repositório Git usando o teste de ponta a ponta da mensagem.