Introdução aos testes unitários com Angular

Fala stakers!

Quando iniciamos um projeto com o CLI ele já nos deixa por padrão os testes com as seguintes ferramentas:

  • Jasmine, um framework para testes unitários e integrados;
  • Karma, o runner dos testes.

Mas tenho que deixar esclarecido aqui, que não precisamos usar esses dois, podemos utilizar outro caso você se sinta mais confortável com eles.

Mas afinal o que são esses testes?

Teste Unitário

São testes que têm como objetivo testar regras de negócio, testando cada função isoladamente, para ter certeza que ele faz somente o que foi designado para fazer. 

Podemos testar:

  • Pipe;
  • Class;
  • Componente;
  • Diretivas;
  • Service.

describe: Cria um grupo de testes. Pode ser aninhado para compor diversos outros testes. Seu primeiro parâmetro é o nome da suite e o segundo é a função

it: Define um único teste. Um teste deve conter uma ou mais expectativas que testem o código.

expect: Cria uma expectativa. No exemplo, nossa expectativa é que o retorno da função seja a criação do component.

Jasmine possui uma documentação bem completa => https://jasmine.github.io/tutorials/your_first_suite

Esse trecho de código, mostro a estrutura do arquivo de teste. Sempre que você criar um componente, tenha em mente que também será gerado um arquivo spec.ts.

Este arquivo vai nos auxiar a iniciar os testes.

Teste End-to-end (E2E)

É o teste completo da aplicação, fazendo assim a imitação de um usuário comum nela, imitando o comportamento que eles fariam, dando clicks na tela e tudo mais. Rodando no browsers. 

É muito legal para testar múltiplos browsers, tamanhos de tela e devices.

Conclusão

Com essa introdução aos testes, agora podemos ter uma aplicação mais sólida e evitar alguns erros, também olhamos um norte para começar e quando usar.

Não deixe de ver também este link sobre testes unitários => https://gabrieluizramos.com.br/anatomia-de-um-teste-em-javascript

Gostou? Quer aprender mais de angular? Então veja aqui nosso Curso de Angular.

Aprenda mais de Angular em nossas postagens ou no Youtube.

Share This