Angular Academy · Aula

Testando sinais e código assíncrono

Teste comportamentos reativos e assíncronos.

Testando sinais e código assíncrono é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

A assincronicidade é a parte difícil dos testes

Componentes reais executam tarefas assíncronas: temporizadores, promessas, HTTP e entradas com atraso. Os testes precisam controlar o tempo para que as asserções sejam executadas depois que o trabalho assíncrono terminar. O Angular fornece fakeAsync, tick e flush para o controle determinístico do tempo.

Testando um sinal

Um sinal é lido como uma função. Testá-lo é simples: chame o sinal e verifique o valor; atualize-o e verifique novamente.

it('increments the count signal', () => {
  const fixture = TestBed.createComponent(CounterComponent);
  const c = fixture.componentInstance;
  expect(c.count()).toBe(0);
  c.increment();
  expect(c.count()).toBe(1);
});

Sinais computados são atualizados automaticamente

Um computed é recalculado quando suas dependências mudam. Em um teste, altere o sinal de origem e depois leia o sinal computado; não é necessário recalculá-lo manualmente.

expect(c.doubled()).toBe(0);
c.count.set(5);
expect(c.doubled()).toBe(10); // computed(() => c.count() * 2)

Sinais e o DOM

Para ver uma alteração no sinal refletida no modelo, chame detectChanges() depois de atualizá-lo, assim como faria com qualquer outro estado.

c.count.set(3);
fixture.detectChanges();
expect(fixture.nativeElement.textContent).toContain('3');

Introdução ao fakeAsync

Envolva um teste em fakeAsync para entrar em um fuso horário simulado. Temporizadores e microtarefas entram em uma fila em vez de serem executados, e você os avança manualmente. Isso torna os testes assíncronos síncronos e confiáveis.

import { fakeAsync, tick } from '@angular/core/testing';

it('loads after delay', fakeAsync(() => {
  // timers are now under your control
}));

Avançando o tempo com tick

tick(ms) adianta o relógio virtual, executando todos os temporizadores agendados dentro desse intervalo.

it('fires after 1s', fakeAsync(() => {
  let done = false;
  setTimeout(() => (done = true), 1000);
  expect(done).toBe(false);
  tick(1000);
  expect(done).toBe(true);
}));

flush para todos os temporizadores pendentes

Quando você não sabe o atraso exato, flush() esvazia todas as macrotarefas pendentes até que a fila fique vazia.

import { fakeAsync, flush } from '@angular/core/testing';

it('completes debounced search', fakeAsync(() => {
  component.search('ang');
  flush(); // run all timers (e.g. debounceTime)
  expect(component.results().length).toBeGreaterThan(0);
}));

Testando promessas com fakeAsync

As promessas são resolvidas como microtarefas. Dentro de fakeAsync, chame flushMicrotasks() (ou tick()) para resolvê-las antes de fazer as asserções.

import { fakeAsync, flushMicrotasks } from '@angular/core/testing';

it('resolves promise', fakeAsync(() => {
  let v: number | undefined;
  Promise.resolve(42).then((n) => (v = n));
  flushMicrotasks();
  expect(v).toBe(42);
}));

O auxiliar async / waitForAsync

Para testes que precisam esperar por uma operação assíncrona real sem controlar o tempo, envolva o corpo em waitForAsync e use fixture.whenStable().

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

it('settles', waitForAsync(() => {
  fixture.detectChanges();
  fixture.whenStable().then(() => {
    expect(fixture.componentInstance.ready()).toBe(true);
  });
}));

Testando effect()

Um effect é executado de forma assíncrona depois que os sinais que ele lê são alterados. Para observar o resultado, execute a detecção de alterações (ou faça um flush) para que o efeito seja executado e, então, verifique o efeito colateral.

c.theme.set('dark');
fixture.detectChanges(); // effect runs
expect(document.body.classList.contains('dark')).toBe(true);

Armadilha comum: temporizadores restantes

Se um teste com fakeAsync terminar com temporizadores ainda na fila, o Angular lançará um erro. Sempre execute tick/flush neles ou limpe os intervalos em ngOnDestroy, para que o relógio virtual esteja vazio quando o teste terminar.

Verificação rápida

Escolha a ferramenta certa para um atraso conhecido.

Recapitulação

Os sinais são testados como funções simples (chame para ler, use set para atualizar e detectChanges para o DOM). Para operações assíncronas, fakeAsync fornece um relógio virtual que você avança com tick, esvazia com flush e usa flushMicrotasks para resolver promessas. Nunca deixe temporizadores pendentes.

Perguntas Frequentes

A aula “Testando sinais e código assíncrono” é grátis?

Sim — o texto completo de “Testando sinais e código assíncrono” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Testando sinais e código assíncrono”?

Teste comportamentos reativos e assíncronos. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Testando sinais e código assíncrono”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy