How to test Pipes in Angular?

by Siddharth Pandey · Published · Updated

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.

I’ll be extending my Prodo application that is available on GitHub for you to fork or download. If you are wondering what Prodo is, then please refer my other post: Learn to build E-Commerce Backend App using Angular, Web API.

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.

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

@Pipe({
  name: 'defaultValue'
})
export class DefaultValuePipe implements PipeTransform {
  transform(value: string, fallbackValue: string): any {

    let result: string = value ? value : fallbackValue;
    
    return result;
  }
}

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

@Pipe({

name: 'defaultValue'

})

export class DefaultValuePipe implements PipeTransform {

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

let result: string = value ? value : fallbackValue;

return result;

}

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:

<img class="card-img-top product-card-image" [src]="product.imageUrl | defaultValue: 'http://via.placeholder.com/200x200'" alt="Product Image">

1	<img class="card-img-top product-card-image" [src]="product.imageUrl \| defaultValue: 'http://via.placeholder.com/200x200'" alt="Product Image">

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:

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 = new DefaultValuePipe();

  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');
  });

});

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 = new DefaultValuePipe();

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.

If you would like to access the code, please refer to my Prodo repository. Refer to my Angular, TypeScript posts to learn more.

Tags: Angular BDD Jasmine JavaScript Karma TypeScript Unit Testing

Siddharth Pandey

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.