Angularjs Jasmine 测试：使用 $backend 进行 api 调用

Question

我遇到了一个问题，经过至少 8 小时的搜索和修补，空手而归，需要社区的帮助。有些文章试图解决类似的问题，但缺少示例并提供了一些帮助，但并不完全。阅读后，我提出了以下模块和测试，我无法弄清楚 ngWeather 工厂的 $backend。每当我尝试 .flush() $backend 时，我都会收到没有待处理请求的错误。虽然这是一个问题，但我也不确定传递给 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

您共享的 plnkr 在测试期间实际上并未调用 getWeather 函数，因此您的测试用例根本没有在回调中执行 expect。因此，您收到“没有待处理的刷新请求”。您应该能够通过添加任何日志记录语句来验证这一点。 我已经分叉并修改了您的 plnkr here 以便能够使用您的模拟数据运行测试。您模拟的数据的结构与您的代码预期的不同。您现在应该能够看到它在工作here。