业力使用使用内置管道的自定义管道测试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> <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(); }));