加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular 2测试:使用PhantomJS进行测试时“无法找到变量:标题”

发布时间:2020-12-17 17:33:19 所属栏目:安全 来源:网络整理
导读:我和我的团队最近开始使用angular-cli 1.1.1(棱角分明4.1.3)构建一个项目,我们将angular.io的英雄之旅中的 in-memory-web-api结合起来模拟http调用,直到我们的api构建完毕.我能够使用chrome成功通过我们所有的业力单元测试,但由于CI限制想要尝试使用PhantomJ
我和我的团队最近开始使用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();
  }));
});

解决方法

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读