Question

我和我的团队最近开始使用angular-cli 1.1.1（棱角分明4.1.3）开始建造一个项目，我们将来自angular.io的英雄之旅的in-memory-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
  });
};

用户-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为我管理导入，我意识到Headers是从lib.es6.d.ts而不是从@angular/http引入的。一旦我从角度包含了Headers导入，我在phantomJS中失败的所有测试开始传递。

Angular 2测试：＆＃34;无法找到变量：Headers＆＃34;使用PhantomJS进行测试但适用于Chrome

1 个答案: