Search⌘ K
Home
Courses
Learning Angular

Testing Pipes and Directives

Explore how to effectively test Angular pipes by instantiating their classes and verifying transform methods. Learn to test custom directives using test host components to validate their behavior and integration within Angular applications.

We'll cover the following...

Testing pipes

In this lesson, we will learn how to test a pipe. Previously, we learned that a pipe is a TypeScript class that implements the PipeTransform interface. It exposes a transform method, which is usually synchronous, which means it is straightforward to test. The list.pipe.ts file contains a pipe that converts a comma-separated string into a list:

TypeScript 4.9.5
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'list'
})
export class ListPipe implements PipeTransform {
  transform(value: string): string[] {
    return value.split(',');
  }
}

Writing a test for it is simple. The only thing that we need to ...