0

So I try to do some unit testing on component level with Jasmine karma.

And I am using this translatioin class: I18n

And I have this component:

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();
  }

And this is the spec of it:

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();
  });
});

But I get this error:

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

So how to fix this?

Thank you

The translation class with the I18 functionality:

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);
}

The module where the component is declared:

@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 { }

I have it like this:


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

But still get this error:

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

1 Answers1

0

You need to update the spec file by adding the provider for the I18n related service in the providers array. You can use the set of providers array used in the ng module and apply the same set while creating the testBed.

banu saladi
  • 66
  • 3