Как издеваться над трубкой при тестировании компонента

В настоящее время я предпочитаю использовать сервисы, подобные следующим:

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() }), но оба не работали.

Ответ 1

Вы можете добавить свои mockpipes в 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;
    }
}

Ответ 2

Чтобы заглушить трубу, используйте ответ Dinistro. Чтобы шпионить за трубой, вы можете добавить следующее:

let pipeSpy: jasmine.Spy;

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

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

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

    expect(pipeSpy).toHaveBeenCalled();
}

Ответ 3

Если вы хотите использовать утилиту многократного использования для насмешек, вы можете попробовать эту опцию:

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

Ответ 4

Насмешка моей трубы в простой класс, как

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

и простое использование useClass в моем файле спецификации

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

работал на меня :-)

Ответ 5

Вы можете использовать функцию MockPipe, но вам нужно импортировать ее, как показано ниже.

импортировать {MockPipe} из 'mock-pipe';

После этого все, что вам нужно сделать, это определить свой фиктивный канал в провайдерах.

провайдеры: [
{предоставить: HighlightPipe, useValue: MockPipe (HighlightPipe,() => 'mock')}]

Все это.

Ответ 6

Часто мы используем pipes в шаблонах. Вот как вы можете издеваться над pipeой. Обратите внимание, что имя pipes должно совпадать с именем pipes, над которой вы издеваетесь.

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

Вам необходимо включить канал при настройке модуля TestingModule, если вы используете его в шаблоне компонентов в объявлениях.

Ответ 7

Одна из возможностей - использовать библиотеку ng-mocks и использовать ее следующим образом:

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

Второй аргумент MockPipe определяет, что функция transform возвращает для массива аргументов.