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中失败的所有测试开始传递.
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |