Angularjs 测试 return 静态数据的简单工厂

Question

如何在 AngularJs 中模拟一个简单的 Factory，在 Karma 单元测试中模拟 return 的静态数据？

我有这个简单的工厂，为了示例 return 静态数据：

angular.module('conciergeApp.services')
       .factory('CurrentUser', function() {
        return {
            id: 1,
            hotel_id: 1,
        }
      });

我想知道如何为此编写 Karma 测试？

到目前为止，我有这段代码，但 id 不起作用：

describe('ReplyCtrl', function() {

    beforeEach(module('conciergeApp'));

    beforeEach(module(function($provide) {
        $provide.service('CurrentUser', function() {
            return 1;
        });
    }));

    //Getting reference of the mocked service
    var mockUtilSvc;

    inject(function(CurrentUser) {
        mockUtilSvc = CurrentUser;
    });

    beforeEach(inject(function($rootScope, $controller) {
        scope = $rootScope.$new();
        ctrl = $controller('ReplyCtrl', {
            $scope: scope
        });
    }));

    it('should return value from mock dependency', inject(function(mockUtilSvc) {
        expect(mockUtilSvc()).toEqual(1);
    }));

});

这是我收到的错误消息：

Firefox 41.0.0 (Mac OS X 10.10.0) ReplyCtrl should return value from mock dependency FAILED
    Error: [$injector:unpr] Unknown provider: mockUtilSvcProvider <- mockUtilSvc

Answer 1

1) 你的 inject 放错地方了。您在测试中指定了注入函数 it，只需将其删除即可。

即

it('should return value from mock dependency', inject(function(mockUtilSvc) {
    expect(mockUtilSvc()).toEqual(1);
}));

会变成

 it('should return value from mock dependency', function() {
    expect(mockUtilSvc()).toEqual(1);
});

2) 现在的问题是 mockUtilSvc 是一个服务实例，而不是您定义的函数，同样根据您的模拟，您需要将其定义为工厂（即您返回 1 作为工厂的价值，它不是 new 能够）。

beforeEach(module(function($provide) {
    $provide.factory('CurrentUser', function() {
        return 1;
       //If you expect factory to be a function then you need to return a function returning 1 here
    });
}));

和

expect(mockUtilSvc).toEqual(1);

3) 你也可以这样写：

$provide.value('CurrentUser', 1); //Provide the instance here right away

4) 你的第一个 inject 也放错了地方。您只是运行设置它，而不是运行在每个规范运行期间设置和分配实例。 before Each 迭代你需要将服务实例的值设置为你的变量，即：

 beforeEach(inject(function(CurrentUser) {
    mockUtilSvc = CurrentUser;
}));

示例测试：

describe('ReplyCtrl', function() {
   var mockData = {
            id: 1234,
            hotel_id: 1,
        }, mockUtilSvc, scope, ctrl  ;


    beforeEach(module('conciergeApp', function($provide) {
        $provide.value('CurrentUser', mockData);
    }));

    beforeEach(inject(function(CurrentUser, $rootScope, $controller) {
        mockUtilSvc = CurrentUser;
        scope = $rootScope.$new();
        ctrl = $controller('ReplyCtrl', {
            $scope: scope
        });
    }));

    it('should return value from mock dependency', function() {
        expect(mockUtilSvc.id).toEqual(mockData.id);
    });
});

Demo

注意：还有其他方法可以模拟和注入模拟。例如，在这种情况下，您实际上也不需要使用 $provide.value。相反，您可以创建模拟对象并在控制器实例化期间将其传入，因为您可以完全控制那里以传递依赖项，如下所示：

  ctrl = $controller('ReplyCtrl', {
            $scope: scope,
            CurrentUser: mockUtilSvc
   });

如果使用方法的服务更复杂，您可以像这样创建模拟。

  mockSvc = jasmin.createSpyObj('MyService', ['method1', 'method2']);
  mockSvc.method1.and.returnValue($q.when(mockData)); //Simulating a promise returned from an $http call  in the method.

Angularjs 测试 return 静态数据的简单工厂

Angularjs test simple factory that return static data

javascript

jasmine

angularjs

karma-runner