如何在茉莉业力中模拟翻译 I18n？

Question

所以我尝试使用 Jasmine karma 在组件级别进行一些单元测试。

我正在使用这个翻译类：I18n

我有这个组件：

constructor(
    private qrCodeService: QRCodeDefinitionService,
    private i18n: I18n,
    private blockerService: ScreenBlockerService,
    route: ActivatedRoute,
    private router: Router,
    private fb: FormBuilder
  ) {
    const data = route.snapshot.data;
    this.echeqFamilies = data['echeqFamilies'];
    this.resources = data['resources'];
    this.definition = data.definition;
    this.qrcodeUsedForUpdate = this.definition.qrcode;
    this.qrcodeWithBaseUrl =  this.getFullQrUrl();
  }

这是它的规格：

describe('DefinitionComponent', () => {
  let component: DefinitionComponent;
  let fixture: ComponentFixture<DefinitionComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        QRCodeDefinitionModule,
        HttpClientTestingModule,
        TranslateModule.forRoot({

        })
      ],
      providers:[]
    })
    .compileComponents();
  }));

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

  fit('should create', () => {
    expect(component).toBeTruthy();
  });
});

但我收到此错误：

Error: StaticInjectorError(DynamicTestModule)[DefinitionComponent -> I18n]: 
  StaticInjectorError(Platform: core)[DefinitionComponent -> I18n]: 
    NullInjectorError: No provider for I18n!

那么如何解决这个问题？

谢谢

具有 I18 功能的翻译类：

import { InjectionToken, MissingTranslationStrategy } from "@angular/core";
export interface I18n {
    (def: string | I18nDef, params?: {
        [key: string]: any;
    }): string;
}
export interface I18nDef {
    value: string;
    id?: string;
    meaning?: string;
    description?: string;
}
export declare const MISSING_TRANSLATION_STRATEGY: InjectionToken<MissingTranslationStrategy>;
/**
 * A speculative polyfill to use i18n code translations
 */
export declare class I18n {
    constructor(format: string, translations: string, locale: string, missingTranslationStrategy?: MissingTranslationStrategy);
}

组件声明所在的模块：

@NgModule({
  declarations: [ListComponent, DefinitionComponent],
  imports: [
    // Angular
    CommonModule,
    FlexLayoutModule,
    FormsModule,
    ReactiveFormsModule,

    // Angular Material
    DragDropModule,
    MatButtonModule,
    MatCardModule,
    MatCheckboxModule,
    MatDialogModule,
    MatExpansionModule,
    MatFormFieldModule,
    MatIconModule,
    MatInputModule,
    MatSortModule,
    MatPaginatorModule,
    MatSelectModule,
    MatSnackBarModule,
    MatTabsModule,
    MatTableModule,
    MatTreeModule,
    MatDatepickerModule,
    MatNativeDateModule,
    AuthModule,

    // Carapax
    QRCodeDefinitionRoutingModule,
    SharedModule,
  ],
  providers: [
    MatDatepickerModule,
  ]
})
export class QRCodeDefinitionModule { }

我是这样的：

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        QRCodeDefinitionModule,
        HttpClientTestingModule,
        TranslateModule.forRoot()
      ],
      providers:[]
    })
    .compileComponents();
  }));

但还是会出现这个错误：

Error: StaticInjectorError(DynamicTestModule)[DefinitionComponent -> I18n]: 
  StaticInjectorError(Platform: core)[DefinitionComponent -> I18n]: 
    NullInjectorError: No provider for I18n!

Answer 1

您需要通过在 providers 数组中添加 I18n 相关服务的提供者来更新规范文件。您可以使用 ng 模块中使用的一组 providers 数组，并在创建 testBed 时应用相同的一组。