Testing in Angular 2+ (now known as Angular)

Getting started learning about testing Angular 2+ was daunting. I have been using Jasmine for unit testing for many years, so I was thankful that Jasmine was the default testing tool (others will work as well after a rececent 1.1.x release). I was able to take a day and a half to investigate at work for framework comparisons we are doing. After 12 hours, I still have a lot to learn.

Angular2 testing allows a lot of different testing approaches and I think there is a high possibility of avoiding a large amount of UI tests. This is a very good thing as testing should be like a pyramid , not like an ice-cream cone . However, this testing is complex and will take a lot of learning. I was quickly lost watching Julie Ralph’s Testing Strategies with Angular 2 from Angular Connect 10/01/2016.

I recommend using the Angular CLI . ng new creates a project with Webpack and Karma setup and ready to go. Then you can run ng test and get test feedback from Karma right away. Start at the tutorial docs from the Angular 2 team. Then watch Angular2 TDD in ES6 . These Test Driven Development (TDD) videos cover 2.0.0-beta.13, but is the best overview and walk through of testing in Angular2 that I found.

Once you get some tests running, don’t neglect a build system that will run the tests on every check-in/pull request.

Edit June 2022: I’ve learned and written about using Testing Library . Please check that out before using the Angular testing approach below.

Types of tests to write

There are several types of tests that should be written to have good coverage.

• unit tests against the ts file using var component = new MyComponent();
• unit tests with the DOM involved using TestBed.configureTestingModule({ and let fixture = TestBed.createComponent(AppComponent); let app = fixture.debugElement.componentInstance;
  • This might be a good way to get the testing pyramid (most unit tests, some integration/service, least UI)
• End to End (e2e) tests using Protractor to run through the UI itself
  • Cover acceptance tests, use as sparingly as possible
  • these tests take longer (run in parallel on many Vms) and are brittle (loading times has caused me a lot trouble)
  • They help avoid manual testing and move you on the way toward DevOps
  • you could use Selenium through C# instead
  • when are the unit tests with the DOM enough?
    • There is always a balance to be found

Three Ways to Test Angular 2 Notes: From the image at the top.

• Isolated tests
  • no rendering
  • same as ny other JS Object
  • Mock all dependencies
• Shallow tests
  • Isolated Tests++
  • Render the Template without the Children
  • using TestBed.configureTestingModule( and TestBed.createComponent(ConversationsCmp);
• Integration Tests
  • Render Components
  • Check Components
  • Only Mock Browser Capabilities

Other Resources

• Build Enterprise Applications with Angular 2
  • $15 as of 2017-02-06, last updated 2017-02
• A Test-Driven Development Introduction to Angular 2 2016-05-16 (beta)
• Testing all your Tasks - Julie Ralph 2016-05-04
• Testing Angular 2.0.x Services and Http with Jasmine and Karma
• Angular 2 — Testing Guide
• Assert the urls in the service
• Testing in Angular 2
  • 2016-12-07, An intro to help you get started
• Essential Angular Testing
  • 2017-01-11
• Testing With Angular 2: Some Recipes (Talk and Slides)
  • 2017-01-16, a video and several articles linked at the bottom of this article
• Writing Unit Tests in Angular 2
  • 2017-01-31, shows how to setup Jasmine and Karma and a few examples
  • Link to form test scripts was included
• E2E Testing – the right way - May 30, 2017
• Angular Testing In Depth: Components - July 12, 2017
• Unit testing Angular applications with Jest - July 26, 2017
• ANGULAR TESTING PATTERNS - TESTBED - December 22, 2017
• Angular Testing Snippets
• AngularFirebase testing - when we add in Firebase, we have to be able to fake it.

Videos

• Angular2: A TDD Intro In ES6
  • May 01, 2016. pre-release, so there are some differences, but this is the best I’ve watch!
• Testing Strategies with Angular 2 from Angular Connect 10/01/2016
  • once you have a basis from the docs , watch this video.
• Vikram Subramanian (@vikerman): Unit Tests for Angular 2 Applications at ng-europe 2016 - October 29, 2016
• Angular2 TDD in ES6
  • 2016-05-01, 2.0.0-beta.13 so things have changed :-(, however, this is a very good and thorough walkthrough on all the testing capabilites with Angular2
• Angular 2 - Testing - May 2016
• Testing Angular 2 in 15min 2016-10-21
• ngAir 93 - Techniques for Testing with Duncan Hunter and Adam Stephensen