當單元測試AngularJS服務時注入依賴服務

Question

我正在測試服務A，但服務A依賴於服務B（即服務B被注入服務A）。

我見過this question但我的情況有點不同，因爲在我看來，它更有意義的以模擬 B業務，而不是注入的服務B的實際情況下我會用茉莉間諜嘲笑它。

這裏有一個樣本測試：

describe("Sample Test Suite", function() { 

    beforeEach(function() { 

    module('moduleThatContainsServiceA'); 

    inject([ 
     'serviceA', function(service) { 
     this.service = service; 
     } 
    ]); 

    }); 

    it('can create an instance of the service', function() { 
    expect(this.service).toBeDefined(); 
    }); 
}); 

我得到的錯誤是：

Error: Unknown provider: serviceBProvider

我怎麼會做這樣的事情？

Answer 1

其實在AngularJS依賴注入使用'最後贏'的規則。因此，您可以在包含模塊和依賴關係之後，在測試中定義您的服務，然後當您測試的服務A將使用DI請求服務B時，​​AngularJS將提供服務B的模擬版本。

通過定義像MyAppMocks這樣的新模塊，將模擬的服務/值放在那裏，然後添加這個模塊作爲依賴來完成。

的（示意圖）種類：

beforeEach(function() { 
    angular.module('MyAppMocks',[]).service('B', ...)); 
    angular.module('Test',['MyApp','MyAppMocks']); 
    ... 

Answer 2

的Valentyn解決方案爲我工作，但還有另外一種選擇。

beforeEach(function() { 

    angular.mock.module("moduleThatContainsServiceA", function ($provide) { 
       $provide.value('B', ...); 
      }); 
}); 

然後當AngularJS服務的請求由依賴注入服務B，您的服務B的模擬將被提供，而不是從moduleThatContainsServiceA服務B。

這樣你就不需要創建一個額外的角度模塊來模擬一個服務。

Answer 3

我在CoffeeScript中做了這個，發現了一個額外的問題。 （另外，我發現這個頁面上的代碼是容易混淆的簡潔。）下面是一個完整的工作示例：

describe 'serviceA', -> 
    mockServiceB = {} 

    beforeEach module 'myApp' # (or just 'myApp.services') 

    beforeEach -> 
     angular.mock.module ($provide) -> 
     $provide.value 'serviceB', mockServiceB 
     null 

    serviceA = null 
    beforeEach inject ($injector) -> 
     serviceA = $injector.get 'serviceA' 

    it 'should work', -> 
     expect(true).toBe(true) 
     #serviceA.doStuff() 

沒有$provide.value後明確地返回null，我一直得到Error: Argument 'fn' is not a function, got Object。我在這個Google Groups thread找到了答案。

Answer 4

這是我工作的。關鍵是定義一個真正的模塊被嘲笑。調用angular.mock.module使真實模塊可以嘲笑，並允許連接。

beforeEach(-> 
     @weather_service_url = '/weather_service_url' 
     @weather_provider_url = '/weather_provider_url' 
     @weather_provider_image = "test.jpeg" 
     @http_ret = 'http_works' 
     module = angular.module('mockModule',[]) 
     module.value('weather_service_url', @weather_service_url) 
     module.value('weather_provider_url', @weather_provider_url) 
     module.value('weather_provider_image', @weather_provider_image) 
     module.service('weather_bug_service', services.WeatherBugService) 

     angular.mock.module('mockModule') 

     inject(($httpBackend,weather_bug_service) => 
      @$httpBackend = $httpBackend 
      @$httpBackend.when('GET', @weather_service_url).respond(@http_ret) 
      @subject = weather_bug_service 
     ) 
    ) 

Answer 5

我覺得最簡單的方法就是注入服務B並模擬它。例如服務車取決於服務引擎。現在，我們的測試車，當需要模擬引擎：

describe('Testing a car', function() { 
     var testEngine; 

    beforeEach(module('plunker')); 
    beforeEach(inject(function(engine){ 
    testEngine = engine; 
    })); 

    it('should drive slow with a slow engine', inject(function(car) { 
    spyOn(testEngine, 'speed').andReturn('slow'); 
    expect(car.drive()).toEqual('Driving: slow'); 
    })); 
}); 

參考：https://github.com/angular/angular.js/issues/1635