Testing a Directive and Pipe in Angular

Introduction

A directive with an attribute specifies how an element, component, or another directive should behave. The directive is used as an attribute on a host element, as indicated by its name.

Testing Attribute Directives

Attributes When modifying an element's style, directives are frequently used, either directly with inline styles or indirectly through classes.

To test an attribute directive, you must first obtain an instance of it, do some kind of action, and then verify that the DOM displays the anticipated changes. Prior to starting the exam writing process.

Example of Testing Directives

Execute the following command to create a new attribute directive using the Angular CLI.

Code:

How does it Work?

We'll add a CSS class to our HTML element that will specify whether it's a full or empty star based on the input value.

Here is how our component uses it:

How do We Test a Directive?

Therefore, the first step in testing our new directive is to design a fake test component that makes use of it.

After that, a test case will be written to ensure that the right class has been added.

Testing Pipes

Pipes transform the input before returning the modified value. Because pipes operate so simply, writing tests for them is easy. The quality of a pipe depends on its input. Any function whose output depends only on the input it receives is said to be pure.

When a function is capable of more than merely returning a value, it is said to have a side effect. Examples of side effects include changing a global variable or making an HTTP call. Because pipes are straightforward functions with no adverse effects, they are easy to evaluate.

Example of Testing Pipes

We'll start by creating a new pipe with the Angular CLI.

Unit Testing Our New Angular Pipe

We start by generating a new instance of our Angular pipe, same as we did before.

Then, we applied it to a transformed input and evaluated the result.