在AngularJS中为Jasmine设置全局变量

Question

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

(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编写这个工厂的单元测试，但是一直出现以下错误：

引用错误：找不到变量：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，但没有成功。

- imgr8

---

看起来你在IIFE函数中声明了环境变量，这将限制它的作用域。 - Pankaj Parkar

那么你的意思是我应该将它转换为Angular常量或值吗？ - imgr8

是的，否则你需要将它变成全局的东西，而不是将其包装在IIFE模式中吗？ - Pankaj Parkar

所以我移除了IIFE包装器，尝试使用$window设置值，但仍然无法工作。仍然得到相同的错误。 - imgr8

我添加了这个：module(function($provide) { var pk = {} pk.env = {}; pk.env.baseUrl = '';$provide.value('$window', pk); }); - imgr8

在编程中使用 (function($provide) { var pk = {} pk.env = {}; pk.env.baseUrl = ''; $provide.value('pk', pk); });，并在使用时调用 $injector.get('pk')。 - Pankaj Parkar

Answer 1

如已经在这里回答的那样，您也可以在测试文件中声明全局变量。

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'
 ],

- Matthias

Answer 2

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

将文件转换为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模拟成不同的值（或者不做任何事情并使用代码中的值）。

- vvondra