Angular Testing Library

Examples

counter.component.ts

@Component({
 selector: 'counter',
 template: `
   <button (click)="dec()">-</button>
   <span data-testid="count">Current Count: {{ counter }}</span>
   <button (click)="inc()">+</button>
 `,
})
export class CounterComponent {
 @Input() counter = 10

 inc() {
   this.counter += 1
 }

 dec() {
   this.counter -= 1
 }
}

counter.component.spec.ts

import {render, screen, fireEvent} from '@testing-library/angular'
import {CounterComponent} from './counter.component.ts'

describe('Counter', () => {
 test('will render the counter', async () => {
   await render(CounterComponent, {
     componentProperties: {counter: 5},
   })

   expect(screen.getByText('Current Count: 5')).toBeInTheDocument()
 })


 test('will increment the counter upon click', async () => {
   await render(CounterComponent, {
     componentProperties: {counter: 5},
   })

   fireEvent.click(screen.getByText('+'))

   expect(screen.getByText('Current Count: 6')).toBeInTheDocument()
 })
})

Frequently Asked Questions

1. What is the Angular testing library?
   The Angular Testing Library is a light and efficient solution to test an Angular component. Furthermore, the Angular testing library provides various utility functions on top of the DOM Testing Library in a way that promotes better testing practices.
2. What is a testing library?
   The Testing Library is a family of libraries that is a very lightweight solution for testing without all the implementation details. The principal utilities it provides involve querying for nodes similarly to how users would find them. In this way, the testing library helps ensure your tests give you confidence in your UI code.
3. How to use the Angular testing library in a project?
   To install the Angular testing library in a project, simply type the following code.
   npm install --save-dev @testing-library/angular
4. Can unit tests be written with the Angular Testing library?
   Yes, It is indeed possible to write unit and integration tests with the Angular Testing library. 
5. What is the best Angular testing framework?
   Karma
   Jasmine
   Mocha
   Jest
   Selenium Webdriver
   These are some of the best Angular Testing frameworks.

Conclusion

In this article, we have extensively discussed the Angular Testing Library. If you are Preparing for interview and don't know where to start, we have got you covered, check out our expert curated courses on our website, You can also check out Coding Ninjas Studio to practice frequently asked interview problems. We hope that this blog has helped you enhance your knowledge regarding Angular and if you would like to learn more, check out our articles.Do upvote our blog to help other ninjas grow. Happy Coding!"