[Anderson Paraibano]

RESOLVIDO: Unidade de teste de código assíncrono, incluindo setInterval em Angular

Introdução

Os testes de unidade são uma parte essencial do processo de desenvolvimento de software. Eles ajudam a garantir que o código seja funcional e livre de erros, fornecendo uma validação automática de suas funcionalidades. No contexto do Angular, um dos desafios comuns ao escrever testes de unidade é lidar com código assíncrono, como o uso da função setInterval. Neste artigo, exploraremos como testar unidades de código assíncrono, incluindo o uso de setInterval, em aplicações Angular.

Testes de unidade em Angular

Antes de entrarmos em detalhes sobre a unidade de teste de código assíncrono, é importante entender o conceito de testes de unidade em Angular. Os testes de unidade são escritos para verificar o comportamento esperado de uma unidade de código isolada, geralmente um componente, serviço ou diretiva. Esses testes são executados de forma automatizada para verificar se a unidade de código se comporta conforme o esperado.

Código assíncrono em Angular

Em aplicações Angular, é comum encontrar código assíncrono que usa funções como setTimeout ou setInterval para lidar com ações que ocorrem em um determinado intervalo de tempo. No entanto, testar esse tipo de código pode ser um desafio, pois os testes de unidade normalmente são executados de forma síncrona e precisam aguardar a conclusão das operações assíncronas.

Testando código assíncrono

Para testar código assíncrono em Angular, é necessário utilizar a funcionalidade de “fakeAsync” fornecida pelo framework de testes. Essa funcionalidade permite que os testes sejam executados de forma síncrona, mesmo quando há operações assíncronas ocorrendo.

Para lidar com o uso do setInterval, podemos utilizar a função tick() fornecida pelo Angular para simular a passagem do tempo. Essa função permite avançar o tempo de forma controlada nos testes, para que possamos verificar o comportamento do código em diferentes pontos do tempo.

Exemplo de teste de unidade

Vamos supor que temos um componente chamado CountdownComponent que possui uma propriedade counter que é atualizada a cada segundo usando a função setInterval. Nosso objetivo é testar se o contador está sendo atualizado corretamente.

typescript
Copy code
import { ComponentFixture, fakeAsync, TestBed, tick } from ‘@angular/core/testing’;
import { CountdownComponent } from ‘./countdown.component’;

describe(‘CountdownComponent’, () => {
let component: CountdownComponent;
let fixture: ComponentFixture<CountdownComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ CountdownComponent ]
})
.compileComponents();
});

beforeEach(() => {
fixture = TestBed.createComponent(CountdownComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it(‘deve atualizar o contador a cada segundo’, fakeAsync(() => {
expect(component.counter).toBe(0);
tick(1000);
expect(component.counter).toBe(1);
tick(2000);
expect(component.counter).toBe(3);
// …
}));
});
Neste exemplo, usamos o fakeAsync para executar o teste de forma síncrona, permitindo que o setInterval seja manipulado adequadamente. Usamos a função tick para simular a passagem do tempo. No teste, verificamos se o contador está sendo atualizado corretamente após diferentes intervalos de tempo.

Conclusão

Testar código assíncrono em aplicações Angular pode ser um desafio, mas o framework de testes oferece recursos para lidar com essa situação. Usando a função fakeAsync e a função tick, podemos escrever testes de unidade eficazes para código assíncrono, como o uso de setInterval. É importante realizar testes abrangentes para garantir que nosso código funcione corretamente em todas as situações, incluindo operações assíncronas.

Os testes de unidade desempenham um papel crucial no desenvolvimento de software, permitindo a identificação e correção de erros mais cedo no processo de desenvolvimento. Ao escrever testes de unidade em Angular, devemos considerar cuidadosamente como testar código assíncrono e garantir que todas as funcionalidades sejam validadas corretamente.

Referências:

Documentação oficial do Angular: https://angular.io/guide/testing
Angular Testing: https://alligator.io/angular/testing-async-fakeasync/
Testing Angular Code with FakeAsync: https://medium.com/@RupaniChirag/testing-angular-code-with-fakeasync-aa1afcf829d4

[Autor]

Posts