Angular 5: criando testes com 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:

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:

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:

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 😉