如何在测试Component时模拟Pipe

Question

目前我重写提供者使用这样的模拟服务:

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

我想对组件使用的管道做同样的事情.我试过了,provide(PipeA, { useClass: MockPipeA })和provide(PipeA, { useValue: new MockPipeA() })但都没有奏效.

Answer 1

您可以在以下declarations位置添加模拟管道TestBed:

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

该MockPipe需求有@Pipe与原来的名字装饰.

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;
    }
}

Answer 2

如果你想要可重用的 util 函数来模拟管道，你可以试试这个选项：

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

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

然后在 TestBed 声明数组中调用这个函数：

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

Answer 3

要使管道存根,请使用Dinistro的答案.要监视管道,您可以使用以下内容进行补充:

let pipeSpy: jasmine.Spy;

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

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

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

    expect(pipeSpy).toHaveBeenCalled();
}

Answer 4

一种可能性是使用ng-mocks 库并像这样使用它：

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

MockPipe 的第二个参数定义了转换函数为 args 数组返回的内容。