Angular 2测试:使用PhantomJS进行测试时"无法找到变量:标题",但与Chrome一起正常工作

Question

我和我的团队最近开始使用angular-cli 1.1.1(棱角分明4.1.3)构建一个项目,我们正在整合来自angular.io的英雄之旅的内存web-api来模拟http调用直到我们的api是建造的.我能够使用chrome成功通过我们所有的业力单元测试,但由于CI限制想要尝试使用PhantomJS运行业力.从chrome切换到phantomJS时,一些测试无法指定错误消息:

PhantomJS 2.1.1 (Mac OS X 0.0.0) UserDataService should be created FAILED
    ReferenceError: Can't find variable: Headers in http://localhost:9876/_karma_webpack_/main.bundle.js (line 693)

这是我的user-data.service.ts文件的样子:

import {Injectable} from @angular/core";
import {Http} from "@angular/http";
import "rxjs/add/operator/map";
import "rxjs/add/operator/catch";
import "rxjs/add/operator/toPromise";
import "rxjs/add/operator/find";
import {User} from "../data-objects/user";
import {Observable} from "rxjs/Observable";

@Injectable()
export class UserDataService {
  private userDataUrl = `api/userData`;
  private headers = new Headers({"Content-Type": "application/json"});
  constructor(private http: Http) { }

  getUser(id:number): Observable<User> {
    const url = `${this.userDataUrl}/?id=${id}`;
   return this.http.get(url, this.headers)
      .map(response => {
        return  response.json().data as User;
      })
      .catch(this.handleError);
  }

  private handleError(error: any): Promise<any> {
    console.error("An error occurred in the user data service.", error);
    return Promise.reject(error.json().error || "Server Error in UserDataServer")
  }
}

我已经尝试在网上搜索解决方案,但到目前为止还没有弄清楚为什么phantomJS找不到标题但铬可以.为了完整起见,这里分别是我的karma.conf.js和user-data.service.spec.ts文件.任何帮助,将不胜感激.

karma.conf.js

  module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-phantomjs-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    files: [
      { pattern: './src/test.ts', watched: false },
      { pattern: 'node_modules/angular-in-memory-web-api/**/*.js', included: false, watched: false }
    ],
    preprocessors: {
      './src/test.ts': ['@angular/cli']
    },
    mime: {
      'text/x-typescript': ['ts','tsx']
    },
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      config: './angular-cli.json',
      environment: 'dev'
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['progress', 'coverage-istanbul']
              : ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_DEBUG,
    autoWatch: true,
    // browsers: ['ChromeHeadless'],
    browsers: ['PhantomJS'],
    // browsers: ['Chrome'],
    singleRun: false
  });
};

user-data.service.spec.ts:

import {TestBed, inject} from '@angular/core/testing';

import {UserDataService} from './user-data.service';
import {Http, BaseRequestOptions} from "@angular/http";
import {MockBackend} from "@angular/http/testing";


describe('UserDataService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [UserDataService,
        MockBackend,
        BaseRequestOptions,
        {provide: Http}]
    });
  });

  fit('should be created', inject([UserDataService], (service: UserDataService) => {
    expect(service).toBeTruthy();
  }));
});

Answer 1

在通过发生错误的main.bundle.js文件后,我找到了答案.使用的是IntelliJ来管理我进口我意识到,头正从拉入lib.es6.d.ts,而不是从@angular/http.一旦我从角度包含了Headers导入我在phantomJS中失败的所有测试开始传递.