Angular 5: criando testes com Jasmine

Angular + Jasmine

Dando continuidade a minha serie de artigos sobre Jasmine, hoje irei demonstrar como validar um componente Angular 5 utilizando ele. Caso tenha interesse em ler o primeiro artigo desse serie, segue o seu link: JavaScript testes com Jasmine.

Para que possamos pular a etapa de configuração de um projeto, eu irei partir de um já criado com o Angular Cli, caso tenha interesse em clonar ele, segue o seu link: Angular5-Router.

Navegando rapidamente pelo projeto você tem:

  • 4 componentes: Home, About, error e login
  • AuthGuard: middler de gerenciamento de rotas, caso tenha interesse em saber um pouco mais sobre esse assunto, eu recomento a leitura desse artigo: Angular 5: Trabalhando com Rotas.

Agora, para que você possa ter um exemplo real, eu irei criar alguns testes abordando o fluxo de autenticação de um usuário. Para isso, execute o seguinte comando no seu terminal:

ng g s services/login

O comando acima irá criar um arquivo chamado login.service.ts e um outro login.service.spec.ts dentro do diretório services.

Para validar todo processo de autenticação, nós iremos precisar criar os seguintes testes:

  • Validar se um usuário está logado
  • Validar o processo de login
  • Validar se o token está armazenado corretamente

Para isso, atualize os arquivos abaixo:

login.service.ts

Acima eu criei um método que recebe dois parâmetros, uma para o usuário e outro senha, esse método irá validar se os dados de acesso de um usuário X estão corretos e retornar um boolean.

login.service.spec.ts

No teste acima você tem:

  • um teste esperando um retorno true
  • um método passando o usuário correto e a senha errada, esse deve retornar false

Execute o comando npm test no seu terminal para validar esse teste, note que ele irá abrir uma nova aba no seu navegador demonstrando o status dele. Você pode ver esse passo na imagem abaixo:

validando serviço de autenticação

O próximo passo será validar o middler AuthGuard. Para isso, atualize o seu arquivo auth.guard.ts com o trecho de código abaixo:

Agora crie dentro do diretório auth um arquivo chamado auth.guard.spec.ts e atualize ele com o seguinte trecho de código:

Votando para aba que está rodando o seu teste, você pode notar que já estão aparecendo os novos testes:

validando middler AuthGuard

Vamos agora ao último teste, verificar se um usuário está logado ou não. Para isso, atualize os arquivos abaixo:

login.component.ts

login.component.spec.ts

Nesse teste eu estou validando se o token existe, caso não, o usuário deveria ser direcionado para tela de login. Para verificar se esta tudo OK, volte para aba que esta executando os seus testes e note que todos os testes estão lá. Abaixo você tem uma imagem demonstrando esse passo:

teste de fluxo de login

Bom, o objetivo desse artigo foi demonstrar como é simples a implementação de um teste em um projeto Angular. Eu resolvi criar essa serie de artigos para tentar passar um pouco do que eu estou estudando e tentar ajudar o pessoal que está tentando adotar esse passo no seu dia dia. Espero ter ajudado e até o próximo artigo dessa serie 😉

Compartilhe:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Table of Contents

Postagens Relacionadas

SaferatHome

Safer at Home

Safer at Home 26/02/2021(US) – Filmes – 0h 0min –   Nota: 0/10   Sinopse     Elenco Mais informações Título Original Safer at Home
SouLunaOUltimoShow

Sou Luna: O Último Show

O elenco de “Sou Luna” se apresenta ao vivo pela última vez no mítico estádio Luna Park em Buenos Aires. Vamos acompanhá-los na intimidade dos bastidores e r…
Chansondouce

Chanson douce

Chanson douce () – Drama, Crime – 1h 40min –   Nota: 6/10   Sinopse     Elenco Leïla Bekhti Como – Myriam Karin Viard
OutpostInfernoNegro

Outpost 2: Inferno Negro

O ano é 1945, 2ª Guerra Mundial, e um cientista alemão de nome Klausener está trabalhando em uma tecnologia nova e assustadora que tem o poder de criar um ex…