Angular Testing Recipes
This repo is for Angular version 2+. More ยป
The goal of this repository is to have a collection of recipes for common testing scenarios with Angular. I'm happy for every contribution/suggestion ๐.
Talk (Video + Slides)
I've been giving a talk on "Testing with Angular".
Contents
All the scenarios are listed here below and nicely linked to the source file.
- Testing Components
- testing @Input
Learn how to a component's@Input()
. - testing @Output
Learn how to test a component's@Output()
, more specifically theEventEmitter
type. - testing DOM manipulations
Learn how to test the DOM manipulations which might be caused by like*ngIf
statements etc. - testing content projection
Learn how to test<ng-content>
directives. - testing dynamic CSS classes
Test CSS classes being added and removed dynamically from your component's template based on some conditional expressions. - testing dynamic CSS styles
Test dynamic CSS styles using custom Jasmine matchers. - mocking nested components
Learn how to mock out nested components which you don't want to necessarily test - async pipes within templates
Shows how to correctly resolve async pipes and then verify they properly render in the HTML
- testing @Input
- Testing Services
- Simple stateless function
Learn about different ways of injecting a service into a test case as well as how to test service methods. - Async operations
Learn how to test async operations using theasync()
as well asfakeAsync()
functions. - Mocking and remote http calls
Learn how to mock external dependencies, such as use theMockBackend
provided by Angular to respond to http calls.
- Simple stateless function
- Testing Pipes
- Custom Matchers and Utilities
Articles on Testing
๐ Angular 2 Testing Guide by Gerard Sans- ๐ Testing Angular Directives with Custom Matchers by Thoughtram
๐ Essential Angular Testing by Nrwl- ๐ Three Ways to Test Angular 2 Components by Victor Savkin
Run them yourself
If you want to run the example locally,
- clone this repository
- Run
npm install
- Run
npm test
to execute all the tests
By running npm run test.watch
you can run the tests in watch mode which is particularly useful during development.
Contribute
Wanna help? Of course! Just open an issue and/or send me a PR ๐.