Angular 2 – Testing

Rick HerrmannWriting tests has been something I’ve been a proponent of for many years.  My testing experience started with C# and then continued on the front end with javascript and Angular 1.  So when I started learning Angular 2, I naturally wanted to see what the testing story was.

The front-end testing I’ve done in the past has always had some friction with respect to getting the tools setup properly.  Mostly I have used Jasmine as the testing framework, which is pretty self contained – but to get a node test server setup properly there are a variety of other npm modules and karma configuration settings to deal with.  I previously wrote about how the angular-cli makes it easy to get an Angular 2 project setup, and this includes getting the test tools setup as well.  So instead of dealing with configuration settings, you can quickly get to just writing tests.

As with Angular 1, Angular 2 comes with a testing module as part of the framework.  In the case of Angular 2, it is part of @angular/core/testing.

To be clear, the tests I’ve written so far are relatively simple, but I think they are illustrative of how to get started with testing Angular 2 components.  Let’s walk through a set of tests I wrote to verify the functionality of a simple login form.

To run your tests with the Angular-CLI, using the command line type

ng test

After the import statements, the first interesting piece is the test-setup code on lines 14-28.  This block runs before every test in the file to provide a clean starting point.  The purpose of this block is to tell the test runner to import the component dependencies, and to define how to resolve the constructor dependencies.  In this case we are testing a component which takes a custom UserService and the Angular 2 Router as a dependency.

One pattern that did carryover from Angular 1 was the inject function.  The inject function is responsible for handling the dependency injection for the component under test.

Other than the setup code in the beforeEach block, the tests themselves are pretty free of non-test related code.  In the block on line 33, we have two tests that check the component state when the page loads.  All we do is create an instance of the component and then check the public property values.

On line 43 we setup a test for when the login button is clicked.  We use the Jasmine spyOn feature to stub the service and router functionality.  On line 48 we directly call the authenticateUser function on the component, and then verify the expectations.

On line 48 we are testing that the login fails.  To trigger this scenario we tell the userService.login to return false using spyOn with the returnValue option.

As I continue learning about Angular 2 testing I will post other examples including:

  1. component interaction
  2. services and observables
  3. end-to-end tests

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s