Pipes

AngularAngular

testing-pipes

Pipes have only one method, transform, that manipulates the input value into a transformed output value.

transform implementation rarely interacts with the DOM and most pipes have no dependencies other than the Angular @Pipe metada and interface.

An example of testing could be.

title-case.pipe.ts

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

@Pipe({name: 'titlecase', pure: true})
/** Transform to Title Case: uppercase the first letter of the words in a string. */
export class TitleCasePipe implements PipeTransform {
    transform(input: string): string {
        return input.length === 0
            ? ''
            : input.replace(/\w\S*/g, (txt) => txt[0].toUpperCase() + txt.slice(1).toLowerCase());
    }
}

title-case.pipe.specs.ts

describe('TitleCasePipe', () => {
    // This pipe is a pure, stateless function so no need for BeforeEach
    const pipe = new TitleCasePipe();
    
    it('transforms "abc" to "Abc"', () => {
        expect(pipe.transform('abc')).toBe('Abc');
    });
    
    it('transforms "abc def" to "Abc Def"', () => {
        expect(pipe.transform('abc def')).toBe('Abc Def');
    });
});