Agora, temos uma compreensão rápida dos testes
de ponta a ponta e qual o papel
de ponta a ponta na estratégia geral para testes de aplicações angulares.
Além disso, uma breve introdução ao transferidor.
Vamos prosseguir com o próximo exercício onde poderíamos empregar
transferidor e projetar nossos testes de ponta a ponta.
É uma sorte que a CLI angular
automaticamente configura tudo o que precisamos para realizar testes de ponta a ponta,
como veremos quando prosseguirmos com o exercício.
Então, é uma questão de implementar os vários testes e
, em seguida, realizar o teste usando transferidor neste exercício.
Indo para a nossa aplicação angular no Visual Studio,
se você olhar para o pacote do nosso arquivo JSON,
você verá que já encontramos
a CLI angular configurou tudo o que precisamos para realizar os testes de ponta a ponta.
Então, ao rolar para baixo,
você veria que o transferidor já foi instalado no
nosso computador dentro do projeto angular.
Além disso, notamos que há uma pasta separada aqui
chamada e2e que contém alguns arquivos
que já foram configurados para a realização de teste de ponta a ponta.
Agora, se você precisa realizar extensos testes de ponta a ponta,
então é uma boa idéia criar
um arquivo separado para cada conjunto de testes de ponta a ponta que você deseja realizar.
Agora, neste exercício em particular,
Eu estou apenas ilustrando para vocês como realizar testes de ponta a ponta.
Então, eu vou ficar com o que já foi configurado pela CLI angular.
Trabalharemos com os arquivos que temos disponíveis.
Então, vamos dar uma olhada rápida nesses dois arquivos aqui, o app.e2e-spec.ts,
e você verá que algum código já foi andaimes neste arquivo por angular.
Além disso, este outro arquivo chamado app.po.ts,
isso não é nada além de uma classe JavaScript padrão
que foi configurada com alguns métodos aqui.
Agora, o que vamos fazer é adicionar mais alguns métodos para
esta classe JavaScript e também atualizar alguns desses métodos que são dados aqui.
Vamos configurar nossos testes no arquivo app.e2e-spec.ts.
Então, para prosseguir,
vamos para o aplicativo.
arquivo Po.ts e, em seguida, dentro deste arquivo, vamos atualizar isso.
Então, aqui, você vê que temos dois métodos que já foram configurados aqui.
Vou atualizar esses métodos para permitir que eles tomem um parâmetro aqui.
Então, eu vou dizer, NavigateTo com um link,
que é fornecido como uma string,
e, em seguida, eu vou atualizar este navegador chegar a
usar o link que é o parâmetro para este método.
Então, o que isso faz?
Então, como você pode ver,
estamos fazendo uso da sintaxe transferidor aqui.
Então, isso diz retorno navegador obter link.
Então, esta chamada particular para este navegador obter método permitirá
nosso aplicativo para navegar para este link particular que é fornecido como um parâmetro aqui.
Então, antes desta atualização,
você viu que o link fornecido aqui era barra,
o que significa que a raiz da nossa aplicação angular.
Agora, eu atualizei isso para tomar um parâmetro aqui.
Da mesma forma, o segundo método que você vê é chamado getParagraphText.
Agora, este método é usado para obter o conteúdo interno de um elemento HTML aqui.
Então, para isso, também,
Eu vou configurar um parâmetro chamado seletor,
que é um seletor CSS que vou fornecer aqui.
Então, você vê que aqui,
Eu vou mudar isso para tomar o seletor como o parâmetro.
Agora, a partir da experiência anterior com o teste de unidade,
você vê o que por e.css significa.
Esta é a mesma coisa que estamos usando aqui também.
Este método aqui sendo usado agora é importado da biblioteca transferidor aqui.
O método do elemento também é importado da biblioteca de transferidor.
Então, este método de elemento permite que você obtenha acesso a um elemento HTML
, fornecendo essa seleção para o elemento HTML como um parâmetro aqui.
Então, você pode dizer por css, byID,
e muitos outros métodos disponíveis para o por classe aqui.
Em seguida, o método getText,
obtém como vemos o texto interno visível deste elemento particular.
Então, esta é uma maneira de recuperar informações de
o elemento HTML particular dentro da janela do nosso navegador,
e, em seguida, verificar se ele corresponde a um padrão que estamos especificando aqui.
Então, com esta atualização para o app.po.ts,
vamos passar para o arquivo app.e2e-spec.ts.
Então, dentro deste arquivo,
você notará que estamos usando a sintaxe Jasmine.
Então, aqui, você me vê usando descrever e, em seguida, que diz deixar página AppPage.
Então, aqui, a página é onde estamos criando esta nova classe chamada AppPage,
que declaramos no arquivo app.po.ts como uma classe JavaScript aqui.
Agora, esta é apenas uma maneira conveniente de configurar todas as coisas em um único local,
e depois ser capaz de fazer uso delas no meu próprio código de teste.
Então, aqui, eu estou declarando a página para se referir a esta AppPage,
e assim que me permitirá acessar
os métodos que eu construí nessa classe aqui.
Então, o primeiro teste que eu vou fazer é navegar para
a raiz da minha aplicação angular
e, em seguida, verificar para ver se há um padrão específico nisso.
Você vai notar que na minha página inicial,
você terá a string
chamada Ristorante Con Fusion
dentro de um elemento H1 na minha página.
Então, o que eu vou fazer é navegar para a raiz do meu elemento HTML.
Então, lá, eu vou procurar por
a rota do aplicativo e, em seguida, procurar a tag H1 dentro da rota do aplicativo.
Então, isto deve ser igual a esta string em particular aqui.
Então, eu vou apenas copiar
a string Ristorante Con Fusion lá e, em seguida, fornecer isso como um parâmetro aqui.
Então, estou apenas atualizando o teste para verificar por
exatamente o que temos dentro da nossa aplicação angular atualizada.
Então, com esta configuração,
agora vou realizar meu primeiro teste da minha aplicação angular.
Então, vamos salvar todas as alterações e, em seguida, voltar para o nosso terminal.
Dentro do terminal, na pasta do meu projeto,
no prompt vou digitar ng e2e.
Você notará que isso iniciará um navegador.
No meu caso, ele iniciará uma janela do Chrome e, em seguida, realizará o teste nessa janela.
Então, vamos realizar o primeiro teste.
Você verá que quando o teste for executado depois de compilar minha aplicação angular,
quando o teste for executado,
então ele irá garantir que o teste seja bem-sucedido.
Você vê que na parte de trás,
meu navegador é aberto pelo ng e2e,
e, em seguida, o teste foi realizado naquela janela do navegador.
Diz que o teste foi realizado com sucesso aqui.
Então, você percebe que, mesmo neste caso,
precisa iniciar o navegador,
carregar na minha aplicação angular no navegador,
toda a aplicação angular no navegador.
Em seguida, realizar o teste fora da minha aplicação angular.
Neste ponto, certifique-se de que seu servidor,
o servidor JSON está funcionando,
caso contrário, seu teste falhará,
porque quando o teste tiver sido realizado,
ele tentará acessar o servidor JSON também.
Então, isso é algo que você precisa garantir.
A continuar com os nossos testes.
Na segunda etapa,
vamos adicionar mais alguns métodos a esta AppPage.Classe
aqui. Então, eu usaria um novo método
chamado getElement e, em seguida, tomando um parâmetro de um seletor.
Este método permite-me obter acesso ao elemento,
que é selecionado usando o mesmo pelo seletor CSS.
Então, eu só vou copiar isso.
Então, neste caso, em vez de apenas obter o texto,
ele realmente retornará a referência ao elemento em si,
e, em seguida, para que você possa adicionar de maneiras adicionais
de acessar informações dentro desse elemento como exigimos.
Neste caso, o get-text é usado apenas para buscar o texto específico.
Podemos usar outros métodos em
este elemento para buscar informações adicionais a partir desses elementos.
Então, essa é a razão pela qual estou criando este método aqui.
Da mesma forma, vou implementar outro método chamado obter todos os elementos.
Agora, isso também usa um parâmetro chamado seletor como antes.
O que o método getAll faz é selecionar
todos os elementos e, em seguida, devolvê-los ao colarinho,
de modo que, por exemplo,
se sua página contém muitos elementos h1 em
referência a todos eles será devolvido ao meu colar.
Então, que lá, eu posso então decidir fazer
uma chamada para um específico dentro desta lista de elementos.
Então, para fazer isso,
vamos usar o mesmo retorno, mas aqui,
em vez de dizer seletor de elemento,
deixe-me apenas copiar isso e, em seguida, temos outro método chamado
element.all que nos permite
acessar todos os elementos que correspondem a este seletor particular.
O primeiro retornará o primeiro elemento que corresponde a esse seletor.
Após essas atualizações, agora vamos mudar para o nosso arquivo de teste e adicionar um novo teste aqui.
Então, aqui novamente, eu estou usando a sintaxe Jasmine para adicionar no novo teste aqui.
Então, eu vou dizer isso e, em seguida, dar uma descrição para este teste.
Vai dizer que deve navegar para cerca de
nos página clicando no link.
Agora, se você olhar para trás para o seu aplicativo Angular,
você notaria que dentro do seu aplicativo Angular,
você tem os links de navegação na parte superior da página.
Então, o que vamos fazer neste teste é automaticamente
ir e acessar um desses links de navegação e clicar neles.
Agora, é claro, como você espera isso vai ser feito de forma programática,
em vez de clicar manualmente no link.
Então, para fazer isso,
o que eu vou fazer é navegar para a raiz do meu aplicativo Angular e, em seguida,
Eu vou acessar
os links na minha barra de navegação no topo.
Ao dizer página, getAllElements e
então eu vou obter todos os elementos que têm a tag lá.
Agora, obviamente, você terá muitas dessas tags em nossa página, mas os quatro primeiros,
são os quatro links em
a barra de navegação no topo da nossa página lá no componente de cabeçalho.
Então, obtendo acesso a esses
uma nota agora que eu estou usando obter todos os elementos então eu vou obter um número de elementos.
Neste caso particular,
acaba por ser cerca de 16 tags diferentes que usarão naquela página lá.
Então, eu vou ir e selecionar.
Então, este é o lugar onde eu uso este método chamado get e, em seguida, eu posso especificar
um índice para o elemento específico que eu quero.
Então, Eu verifiquei se você olhar para o arquivo de modelo de componentes de cabeçalho,
você vai notar que o segundo uma tag em
página HTML do componente de cabeçalho está se referindo ao link sobre nós lá.
Então, isso é o que eu estou recebendo acesso dizendo obter um.
Zero, é claro, refere-se ao link inicial em
o componente de cabeçalho onde criamos nossa barra de ferramentas no topo lá.
Então, eu tenho acesso ao segundo, então este é o link sobre lá.
Agora, uma vez que você se apossar deste link,
há um método que transferidor suporta
em um elemento com um link lá chamado de clique.
Então, isso, como você vê programaticamente,
faz com que um clique nesse elemento específico na janela do meu navegador lá.
Então, programaticamente, estamos realizando o que você normalmente executaria
manualmente acessando fisicamente esse link e clicando nele usando o mouse.
Agora, uma vez que clicamos no link, obviamente,
você vai navegar para a página Sobre nós.
Agora, dentro da página Sobre nós,
se você olhar para o modelo da página Sobre nós,
você vai descobrir que há um elemento h3 que contém o nome dessa página.
Dentro desse elemento h3,
você verá um texto chamado Sobre o espaço Us lá.
Então, isso é o que eu vou verificar agora.
A razão pela qual eu vou verificar isso é para ter certeza de que eu realmente navegou para
a página Sobre nós fazendo estas etapas em meu aplicativo Angular.
Então, este é o lugar onde eu vou usar o esperado.
Nós já vimos o uso de esperar e esperar página.
GetParagraphText e eu vou obter o texto do parágrafo de
h3 e isso eu espero ToBe.
Observe o uso da sintaxe Jasmine aqui e isso deve ser Sobre Nós.
Então, introduzindo este segundo teste em nosso arquivo de teste aqui,
vamos salvar as alterações que fizemos e, em seguida, ir e executar este teste.
Indo para o terminal.
Novamente, deixe-me executar o teste dizendo ng e2e
e você vai notar que isso irá novamente passar pelo mesmo conjunto de etapas,
e, em seguida, realizar ambos os testes que agora eu tenho no arquivo de teste.
É interessante assistir ao teste sendo realizado no navegador.
Então, você vê que estamos na página inicial,
você agora navega para a página Sobre e, em seguida, sucesso.
Então, nós navegamos com sucesso de
a página inicial para a página Sobre e, em seguida, verificamos que você tem
navegou para a página Sobre, realizando
o teste específico onde nós verificamos para ter certeza de que
o Sobre nós está em uma tag h3 dentro da página Sobre nós lá.
Então, este é mais um teste de ponta a ponta que podemos realizar,
e você realmente viu o teste sendo realizado bem na frente
de seus olhos sem sua intervenção manual.
Espero que você esteja gostando de realizar esses testes de ponta a ponta.
Vamos ficar um pouco mais ambiciosos.
Agora, o que vamos fazer é navegar para um prato específico,
e, em seguida, tentar inserir um comentário nesse prato.
Agora, este é o lugar onde eu vou pegar a ajuda do suporte Transtractor,
e você vai me ver usando mais alguns métodos de
Transtractor para navegar para a página do prato,
vamos navegar para o primeiro prato em nosso menu usando
o link para a página de detalhes do prato com o parâmetro de aquele prato em particular,
o ID do prato em particular.
Em seguida, vamos identificar os elementos de entrada do formulário,
e, em seguida, vamos digitar automaticamente as informações em
esses elementos de entrada e, em seguida, tentar enviar o formulário e ver o que acontece.
Então, para realizar este teste, novamente,
entrar e usar a sintaxe Jasmine,
Vou introduzir um aqui e então vou identificar o que este teste está tentando fazer.
Eu diria, “Ele deve inserir um novo comentário para o primeiro
prato” e função de seta
e você vê que dentro desta função de seta,
vamos fazer nossa primeira página navigateTo,
vamos navegar para o dishdetail zero.
Então, este é o primeiro prato em nosso menu.
Agora, uma vez que navegarmos para a página dishdetail, diremos,
“deixar NewAuthor é igual à página getElement.”
Então, vamos encontrar esse elemento que é
entrada e texto de texto aqui,
então isso vai me ajudar a identificar esse elemento de entrada onde o nome do autor é
digitado na forma que criamos em nossa página dishdetail.
Se você está curioso,
vá e dê uma olhada nesse formulário,
e então você verá que há de fato
esse elemento de entrada naquela página dishdetail lá.
Então, acessando isso, eu vou digitar o nome do autor
naquele campo de entrada lá.
Então, é aqui que o método dos SendKeys que é suportado em nosso elemento vem em nosso auxílio,
o método dos SendKeys suportado pelo Protractor.
Então aqui, eu vou digitar o nome do autor como autor de teste.
Então, no final dessas duas etapas,
o autor do teste deve ser digitado no elemento de entrada no meu formulário.
Agora, além disso, eu também preciso digitar o comentário para esse formulário.
Nós também podemos configurar o valor da classificação,
mas eu não vou fazer isso neste teste específico,
Eu vou apenas digitar o valor do comentário usando uma abordagem semelhante.
Então, eu vou dizer, “deixe NewComment”,
novamente, vai obter página,
GetElement, e então é aqui que eu procuro
o textarea e NewComment,
SendKeys e digite “Teste Comentário”.
Então, isso irá preencher as palavras Teste Comentário na área de texto
que contém os comentários que
o autor deve enviar para esse prato em particular.
Depois disso, vamos encontrar o SubmitButton.
Então, para fazer isso, vamos dizer
page.getElement botão tipo enviar,
e, em seguida, uma vez que se apossar do botão que apenas dizer, NewSubmitButton.Click.
Então, uma vez que clicamos no botão,
o comentário irá reenviá-lo.
Agora, vou usar outro método que o Transtractor suporta.
Eu vou pausar o teste nesse ponto.
Isso me permitirá passar no teste e, em seguida, realizar o teste ou a planta,
assim diz, navegador é indefinido,
então eu preciso voltar aqui e, em seguida, importar
navegador da biblioteca Transtractor lá,
e então você vê que a linha vermelha rabiscada desapareceu,
então meu teste deve todos ser configurados corretamente lá.
Então, deixe-me salvar as alterações,
vamos executar este terceiro teste também,
juntamente com os dois testes restantes que já introduzimos.
Indo para o navegador, deixe-me novamente executar o teste de ponta a ponta,
quando o navegador abre, lá vamos nós,
o primeiro teste foi realizado e que deve ter sucesso,
o segundo teste foi realizado e o terceiro teste onde navegamos detalhe prato,
e você vê que o comentário do teste foi submetido corretamente pelo nosso teste.
Então, com isso, completamos este exercício.
Neste exercício, você realizou três testes diferentes usando o suporte de
Transtractor e descobriu que nossa aplicação passa todos esses três testes de ponta a ponta.
Este é um bom momento para você salvar as alterações em
seu repositório Git usando o teste de ponta a ponta da mensagem.