Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
87 lines (65 sloc) 2.08 KB
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

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'
You can’t perform that action at this time.