Question

正常运行应用程序时一切正常。但是，在尝试编写这些单元测试时遇到了问题。我从下面的代码中删除了任何项目特定的代码/类。

我得到的错误是

Chrome 51.0.2704（Mac OS X 10.11.6）应用：Angular遇到了一个声明异常失败 TypeError：无法读取属性＆＃39; setDefaultLang＆＃39;在AngularAppComponent.translationConfig中未定义（/Users/angular/dist/app/angular.component.js:40:23）

非常感谢任何帮助。

我在main.ts中引导它

bootstrap(ImeetSiteAngularAppComponent, [
  disableDeprecatedForms(),
  provideForms(),
  HTTP_PROVIDERS,
  { 
    provide: TranslateLoader,
    useFactory: (http: Http) => new TranslateStaticLoader(http, 'app/shared/i18n', '.json'),
    deps: [Http]
  },
  TranslateService
  ])

这是我的angular.component.ts

import { Component, ViewContainerRef } from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http';
import { RouteConfig, ROUTER_DIRECTIVES, Router, ROUTER_PROVIDERS} from '@angular/router-deprecated';

import {MODAL_DIRECTVES, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap';

import { HttpService } from './services/api/http.service';
import { TranslateService } from 'ng2-translate/ng2-translate';

import { Utils } from './shared/utilities/utils';

import { LoggedInRouterOutlet } from './shared/LoggedInRouterOutlet';
@Component({
  moduleId: module.id,
  selector: 'angular-app',
  templateUrl: 'angular.component.html',
  styleUrls: ['styles/main.css'],
  viewProviders: [BS_VIEW_PROVIDERS],
  providers: [
              HttpService, 
              HTTP_PROVIDERS, 
              ROUTER_PROVIDERS, 
              MODAL_DIRECTVES, 
              Utils, 
              TranslateService],
})

export class AngularAppComponent {
  viewContainerRef: ViewContainerRef;
  title = 'angular works!';
  translate: TranslateService;

  constructor(viewContainerRef:ViewContainerRef, translate:TranslateService) {
    console.log('App.component');
    this.viewContainerRef = viewContainerRef;
    this.translate = translate;
    this.translationConfig();
  }

  translationConfig() {   
    var userLang = navigator.language.split('-')[0]; // use navigator lang if available
    userLang = /(de|fr|en)/gi.test(userLang) ? userLang : 'en';
    this.translate.setDefaultLang('en'); //set default lang
    this.translate.use(userLang); //use lang if found
  }
}

这是我的angular.component.spec.ts

import {
  beforeEachProviders,
  describe,
  expect,
  it,
  inject,
  async
} from '@angular/core/testing';
import { ViewContainerRef, provide } from '@angular/core';
import { AngularAppComponent } from '../app/angular.component';
import { HTTP_PROVIDERS, XHRBackend,ConnectionBackend, Http, BaseRequestOptions } from '@angular/http';
import { MockBackend, MockConnection } from '@angular/http/testing';
import { TranslateService, TranslateLoader, TranslateStaticLoader } from 'ng2-translate/ng2-translate';

beforeEachProviders(() => [
        AngularAppComponent, 
        ViewContainerRef, 
        HTTP_PROVIDERS,
        { 
          provide: TranslateLoader,
          useFactory: (http: Http) => new TranslateStaticLoader(http, 'app/shared/i18n', '.json'),
          deps: [Http]
        },
        TranslateService,
        provide(XHRBackend, { useClass: MockBackend })
        ]);

describe('App: ImeetSiteAngular', () => {
  let viewContainerRef: ViewContainerRef;
  let translate: TranslateService;
  let app = new AngularAppComponent(viewContainerRef, translate);

  it('should create the app', () => {
    console.log('app is truthy')
    expect(app).toBeTruthy();
  });

  it('should have as title \'angular works!\'',() => {
    console.log('app has a title')
    expect(app.title).toEqual('angular works!');
  });
});

Answer 1

我找到了解决这个问题的方法

import { Component, ViewContainerRef, OnInit } from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http';
import { RouteConfig, ROUTER_DIRECTIVES, Router, ROUTER_PROVIDERS} from      '@angular/router-deprecated';

import {MODAL_DIRECTVES, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap';

import { HttpService } from './services/api/http.service';
import { TranslateService } from 'ng2-translate/ng2-translate';

import { Utils } from './shared/utilities/utils';

import { LoggedInRouterOutlet } from './shared/LoggedInRouterOutlet';
@Component({
  moduleId: module.id,
  selector: 'angular-app',
  templateUrl: 'angular.component.html',
  styleUrls: ['styles/main.css'],
  viewProviders: [BS_VIEW_PROVIDERS],
  providers: [
              HttpService, 
              HTTP_PROVIDERS, 
              ROUTER_PROVIDERS, 
              MODAL_DIRECTVES, 
              Utils, 
              TranslateService],
})

export class AngularAppComponent implements OnInit{
  viewContainerRef: ViewContainerRef;
  title = 'angular works!';

  constructor(viewContainerRef:ViewContainerRef, public translate:TranslateService) {
    console.log('App.component');
    this.viewContainerRef = viewContainerRef;
  }

  ngOnInit(): void{   
    var userLang = navigator.language.split('-')[0]; // use navigator lang if available
    userLang = /(de|fr|en)/gi.test(userLang) ? userLang : 'en';
    this.translate.setDefaultLang('en'); //set default lang
    this.translate.use(userLang); //use lang if found
  }
}

我所做的是从@ angular / core导入OnInit，在构造函数中将translate翻译为public并调用setDefaultLang并在ngOnInit函数中使用。

使用ng2-translate进行单元测试失败

1 个答案: