angular - ngx-translate 即时函数不是抛出的函数：单元测试

Question

我对单元测试和 Angular 还很陌生，我正在尝试为我的项目编写一些单元测试。

我得到的错误是；

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

component.spec 文件的导入包括

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

我知道这TranslateServiceStub不包括“即时”功能。这是导致此错误的原因吗？如果是这样，我如何模拟 translate.instant 函数？

或者有什么方法可以在调用即时方法之前将翻译文件加载到规范文件中？

任何建议都会很有帮助。非常感谢！

标签： angulartypescriptunit-testingkarma-jasminengx-translate

Answer 1

根据文档链接，返回类型instant是stringor 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";
    }
}

Object同样，如果需要，您可以返回一个。

更新：

我尝试使用以下组件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
        });
    }
}

因此，我创建了一个spec文件：

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


});

我希望这将帮助您ng-translate更好地测试。