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.