在茉莉花中为angularjs设置全局变量答案

【问题标题】：Setting global variables in jasmine for angularjs在茉莉花中为angularjs设置全局变量
【发布时间】：2015-06-16 20:07:56
【问题描述】：

我有一个在 env.js 文件中定义了一些全局环境变量的 Angular 应用程序：

(function(sp) {
'use strict';

pk.env = pk.env || {};

// localhost
pk.env.baseUrl = 'http://localhost:8080/';
})(typeof exports === 'undefined' ? (this.pk = this.pk || {}) : exports);

这些变量在多个工厂中用于进行 REST API 调用：

'use strict';

angular.module('pkApp').factory('pkFactory', PKFactory);

function PKFactory($http) {
    var urlBase = pk.env.baseUrl;
    var apiUrl = 'v1/data';
    var _pkFactory = {};

    _pkFactory.getData = function() {
        return $http.get(urlBase + apiUrl);
    };


    return _pkFactory;
}

我正在使用 Jasmine 为这个工厂编写单元测试，但我不断收到错误：

ReferenceError：找不到变量：pk

如果我从工厂中删除这个变量引用，测试运行良好。

'use strict';

console.log('=== In pk.factory.spec');

describe('Unit: pkFactory', function() {

  beforeEach(module("pkApp"));

  var $httpBackend, $rootScope, pkFactory;

  beforeEach(inject(function($injector) {
    // Set up the mock http service responses
    $httpBackend = $injector.get('$httpBackend');

    $httpBackend.when('GET', 'v1/data').respond('Not found');

    pkFactory = $injector.get('pkFactory');

  }));

  afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
  });

  it('expects getData method to be defined', function(){
    expect(pkFactory.getData()).toBeDefined();
    $httpBackend.flush();
  });
})

如何将 'pk.env.baseUrl' 的值注入工厂？我曾尝试使用 $window，但它没有用。

【问题讨论】：

看起来你已经在 IIFE 函数中声明了环境变量，这将限制它的范围。
所以你是说我应该把它转换成一个角度常数或值？
是的......否则你需要让它成为全局的东西而不将它包装到 IIFE 模式中？
所以我删除了 IIFE 包装器，并尝试使用 $window 设置值，但它仍然不起作用。仍然出现同样的错误。
我添加了这个：module(function($provide) { var pk = {} pk.env = {}; pk.env.baseUrl = ''; $provide.value('$window' , pk); });

标签： javascript angularjs jasmine karma-jasmine

【解决方案1】：

正如here 已经回答的差不多了，你也可以在你的测试文件中声明一个全局变量

var globalVar = "something";

describe('Your test suit', function() {
    ...
});

如果你使用 Karma，你可以编辑 karma.conf.js 文件来定义它

 // list of files / patterns to load in the browser
 files: [
    ...,
    'file-containing-the-global-variable.js'
 ],

【讨论】：

【解决方案2】：

您应该完全避免在 Angular 中使用全局变量。

将文件转换为角度值或常数：

angular.module('pkApp').value('pk', pk);

现在您可以更改 pkFactory 以注入 pk 对象

function PKFactory($http, pk) {
    // pk is no longer from global scope, but injected from angular as an argument
    var urlBase = pk.env.baseUrl;
    var apiUrl = 'v1/data';
    var _pkFactory = {};

    _pkFactory.getData = function() {
        return $http.get(urlBase + apiUrl);
    };


    return _pkFactory;
}

在测试中，您现在可以将 pk 模拟为不同的值（或不做任何事情并使用代码中的那个）

【讨论】：