将模拟注入 AngularJS 服务 [英] Injecting a mock into an AngularJS service

问题描述

我编写了一个 AngularJS 服务，我想对其进行单元测试.

I have an AngularJS service written and I would like to unit test it.

angular.module('myServiceProvider', ['fooServiceProvider', 'barServiceProvider']).
    factory('myService', function ($http, fooService, barService) {

    this.something = function() {
        // Do something with the injected services
    };

    return this;
});

我的 app.js 文件注册了这些:

My app.js file has these registered:

angular
.module('myApp', ['fooServiceProvider','barServiceProvider','myServiceProvider']
)

我可以测试 DI 是否正常工作:

I can test the DI is working as such:

describe("Using the DI framework", function() {
    beforeEach(module('fooServiceProvider'));
    beforeEach(module('barServiceProvider'));
    beforeEach(module('myServiceProvder'));

    var service;

    beforeEach(inject(function(fooService, barService, myService) {
        service=myService;
    }));

    it("can be instantiated", function() {
        expect(service).not.toBeNull();
    });
});

这证明服务可以由 DI 框架创建，但是接下来我想对服务进行单元测试，这意味着模拟注入的对象.

This proved that the service can be created by the DI framework, however next I want to unit test the service, which means mocking out the injected objects.

我该怎么做?

我尝试将模拟对象放入模块中，例如

I've tried putting my mock objects in the module, e.g.

beforeEach(module(mockNavigationService));

并将服务定义重写为:

function MyService(http, fooService, barService) {
    this.somthing = function() {
        // Do something with the injected services
    };
});

angular.module('myServiceProvider', ['fooServiceProvider', 'barServiceProvider']).
    factory('myService', function ($http, fooService, barService) { return new MyService($http, fooService, barService); })

但后者似乎停止了由 DI 创建的服务.

But the latter seems to stop the service being created by the DI as all.

有人知道我如何为单元测试模拟注入的服务吗?

Does anybody know how I can mock the injected services for my unit tests?

谢谢

大卫

推荐答案

您可以使用 $provide 将模拟注入到您的服务中.

You can inject mocks into your service by using $provide.

如果您的以下服务具有一个名为 getSomething 的方法的依赖项:

If you have the following service with a dependency that has a method called getSomething:

angular.module('myModule', [])
  .factory('myService', function (myDependency) {
        return {
            useDependency: function () {
                return myDependency.getSomething();
            }
        };
  });

您可以按如下方式注入 myDependency 的模拟版本:

You can inject a mock version of myDependency as follows:

describe('Service: myService', function () {

  var mockDependency;

  beforeEach(module('myModule'));

  beforeEach(function () {

      mockDependency = {
          getSomething: function () {
              return 'mockReturnValue';
          }
      };

      module(function ($provide) {
          $provide.value('myDependency', mockDependency);
      });

  });

  it('should return value from mock dependency', inject(function (myService) {
      expect(myService.useDependency()).toBe('mockReturnValue');
  }));

});

请注意，由于调用了 $provide.value，您实际上不需要在任何地方显式注入 myDependency.它在注入 myService 期间发生在幕后.在这里设置 mockDependency 时，它很容易成为间谍.

Note that because of the call to $provide.value you don't actually need to explicitly inject myDependency anywhere. It happens under the hood during the injection of myService. When setting up mockDependency here, it could just as easily be a spy.

感谢 loyalBrown 提供 那个很棒的视频.

这篇关于将模拟注入 AngularJS 服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！