How to test pipes in angular

Question

I have a scenerio where a pipe return the class name based on the input and my test case is getting failed if I trying to test the pipe. My implementation is as follows, can anyone pls help.Thanks. I have a html as follows,

   <div [class]="type | functionTester: getNameOfClass: this"> 
    .... 
    </div>
     

Ts,

   type = 'high';
      getNameOfClass() {
       if (type === 'high') {
         return 'HIGH';
       } else {
         return 'LOW';
       }
    }

Pipe,

   export class functionTesterPipe implements PipeTransform {
    public transform(
       value: any,
       handler: (value: any) => any,
       context?: any
      ): any {
       if (context) {
        return handler.call(context, value);
       }

         return handler(value);
       }
     }

Spec,

 const { find } = await shallow
     render({
      bind: { chartData: chartData, type: 'ORG_BENCHMARK' }
    });
  const pipe = new functionTesterPipe();
  expect(pipe.transform('high', instance.prepareClassName)).toBe('High');
  fixture.detectChanges();
  expect(find('.High').length).toBe(1); -> Failing at this line as [expect 0 to be 1]


    

I have a scenerio where a pipe return the class name based on the input and my test case is getting failed if I trying to test the pipe. My implementation is as follows, can anyone pls help.Thanks.

Answer 1

Basic setup for pipe testing:

import { Pipe } from './pipe.pipe';

describe('Pipe', () => {
  let pipeToTest: Pipe;

  // synchronous beforeEach
  beforeEach(() => {
    pipeToTest = new Pipe();
  });

  it('should be instanciated', () => {
    expect(pipeToTest).toBeDefined();
  });
});

Answer 2

<table>

 <tr>
<th>Employee Name</th>
<th>Employee ID</th>
<th>Mail</th>
<th>Salary</th>
<th>Actions</th>
<th></th>

</tr>
<tr *ngFor="let data of empolyeeDetails ">
<td> {{data?.name}} </td>
<td> {{data?.id}} </td>
<td> {{data?.email}} </td>
<td> {{data?.salary}} </td>

<td><button type="Edit" class="btn btn-primary" (click)="onEdit(data) ">Edit</button></td>
  <td><button type="Delet" class="btn btn-primary" (click)="onDelete(data)">Delete</button></td>
    </tr>
</table>

 <br>
 <div class="crudForm">
   <form [formGroup]="crudForm">
  <div class="form-group">
  <label for="exampleInputEmail1">Name</label>
   <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
    placeholder="Enter Name" formControlName="name">
    </div>


   <div class="form-group">
    <label for="exampleInputEmail1">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
    placeholder="Enter email" formControlName="email">
   </div>


    <div class="form-group">
      <label for="exampleInputEmail1">salary</label>
      <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
    placeholder="Enter Salary" formControlName="salary">
    </div>
<!-- <div class="form-group">
     <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
     </div> -->
     <button type="submit" class="btn btn-primary" (click)="onSubmit()">Submit</button>
   </form>
 </div>

===============================================================

import { Component } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
 @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
  })
   export class AppComponent {
    title = 'credApp';
     crudForm: any;
    isEdit = false;
   empolyeeDetails = [
      { name: "Ragu", id: "123", email: "rag@mail.com", salary: 50000 }, 
      { name: "Ramu", id: "345", email: "ram@mail.com", salary: 40000 }, 
      { name: "Raju", id: "678", email: "raju@mail.com", salary: 45000 }
    ];

     constructor(public fb: FormBuilder) {
       this.loadForm();
         if (this.getFromLocalStorage()) {
          this.empolyeeDetails = this.getFromLocalStorage();
       }
      }

      loadForm() {
        this.crudForm = this.fb.group({
           name: [''],
            id: [''],
         email: [''],
         salary: ['']
         });
       }

        onEdit(data: any) {
           this.isEdit = true;
           this.crudForm.controls['name'].setValue(data.name);
            this.crudForm.controls['id'].setValue(data.id);
           this.crudForm.controls['email'].setValue(data.email);
           this.crudForm.controls['salary'].setValue(data.salary);
         }

       onDelete(data: any) {
         var index = this.empolyeeDetails.findIndex(function(element) {
              return (element.id === data.id);
             });
         this.empolyeeDetails.splice(index, 1);
           this.performStorageAction();
        }

           onSubmit() {
                  var randomNum = Math.floor(Math.random() * 90 + 10);
               if (this.isEdit) {
               this.onDelete(this.crudForm.value);
             } else {
               this.crudForm.controls['id'].setValue(randomNum);
             }
                this.empolyeeDetails.push(this.crudForm.value);
                this.performStorageAction();
              this.crudForm.reset();
              }

             storeInLocalStorage() {
                  localStorage.setItem("data", JSON.stringify(this.empolyeeDetails));
                }

              getFromLocalStorage() {
                 return JSON.parse(localStorage.getItem('data') || '');
              }

                performStorageAction() {
                  this.storeInLocalStorage();
                 this.empolyeeDetails =  this.getFromLocalStorage();
               }
               }