Angular Testing Library
🦔 @testing-library/angular
Simple and complete
Angular testing utilities that encourage good testing
practices.
npm install --save-dev @testing-library/angular
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 '@testing-library/angular'
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 @testing-library/angular
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 @testing-library/angular
, but the
Angular's change detection will not be triggered automatically.
The same counts for all the queries provided by the DOM Testing Library
(@testing-library/dom
), these are also re-exported and can be imported via
@testing-library/angular
.
import { getByText, click } from '@testing-library/angular'