58

目前，我正在覆盖提供者以使用这样的模拟服务：

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() })两者都不起作用。

4

8 回答 8

71

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;
    }
}
于 2017-01-24T11:01:30.523 回答
22

如果你想要可重用的 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();
于 2019-06-21T10:34:37.620 回答
22

要存根管道，请使用 Dinistro 的答案。要监视管道，您可以使用以下内容对其进行补充：

let pipeSpy: jasmine.Spy;

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

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

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

    expect(pipeSpy).toHaveBeenCalled();
}
于 2017-07-13T13:12:25.053 回答
10

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

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

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

于 2019-10-18T12:42:03.647 回答
4

将我的管道模拟成简单的类，比如

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

在我的规范文件中简单使用 useClass

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

为我工作:-)

于 2018-07-19T09:45:53.223 回答
1

在 @shohrukh 的回答之上，以下代码为您提供了一个可在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() {}
    }
  );
}

然后在你的测试中使用它：

TestBed.configureTestingModule({
  declarations: [
    MyComponent,
    mockPipe('myPipe')
  ],
  ...
}).compileComponents();
于 2021-07-30T10:55:19.090 回答
-1

通常，我们在模板中使用管道。这是模拟管道的方法。请注意，管道的名称必须与您正在模拟的管道相同。

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

如果您在声明中的组件模板中使用它，则需要在配置您的 TestingModule 时包含该管道。

于 2019-10-04T07:26:09.727 回答
-1

你可以使用MockPipe npm 包，但你需要像下面这样导入它。

import { MockPipe } from 'mock-pipe';

之后，您需要做的就是在提供程序中定义您的模拟管道。

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

就这样。

于 2019-05-13T09:26:36.350 回答