0Pricing
Angular Academy · Lección

Probar signals y código asíncrono

Probar comportamientos reactivos y asíncronos

Probar signals y código asíncrono es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 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.

La asincronía es la parte difícil de las pruebas

Los componentes reales realizan trabajo asíncrono: temporizadores, promesas, HTTP y entradas con debounce. Las pruebas deben controlar el tiempo para que las aserciones se ejecuten después de que finalice el trabajo asíncrono. Angular le proporciona fakeAsync, tick y flush para controlar el tiempo de forma determinista.

Probar una señal

Una señal se lee como una función. Probarla es sencillo: invoque la señal y compruebe el valor; actualícela y vuelva a comprobarlo.

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);
});

Las señales computadas se actualizan automáticamente

Un computed se recalcula cuando cambian sus dependencias. En una prueba, cambie la señal de origen y, después, lea la señal computada; no es necesario recalcularla manualmente.

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

Las señales y el DOM

Para comprobar que un cambio en una señal se refleja en la plantilla, llame a detectChanges() después de actualizarla, como haría con cualquier otro estado.

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

Introducción a fakeAsync

Envuelva una prueba en fakeAsync para entrar en una zona de tiempo simulada. Los temporizadores y las microtareas se ponen en cola en lugar de ejecutarse, y usted los hace avanzar manualmente. Esto convierte las pruebas asíncronas en síncronas y fiables.

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

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

Avanzar el tiempo con tick

tick(ms) adelanta el reloj virtual y ejecuta los temporizadores programados dentro de ese 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 los temporizadores pendientes

Cuando no conoce el retraso exacto, flush() agota todas las macrotareas pendientes hasta vaciar la cola.

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);
}));

Probar promesas con fakeAsync

Las promesas se resuelven como microtareas. Dentro de fakeAsync, llame a flushMicrotasks() (o tick()) para resolverlas antes de realizar las aserciones.

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);
}));

El auxiliar async / waitForAsync

Para pruebas que deben esperar a una operación asíncrona real sin controlar el tiempo, envuelva el cuerpo en waitForAsync y use fixture.whenStable().

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

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

Probar effect()

Un effect se ejecuta de forma asíncrona después de que cambien las señales que lee. Para observar su resultado, ejecute la detección de cambios (o haga un flush) para que se ejecute el efecto y, después, compruebe el efecto secundario.

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

Error frecuente: temporizadores pendientes

Si una prueba con fakeAsync termina mientras aún hay temporizadores en la cola, Angular genera un error. Ejecute siempre tick/flush para vaciarlos o elimine los intervalos en ngOnDestroy, de modo que el reloj virtual esté vacío cuando finalice la prueba.

Comprobación rápida

Elija la herramienta adecuada para un retraso conocido.

Resumen

Las señales se prueban como funciones sencillas (invoque para leer, use set para actualizar y detectChanges para el DOM). Para la asincronía, fakeAsync proporciona un reloj virtual que puede adelantar con tick, vaciar con flush y utilizar para resolver promesas con flushMicrotasks. No deje nunca temporizadores pendientes.

Preguntas frecuentes

¿La lección «Probar signals y código asíncrono» es gratis?

Sí — el texto completo de «Probar signals y código asíncrono» 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 signals y código asíncrono»?

Probar comportamientos reactivos y asíncronos 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 4 de 4.

¿Cuánto tiempo toma la lección «Probar signals y código asíncrono»?

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

  1. TestBed y fixtures de componentes
  2. Probar inputs, outputs y el DOM
  3. Simular servicios y dependencias
  4. Probar signals y código asíncrono
← Volver a Angular Academy