Question

我在这里有一个代码ng-wrap的分支，它来自this article。基本上，它为第三方库引入的全局变量创建了一个角度服务，这是通过angularjs依赖注入的概念来确认的。但我正在努力研究如何测试第三方变量是否实际转换为角度服务。

这是代码：

(function() {
  'use strict';

  angular
    .module('blocks.wrapper', []);
})();


/* jshint ignore:start, -W101 */
// Inspired from http://www.bennadel.com/blog/2720-creating-and-extending-a-lodash-underscore-service-in-angularjs.htm
// Fork from https://github.com/bahmutov/ng-wrap
/* jshint ignore:end, +W101 */
(function() {
  'use strict';

  angular
    .module('blocks.wrapper')
    .provider('ngWrap', ngWrapProvider);

  ngWrapProvider.$inject = ['$provide'];
  /* @ngInject */
  function ngWrapProvider($provide) {
    /* jshint validthis:true */
    this.wrapper = wrapper;

    this.$get = function() {
      return {'wrapper': wrapper};
    };

    ///////////////////////////////////////////////////////////////////////////////////////////////
    //////////////////////////////////////// IMPLEMENTATION ///////////////////////////////////////
    ///////////////////////////////////////////////////////////////////////////////////////////////

    function wrapper(name, leaveGlobal) {
      $provide.provider(name, function () {
        if (typeof window[name] === 'undefined') {
          throw new Error('Cannot find window.' + name);
        }

        var thing = window[name];
        if (!leaveGlobal) {
          delete window[name];
        }

        this.$get = function() {
          return thing;
        };
      });
    }
  }
})();

到目前为止，这是我的测试规范：

'use strict';

/* jshint -W117, -W030 */
describe('blocks.wrapper', function() {
  var ngWrapProvider;
  var ngWrap;
  var mocks = {
    windowProperty: {
      testProperty: 'testValue'
    }
  };

  beforeEach(module('blocks.wrapper', function (_ngWrapProvider_) {
    ngWrapProvider = _ngWrapProvider_;
  }));

  beforeEach(inject(function (_ngWrap_) {
    ngWrap = _ngWrap_;
  }));

  describe('ngWrapProvider', function() {
    it('should successfuly be defined', inject(function() {
      expect(ngWrapProvider).toBeDefined();
    }));

    it('should have a wrapper method', function() {
      expect(ngWrapProvider.wrapper).toBeDefined();
    });
  });

  describe('ngWrap', function() {
    it('should successfuly be defined', function() {
      expect(ngWrap).toBeDefined();
    });

    it('should have a wrapper method', function() {
      expect(ngWrap.wrapper).toBeDefined();
    });
  });

  it('should have ngWrapProvider.wrapper & ngWrap.wrapper point to the same function', function() {
    expect(ngWrapProvider.wrapper).toEqual(ngWrap.wrapper);
  });

  describe('wrapper method', function() {
    it('should throw an error when window.property is undefined', function() {
      expect(function() { ngWrapProvider.wrapper('_'); }).toThrow();
      expect(function() { ngWrap.wrapper('_'); }).toThrow();
    });
  });
});

我对测试比较陌生，所以我可能做错了。虽然，是的，上面的所有测试规范都通过了，但我正在努力测试window.property实际上是如何转换为角度服务的。

到目前为止，我的尝试是：

describe('wrapper method', function() {
  ...
  it('should convert window.property to an angular service', inject(function($injector) {
    window._ = mocks.windowProperty;
    ngWrapProvider.wrapper('_');
    $injector.invoke(ngWrapProvider);
    expect(angular.injector().has('_')).toBeTruthy();
  }));
});

上面给出的错误是： Error: [ng:areq] Argument 'fn' is not a function, got ngWrapProvider

如果我尝试使用$ injector完全删除该行，则expect(angular.injector().has('_')).toBeTruthy();始终返回false。

我从this post

得到了整个$ injector事物的想法

Answer 1

这就是我解决问题的方法，$injector.invoke想要一个函数作为参数，所以我做的是在函数中包装ngWrapProvider.wrapper('_');，然后使该函数成为{{1}的参数}。

然后我创建一个$injector.invoke语句，它在其中接受/注入新的it服务。如果它被定义并等同于我的模拟_，那么我可以说服务确实已经创建并引用了全局范围内的正确对象。

以下是我使用的实际代码。

window._

如果实际创建角度服务，如何进行Jasmine测试？

1 个答案: