範例

閱讀關於最佳實務，或跟隨導引範例

Angular Testing Library 可以與獨立元件以及使用模組的 Angular 元件一起使用。下面的範例展示了如何測試獨立元件，但相同的原則適用於使用模組的 Angular 元件。事實上，測試這兩種元件類型的方式應該沒有區別，只有設定可能不同。

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

更多範例​

更多範例