2014-09-26 124 views
1

我正在構建一個Angular應用程序,並且正在爲它編寫單元測試。 Yay單元測試。我想嘲笑我正在使用的特定Web服務(Filepicker.io),它既有REST API也有Javascript API。在我的代碼使用電話一樣在角單元測試中嘲笑異步Web服務

filepicker.store(file, 
     {  
      options: 'go', 
      right: 'here' 
     }, 
     // filepicker's success callback 
     function(resultObject){ 
      // do stuff with the returned object 
     } 

的JavaScript API我知道,我可以用$ httpBackend提供商,如果我用Filepicker的REST API交互,但因爲我的應用程序的代碼不這樣做,我m想知道在Angular單元測試中,我是否可以模擬這種異步API調用。

我只是在我的測試套件上下文中覆蓋存儲方法(或整個filepicker對象),並使其返回我選擇的虛擬數據?這就是他們在使用AngularFire development時所做的,它擁有一個覆蓋「真正」Firebase後端服務的庫。

或者,我可以在使用$ httpBackend的東西中包裝該方法,所以我可以使用所有那些方便的$ httpBackend方法,如響應?什麼是正確的策略?第一個看起來像是一個更簡單和更清潔的想法。

以下是其他一些類似的問題,但最終還不夠清楚,我不能完全理解。

AngularJS: unit testing application based on Google Maps API

Unit testing Web Service responses

Mocking Web Services for client layer unit testing

回答

2

我會先設置你的SDK可注射的服務,因此它可以被你的角度應用

myApp.factory('FilePicker',function(){ 
    //likely coming from global namespace 
    return filepicker; 
}) 
.controller('ctrl',['FilePicker',function(FilePicker){ 
    //use File picker 
}]; 

更容易使用現在你應該能夠爲你的測試注入一個模擬而不是真正的實現。 用我們的控制器的一個例子

describe('ctrl test', function(){ 
    var ctrl; 

    beforeEach(inject(function($controller){ 
     var mockService={} // here set up a mock 

     ctrl=$controller('ctrl',{FilePicker:mockService}); 
    })); 
}); 
+1

這將理所當然您使用$ window.filepicker,允許filepicker服務很容易地通過一個服務,甚至嘲笑,如果它直接包含,而不是某個地方,並防止jshint從抱怨全局變量。 – Kato 2014-09-26 15:35:22