How to mock Pipe when testing Component
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.
Solution 1:
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;
}
}
Solution 2:
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();
}
Solution 3:
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();