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".

• 📓 Slides
• 📹 Talk

Contents

All the scenarios are listed here below and nicely linked to the source file.

1. Testing Components
   • testing @Input
     Learn how to test a component's @Input().
   • testing @Output
     Learn how to test a component's @Output(), more specifically the EventEmitter type.
   • testing timers inside components
     Learn about how to handle timers inside components using fakeAsync and discardPeriodicTasks().
   • 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
   • testing component with service deps
     Simple test of component logic by manually instantiating the component
2. 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 the async() as well as fakeAsync() functions.
   • Mocking and remote http calls Learn how to mock external dependencies, such as use the MockBackend provided by Angular to respond to http calls.
   • Mocking remote calls with Jasmine spies Fake the call by using Jasmine spies.
3. Testing Pipes
   • custom filter pipe
   • async pipes within templates
     Shows how to correctly resolve async pipes and then verify they properly render in the HTML
4. Custom Matchers and Utilities
   • Create your own custom Jasmine matchers

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,

1. clone this repository
2. Run npm install
3. 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 😃.

Other Links & Resources

• Testing Angular Material Dialog templates