Testing Components in Angular Using Jasmine

Testing Components in Angular Using Jasmine

Test Driven Development is a programming practice that has been preached and promoted by every developer community on the planet. And yet it's a routine that is largely neglected by a developer while learning a new framework. Writing unit tests from day one will help you to write better code, spot bugs with ease, and maintain a better development workflow.

Angular, being a full-fledged front-end development platform, has its own set of tools for testing. We will be using the following tools in this tutorial:

We are not going to cover functional tests using Protractor in this tutorial. Protractor is a popular end-to-end test framework that interacts with the application's UI using an actual browser. 

In this tutorial, we are more concerned about testing components and the component's logic. However, we will be writing a couple of tests that demonstrate basic UI interaction using the Jasmine framework.

[…]

The entire code for the tutorial is available on Github. 

Clone the repo and feel free to check out the code if you are in doubt at any stage of this tutorial.  Let's get started!

[…]

The ng new command has created an app.component.spec.ts file for our app.component.ts. Feel free to open it up and have a good look at the Jasmine tests in Angular. Even if the code doesn't make any sense, that is fine. We will keep AppComponent as it is for now and use it to host the routes at some later point in the tutorial. 

[…]