Angularjs Jasmine測試：用$後端進行api調用

Question

我遇到了一個問題，經過至少8個小時的搜索和修補工作，空手而來需要來自社區的幫助。有些文章試圖解決類似的問題，但這些例子缺乏，並提供一些幫助，但不完全。閱讀後，我想出了以下模塊和測試，我無法弄清楚ngWeather工廠的$後端。每當我嘗試.flush（）$後端時，我都會收到沒有掛起請求的錯誤。雖然這是一個問題，但我也不確定傳遞給JSONP請求的url是否被正確模擬。任何指導或方向將不勝感激。

Here is a link to the plunker

/*模塊和控制器JS */

var app = angular.module('test', []); 

app.controller('MainCtrl', function ($scope, ngWeather) { 
    ngWeather.getWeather(139,35).then(function(data) { 
     $scope.data = data.data; 
    }); 
}); 


app.factory('ngWeather', function ($http) { 
    return { 
     getWeather : function (lat, lon, callback) { 
      $http.jsonp('http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&callback=JSON_CALLBACK') 
      .then(function(data) { 
       callback({ 
        data : data.data, 
        city : data.data.name, 
        temp : Math.floor(data.data.main.temp*(9/5)-459.67), 
        minTemp : Math.floor(data.data.main.temp_min*(9/5)-459.67), 
        maxTemp : Math.floor(data.data.main.temp_max*(9/5)-459.67), 
        humidity : data.data.main.humidity, 
        currentCondition : data.data.weather[0].main, 
        currentDescription : data.data.weather[0].description, 
        icon : data.data.weather[0].icon 
       }); 
      }); 
     } 
    }; 
}); 

/*測試*/

describe('Test: ngWeather', function() { 

    var ngWeather = jasmine.createSpyObj('ngWeather', ['getWeather']); 
    var $httpBackend; 
    beforeEach(module('test')); 
    beforeEach(inject(function(_$httpBackend_) { 
    $httpBackend = _$httpBackend_; 
    $httpBackend.when('jsonp', '*/api.openweathermap.org/*') 
     .respond({ 
     data : {"coord":{"lon":0,"lat":0},"sys":{"message":0.0472,"country":"US","sunrise":1383998825,"sunset":1384035744},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04n"}],"base":"gdps stations","main":{"temp":289.68,"humidity":35,"pressure":958,"temp_min":276.48,"temp_max":301.48},"wind":{"speed":4.11,"gust":5.65,"deg":169},"clouds":{"all":92},"dt":1384022616,"id":4291884,"name":"Flatwoods","cod":200}, 
     city : 'Flatwoods', 
     temp : 63, 
     minTemp : 55, 
     maxTemp : 68, 
     humidity : 70, 
     currentCondition : 'Clouds', 
     currentDescription : 'Overcast clouds', 
     icon : '04n' 
     }); 
    })); 

    it('should check if getWeather method is defined', function() { 
    expect(ngWeather.getWeather).toBeDefined(); 
    }); 

    it('should check if a value is returned', function() { 
    ngWeather.getWeather(139,35,function(data) { 
     expect(data).not.toBe(null); 
    }); 
    }); 

    it('should check if a Flatwoods is returned as city', function() { 
    ngWeather.getWeather(139,35, function(data) { 
     expect(data.city).toEqual('Flatwoods'); 
    }); 
    }); 

    it('should make a call to the api', function() { 
    $httpBackend.expect('jsonp', '*/api.openweathermap.org/*') 
     .respond({ 
     data : {"coord":{"lon":0,"lat":0},"sys":{"message":0.0472,"country":"US","sunrise":1383998825,"sunset":1384035744},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04n"}],"base":"gdps stations","main":{"temp":289.68,"humidity":35,"pressure":958,"temp_min":276.48,"temp_max":301.48},"wind":{"speed":4.11,"gust":5.65,"deg":169},"clouds":{"all":92},"dt":1384022616,"id":4291884,"name":"Flatwoods","cod":200}, 
     city : 'Flatwoods', 
     temp : 63, 
     minTemp : 55, 
     maxTemp : 68, 
     humidity : 70, 
     currentCondition : 'Clouds', 
     currentDescription : 'Overcast clouds', 
     icon : '04n' 
     }); 

    $httpBackend.flush(); 

    ngWeather.getWeather(139,35, function(data) { 
     expect(data.temp).toEqual('63'); 
    }); 


    }); 
}); 

這是我在寫作測試，第一次去，但我想推廣優質代碼，我覺得這是我學習的基本要素。再次任何幫助或方向將不勝感激，Here is a link to the plunker

Answer 1

你共享的測試，因此測試的情況下並沒有在所有正在執行的回調expect中實際上並沒有調用getWeather功能plnkr。因此，您得到「沒有未決請求刷新」。您應該可以通過添加任何日誌記錄來驗證。 我已經分叉並修改了您的plnkr here以便能夠使用您的模擬數據運行測試。您嘲笑的數據與您的代碼所期望的結構不同。您現在應該能夠看到它正在工作here。