Angular & Jest - Como programar seu primeiro teste básico Angular

Desde quando programar testes é uma obrigação muito chata?

Este é o guia para você programar seu primeiro teste Angular usando o Jest

Introdução

Lembro de quando eu era um novato e ficava de cabeça cheia de programar testes para minhas apps Angular.

E depois aquele sentimento de culpa pode ter feito uma app Angular diversas vezes sem nem ao menos programar qualquer tipo de teste.

Rapaz! Tentar me convencer a programar testes para uma aplicação Angular seria a mesma coisa que obrigar uma criança comer legumes.

Hoje em dia eu sei que eu não sou o único cara que costumava pensar assim. A síndrome dos testes é bem comum.

Mas os testes bem detalhados vão fazer de você um mestre dos magos do Angular.

Instalação & Configuração do Jest

Instalar e configurar o Jest pode ser um trabalho árduo.

É preciso mudar diversos arquivos de configuração. Uma vírgula errada pode fazer sua aplicação Angular despencar.

Mas por sorte uma equipe de programadores reuniu todas as mudanças necessárias em um único e simples pacote Angular. Isso faz toda a mágica por você e fez com que eu sentisse um valor inestimável quando olhei isso pela primeira vez.

A instalação é muito simples:

ng add @briebug/jest-schematic

Enquanto ocorre a instalação, ele automaticamente dá conta dos tópicos abaixo:

• Instala o Jest.
• Adiciona os arquivos de configuração do Jest.
• Remove o Karma & Jasmine juntamente com seus arquivos de configuração.

E é isso! Nos livramos de um monte de trabalho. Sem culpa.

Criando o serviço Angular

Agora vamos inserir rapidamente um serviço básico Angular em nosso projeto.

ng generate service number

Vamos inserir uma função para fazer uma matemática simples para nós. Depois de pronta, o novo arquivo de serviço vai parecer com isto:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class NumberService {

  constructor() { }

  add(x: number, y: number): number {
    return x + y;
  }

}

Exemplo muito fácil? Sim, amigo. Eu notei isso também. Mas vamos começar pelo básico para que a gente programe algum teste complexo mais tarde.

Testar o Serviço Angular com Jest

O próximo passo é abrir o arquivo 'number.service.spec.ts' e adicionar um simples teste:

it('deveria ser 7', () => {
    var result = service.add(3, 4);
    expect(result).toEqual(7);
});

E um segundo test.

it('não deveria ser 7', () => {
    var result = service.add(3, 4);
    expect(result).not.toEqual(8);
});

O arquivo do nosso teste deve ser parecido com isto:

import { TestBed } from '@angular/core/testing';

import { NumberService } from './number.service';

describe('NumberService', () => {
  let service: NumberService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(NumberService);
  });

  it('deveria ser 7', () => {
    var result = service.add(3, 4);
    expect(result).toEqual(7);
  });

  it('não deveria ser 7', () => {
    var result = service.add(3, 4);
    expect(result).not.toEqual(8);
  });

});

Conclusão

Maravilha! Pode partir desse ponto amigo.

Quando se trata de programar testes para sua aplicação Angular, pare de adiar e faça agora mesmo. Essa atitude vai colocar você no caminho certo para ser um perito e veterano com Angular.

Dúvidas ou comentários? Entre em contato comigo.

Consultor e especialista em Angular e .NET Core