单元测试AngularFire业力错误

Question

我在运行业力单元脚本时遇到此错误，但我无法弄清楚原因

Error: [$injector:unpr] Unknown provider: FBURLProvider <- FBURL

这是我的指令代码

'use strict';

angular.module('userMenu', ['firebase'])
  .directive('userMenu', function (FBURL, angularFire) {
    return {
      restrict: 'A',
      scope: true ,
      link: function postLink(scope, element, attrs) {

        /**
         * Returns the logged in user information
         * @param {string} FBURL
         * @param {object} scope
         * @returns {promise}
         */
        scope.getUserDataFromFirebase = function(FBURL, scope) {
          var ref = new Firebase(FBURL + '/users/' + scope.auth.id);
          return angularFire(ref, scope, 'user', {})
        }

      }
    };
  });

这是我的规范代码

'use strict';

describe('Directive: userMenu', function () {

  // load the directive's module
  beforeEach(module('userMenu', 'firebase'));

  var element,
    elementScope,
    scope;


  beforeEach(inject(function ($rootScope, $compile, _FBURL_, _angularFire_) {
    scope = $rootScope.$new();
    element = angular.element('<div user-menu></div>');
    element = $compile(element)(scope);
    elementScope = element.scope();
  }));

  it('should get user data', inject(function ($compile) {
    console.log(scope);
  }));
});

老实说，我对单元测试不太熟悉，所以我可能遗漏了一些非常明显的东西，但我们将不胜感激。

Answer 1

如果您的应用程序一切正常，但您在测试中遇到错误，那么您需要将 firebase 添加到 Karma 的文件中。找到您的 karma.conf.js（在 yeoman 生成的 ionic-angular 中将其添加到 Gruntfile.js 的 Karma 套件中），并使其类似于以下内容：

karma: {
  options: {
    ...
    files: [
      ...
      'https://cdn.firebase.com/v0/firebase.js',
      'app/bower_components/angular-fire/angularFire.js',
      ...
    ],
    ...
  }
  ...
}

然后在您的规范中，包括 firebase：

beforeEach(module('Simplift', 'firebase'));

而且每次你​​需要使用firebase服务时：

describe/it('some test desc ...', inject(function (..., $firebase) {
  // now we can use $firebase!!
  fireSync = $firebase(new Firebase('https://app_name.firebaseio.com'));
  ...
}));

我花了很长时间才弄清楚这一点，并希望它能减轻某人的压力。这目前对我有用，但可能不是最干净的方法（请提供建议！），因为您实际上并没有删除 firebase 数据，但您可以向您的 firebase 数据库添加一个“测试”url。

Answer 2

Firbase 团队向我指出了 Fireseed project 中一些测试代码的方向，该代码随后已被删除。这是我的单元测试，其中包括 Fireseed 项目中的存根

'use strict';

describe('Directive: userMenu', function () {

  // load the directive's module
  beforeEach(module('userMenu', 'firebase', function($provide) {
    $provide.value('Firebase', firebaseStub());
    $provide.value('FBURL', 'FAKE_FB_URL');
    $provide.value('angularFireAuth', angularAuthStub());
  }));


  /**
   * This is from https://github.com/firebase/angularFire-seed/blob/master/test/unit/servicesSpec.js
   */
  function stub() {
    var out = {};
    angular.forEach(arguments, function(m) {
      out[m] = jasmine.createSpy();
    });
    return out;
  }
  /**
   * This is from https://github.com/firebase/angularFire-seed/blob/master/test/unit/servicesSpec.js
   */
  function stub() {
    var out = {};
    angular.forEach(arguments, function(m) {
      out[m] = jasmine.createSpy();
    });
    return out;
  }
  /**
   * This is from https://github.com/firebase/angularFire-seed/blob/master/test/unit/servicesSpec.js
   */
  function reject($q, error) {
    var def = $q.defer();
    def.reject(error);
    return def.promise;
  }
  /**
   * This is from https://github.com/firebase/angularFire-seed/blob/master/test/unit/servicesSpec.js
   */
  function resolve($q, val) {
    var def = $q.defer();
    def.resolve(val);
    return def.promise;
  }
  /**
   * This is from https://github.com/firebase/angularFire-seed/blob/master/test/unit/servicesSpec.js
   */
  function firebaseStub() {
    // firebase is invoked using new Firebase, but we need a static ref
    // to the functions before it is instantiated, so we cheat here by
    // attaching the functions as Firebase.fns, and ignore new (we don't use `this` or `prototype`)
    var fns = stub('set');
    customSpy(fns, 'child', function() { return fns; });

    var Firebase = function() {
      angular.extend(this, fns);
      return fns;
    };
    Firebase.fns = fns;

    return Firebase;
  }
  /**
   * This is from https://github.com/firebase/angularFire-seed/blob/master/test/unit/servicesSpec.js
   */
  function angularAuthStub() {
    var auth = stub('login', 'logout', 'createAccount', 'changePassword');
    auth._authClient = stub('changePassword', 'createUser');
    return auth;
  }
  /**
   * This is from https://github.com/firebase/angularFire-seed/blob/master/test/unit/servicesSpec.js
   */
  function customSpy(obj, m, fn) {
    obj[m] = fn;
    spyOn(obj, m).andCallThrough();
  }

  var element,
    elementScope,
    scope;


  beforeEach(inject(function ($rootScope, $compile) {
    scope = $rootScope.$new();
    element = angular.element('<div user-menu></div>');
    element = $compile(element)(scope);
    elementScope = element.scope();
  }));

  it('should default to a login message', inject(function ($compile) {
    scope.$digest();
    var text = element.text();
    expect(text).toBe('Please login');
  }));

  it('default message should contain a link to login page', inject(function ($compile) {
    scope.$digest();
    var href = element.find('a').attr('href');
    expect(href).toBe('#/login');
  }));
});