Testes Unitários no ambiente Frontend

Lucas Gomes Pereira — Tue, 10 Sep 2024 14:47:15 +0000

Quando se fala em Testes de Software, sempre tem muito assunto para ser discutido, e no ambiente Frontend não é diferente, eu sempre me perguntei o que devo testar, qual a melhor abordagem para os testes, como encaixo as regras de negócios? Perguntas como essas são as que eu busco responder nesse post.

Certo, mas antes de tudo isso, o que são testes unitários?
Para responder essa pergunta vamos para uma abordagem mais simples. O que seria uma unidade de código? Bom, se pensarmos que essa unidade representa uma pequena parte de um todo e que ela é feita para atender uma parte específica do projeto, pode se dizer que o "unitário" nada mais é do que um pedaço que vai ser testado, para ver se ele funciona como esperado. Em um pensamento mais amplo, aquela unidade tem a expectativa de atender um objetivo/ação necessária no ambiente da sua aplicação, seja realizar uma transação, clique de botão, preenchimento de formulário, ou algo nesse sentido, a sua expectativa é que justamente ela faça esse comportamento da maneira como você a projetou.

Mas, essa não é nem de longe a única definição de testes unitários, porém o que eu quero que você lembre de agora em diante é que o teste unitário, realiza uma ação e que com o seu teste você espera que essa ação sera realizada da maneira como você imaginou.

Qual a melhor abordagem para escrever os testes unitários no Frontend?
Você pode encontrar diferentes abordagens quando se fala em testes unitários no Frontend, mas a que eu mais li sobre e vi muitos posts sobre ela é a : Triple AAA (A's Pattern) ou padrão dos três A's. Essa abordagem nada mais é do que a divisão dos testes em três etapas:

Arrange / Arranjo: Local onde será setado toda a configuração inicial do teste, ou seja, onde será renderizado o seu componente, onde a variável receberá o seu valor inicial, onde será mockado alguma função.
Act / Ação: Como o nome indica é justamente uma ação que vai ser tomada naquele objeto que foi renderizado, seja um clique de botão, preenchimento de um input, fetch de dados ou qualquer tipo de ação que trará uma expectativa futura.
Assert / Expectativa : A expectativa é justamente o que você espera que aconteça depois da sua ação, ou seja, se você clicou em um link, você espera ser redirecionado para a página específica, se você preencheu um input, você espera que aquele valor esteja presente nele.

Nesse print acima, você a divisão desses três tópicos no ambiente Frontend, onde estou testando um componente Header/cabeçalho e eu sigo esses três passos do padrão dos 3 A's.

O que devo testar?
No Frontend os testes são um pouco diferentes do Backend, ou seja, aqui você vai testar alguns comportamentos da sua aplicação que vão ser entregues diretamente ao cliente. Você deve escolher aqueles componentes que são partes importantes da sua aplicação, ou seja, aqueles que não podem realizar um comportamento incomum para o cliente, como por exemplo:
Formulários, Links, Carregamento de dados (fetchs), redirecionamentos, funções utilitárias

Mas o que faz com que esses testes sejam importantes?
Todos os testes de maneira geral, vão garantir o que se chama de Qualidade de Software, ou seja vai entregar a expectativa de um Software funcional, com base nas regras de negócios do cliente e principalmente entregando aquilo que foi proposto em contrato. Mas, o teste unitário é somente a ponta desse iceberg, se você for buscar mais a fundo, vai encontrar outros testes, como é mostrado na imagem abaixo:

Nessa pirâmide você vai encontrar o teste unitário na base e os de integração e E2E (End to end), completando os três tipos de teste. Aqui eu não vou entrar em mais detalhes sobre esses dois outros tipos, pois o intuito é somente falar dos unitários, mas deixo aqui o exemplo para quem queira saber mais sobre. Logo mais vou fazer um post, mostrando como configurar o ambiente de testes no Next.js com Jest e Testing Library.

Agradeço por apreciar o meu post :)

O papel das APIs no desenvolvimento

Lucas Gomes Pereira — Tue, 07 Feb 2023 16:45:58 +0000

A API (Application Program Interface, ou Interface de programação de aplicações) no mundo da programação tem um papel fundamental na construção e comunicação das aplicações, atuando praticamente de ponta a ponta no processo de construção.
Dessa maneira, grande parte das operações realizadas sejam de Autenticação ou de operações de CRUD( Create, Read, Update e Delete), passam pela comunicação direta com uma API. Mas o que essa sigla tem de tão importante nesse processo de construção?

Como foi citado acima, a API participa diretamente da comunicação e da solicitação de recursos de uma aplicação, dessa forma, vamos explorar com mais detalhes através das imagens abaixo:

Na imagem 01, nos temos três papeis importantes, sendo:

API - Entrega recursos ou realiza as operações solicitadas
Website - Atua entre o usuário e a API
Usuário ou cliente - Solicitante direto de recursos. Dito isso, é possível identificar através da imagem que a API tem o papel de "falar" uma língua comum entre o servidor que armazena o recurso e o lado do cliente que solicita esse recurso, atuando como uma espécie de tradutor para ambos os lados.

Na imagem 02, traz um exemplo do que seria um Website montado com base nos dados que estão presentes em uma API específica, ou seja, as informações desse site são dispostas através do seu carregamento, seguindo três passos:
1° Assim que o site é aberto, uma solicitação de recursos é enviada para API, para que ela entregue os dados solicitados.
2° Depois de solicitado a API vai em busca desses dados, para entregá-los
3° Depois de entregues, o site é montado com base nesses dados que próvem da API.

Ou seja, a API está presente em todo o processo de construção de uma aplicação, atuando na busca, na entrega, na modificação e até mesmo na montagem dos dados, fazendo com que os programadores e as aplicações, consigam usufruir de diversas fontes de dados e principalmente do seu core, que é proporcionar uma comunicação entre o lado do cliente e o lado do servidor.

DEV Community: Lucas Gomes Pereira

Testes Unitários no ambiente Frontend

O papel das APIs no desenvolvimento