單元測試自定義提供商

Question

我們如何測試客戶提供商中$ get的條件，我想在showSpinner下測試其他條件。

我會用

spinnerServiceProvider.spinnerEnabled(true) 

是使能在配置我spinnerSerive和使用

spinnerService.showSpinner(true) or spinnerService.showSpinner(false) 



    angular.module('providerModule', []).provider('spinnerService', [ 
    function() { 
    var enabled = true; 
    return { 
     spinnerEnabled: function(setting) { 
     if (angular.isDefined(setting)) { 
      enabled = setting; 
      return this; 
     } else { 
      return enabled; 
     } 
     }, 
     $get: function($injector) { 
     return { 
      showSpinner: function(option) { 
      if (enabled) { 
       if(option){ 
        angular.element(document.body).append('<div id="spinner"><div class="modal-backdrop fade in"></div><div class="load5"><div class="loader" ></div></div></div>'); 
       } 
       else{ 
       angular.element(document.querySelector('#spinner')).remove(); 

       } 
      } 
      } 
     } 
     } 
    } 

    } 
]); 

我能夠測試showSpinner是否已經被稱爲觸發我的飛旋的控制器，但如何來測試它是輸入if和else塊是否正確。下面是spec.js

describe('Spinner Provider', function(){ 
    var spinnerServiceObj; 
    beforeEach(module('providerModule')); 
    describe('testing spinner', function(){ 
     beforeEach(function() { 
      inject(function(_spinnerService_,_$rootScope_) { 
       spinnerServiceObj = _spinnerService_; 
       $rootScope = _$rootScope_; 
       $rootScope.showSpinner = jasmine.createSpy(spinnerServiceObj.showSpinner(true)) 
      }); 
     }); 
     it('Should test showSpinner with true and false', function() { 
      expect($rootScope.showSpinner).toHaveBeenCalled(); 

     }); 
    }) 
}) 

Answer 1

內部的描述塊，使用：

beforeEach(function() { 
    module('providerModule') 
    .config(function(spinnerServiceProvider) { 
     // set enabled/disabled here 
    }); 
}); 

這應該允許您測試任一條件。

Answer 2

單元測試不應該針對真實DOM進行測試，特別是如果這可能會給測試運行者帶來問題。

直接document參考文獻應替換爲$window.document。 $window有to make mocking the globals easier。

然後，它可與被模擬

var bodyMock = {}; 

beforeEach(module('providerModule', { $window: { 
    document: { 
    body: bodyMock, 
    querySelector: jasmine.createSpy() 
    } 
} })); 

angular.element或jQuery的可以通過完全或僅prototype methods嘲笑它進行測試：

// angular.element.prototype should be stubbed before angular.element 
// because a spy doesn't expose original `prototype` 
spyOn(angular.element.prototype, 'append'); 
spyOn(angular.element.prototype, 'remove'); 
spyOn(angular, 'element').and.callThrough(); 

一個條件可以與

spinnerService.showSpinner(true); 

expect(angular.element).toHaveBeenCalled(); 
expect(angular.element.calls.mostRecent().args[0]).toBe(bodyMock); 
expect(angular.element.prototype.append).toHaveBeenCalledWith('<div...); 
expect($window.document.querySelector).not.toHaveBeenCalled(); 

被測試

另一個條件可以用

var spinnerMock = {}; 
$window.document.querySelector.and.returnValue(spinnerMock); 

spyOn(angular, 'element').and.callThrough(); 

spinnerService.showSpinner(); 

expect($window.document.querySelector).toHaveBeenCalled('#spinner'); 

expect(angular.element).toHaveBeenCalled(); 
expect(angular.element.calls.mostRecent().args[0]).toBe(spinnerMock); 
expect(angular.element.prototype.remove).toHaveBeenCalled(); 
expect(angular.element.prototype.append).not.toHaveBeenCalled(); 

或者，$window.document可以單獨嘲笑到一些分離的DOM元素進行操作，所以showSpinner調用的結果可以針對元素含量進行測試。