Exemple

[Traduction Bêta Non Officielle]

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Consultez les bonnes pratiques ou suivez le tutoriel guidé

Angular Testing Library fonctionne avec des composants autonomes (standalone) et des composants Angular utilisant des modules. L'exemple ci-dessous montre comment tester un composant autonome, mais les mêmes principes s'appliquent aux composants utilisant des modules. En réalité, la méthode de test est identique pour les deux types de composants, seule la configuration initiale peut différer.

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

Plus d'exemples

D'autres exemples sont disponibles dans le dépôt GitHub. Ces exemples couvrent notamment :

• Les propriétés input et output

• Les formulaires

• L'intégration de services injectés

• Et d'autres cas

Si vous cherchez un exemple absent de cette liste, n'hésitez pas à créer une nouvelle issue.