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的{{1}}中添加模型：

TestBed

TestBed.configureTestingModule({ declarations: [ AppComponent, MockPipe ], ...需要拥有原始名称的MockPipe装饰器。

@Pipe

Answer 2

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

let pipeSpy: jasmine.Spy;

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

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

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

    expect(pipeSpy).toHaveBeenCalled();
}

Answer 3

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

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

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

Answer 4

将管道模拟成简单的类

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

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

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

为我工作：-）

Answer 5

您可以使用MockPipe函数，但需要按如下所示进行导入。

从“模拟管道”导入{MockPipe};

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

提供者：[
{ 提供：HighlightPipe， useValue：MockPipe（HighlightPipe，（）=>'mock'） } ]

仅此而已。

Answer 6

如果您想要可重用的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 7

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

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

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

Answer 8

以@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();

如何在测试Component时模拟Pipe

8 个答案: