例

ベストプラクティスの詳細についてはこちらをお読みいただくか、ガイド例に従ってください

Angular テストライブラリは、スタンドアロンコンポーネントや、モジュールを使用する Angular コンポーネントで使用できます。以下の例でスタンドアロンコンポーネントのテスト方法を示しますが、同じ原則がモジュールを使用する Angular コンポーネントにも適用されます。実際、2種類のコンポーネントをテストする方法の違いはほとんどありません。設定方法だけが異なる場合があります。

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 {render, screen, fireEvent, aliasedInput} from '@testing-library/angular'
import {CounterComponent} from './counter.component'

describe('Counter', () => {
  it('should render counter', async () => {
    await render(CounterComponent, {
      inputs: {
        counter: 5,
        // aliases need to be specified using aliasedInput
        ...aliasedInput('greeting', 'Hello Alias!'),
      },
    })

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

  it('should increment the counter on click', async () => {
    await render(CounterComponent, {inputs: {counter: 5}})

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

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

他の例

他の例は、GitHub プロジェクトで見ることができます。これらの例には次のようなものが含まれます:

input および output プロパティ
フォーム
統合された注入サービス
その他詳細

リストにない例を探している場合は、お気軽に新しい課題を作成してください。

他の例​

他の例