How to mock Pipe when testing Component

Question

Currently I am overriding providers to use mocked services like this:

beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    tcb.overrideProviders(AddFieldToObjectDropdownComponent,
        [
             provide(ServiceA, { useClass: MockServiceA })),
             provide(ServiceB, { useClass: MockServiceB }))
        ])
    ...

I want to do same thing for pipes that the component uses. I tried, provide(PipeA, { useClass: MockPipeA }) and provide(PipeA, { useValue: new MockPipeA() }) but both didn't work.

It's not promising when you haven't had any answers in 4 months. Did you ever figure this out? — coblr, Jan 10 '17 at 21:59
@coblr no unfortunately not it wasn't a high priority issue for me, but I will try it again soon with the new Test API, maybe there is a work around now. — harunurhan, Jan 10 '17 at 22:12
Any solution yet? I tried to not declare the original pipe and instead create a mock pipe and declare it. But somehow the pipe rendered result always show a empty string '' — zhumingvictor, Jan 11 '17 at 18:23
It's 2019 and still happening to me :( I was expecting the "provide" thing to work. — Alejandro Sanz Díaz, Jan 11 '19 at 14:23

score 79 · Answer 1 · edited May 27 '20 at 10:52

79

You can add your mockpipes in the declarations of the TestBed:

TestBed.configureTestingModule({
             declarations: [
                 AppComponent,
                 MockPipe
             ],
            ...

The MockPipe needs to have the @Pipe decorator with the original name.

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

@Pipe({name: 'pipename'})
class MockPipe implements PipeTransform {
    transform(value: number): number {
        //Do stuff here, if you want
        return value;
    }
}

edited May 27 '20 at 10:52

Aryéh Radlé

1,310
14
31

answered Jan 24 '17 at 11:01

Dinistro

5,701
1
30
38

5

Is there a way to spy on the mocked pipe using Jasmine? I'm trying to mock translate pipe and check it was called with the correct translation key. – Looted May 09 '17 at 13:03
1

The Mock pipe should be the only pipe you register under that name. I mistakenly imported the Module the pipe name originated from. This prevented my Mock pipes from overriding their original implementation. If you're mocking a Pipe, your Mock should be the only instance that you register, don't include the original pipe registration. – I. Buchan Apr 09 '18 at 19:59
1

"don't include the original pipe registration" eesh, can be tough if the SUT's imports are out of your control – Doug Jul 30 '20 at 18:09

score 23 · Answer 2 · answered Jul 13 '17 at 13:12

23

To stub the pipe, use Dinistro's answer. To spy on the pipe, you can complement that with the following:

let pipeSpy: jasmine.Spy;

beforeEach(() => {
    TestBed.configureTestingModule...

    pipeSpy = spyOn(MockPipe.prototype, 'transform');
};

it('should do whatever', () => {
    doYourStuff();

    expect(pipeSpy).toHaveBeenCalled();
}

answered Jul 13 '17 at 13:12

João Mendes

1,719
15
32

4

Also note: You can `spyOn` over the original pipe if you don't need MockPipe – Justin Wrobel Nov 11 '19 at 16:58

score 23 · Answer 3 · edited May 27 '20 at 10:53

23

If you want reusable util function for mocking pipes, you can try this option:

export function mockPipe(options: Pipe): Pipe {
    const metadata: Pipe = {
      name: options.name
    };

    return <any>Pipe(metadata)(class MockPipe {});
}

And then just call this function inside the TestBed declarations array:

TestBed.configureTestingModule({
    declarations: [
        SomeComponent,
        mockPipe({ name: 'myPipe' }),
        mockPipe({ name: 'myOtherPipe' })
    ],
    // ...
}).compileComponents();

edited May 27 '20 at 10:53

Aryéh Radlé

1,310
14
31

answered Jun 21 '19 at 10:34

shohrukh

2,989
3
23
38

This works for me, but can anyone explain this return statement in detail? – Pommesloch Nov 09 '20 at 21:21
1

@Pommesloch the return statement is just another way of writing what Dinistro is doing in another response. The `Pipe()` bit is decorated the subsequent class declaration. For what it's worth, here is a slight enhancement to shohrukh's response that allows mock piped data to be returned. It might help you visualize. ``` export function mockPipe(options: Pipe, mockReturn: any): Pipe { const metadata: Pipe = { name: options.name }; return Pipe(metadata)( class MockPipe implements PipeTransform { public transform = () => mockReturn; } ); } ``` – Zack Biernat Jan 22 '21 at 23:41
3

I'm on angular 11 and this doesn't seem to work. They may have changed something internally. I get the error "TypeError: Cannot read property 'call' of undefined" – Matt M Apr 14 '21 at 12:34
1

@MattM use the code from Zack one comment above. But it would be cool if the original answer was also adjusted. – Edgar Zagórski Aug 29 '21 at 12:20

Koja · Answer 4 · 2021-07-23T13:18:43.057

12

One possibility is to use the ng-mocks library and use it like this:

TestBed.configureTestingModule({
  declarations: [
    TestedComponent,
    MockPipe(ActualPipe, (...args) => args[0]),
  ]
}).compileComponents();

The second argument to MockPipe defines what the transform function returns for an array of args.

edited Jul 23 '21 at 13:18

answered Oct 18 '19 at 12:42

Koja

716
2
9
25

Pavel Pazderník · Answer 5 · 2020-05-28T11:59:41.343

4

Mocking my pipe into simple class like

export class DateFormatPipeMock {
 transform() {
  return '29.06.2018 15:12';
 }
}

and simple use of useClass in my spec file

providers: [
  ...
  {provide: DateFormatPipe, useClass: DateFormatPipeMock}
  ...
]

worked for me :-)

edited May 28 '20 at 11:59

answered Jul 19 '18 at 09:45

Pavel Pazderník

37
1
10

You may as well create a legit pipe and add it to your TestBed under declarations like you're supposed to. – Matt M Apr 14 '21 at 12:30

score 2 · Answer 6 · answered Jul 30 '21 at 10:55

Building on top of @shohrukh 's answer, the following code gives you a reusable mock pipe that works in Angular 11/12:

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

export function mockPipe(name: string): Pipe {
  const metadata: Pipe = {
    name
  };

  return Pipe(metadata)(
    class MockPipe implements PipeTransform {
      transform() {}
    }
  );
}

Then use it in your test:

TestBed.configureTestingModule({
  declarations: [
    MyComponent,
    mockPipe('myPipe')
  ],
  ...
}).compileComponents();

score 0 · Answer 7 · answered Apr 15 '22 at 19:58

You can MockPipe from ng-mocks, or MockBuilder if you inject pipes as services.

MockPipe

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [
      MockPipe(PipeA),
      MockPipe(PipeB, value => `transformed:${value}`),
    ],
  });
});

MockBuilder

beforeEach(() => {
  return MockBuilder(MyComponent, MyModule)
    .mock(PipeA)
    .mock(PipeB, value => `transformed:${value}`);
});

score -1 · Answer 8 · edited Jul 17 '20 at 13:06

-1

You can use MockPipe npm package, but you need to import it like below.

import { MockPipe } from 'mock-pipe';

After that, all you need to do is to define your mock pipe in providers..

providers: [     
        {
            provide: HighlightPipe,
            useValue: MockPipe(HighlightPipe, () => 'mock')
        }
]

That's all.

edited Jul 17 '20 at 13:06

Liam

27,717
28
128
190

answered May 13 '19 at 09:26

Recep Selli

32
5

1

This may have been a good solution at one point, but the project is defunct and hasn't been updated in years. It doesn't work with Angular 11. – Matt M Apr 14 '21 at 12:29

score -1 · Answer 9 · answered Oct 04 '19 at 07:26

-1

Often, we use pipes in templates. Here’s how you can mock a pipe. Note that the name of the pipe has to be the same as the pipe you are mocking.

@Pipe({ name: 'myPipe' })
class MyPipeMock implements PipeTransform {
  transform(param) {
    console.log('mocking');
    return true;
  }
}

You need to include the pipe when configuring your TestingModule if you are using it in a component’s template in the declarations.

answered Oct 04 '19 at 07:26

Mehdi EL AZRAK

29
4

And how do you configure the test with this? – Cameron Hudson Mar 26 '20 at 23:56

How to mock Pipe when testing Component

9 Answers9

Linked