Angular Academy · Lección

Probar inputs, outputs y el DOM

Comprobar el resultado renderizado y los eventos

Probar inputs, outputs y el DOM es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Probar el contrato del componente

Los componentes se comunican mediante entradas (datos de entrada), salidas (eventos de salida) y el DOM renderizado. Las buenas pruebas de componentes utilizan estas tres superficies y verifican el resultado visible, no los detalles de implementación internos.

Establecer una entrada

Asigne un valor a la propiedad de entrada de la instancia del componente y llame después a detectChanges() para volver a renderizarlo. Con entradas basadas en señales, establezca el valor mediante fixture.componentRef.setInput().

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

Leer el DOM con querySelector

Utilice fixture.nativeElement.querySelector() para buscar elementos renderizados y comprobar su texto o sus atributos.

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

DebugElement y By.css

fixture.debugElement.query(By.css(...)) devuelve un envoltorio DebugElement. Su propiedad .nativeElement es el nodo DOM y permite realizar consultas más completas que funcionan en distintas 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 ejemplo, un bucle @for), utilice queryAll para obtener todas las coincidencias y comprobar la cantidad.

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

Simular un clic

Active eventos del DOM para probar la interacción. Utilice triggerEventHandler en un DebugElement o llame a .click() en el elemento nativo y, después, a detectChanges().

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

Probar un evento de salida

Suscríbase a la salida del componente (un EventEmitter o una señal de salida) antes de activar la acción que debería emitirla.

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

Comprobar atributos y clases

Puede verificar las clases y los atributos condicionales que dependen de las entradas.

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

Actualizar entradas de formulario

Para probar campos de texto, establezca el valor de la entrada y envíe un evento input para que se actualicen los enlaces de Angular.

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

Por qué usar detectChanges después de cada cambio

Tanto las pruebas basadas en zonas como las que no usan zonas requieren un detectChanges() explícito después de modificar el estado, porque la prueba se ejecuta fuera del ciclo automático de Angular. Olvidarlo es la causa principal de que una aserción vea un DOM obsoleto.

Probar el comportamiento, no los detalles internos

Es preferible comprobar el resultado renderizado y los eventos emitidos que los campos privados. Así las pruebas son más resistentes: refactorizar los detalles internos no debería romper una prueba si el comportamiento visible para el usuario sigue siendo el mismo.

Comprobación rápida

¿Qué API le proporciona un DebugElement?

Resumen

Controló las entradas mediante setInput, leyó el DOM con querySelector y By.css, capturó las salidas mediante suscripciones y simuló eventos de clic y de entrada. Llame siempre a detectChanges() después de un cambio y compruebe el comportamiento visible para el usuario.

Preguntas frecuentes

¿La lección «Probar inputs, outputs y el DOM» es gratis?

Sí — el texto completo de «Probar inputs, outputs y el DOM» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Probar inputs, outputs y el DOM»?

Comprobar el resultado renderizado y los eventos Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Probar inputs, outputs y el DOM»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy