Jasmine 中的 Angular Mocking 未知提供商

Question

我无法让这两个规范文件相互配合。我不认为规范文件会影响其他规范文件，但在这种情况下，它们似乎会影响其他规范文件，这对我来说毫无意义。

我正在使用 Jasmine 和 Karma 测试是通过 Gulp 自动进行的
我得到的错误是 "Unknown provider: ProductServiceProvider

我已更改测试以解决问题，这里是简单版本。

如果我在文件 2 中注释掉以下行，则两个文件都通过。

angular.module('eu.product.service', []);

这与模拟模块有关，但我无法弄清楚我在这里做错了什么。

规格文件 1

describe('Testing euProduct', function(){

var $factory;
var $httpBackend;

beforeEach(function () {

    //modules
    module('eu.product.service');

    //injections
    inject(function($injector){
        $factory = $injector.get('ProductService');
        $httpBackend = $injector.get('$httpBackend');
    });

    //mock data
    $httpBackend.when('GET', '/Mercury/product/list/0/0?PrimaryCategoryID=0&pageSize=20&startPage=1').respond({
        "data":
            [{
                "recallid":45,
            }]
    });

});

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

it('Should be able to get data from the server on default parameters.', function(){
    $factory.list({},function(data){
        expect(data.data[0].recallid).toBe(45);
    });
    $httpBackend.flush();
});

});

规格文件 2

'use strict';

describe('测试euProduct逻辑', function(){

//variables in closure scope so they can be used in tested but set with injection in beforeEach
var $factory;

//mocking a module :: http://www.sitepoint.com/mocking-dependencies-angularjs-tests/
beforeEach(function () {
    angular.module('eu.product.service',[]);

    module(function($provide) {
        $provide.factory('ProductService', function() {
            // Mocking utilSvc
            return {
                list : function(para, callback){
                    callback({
                        data : {
                            product : 'The product Name'
                        }
                    })
                }
            };
        });

        $provide.service('storageSvc', function() {
            // Mocking storageSvc
        });
    });

    //modules
    module('eu.product.logic');

    //injections
    inject(function($injector){
        $factory = $injector.get('ProductLogic');
    });

});

//-----Tests----

it('Should be able to run tests', function(){
    expect(2).toBe(2);
});
});

Answer 1

来自angular-mocks 的module 和inject 都返回需要调用的函数。

在以下示例中，我进行了这些更改：

• 重构为一个基本的工作示例
• 不要定义自定义$-前缀变量。这些是 angular 保留的。
• 使用inject 代替$injector 注入。

• 添加一些 cmets 以便进一步解释。

  describe('ProductService', function() {
      var ProductService;
      var $httpBackend;
  
      // Start module config phase.
      beforeEach(module('eu.produce.service', function($provide) {
          // Inject providers / override constants here.
          // If this function is empty, it may be left out.
      }))
  
      // Kickstart the app and inject services.
      beforeEach(inject(function(_ProductService_, _$httpBackend_){
          ProductService = _ProductService_;
          $httpBackend = _$httpBackend_;
      });
  
      beforeEach(function() {
          // Optionally use another beforeEach block to setup services, register spies, etc.
          // This can be moved inside of the inject function as well if you prefer.
          //mock data
          $httpBackend.when('GET', '/Mercury/product/list/0/0?PrimaryCategoryID=0&pageSize=20&startPage=1').respond({
              "data":
                  [{
                      "recallid":45,
                  }]
          });
      });
  
      afterEach(function() {
          $httpBackend.verifyNoOutstandingExpectation();
          $httpBackend.verifyNoOutstandingRequest();
      });
  
      //-----Tests----
  
      it('Should be able to get data from the server on default parameters.', function(){
          ProductService.list({},function(data){
              expect(data.data[0].recallid).toBe(45);
          });
          $httpBackend.flush();
      });
  });