web-dev-qa-db-ja.com

コンポーネントをテストするときにパイプをモックする方法

現在、私はプロバイダーをオーバーライドして、次のような模擬サービスを使用しています。

_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() })を試しましたが、両方とも機能しませんでした。

unit-testingangularangular2-testingangular2-pipe
31
harunurhan

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

パイプをスタブするには、Dinistroの答えを使用します。パイプをスパイするには、次の方法で補完できます。

let pipeSpy: jasmine.Spy;

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

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

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

    expect(pipeSpy).toHaveBeenCalled();
}
10
João Mendes

パイプをモックするための再利用可能なユーティリティ関数が必要な場合は、次のオプションを試すことができます。

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();
2
shohrukh

パイプを次のような単純なクラスにモックする

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

私のspecファイルでのuseClassの簡単な使用

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

私のために働いた:-)

1
Pavel Pazderník

MockPipe関数を使用できますが、以下のようにインポートする必要があります。

import 'MockPipe} from' mock-pipe ';

その後は、プロバイダーでモックパイプを定義するだけです。

プロバイダー：[
{提供：HighlightPipe、useValue：MockPipe（HighlightPipe、（）=> 'mock'）}]

それで全部です。

0
Recep Selli