Angular: testes automatizados com Jasmine e Karma

Ferramental de testes do Angular - Apresentação

Oi pessoal, sou Flávio Almeida, bem-vindos a esse treinamento de Fundamentos de Teste com Angular e uma coisa bem importante é o seguinte, se você nunca fez teste na vida, ou se você nunca fez teste em Angular, esse treinamento é para você.

Vamos ver os fundamentos de testes, os fundamentos de teste em Angular, para que dê a chance do desenvolvedor que nunca trabalhou com teste para ele se sinta bem seguro, não só no ferramental que nós vamos utilizar, como também na criação de testes.

Uma outra coisa importante, é deixar claro que esse curso, ele é a ponta do iceberg, muita coisa mais complexa ela não vai ser abordada ainda neste curso, vai ficar para o segundo curso, essa formação de testes.

E uma outra coisa aqui nesse treinamento, além de pegarmos os fundamentos, eu vou falar também sobre, cobertura de testes, não adianta você escrever um teste se você não sabe se ele está 100% coberto, ou quanto é a percentagem de cobertura.

E aqui um exemplo de um arquivo de teste que vamos criar, testar serviço, testar componente, tudo de maneira gradativa, tentando ao mesmo tempo criar uma prática saudável, sadia de testes e remover vícios que por acaso algum desenvolvedor passa a ter em relação ao teste.

Então é um treinamento que vai permitir que nós dominemos o ferramental de testes do Angular, entenda o papel de tudo que está lá dentro para abrir as portas para que possamos avançar e testar componente mais complexo.

Uma coisa importante para considerarmos aqui, é que toda essa complexidade, quando eu falo em complexidade desse treinamento, neste primeiro módulo, vamos trabalhar com um componente e um serviço.

No outro curso, e nos outros que forem sendo criados, vamos trabalhar com conceito de composição, significa que tudo que fizemos, vai ser reaproveitado e realizando a composição de componente vamos aumentando a complexidade desse componente e que vai nos demandar uma necessidade maior de conhecimento de como o framework Angular funciona.

Então uma coisa importante a deixar claro aqui, a versão do Angular desse treinamento é a versão 11, tudo que vocês vão ver aqui que eu vou fazer é compatível com versões anteriores, não se preocupem, eu ainda não utilizei nada que uma breaking change do Angular 11 nesse treinamento.

E segundo a versão do Node.js que eu usei para criar esse treinamento tudo, foi a versão 10.21, todo esse treinamento foi feito usando a versão 10.21 do Node, se você quiser puxar uma versão mais nova do Node, você pode até puxar, mas se você baixar e tiver algum problema você volta para essa versão.

Mas uma dica, nunca pegue versão ímpar do Node, você tem a 10.21, se você quiser pegar uma mais nova, você vai pegar a 12, se você quiser pegar uma mais nova que a 12, você vai pegar a 14 e se tiver uma mais nova que a 14 você vai pegar a 16, não pegue versões ímpares porque isso pode causar problema porque essas versões não são LTS.

Então se eu estou usando a versão 10.21 você pode tentar ir para 12 ou 14, mas de novo, a versão homologada é a 10.21.

Então vamos começar bem devagar, vamos lapidar vocês, a ideia é vocês virem aqui como tábula rasa para que eu possa contribuir removendo vícios e adicionando boas práticas de teste com vocês, vamos lá.

Ferramental de testes do Angular - A pasta do projeto

Vamos lá pessoal, eu já tenho baixada a pasta do projeto aqui, descompactada, vou abrir essa pasta no meu editor de texto favorito, vou abrir no Visual Studio Code, venho aqui em options “File > Open”, se você está fazendo curso no Windows tem a opção Open folder, você vai escolher essa opção, no caso do Mac é open, vou lá na pasta do projeto e abro.

Primeira coisa que eu vou fazer logo, eu vou abrir o terminal, você vem aqui na parte superior em “View > Terminal” e vou executar o comando npm install para que ele possa baixar todas as dependências do projeto.

Enquanto ele está baixando, esse projeto, é um projeto feito em Angular 11, criado pelo Angular CLI, com algumas mudanças que eu fiz aqui para otimizar nossas experiências durante esse curso.

Que mudanças são essas? A primeira é em relação ao arquivo “style.scss”, se eu vir aqui no canto esquerdo, vem aqui dentro, olha “src”, venho aqui “style.scss”, o arquivo global de estilos, esse cara já tem alguns estilos que eu vou utilizar ao longo do curso, para poupar que tenhamos que digitar esses estilos globais.

Outra coisa que eu fiz também foi apagar o arquivo que ele gera de teste por padrão do “app.component” porque eu não quero que sigamos a estrutura desse arquivo, veja esse arquivo logo de cara, como ele funciona, isso vamos construir passo a passo.

E por fim para que possamos criar os componentes que nós vamos testar no “package.json” se abrirmos lá o nosso arquivo “package.json” as libraries que eu estou utilizando são o fontawesome, para podermos trabalhar com ícones, fontes e por aí vai, e o uuid que é uma biblioteca que eu uso para gerar IDs únicos.

Então acabou de instalar aqui as dependências, e para saber se está tudo funcionando direito, eu vou dar aqui dentro do meu projeto npm run start, quando eu executo esse comando, se você está nesse curso de teste eu pressuponho que você já saiba disso, esse comando vai executar o projeto do Angular para que conseguimos abrir o nosso navegador.

E uma coisa particular é quando você executa pela primeira vez esse comando com as bibliotecas que você acabou de baixar, como esse projeto é feito em Angular 10 para cima, o ivy compiler que é um compilador especial do Angular, ele precisa compilar os módulos, por isso vemos esse cara aqui que vai ser executado só na primeira vez, se eu paro aqui, “Ctrl + c”, e executo de novo, ele não vai executar o ivy compiler porque os módulos já estão compilados no formato que o Angular está esperando.

Então ele está criando meu bundle, eu executei de novo, compilou, e ele está executando na porta local host 4200, então se eu chego aqui no navegador e digito localhost:4200 vamos ver um projeto, o Scaffold, um projeto gerado do Angular 11.

Então agora que você já tem uma visão desse projeto de como que ele foi estruturado, o que que ele já vem pronto, o que precisamos fazer agora, o nosso primeiro passo é construir um componente que vai ser um componente de like, aquela mão que você clica e curte, pode curtir uma foto, curte uma notícia, seja lá o que for.

Só que, para criarmos esse componente primeiro, temos um pré-requisito, que pré-requisito é esse? Todos os componentes que vamos criar ao longo desse curso, eles são criados a partir de composição, isso significa que eu vou criar um componente pequeno, depois eu vou criar um outro componente que vai usar o componente anterior, e por aí vai, vamos usar composition até o final do treinamento.

Até porque é uma forma muito utilizada no desenvolvimento de componentes, e isso vai criar uma complexidade que vai nos forçar a utilizar, lançar mão de alguns recursos de teste.

Então o mais importante agora é que eu preciso criar um serviço que vai gerar IDs únicos para todos os componentes que eu for criar ao longo do nosso curso de testes, se você já fez o curso de acessibilidade de Angular aqui comigo na Alura, nós já criamos um cara chamado Unique ID Service, o que vamos fazer é criar esse mesmo serviço com algumas mudanças aqui, por quê?

Porque como ele é um pré-requisito, nós vamos criar esse serviço, e você já deve estar imaginando que a primeira coisa que vamos testar no nosso treinamento são serviços.

Então vamos lá para o próximo vídeo, criar esse serviço para que tenhamos material para começar o nosso curso de testes.

Ferramental de testes do Angular - UniqueIdService

Vamos lá galera, vamos criar o nosso serviço responsável por gerar as IDs únicos para os nossos componentes, dentro da pasta “app”, eu vou criar uma subpasta chamada “shared”, porque esse serviço eu quero compartilhar entre vários componentes, e dentro de shared eu vou criar uma subpasta chamada “services”, onde todos os meus serviços compartilhados ficarão aí dentro.

E dentro desta pasta service, eu vou criar o meu “unique-id”, vai ser uma subpasta, vai ficar um pouco grande e dentro dessa subpasta eu vou criar o meu arquivo “unique-id.service.ts”, criei o meu arquivo, eu vou criar o esqueleto de um serviço em Angular, export class UniqueIdService {}, esse cara eu quero tornar ele um injetável.

Então @Injectable porque eu estou usando o Visual Studio, quando eu seleciono esse cara, automaticamente ele importa, faz o import, abro e fecho parênteses aqui @Injectable(), não vou botar no escopo root, por enquanto não vai ter escopo nenhum, ele vai ter que ser adicionado em um provider do componente que quer utilizá-lo, mas isso vamos ver lá na frente.

Então eu estou criando aqui meu serviço, a primeira coisa que eu vou fazer no meu serviço, eu quero que esse serviço além de gerar IDs únicos, ele seja capaz de me dizer quantos IDs foram gerados durante a aplicação.

É uma coisa que eu quero, para mim faz sentido porque eu quero saber em uma página quantos IDs eu gerei ao abrir essa página ou quantos IDs esse serviço gerou, então para isso eu vou criar uma propriedade da classe chamada private numberOfGeneratedIds = 0 que começa de 0.

Esse método vai ter um método público que eu vou chamar de public generatedUniqueIdWithPrefix(): string {} porque eu preciso colocar um prefixo para esse meus IDs que eu vou gerar dinamicamente.

Meu método não roda nada mas eu vou fazer o seguinte, vou criar um método privado private generatedUniqueId(): string{ return null;} vou retornar null por enquanto aqui, é porque eu ainda tenho que implementá-lo, deixa eu salvar aqui, mas o mais importante é eu saber que quando eu chamar o meu generatedUniqueIdWithPrefix() eu preciso passar como parâmetro o prefixo prefix: string que eu quero gerar.

Então por debaixo dos panos, o que eu quero fazer é dizer que const uniqueId = esse ID único vai ser o resultado de this.gereratedUniqueId();, ele vai gerar para mim, eu tenho que botar a lógica ir gerando com o ID.

E por debaixo dos panos ele vai ter que dizer que this.numberOfGeneratedIds++; vou incrementar porque acabei de gerar um ID novo, e por fim, eu vou retornar aqui a concatenação do meu prefixo return ${prefix}-${uniqueId} com meu uniqueId gerado, então se meu prefixo é Alura, vai ser Alura hífen e uniqueId gerado, faz sentido? Faz.

O que nos falta aqui é implementar o método generatedUniqueId() para implementarmos esse método generatedUniqueId(), vamos usar aquela library que eu falei que nosso projeto já tem como dependência que é o uuid, então vou importar ela, vou dizer import { v4 as uuidv4 } from ‘uuid’;, eu vou importar essa função v4, que é a versão 4 do uuid dando um nome de uuidv4 para poder utilizá-la.

E aqui piece of cake chegou agora aqui no meu generatedUniqueId() eu retorno a chamada de uniqueId return uuidv4();, chamo o generatedUniqueId() esse método privado vai delegar para o método de generatedUniqueId v4 a geração do meu ID único, então eu pego dentro do meu método aqui public generatedUniqueIdWithPrefix() que é público, pego meu ID público incremento o meu número de ID gerados e retorno o meu ID utilizando prefixo.

E para finalizar eu quero em algum momento saber qual é o número gerado de ID por esse serviço, então vou criar aqui um método publico que vou chamar de public getNumberOfGeneratedUniqueIds(): number {return this.getNumberOfGeneratedUniqueIds;}, deixa só eu verificar se não tem nada errado, se eu não cometi nenhuma gafe, aqui era esse aqui numberOfGeneratedIds é ele que eu vou retornar, getNumberOfGeneratedUniqueIds o método está aqui.

Então o nosso serviço tem dois métodos públicos public generatedUniqueIdWithPrefix() bem claro o nome do método e getNumberOfGeneratedUniqueIds que vai me retornar a qualquer momento o número total de ID gerados por esses serviços.

Uma outra coisa que precisamos fazer já no design do meu serviço é que, se você não passar um prefixo, eu não posso gerar, então eu quero blindar o meu componente, eu vou dizer que if (!prefix){} se o prefixo que você passou, não tem prefixo, eu vou fazer uma coisa que chamamos de fail fast, eu vou falhar rápido com uma mensagem para o desenvolvedor dizendo que throw Error(‘Prefix can not be empty’);

Então de novo, isso aqui meu método está falhando rápido, se eu chamo esse método sem passar o prefixo, ele vai lançar essa exceção, o desenvolvedor vai olhar e vai saber, opa, eu esqueci de passar o meu prefixo, eu não vou deixar esse método retornar um ID sem prefixo para eu saber lá na frente que eu tive um problema.

Então essa é a estrutura do meu serviço, eu não vou utilizar ele em um componente, o que eu já, vou utilizá-la em um primeiro teste que eu vou fazer para eu saber se ele está funcionando que é no nosso próximo vídeo.

Sobre o curso Angular: testes automatizados com Jasmine e Karma

O curso Angular: testes automatizados com Jasmine e Karma possui 218 minutos de vídeos, em um total de 80 atividades. Gostou? Conheça nossos outros cursos de Angular em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Ferramental de testes do Angular
• Lapidando nossos testes
• O component LikeWidget
• Testando componentes
• Turbinando o ambiente de testes