Angular 19: praticando testes unitários em interceptors com Jest

Preparando o cenário de testes - Apresentação

Introdução ao Curso de Testes em Angular

Olá! Vamos colocar em prática nosso conhecimento sobre testes em Angular? Eu sou Nayane Batista, e quero dar as boas-vindas a este curso.

Audiodescrição: Nayane é uma mulher de pele morena, com olhos e cabelos castanhos escuros. Ela está usando uma camisa laranja.

Estrutura e Foco do Curso

Este curso possui um formato diferente, sendo bastante prático e "mão na massa". Utilizaremos como projeto base o Organo, o já conhecido organizador de leituras favoritas. No entanto, nosso foco não será a parte visual deste projeto, mas sim os testes, especificamente os testes de unidade.

Desafio: Testando o Interceptor

Nós vamos testar um arquivo específico do Angular, chamado Interceptor. Este arquivo é responsável, no projeto, por exibir um snackbar quando recarregamos, indicando que houve um erro de rede e que não foi possível se conectar a um servidor.

O desafio aqui será implementar testes para esse Interceptor. Precisamos verificar os cenários de teste, onde há um erro, qual o código de status, qual mensagem está sendo mostrada, e também os cenários em que não houve nenhum erro na requisição, para entender como o Interceptor se comporta nesses casos.

Pré-requisitos para o Curso

Como este é um curso de desafios, é fundamental que já tenhamos os pré-requisitos necessários para acompanhar e realizar os desafios, aproveitando melhor o curso. Quais são esses pré-requisitos? Precisamos ter conhecimento sobre testes de unidade com Jest no Angular, a parte de HTTP Client com as solicitações, Observables, o RxJS, entender sobre o subscribe, e também saber como implementar e para que serve o Interceptor funcional, que é o que estamos utilizando nesta versão do Angular, a versão 19.

Conclusão e Próximos Passos

Esperamos que apreciem este desafio. No próximo vídeo, vamos criar um arranjo inicial dos testes, explicar melhor, e então partir para o desafio. Esperamos que gostem e compartilhem conosco o que acharam deste tipo diferente de curso. Até mais!

Preparando o cenário de testes - Testando o interceptor

Introdução ao Projeto e Objetivo do Curso

Vamos colocar em prática nosso conhecimento sobre testes de unidade com gestos no Angular. No VS Code, temos acesso a um projeto disponível no "Preparando o Ambiente". O link do GitHub com o passo a passo para baixar e instalar as dependências está disponível. Vamos testar especificamente um interceptor de erro, o interceptor funcional do Angular. Esse interceptor intercepta requisições HTTP no Angular para modificar, tratar ou bloquear. No nosso projeto, ele verifica se houve algum erro nas solicitações e, quando há, exibe uma mensagem na tela para dar um feedback visual à pessoa usuária. Podemos ver isso no navegador.

Demonstração do Projeto no Navegador

Vamos acessar o navegador para mostrar o projeto, que é o Organo, um organizador de leituras favoritas. Hoje, o foco será nos testes, não no visual. Executamos o front-end, mas não o back-end, para que ocorra um erro. Ao recarregar a aplicação, aparecerá um snackbar com uma mensagem de erro de rede, indicando que não foi possível conectar ao servidor. Esse é o comportamento padrão do nosso interceptor.

Cenários de Teste e Pré-requisitos

Voltando ao VS Code, quais cenários de teste vamos abordar? Testaremos cenários onde há erro na requisição, verificando se o interceptor captura o erro corretamente, de acordo com os códigos de status e exibindo a mensagem correta. Também testaremos cenários sem erro na requisição, para entender o comportamento do interceptor nessas situações.

Para aproveitar este curso prático, é necessário ter os pré-requisitos mencionados no vídeo de apresentação. Caso não tenha assistido, é importante saber sobre testes de unidade com gestos no Angular, HTTP Client, RxJS, Observables no Angular e interceptors.

Configuração Inicial dos Testes

Vamos para o nosso arquivo de testes. No Angular, já vem por padrão o arquivo spec.ts, que contém uma estrutura inicial para começarmos os testes. Vamos incrementar esse arranjo inicial, criar variáveis auxiliares para reutilização nos cenários específicos de teste e configurar algumas dependências.

Dentro do describe, onde agrupamos todos os testes relacionados ao interceptor, já temos uma estrutura inicial. Vamos começar definindo o interceptor que será testado:

describe('erroInterceptor', () => {
  const interceptor: HttpInterceptorFn = (req, next) =>
    TestBed.runInInjectionContext(() => erroInterceptor(req, next));

  beforeEach(() => {
    TestBed.configureTestingModule({});
  });

  it('should be created', () => {
    expect(interceptor).toBeTruthy();
  });
});

Definição de Constantes e Serviços Auxiliares

Aqui, definimos o interceptor como uma função que utiliza o TestBed.runInInjectionContext para executar o erroInterceptor no contexto de injeção do Angular. Isso é necessário porque o interceptor não é mais baseado em classe.

Podemos criar uma constante que representa uma resposta de sucesso, para não repetir a criação dessa resposta em cada teste:

const sucessoResponse = new HttpResponse({ status: 200, body: { sucesso: true}})

O interceptor que vamos testar utiliza um serviço de mensagem de erro, que está sendo injetado. Dentro de "services", o mensagemErroService usa o MatSnackBar, um componente do Angular Material, para exibir mensagens. Como nosso interceptor utiliza esse serviço, precisaremos dele para testar.

Configuração do TestBed e Mocks

Voltando ao arquivo de erros, podemos criar variáveis auxiliares:

let mensagemErroService: MensagemErroService
let requestMock: HttpRequest<any>
let nextMock: HttpHandlerFn;

Dentro do Before It, configuraremos o TestBed, passando alguns providers:

beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        MensagemErroService,
        {
          provide: MatSnackBar,
          useValue: {
            open: jest.fn()
          }
        }
      ]
    });
    mensagemErroService = TestBed.inject(MensagemErroService)
    requestMock = new HttpRequest('GET', '/api/teste')
    nextMock = jest.fn().mockImplementation((req: HttpRequest<any>) => of(sucessoResponse))
    jest.spyOn(mensagemErroService, 'mostrarMensagemDeErro')
  });

Implementação e Execução dos Testes

Aqui, configuramos o TestBed para injetar o MensagemErroService e simulamos o MatSnackBar com um jest.fn(). Criamos um requestMock e um nextMock para simular a requisição e o próximo passo da interceptação.

Agora vamos criar um teste para verificar se o interceptor continua a requisição sem modificação quando não há erro:

it('deve continuar a requisição sem modificação', (done) => {
    interceptor(requestMock, nextMock).subscribe({
      next: (res) => {
        expect(nextMock).toHaveBeenCalledWith(requestMock)
        done()
      }
    })
  })

Neste teste, verificamos se o nextMock foi chamado com o requestMock, garantindo que a requisição não foi modificada pelo interceptor.

Conclusão e Próximos Passos

Agora, abrimos o terminal com Ctrl + J, limpamos com clear, e digitamos ngTest para verificar se esse teste passou, os dois testes, na verdade. Já rodou, foi bem rápido. Ambos os testes passaram, tanto o teste de criação do interceptor, quanto o teste que acabamos de implementar para continuar a requisição sem modificação.

Agora já temos esse arranjo inicial criado. Podemos utilizar ou reutilizar, provavelmente precisaremos sobrescrever esse nextMock com outras informações. Deixaremos para vocês várias atividades com desafios e alguns casos de teste específicos que pediremos para testar. A ideia é que utilizem o conhecimento que já têm, pesquisem e juntem as informações para conseguir implementar esses testes. Já terão uma primeira resposta, uma primeira validação ali, se o teste passar ou não, mas também deixaremos o gabarito de cada teste para verificar e comparar a implementação com a nossa.

Esperamos que curtam bastante esse desafio. Contem para nós o que estão achando desse novo formato de curso, um formato mais prático. Esperamos que façam todos os desafios, desejamos muito sucesso, um grande abraço e até o próximo mergulho.

Sobre o curso Angular 19: praticando testes unitários em interceptors com Jest

O curso Angular 19: praticando testes unitários em interceptors com Jest possui 21 minutos de vídeos, em um total de 14 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:

• Preparando o cenário de testes