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.

Get Thiago S. Adriano’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

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 ;)