Ejemplos

[Traducción Beta No Oficial]

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Lee sobre buenas prácticas, o sigue el ejemplo guiado

Angular Testing Library puede usarse con componentes independientes (standalone) y también con componentes de Angular que utilizan Módulos. El ejemplo siguiente muestra cómo probar un componente independiente, pero los mismos principios se aplican a componentes de Angular que usan Módulos. De hecho, no debería haber diferencia en cómo pruebas ambos tipos de componentes; solo la configuración inicial podría variar.

counter.component.ts

@Component({
  selector: 'app-counter',
  template: `
    <span>{{ hello() }}</span>
    <button (click)="decrement()">-</button>
    <span>Current Count: {{ counter() }}</span>
    <button (click)="increment()">+</button>
  `,
})
export class CounterComponent {
  counter = model(0);
  hello = input('Hi', { alias: 'greeting' });

  increment() {
    this.counter.set(this.counter() + 1);
  }

  decrement() {
    this.counter.set(this.counter() - 1);
  }
}

counter.component.spec.ts

import { signal, inputBinding, twoWayBinding } from '@angular/core';
import { render, screen, fireEvent } from '@testing-library/angular';
import { CounterComponent } from './counter.component';

describe('Counter', () => {
  it('renders counter', async () => {
    await render(CounterComponent, {
      bindings: [
        twoWayBinding('counter', signal(5)),
        // aliases are handled naturally with inputBinding
        inputBinding('greeting', () => 'Hello Alias!'),
      ],
    });

    expect(screen.getByText('Current Count: 5')).toBeVisible();
    expect(screen.getByText('Hello Alias!')).toBeVisible();
  });

  it('increments the counter on click', async () => {
    await render(CounterComponent, {
      bindings: [twoWayBinding('counter', signal(5))],
    });

    const incrementButton = screen.getByRole('button', { name: '+' });
    fireEvent.click(incrementButton);

    expect(screen.getByText('Current Count: 6')).toBeVisible();
  });
});

Más ejemplos

Puedes encontrar más ejemplos en el proyecto de GitHub. Estos ejemplos incluyen:

• Propiedades input y output

• Formularios

• Integración de servicios inyectados

• Y más

Si buscas un ejemplo que no esté en la lista, no dudes en crear un nuevo issue.