Angular Academy · Aula

Testando entradas, saídas e DOM

Verifique a saída renderizada e os eventos.

Testando entradas, saídas e DOM é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 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.

Testando o contrato do componente

Os componentes se comunicam por meio de entradas (dados recebidos), saídas (eventos emitidos) e do DOM renderizado. Bons testes de componentes exercitam essas três superfícies e verificam o resultado visível, não os detalhes internos da implementação.

Definindo uma entrada

Atribua um valor à propriedade de entrada da instância do componente e, em seguida, chame detectChanges() para renderizar novamente. Com entradas baseadas em sinais, defina o valor por meio de fixture.componentRef.setInput().

fixture.componentInstance.label = 'Save';
fixture.detectChanges();
// signal inputs:
fixture.componentRef.setInput('label', 'Save');
fixture.detectChanges();

Lendo o DOM com querySelector

Use fixture.nativeElement.querySelector() para localizar elementos renderizados e verificar seu texto ou seus atributos.

fixture.componentRef.setInput('label', 'Save');
fixture.detectChanges();
const btn = fixture.nativeElement.querySelector('button');
expect(btn.textContent.trim()).toBe('Save');

DebugElement e By.css

fixture.debugElement.query(By.css(...)) retorna um wrapper DebugElement. Seu .nativeElement é o nó DOM, e você obtém consultas mais completas que funcionam em diferentes plataformas.

import { By } from '@angular/platform-browser';

const de = fixture.debugElement.query(By.css('.title'));
expect(de.nativeElement.textContent).toContain('Hello');

queryAll para listas

Para elementos repetidos (por exemplo, um loop @for), use queryAll para obter todas as correspondências e verificar a quantidade.

const items = fixture.debugElement.queryAll(By.css('li'));
expect(items.length).toBe(3);
expect(items[0].nativeElement.textContent).toContain('First');

Simulando um clique

Acione eventos DOM para testar a interação. Use triggerEventHandler em um DebugElement ou chame o .click() nativo e, em seguida, detectChanges().

const btn = fixture.debugElement.query(By.css('button'));
btn.triggerEventHandler('click');
fixture.detectChanges();
expect(fixture.componentInstance.count).toBe(1);

Testando um evento de saída

Inscreva-se na saída do componente (um EventEmitter ou sinal de saída) antes de acionar a ação que deve emiti-la.

let emitted: string | undefined;
fixture.componentInstance.saved.subscribe((v: string) => (emitted = v));
fixture.debugElement.query(By.css('button')).triggerEventHandler('click');
expect(emitted).toBe('done');

Verificando atributos e classes

Você pode verificar classes e atributos condicionais que dependem das entradas.

fixture.componentRef.setInput('active', true);
fixture.detectChanges();
const el = fixture.nativeElement.querySelector('.tab');
expect(el.classList.contains('active')).toBe(true);

Atualizando entradas de formulário

Para testar campos de texto, defina o valor da entrada e envie um evento input para que as vinculações do Angular sejam atualizadas.

const input = fixture.nativeElement.querySelector('input');
input.value = 'hello';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
expect(fixture.componentInstance.text).toBe('hello');

Por que usar detectChanges após cada alteração

Tanto os testes baseados em Zone quanto os testes sem Zone exigem um detectChanges() explícito depois que você altera o estado, porque o teste é executado fora do ciclo automático do Angular. Esquecê-lo é a principal causa de a "minha verificação encontrar um DOM desatualizado".

Teste o comportamento, não os detalhes internos

Prefira verificar a saída renderizada e os eventos emitidos em vez de campos privados. Isso mantém os testes resistentes: refatorar os detalhes internos não deve quebrar um teste que ainda produz o mesmo comportamento visível para o usuário.

Verificação rápida

Qual API fornece um DebugElement?

Recapitulação

Você controlou as entradas por meio de setInput, leu o DOM com querySelector e By.css, capturou saídas inscrevendo-se nelas e simulou cliques e eventos de entrada. Sempre use detectChanges() depois de uma alteração e verifique o comportamento visível para o usuário.

Perguntas Frequentes

A aula “Testando entradas, saídas e DOM” é grátis?

Sim — o texto completo de “Testando entradas, saídas e DOM” é 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 entradas, saídas e DOM”?

Verifique a saída renderizada e os eventos. 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 2 de 4.

Quanto tempo leva a aula “Testando entradas, saídas e DOM”?

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