Testing an Angular pipe as used in our project
Our calculator application is a simple tool that performs basic arithmetic operations, including addition, subtraction, multiplication, and division. Let’s suppose we have a feature that allows us to represent a number as a percentage. To do this, we will be using a pipe. We’ll call our pipe percent.
In our core folder, we’ll create a pipes folder. We’ll access this folder via our terminal and then run the following command to create our percent pipe:
$ ng g pipe percent –skip-import
After pipe generation, this is the tree structure you should see:
Figure 5.1 – The pipe folder
In relation to the contents of percent.pipe.spec.ts, this is what we have:
import { PercentPipe } from './percent.pipe';
describe('PercentPipe', () => {
it('create an instance', () => {
const pipe = new PercentPipe...