Examples

Read Good testing practices with ๐Ÿฆ” Angular Testing Library for a guided example

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, screen, fireEvent} from '@testing-library/angular'
import {CounterComponent} from './counter.component.ts'
describe('Counter', () => {
test('should render counter', async () => {
await render(CounterComponent, {
componentProperties: {counter: 5},
})
expect(screen.getByText('Current Count: 5'))
})
test('should increment the counter on click', async () => {
await render(CounterComponent, {
componentProperties: {counter: 5},
})
fireEvent.click(screen.getByText('+'))
expect(screen.getByText('Current Count: 6'))
})
})

More examples can be found in the GitHub project. These examples include:

  • @Input and @Output properties
  • (Reactive) Forms
  • Integration with NgRx (mock) Store
  • And more

If you're looking for an example that isn't on the list, please feel free to create a new issue.

Last updated on by Nick McCurdy