intro.md

id	title
intro	Angular Testing Library

🦔 @angular-extensions/testing-library Simple and complete Angular testing utilities that encourage good testing practices.

npm install --save-dev angular-extensions/testing-library

• @angular-extensions/testing-library on GitHub

Usage

counter.component.ts

@Component({
  selector: 'counter',
  template: `
    <button (click)="decrement()">-</button>
    <span data-testid="count">Current Count: {{ counter }}</span>
    <button (click)="increment()">+</button>
  `,
})
export class CounterComponent {
  @Input() counter = 0

  increment() {
    this.counter += 1
  }

  decrement() {
    this.counter -= 1
  }
}

counter.component.spec.ts

import { render } from '@angular-extensions/testing-library'
import CounterComponent from './counter.component.ts'

describe('Counter', () => {
  test('should render counter', async () => {
    const { getByText } = await render(CounterComponent, {
      componentProperties: { counter: 5 },
    })

    expect(getByText('Current Count: 5'))
  })

  test('should increment the counter on click', async () => {
    const { getByText, click } = await render(CounterComponent, {
      componentProperties: { counter: 5 },
    })

    click(getByText('+'))

    expect(getByText('Current Count: 6'))
  })
})

API

There is a small difference between @angular-extensions/testing-library and the testing-library family, in this library we also expose all of the events via the render function. This is done to trigger Angular's change detection after each interaction.

You can also import these event via @angular-extensions/testing-library, but the Angular's change detection will not be triggered automatically.

The same counts for all the queries provided by DOM Testing Library, these are also re-exported and can be imported via @angular-extensions/testing-library.

import { getByText, click } from '@angular-extensions/testing-library'