Testing Angular 2

December 6, 2016    JavaScript Development Angular2

Testing in Angular 2+

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.

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

Videos



comments powered by Disqus