Angular 2 - angular-cli 管道测试与依赖关系

Question

我正在尝试对一个相对孤立的 Pipe 进行测试。我正在使用最新版本的 angular-cli（带有 @angular 2.0.0）。

管道代码为：

import { Pipe, PipeTransform } from "@angular/core";
import { DatePipe, JsonPipe } from "@angular/common";

@Pipe({name: 'dataTableFormat'})
export class DataTablePipe implements PipeTransform {

  // values with type 'json' are parsed to json. As a result, string values may be displayed with quotes ("<string>").
  // To avoid that, we remove these quotes with this regex
  private quotesExp: RegExp = /^\"|\"$/gi;

  constructor(private datePipe: DatePipe, private jsonPipe: JsonPipe) {
  }

  transform(value: string, type: string): string {
    switch (type) {
        case "date":
            return this.datePipe.transform(value, 'short');
        case "json":
            return this.jsonPipe.transform(value).replace(this.quotesExp, "");
        default:
            return value;
    }
  }
}

规格代码为：

import {TestBed} from "@angular/core/testing";
import {DataTablePipe} from "./data-table.pipe";
import {DatePipe, JsonPipe} from "@angular/common";

describe('DataTableFormat', () => {

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [ DataTablePipe ],
            providers: [
                DatePipe, JsonPipe
            ]
        });
    });

    it('sanity', () => {
        expect(true).toBeTruthy();
    });

    it('should transform ', () => {
        let fixture = TestBed.createComponent(DataTablePipe);
        let comp = fixture.componentInstance;
        let testDate:Date = new Date();
        let datePipe = fixture.debugElement.injector.get(DatePipe);

        expect(comp.transform(testDate.toString(), 'date')).toBe(datePipe.transform(testDate));

    });
});

完整性测试通过，但实际测试失败并出现错误：

    Error: Cannot create the component DataTablePipe as it was not imported into the testing module!
    at TestBed.createComponent (webpack:///Users/sninio/dev/csp-ui-ng/~/@angular/core/bundles/core-testing.umd.js:1144:0 <- src/main/js/test.ts:6022:23)
    at Function.TestBed.createComponent (webpack:///Users/sninio/dev/csp-ui-ng/~/@angular/core/bundles/core-testing.umd.js:972:0 <- src/main/js/test.ts:5850:33)
    at Object.<anonymous> (webpack:///Users/sninio/dev/csp-ui-ng/src/main/js/app/pages/+platform/events/data-table/data-table.pipe.spec.ts:23:30 <- src/main/js/test.ts:14770:41)
    at ZoneDelegate.invoke (webpack:///Users/sninio/dev/csp-ui-ng/~/zone.js/dist/zone.js:203:0 <- src/main/js/test.ts:26741:28)
    at ProxyZoneSpec.onInvoke (webpack:///Users/sninio/dev/csp-ui-ng/~/zone.js/dist/proxy.js:72:0 <- src/main/js/test.ts:18285:39)
    at ZoneDelegate.invoke (webpack:///Users/sninio/dev/csp-ui-ng/~/zone.js/dist/zone.js:202:0 <- src/main/js/test.ts:26740:34)
    at Zone.run (webpack:///Users/sninio/dev/csp-ui-ng/~/zone.js/dist/zone.js:96:0 <- src/main/js/test.ts:26634:43)
    at Object.<anonymous> (webpack:///Users/sninio/dev/csp-ui-ng/~/zone.js/dist/jasmine-patch.js:91:27 <- src/main/js/test.ts:18021:50)

我确定这是我遗漏的某些配置，但由于某种原因 DataTablePipe 未导入测试模块...

有什么想法吗？

Answer 1

TestBed.createComponent 严格用于创建组件。不过，您可以做的是将 DatePipe 和 JsonPipe 注入测试。刚刚从那些

创建你的管道

import { inject } from '@angular/core/testing';

it('should transform ', inject([DatePipe, JsonPipe], (datePipe, jsonPipe) => {
  let pipe = new DataTablePipe(datePipe, jsonPipe);
  let testDate: Date = new Date();

  expect(pipe.transform(testDate.toString(), 'date'))
      .toBe(datePipe.transform(testDate, 'short'));
}));

Angular 2 - angular-cli 管道测试与依赖关系

Angular 2 - angular-cli pipe test with dependencies

angular

karma-jasmine

angular2-testing