How to test pipes in angular

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.

20 thoughts on “How to test pipes in angular”

  1. I’m really impressed with your writing skills and also with the layout on your blog.
    Is this a paid theme or did you modify it yourself? Anyway keep up the nice quality writing,
    it’s rare to see a great blog like this one nowadays.

    Reply
  2. My coder is trying to convince me to move to .net from PHP.
    I have always disliked the idea because of the costs.
    But he’s tryiong none the less. I’ve been using
    WordPress on a number of websites for about a year and am anxious about switching
    to another platform. I have heard good things about
    blogengine.net. Is there a way I can transfer all my wordpress content into it?
    Any help would be greatly appreciated!

    Feel free to visit my blog: ace333 ios

    Reply
  3. Thank you, I’ve just been searching for info approximately this
    topic for a while and yours is the greatest I have found out till now.
    But, what about the bottom line? Are you positive concerning the supply?

    Review my web-site – Terrance

    Reply
  4. I think everything posted was very logical. However, what about this?

    suppose you added a little information? I ain’t suggesting your content is not good, however
    suppose you added something to maybe get folk’s attention?
    I mean How to test pipes in angular – JavaScript Help is kinda vanilla.
    You could glance at Yahoo’s home page and watch how they create news titles to get viewers to click.
    You might add a video or a related picture or two to grab readers interested about everything’ve written.
    In my opinion, it would make your blog a little bit more interesting.

    Look at my web-site: king855 demo id

    Reply
  5. Hello there! Quick question that’s totally off topic.
    Do you know how to make your site mobile friendly?
    My website looks weird when browsing from my iphone4.
    I’m trying to find a template or plugin that might be able to correct this issue.

    If you have any suggestions, please share. Thanks!

    my homepage … Extreme Shred Keto

    Reply
  6. Just wish to say your article is as astounding. The clarity for your submit is simply great and i can suppose you are knowledgeable on this subject. Well along with your permission let me to seize your RSS feed to keep updated with coming near near post. Thank you one million and please carry on the gratifying work.

    Reply

Leave a Comment