Exemplos

[Tradução Beta Não Oficial]

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

Leia sobre boas práticas, ou siga o exemplo guiado

A Angular Testing Library pode ser usada tanto com componentes independentes (standalone) quanto com componentes Angular que utilizam Módulos. O exemplo abaixo mostra como testar um componente independente, mas os mesmos princípios se aplicam a componentes Angular que usam Módulos. Na verdade, não deve haver diferença na forma como você testa ambos os tipos de componentes - apenas a configuração inicial pode 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();
  });
});

Mais exemplos

Mais exemplos podem ser encontrados no projeto GitHub. Esses exemplos incluem:

• Propriedades input e output

• Formulários

• Integração de serviços injetados

• E mais

Se você está procurando um exemplo que não está na lista, sinta-se à vontade para criar uma nova issue.