web-dev-qa-db-fra.com

Comment se moquer de Pipe lors du test d'un composant

Actuellement, je force les fournisseurs à utiliser des services simulés comme ceci:

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

Je veux faire la même chose pour les tuyaux utilisés par le composant. J'ai essayé, provide(PipeA, { useClass: MockPipeA }) et provide(PipeA, { useValue: new MockPipeA() }) mais les deux n'ont pas fonctionné.

unit-testingangularangular2-testingangular2-pipe
23
harunurhan

Vous pouvez ajouter vos recettes dans la declarations de la TestBed:

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

La MockPipe doit avoir le décorateur @Pipe avec le nom d'origine. 

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

Pour écraser le tuyau, utilisez la réponse de Dinistro. Pour espionner le tuyau, vous pouvez le compléter avec ce qui suit:

let pipeSpy: jasmine.Spy;

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

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

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

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

Se moquer de ma pipe en classe simple comme

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

et simple utilisation de useClass dans mon fichier de spécification

{provide: DateFormatPipe, useClass: DateFormatPipeMock}

a travaillé pour moi :-)

0
Pavel Pazderník