angular - Karma 使用内置管道的自定义管道测试 Angular X (5) 组件

Question

我已经构建了一个自定义管道来格式化货币，其中使用了小数管道。现在我想用 Karma 测试我的组件，它使用我的自定义管道。

这是我的自定义管道:

import { Pipe, PipeTransform } from "@angular/core";
import { CURRENCY } from "./customCurrency.enums";
import { DecimalPipe } from "@angular/common";

type CurrencySymbol = keyof typeof CURRENCY;
type CurrencyHandler = {
  [x in CurrencySymbol]: (value: string) => string;
};

@Pipe({
  name: "customCurrency",
})
export class CustomCurrencyPipe implements PipeTransform {

  constructor(private decimalPipe: DecimalPipe) { }

  transform(amount: string, currency: CurrencySymbol): string {
    const currencyHandler: CurrencyHandler = {
      Euro: (value: string): string => {
        const formatValue = value.toString().replace(",", ".");
        return this.setCharAt(formatValue, formatValue.length - 3, ",") + " " + CURRENCY.Euro;
      },
    };

    return currencyHandler[currency](this.decimalPipe.transform(amount, "1.2-2"));
  }

  private setCharAt(str, index, chr) {
    if (index > str.length - 1) {
      return str;
    }
    return str.substr(0, index) + chr + str.substr(index + 1);
  }
}

我只在我的组件的 HTML 部分使用它: <span class="col-s currency">{{invoice.totalAmount | customCurrency:"Euro"}}</span>

此管道是我的 SharedModule 的成员。所以我将它导入到我的测试台配置中。

现在我想在这里用这个模板测试组件:

/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

import { ApprovalsComponent } from "./approvals.component";
import { MaterialModule } from "../shared/material.module";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { DataService } from "../core/data.service";
import { SharedModule } from "../shared/shared.module";

describe("ApprovalsComponent", () => {
  let component: ApprovalsComponent;
  let fixture: ComponentFixture<ApprovalsComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        MaterialModule,
        BrowserAnimationsModule,
        SharedModule,
      ],
      declarations: [
        ApprovalsComponent,
      ],
      providers: [
        DataService,
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ApprovalsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it("should create", () => {
    expect(component).toBeTruthy();
  });
});

我总是收到错误: NullInjectorError: No provider for DecimalPipe!

我已经尝试了所有类型的导入或声明变体，但都没有成功。我究竟做错了什么？有人可以告诉我，我必须在哪里导入/声明/提供什么。我的自定义管道是共享模块的一部分。如果我想测试一个使用它但位于不同模块中的组件怎么办。如果我想在同一模块的组件中使用管道怎么办？

Answer 1

我重新启动了我的完整环境并再次将 DecimalPipe 添加到我的提供程序，现在它可以工作了。我不知道为什么它现在可以工作而以前不能，但是当我在另一个模块中时它可以使用此配置:

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        MaterialModule,
        BrowserAnimationsModule,
        SharedModule,
      ],
      declarations: [
        ApprovalsComponent,
      ],
      providers: [
        DataService,
        DecimalPipe,
      ],
      schemas: [
        CUSTOM_ELEMENTS_SCHEMA,
      ],
    })
    .compileComponents();
  }));

当我在同一模块中时使用此配置:

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        MaterialModule,
      ],
      declarations: [
        LineItemListComponent,
        CustomCurrencyPipe,
      ],
      schemas: [
        CUSTOM_ELEMENTS_SCHEMA,
      ],
      providers: [
        DecimalPipe,
      ],
    })
    .compileComponents();
  }));