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

时间:2013-11-09 19:31:34

标签: javascript unit-testing angularjs testing jasmine

我遇到了一个问题,经过至少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

1 个答案:

答案 0 :(得分:0)

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