How to test Pipes in Angular?

Angular Pipes is a smart way to write display-value transformations that can be easily declared in the HTML. In this post, I’ll tell you how to test Pipes in Angular.

It is quite easy to an application to show data to the users by requesting it from the server or database. There can be scenarios to display data to the users where the data needs to be transformed in some other way (different to how it is stored) or repeatedly manner using different views.

Angular pipes make it easy to apply these transformations in the HTML template once the data is available for the front-end application. Similar to CSS styles, it is quite declarative and easy to understand.

There are many built-in pipes available in Angular like DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe and PercentPipe. In this post, I’ll write a custom pipe named DefaultValuePipe which can be used in my application to provide default values for variables in templates when no value is provided and with a fallback value as well.

Below is the definition of a simple custom pipe – DefaultValuePipe for which I’ll write tests later in this post. This can be used to provide placeholders images when a product in Prodo doesn’t have an image, etc.

Definition of DefaultValuePipe

C#

1

2

3

4

5

6

7

8

9

10

11

12

13

import{Pipe,PipeTransform}from'@angular/core';

@Pipe({

name:'defaultValue'

})

exportclassDefaultValuePipeimplementsPipeTransform{

transform(value:string,fallbackValue:string):any{

let result:string=value?value:fallbackValue;

returnresult;

}

}

Our custom pipe is quite simple. Given a value is valid, the same value is return otherwise the fallback value is returned. In Prodo, this pipe is used in following manner:

Let us now test this pipe implementation. Pipes are easy to test without the Angular testing utilities. It is just a class with one method, transform that basically manipulates the input value into a transformed output value. Most pipes have no dependencies on Angular other than the @Pipe metadata and an interface.

Provided your test suite is ready i.e. Jasmine, Karma (if not, please use Angular CLI to create an app and look at the test setup), below is the code to test this custom pipe:

Test spec for DefaultValuePipe

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

import{DefaultValuePipe}from'./default-value.pipe';

describe('DefaultValuePipe',()=>{

// This pipe is a pure, stateless function so there is no need for beforeEach function

let pipe=newDefaultValuePipe();

it('should not transform the valid original value',()=>{

expect(pipe.transform('test','')).toBe('test');

});

it('should use the fallback value when original value is invalid',()=>{

expect(pipe.transform('','this is a fallback value')).toBe('this is a fallback value');

});

});

Custom Pipes in Angular is very easy to test as pipe is a pure, stateless function that doesn’t need any other setup using Angular’s TestBed or other testing utilities. So, it can be tested like any other function in JavaScript or class in TypeScript. This is what is known as a isolated unit test.

Siddharth Pandey is a Software Engineer with thorough hands-on commercial experience & exposure to building enterprise applications using Agile methodologies. Siddharth specializes in building, managing on-premise, cloud based real-time standard, single page web applications (SPAs). He has successfully delivered applications in health-care, finance, insurance, e-commerce sectors for major brands in the UK. Other than programming, he also has experience of managing teams, trainer, actively contributing to the IT community by sharing his knowledge using Stack Overflow, personal website & video tutorials.