ngx-translate instant function is not a function thrown: Unit testing

问题

I'm fairly new for unit testing and Angular, and i'm trying to write some unit tests for my project.

The error i'm getting is;

Uncaught TypeError: _this.translate.instant is not a function thrown
Expected null to be truthy.

The imports of the component.spec file includes

beforeEach(async(() => {
TestBed.configureTestingModule({
  imports:[
    ClarityModule,
    RouterTestingModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (http: HttpClient) => new TranslateHttpLoader(http, 'assets/i18n/', '.json'),
        deps: [HttpClient]
      }
    }),
    HttpClientModule
  ],
  declarations: [
    HeaderComponent,
    LanguageSelectorComponent
  ],
  providers: [
    { provide: Store, useClass: TestStore },
    { provide: TranslateService, useClass: TranslateServiceStub },
    { provide: NGXLogger, useClass: NGXLoggerMock }
  ]
})
.compileComponents();
}));

I understand that TranslateServiceStub does not include a 'instant' function. Is this the cause of this error? if so, how can i mock translate.instant function?

Or is there any way to load the translations file in the spec file before instant method gets called?

Any suggestion would be greatly helpful. Thanks a lot!

回答1:

As per the documentation link, the return type of instant is either string or Object.

instant(key: string|Array<string>, interpolateParams?: Object): string|Object

export class TranslateServiceStub {
    instant(): string{
      // or put some logic to return Mock data as per the passed value from component
      //  (if being used at multiple places in the component)
      return "some_string";
    }
}

Similarly, you can return an Object, if required.

Update:

I tried below component using instant():

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { Observable } from 'rxjs';

@Component({
    selector: 'app-root',
    template: `
        <div>
            <h2>{{ 'HOME.TITLE' | translate }}</h2>
            <label>
                {{ 'HOME.SELECT' | translate }}
                <select #langSelect (change)="translate.use(langSelect.value)">
                    <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{
                        lang
                    }}</option>
                </select>
            </label>
            <br>
            {{name}}
        </div>
    `,
})
export class AppComponent {
    public name: string;

    constructor(public translate: TranslateService) {
        translate.addLangs(['en', 'fr']);
        translate.setDefaultLang('en');

        const browserLang = translate.getBrowserLang();
        translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
    }
    public ngOnInit(): void {
        this.translate.onLangChange.subscribe(() => {
            this.name = this.translate.instant('HOME.TITLE'); // <---- instant() used here
        });
    }
}

and accordingly, I created a spec file as:

import {HttpClient} from "@angular/common/http";
import {HttpClientTestingModule, HttpTestingController} from "@angular/common/http/testing";
import {async, TestBed, ComponentFixture} from '@angular/core/testing';
import {TranslateLoader, TranslateModule, TranslateService} from "@ngx-translate/core";
import {AppComponent} from './app.component';
import {HttpLoaderFactory} from "./app.module";

const TRANSLATIONS_EN = require('../assets/i18n/en.json');
const TRANSLATIONS_FR = require('../assets/i18n/fr.json');

describe('AppComponent', () => {
  let translate: TranslateService;
  let http: HttpTestingController;
  let fixture: ComponentFixture<AppComponent>;
  let app: AppComponent;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [
        HttpClientTestingModule,
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
          }
        })
      ],
      providers: [TranslateService]
    }).compileComponents();
    translate = TestBed.get(TranslateService);
    http = TestBed.get(HttpTestingController);
    fixture = TestBed.createComponent(AppComponent);
    app = fixture.componentInstance;
  }));

  it('should create the app', async(() => {
    expect(app).toBeTruthy();
  }));

  it('should load translations', async(() => {
    spyOn(translate, 'getBrowserLang').and.returnValue('en');
    const compiled = fixture.debugElement.nativeElement;

    // the DOM should be empty for now since the translations haven't been rendered yet
    expect(compiled.querySelector('h2').textContent).toEqual('');

    http.expectOne('/assets/i18n/en.json').flush(TRANSLATIONS_EN);
    http.expectNone('/assets/i18n/fr.json');

    // Finally, assert that there are no outstanding requests.
    http.verify();

    fixture.detectChanges();
    // the content should be translated to english now
    expect(compiled.querySelector('h2').textContent).toEqual(TRANSLATIONS_EN.HOME.TITLE);

    translate.use('fr');
    http.expectOne('/assets/i18n/fr.json').flush(TRANSLATIONS_FR);

    // Finally, assert that there are no outstanding requests.
    http.verify();

    // the content has not changed yet
    expect(compiled.querySelector('h2').textContent).toEqual(TRANSLATIONS_EN.HOME.TITLE);

    fixture.detectChanges();
    // the content should be translated to french now
    expect(compiled.querySelector('h2').textContent).toEqual(TRANSLATIONS_FR.HOME.TITLE);
    expect(app.name).toEqual('Bonjour Angular avec ngx-translate !');
  }));


});

I hope this will help you test ng-translate better.

来源：https://stackoverflow.com/questions/57112046/ngx-translate-instant-function-is-not-a-function-thrown-unit-testing