Тестирование Pipe

Тестирование pipe самое легкое, поскольку обычно его класс имеет один единственный метод transform() и не нуждается в сервисах, а сами тесты даже не требуют утилиты TestBed.

Рассмотрим пример тестирования фильтра cutTxt, который обрезает строку, если ее длина превышает переданное значение, и добавляет в ее конец многоточие.

cut-txt.pipe.ts

@Pipe({ name: 'cutTxt' })
export class CutTxtPipe implements PipeTransform {
    transform(text: string, length: number): string {
        if (text.length <= length) return text;
        else return `${text.substr(0, length)}...`;
    }
}

cut-txt.pipe.spec.ts

describe('CutTxtPipe', () => {
    let cutTxt = new CutTxtPipe();

    it('doesn\'t transform "Hello, World!"', () => {
        expect(cutTxt.transform('Hello, World!', 50)).toBe(
            'Hello, World!'
        );
    });

    it('transforms "Hello, World!" to "Hello..."', () => {
        expect(cutTxt.transform('Hello, World!', 5)).toBe(
            'Hello...'
        );
    });
});

Для полноценного тестирования pipe также следует проверять корректность его работы в шаблоне компонента.

cut-txt-pipe-test.component.ts

@Component({
    selector: 'cut-txt-pipe-test',
    template: `
        <p id="case-1">
            {{ 'Hello, World!' | cutTxt: 50 }}
        </p>
        <p id="case-2">{{ 'Hello, World!' | cutTxt: 5 }}</p>
    `,
})
export class CutTxtPipeTestComponent {
    constructor() {}
}

cut-txt-pipe-test.component.spec.ts

describe('cutTxt in component template', () => {
    let fixture: ComponentFixture<CutTxtPipeTestComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [CutTxtPipeTestComponent],
        })
            .compileComponents()
            .then(() => {
                fixture = TestBed.createComponent(
                    CutTxtPipeTestComponent
                );
            });
    }));

    it('#case-1 should contain "Hello, World"', () => {
        const el = fixture.debugElement.nativeElement.query(
            '#case-1'
        );
        expect(el.textContent).toBe('Hello, World!');
    });

    it('#case-2 should contain "Hello..."', () => {
        const el = fixture.debugElement.nativeElement.query(
            '#case-2'
        );
        expect(el.textContent).toBe('Hello...');
    });
});

Ссылки

• Pipes

Комментарии