examples.mdx

id	title	sidebar_label
examples	Examples	Examples

:::info 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.