Angular: implemente testes de unidade com Jest

Conhecendo os testes em angular - Apresentação

Você quer aprender sobre uma habilidade técnica altamente requisitada no mercado de trabalho, que também vai auxiliar na criação de projetos muito mais confiáveis? Então, você está no lugar certo!

Audiodescrição: Nayanne se identifica como uma mulher de pele morena. Tem olhos castanhos e cabelo longo, liso e escuro. Está usando uma camiseta laranja. Ao fundo, estante branca com vários livros.

Nayanne Batista vai te acompanhar em uma jornada de aprendizado sobre testes. Sim, você vai aprender a como implementar testes de unidade no seu projeto Angular.

O que você vai aprender?

Vamos utilizar uma ferramenta chamada Jest, que além de moderna, possui uma velocidade de execução muito rápida e está sendo muito utilizada atualmente junto com o Angular.

Para implementar os testes, vamos utilizar uma aplicação muito interessante como projeto base. É o Organo, um organizador de leituras. As suas leituras favoritas.

Vamos conseguir testar componentes muito interessantes, como formulários e outros componentes, desde os mais simples até aqueles um pouco mais complexos.

O que você já precisa saber?

Como pré-requisito para fazer esse curso, é interessante que você já tenha um conhecimento intermediário sobre o Angular para conseguir aproveitar melhor o aprendizado.

Se já se interessou, pegue o seu café e venha conosco mergulhar no Angular.

Conhecendo os testes em angular - Pirâmide de testes

No contexto de desenvolvimento de software em geral, garantir a qualidade do código é crucial para que possamos criar aplicações cada vez mais robustas e confiáveis.

Nesse cenário, os testes desempenham um papel fundamental, pois permitem identificar erros e corrigir bugs que possivelmente só seriam encontrados depois que o código fosse enviado para produção, além de melhorar a manutenção do software.

No entanto, apesar de sua importância, muitas equipes de desenvolvimento ainda encontram desafios para implementar testes em seus projetos. Isso pode ocorrer porque não entendem, de fato, a importância e o benefício que os testes trazem, ou devido à alta demanda versus os prazos apertados, ou ainda por não conseguirem aplicar uma estratégia de testes adequada à sua aplicação.

Pensando nesse cenário, vamos mostrar alguns benefícios de implementar testes no seu projeto e também uma estratégia para se utilizar na implementação desses testes, baseada na pirâmide de testes.

Pirâmide de testes

A pirâmide de testes utiliza uma abordagem onde classifica os testes em três níveis principais:

• base da pirâmide: são testes de unidade;
• meio da pirâmide: são os testes de integração;
• topo da pirâmide: são os testes de ponta a ponta, ou end-to-end (E2E).

Os testes unitários abordam a maior parte dos testes da sua aplicação, seguidos pelos testes de integração e o end-to-end.

Para entender como foi feita essa distribuição desses testes, é preciso entender como funciona cada um deles.

Testes de unidade

Os testes de unidade, como o próprio nome diz, testam pequenas partes do seu projeto, da sua aplicação.

Em um contexto de um projeto Angular, por exemplo, vamos testar componentes, serviços, métodos desses componentes e serviços, de uma forma isolada.

Vamos testar o funcionamento desses métodos, por exemplo, sem levar em consideração o relacionamento deles ou a correlação com outros componentes e serviços.

Testes de integração

Em contrapartida, os testes de integração, como o próprio nome diz, integram partes do sistema. Então, vamos testar uma parte do sistema, como ela se comporta em relação ao todo, como é feita essa integração.

Testes E2E

Os testes end-to-end, por sua vez, permitem simular o comportamento da pessoa usuária final ao utilizar esse sistema - desde testes da interface até o back-end.

São testes bem mais complexos de se implementar, mais demorados e mais complexos também para conseguir depurar.

Tempo e dinheiro

Em suma, os testes de unidade demandam menos tempo, portanto, são mais rápidos de desenvolver, testar e depurar. Além disso, demandam menos dinheiro.

À medida que passamos para os testes de integração e os testes end-to-end, isso vai demandando cada vez mais tempo da equipe de desenvolvimento e também mais custos. Por isso que podemos fazer essa distribuição dos testes dessa forma.

Benefícios dos testes

Com relação aos benefícios dos testes, existem vários.

Um dos mais importantes é com relação à demanda no mercado de trabalho. Antes, a pessoa desenvolvedora saber implementar testes na aplicação poderia até ser considerado como um diferencial. Mas, atualmente, está cada vez mais comum ser um requisito básico das vagas de desenvolvimento. Por isso, é muito importante aprender como implementar testes no seu projeto já no início da sua carreira.

Além disso, existem diversos outros benefícios, como a redução de erros e correção de bugs. Inclusive, vamos deixar uma atividade de "Para saber mais" com diversos desses benefícios para te motivar nessa jornada de aprendizado em testes.

Nos próximos vídeos, vamos entender mais estratégias para começar a implementar os testes no nosso projeto.

Conhecendo os testes em angular - Conhecendo os testes de unidade

O foco deste curso será a implementação de testes unitários em um projeto Angular.

Conhecendo o projeto

Para isso, vamos utilizar um projeto chamado Organo que serve para organizar suas leituras favoritas.

Já temos uma lista de livros disponível nessa aplicação, com vários cards contendo a imagem de capa, o título, a autoria, a classificação e a data de leitura.

Esses livros estão divididos por gênero: romance, mistério, fantasia, ficção científica e também livros técnicos.

Você pode adicionar um novo livro lido, clicando no botão "Criar Novo Card", adicionando um título, uma autoria, escolhendo um gênero, definindo também uma data de leitura e o link de uma imagem. Ao clicar em "criar card" no final da página, o livro já é adicionado no gênero escolhido. Contudo, esquecemos de adicionar uma classificação.

A aplicação possui uma lógica onde a classificação de um livro está entre 1 e 5 estrelas, sendo 1 o valor mínimo. Porém, o livro está cadastrado com zero estrelas. Deve ter acontecido algum problema.

No menu lateral esquerdo do VS Code, dentro do diretório de "src > app > componentes", encontramos o componente responsável por mostrar as estrelas da classificação, o "avaliacao-estrelas".

Vamos acessar o arquivo avaliacao-estrelas.component.ts para entender o que pode ter acontecido.

Existem dois métodos principais que lidam com essa lógica. Um responsável por escrever esse valor, o writeValue(). Nesse método, ele vai verificar se foi passado um valor válido. Se não foi, a classificação vai ser 1. Conferimos que essa lógica realmente existe na linha 31.

No próximo método, isClassificationValid(), temos a verificação se é ou não um valor válido, que é onde deve estar o problema. O método está retornando a classificação maior ou igual a 1 ou menor ou igual a 5.

avaliacao-estrelas.component.ts:

export class AvaliacaoEstrelasComponent implements ControlValueAccessor {

  @Input() classificacao: number = 1;
  readOnly: boolean = true;
  estrelas: number[] = [1, 2, 3, 4, 5];
  onChange = (classificacao: number) => {};
  onTouched = () => {};

  writeValue(classificacao: number): void {
    if (this.isClassificationValid(classificacao)) {
      this.classificacao = classificacao;
    } else {
      this.classificacao = 1;
    }
  }

  private isClassificationValid(classificacao: number): boolean {
    return classificacao >= 1 || classificacao <= 5;
  }

  // código omitido…
}

O problema está nessa lógica. Porque esse valor não precisa ser maior ou igual a 1 ou menor ou igual a 5. E sim, maior ou igual a 1 e menor ou igual a 5. Afinal esse valor só pode variar entre 1 e 5.

Ao invés desse operador OU (||), no return da linha 36, deveria existir o operador E (&&).

private isClassificationValid(classificacao: number): boolean {
    return classificacao >= 1 && classificacao <= 5;
}

Esse é o tipo de situação que, se houvesse testes nessa aplicação, com certeza haveria um teste para esse método, e teríamos conseguido identificar esse erro e corrigir esse bug que, provavelmente, só foi descoberto quando o código já estava em produção. E essa não é uma experiência agradável.

Se voltarmos na aplicação, clicar em "Criar Novo Card", a classificação já vai estar configurada com uma estrela já preenchida. Esse é o comportamento correto.

Conhecendo ferramentas de teste

Agora que você já conhece o projeto que vamos utilizar, você pode estar se perguntando: qual ferramenta vamos utilizar para testar esse projeto Angular?

No ecossistema do Angular, existem algumas ferramentas que são padrões, como, por exemplo, o Jasmine e o Karma. Na verdade, que eram padrões. Por quê? O que aconteceu?

O Karma é uma ferramenta que está atualmente depreciada, então, não seu uso não está sendo mais recomendado em novos projetos. Levando isso e algumas outras questões em consideração, a equipe do Angular precisou se mobilizar para fazer algumas mudanças.

Nesse artigo do blog do Angular, são citadas algumas modificações que estão sendo feitas com relação aos testes.

Houve uma pesquisa de satisfação com relação a vários aspectos do framework que foi feita com as pessoas desenvolvedoras. E, com relação aos testes, essa satisfação estava bem baixa.

Por causa disso e também da depreciação do Karma, o Angular começou a tentar adotar novas ferramentas de teste. Uma delas é o Jest. O Angular, a partir da versão 16, adicionou um suporte experimental inicial para o Jest. E é essa ferramenta que vamos utilizar.

Acessando a documentação do Jest, descobrimos que ele é um poderoso framework de testes em JavaScript, de código aberto, com foco na simplicidade. Além disso, funciona em projetos Angular e também em outras tecnologias.

O Jest é focado na simplicidade e possui diversos benefícios. Um deles com relação à velocidade de execução.

O Karma era um executor de testes que executava os testes no navegador. Isso podia, às vezes, deixar esses testes mais lentos e pesados. Já o Jest executa no próprio terminal, onde também visualizaremos a saída dos testes. Desse modo, os testes acabam executando-se de uma forma mais rápida.

Próximos passos

Além da simplicidade, da velocidade de execução e de ter uma fácil configuração inicial, existem diversos outros benefícios. Vamos deixar uma atividade listando esses benefícios, mas você também vai entender sobre eles no decorrer do curso.

No próximo vídeo, vamos já fazer a instalação dessa ferramenta e configurar o projeto para começar a implementar nossos primeiros testes.

Sobre o curso Angular: implemente testes de unidade com Jest

O curso Angular: implemente testes de unidade com Jest possui 114 minutos de vídeos, em um total de 53 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:

• Conhecendo os testes em angular
• Escrevendo os primeiros testes
• Teste de componentes
• Testes de componentes mais complexos
• Testando o formulário