4 Testing directives

In this chapter, you’ll learn how to test directives. Directives, like components, are a way to encapsulate parts of your application as reusable chunks of code. With regard to functionality, both directives and components allow you to add behavior to the HTML in your application.

For example, let’s say your application has a table, and you want to change the background color of a row when the pointer hovers over it. You could create a directive named HighlightRowDirective that adds that row highlighting behavior and reuse it throughout your project.

Before you get started writing the tests for directives, you’ll want to know a little more about them.

4.1 What are directives?

Angular provides three types of directives:

Directives and components are similar. Let’s get started by exploring the differences and similarities between the two.

4.1.1 Components vs. directives

4.1.2 Different directives

4.2 Testing attribute directives

4.2.1 Introducing the favorite icon directive

4.2.2 Creating tests for FavoriteIconDirective

4.2.3 Setting up the FavoriteIconDirective test suite

4.2.4 Creating the FavoriteIconDirective tests

4.3 Testing structural directives

4.3.1 Introducing ShowContactsDirective

4.3.2 Creating your tests for ShowContactsDirective

4.3.3 Setting up the ShowContactsDirective test suite

4.3.4 Creating the ShowContactsDirective tests

Summary