这有什么错角服务测试？ [英] What's wrong with Angular service test?

问题描述

我有一个服务调用外部Web服务：

  angular.module（'myApp.services'，[]）
。服务（'autoCmpltDataSvc'，函数（$ HTTP）{
    VAR innerMatch =功能（数据）{
        返回$ .MAP（数据，功能（项目）{
            返回{
                全名：item.name +（item.adminName1，+ item.adminName1：？）+，+ item.countryName，
                短名称：item.name，
                的itemId：item.geonameId
            };
        }）;
    };    this.fetchFromGeonamesDb =函数（请求，响应，匹配）{
        $ HTTP（{
            方法：'JSONP'，
            网址：'http://ws.geonames.org/searchJSON?callback=JSON_CALLBACK'，
            params：一个{
                要素类：P
                风格：全，
                maxRows进行：12，
                name_startsWith：request.destName
            }
        }）。成功（功能（数据，状态）{
            的console.log（数据）;
            响应（$地图（innerMatch（data.geonames），匹配））;
        }）;
    };
}）;
 

我试图测试，它正确地形成输出，所以我嘲笑调用真正的Web服务。
这里是我的单元测试。

 描述（'服务'，函数（）{    beforeEach（模块（'myApp.services'））;    描述（autoCompleteService'，函数（）{
        变量$ httpBackend，SVC;
        变种结果= [];
        VAR匹配=功能（项目）{
            归还物品;
        };
        VAR响应=功能（ARR）{
            结果= ARR;
        };        beforeEach（注入（函数（$喷油器，autoCmpltDataSvc）{
            SVC = autoCmpltDataSvc;
            $ httpBackend = $ injector.get（'$ httpBackend'）;
            $ httpBackend.whenJSONP（/ searchJSON /）。
              响应（[
              {名称：'City1'，adminName1：区域1，国家名称：国家1，geonameId：1}，
              {名称：'城2，国家名称：COUNTRY2'，geonameId：2}]）;
        }））;        afterEach（函数（）{
            $ httpBackend.verifyNoOutstandingExpectation（）;
            $ httpBackend.verifyNoOutstandingRequest（）;
        }）;        它（'应该返回值'，函数（）{
            $ httpBackend.expectJSONP（/ searchJSON /）;
            svc.fetchFromGeonamesDb（{'了destname'：'FRA'}，响应，匹配）;
            $ httpBackend.flush（）;
            期待（results.length）.toBe（2）;
        }）;
    }）;
}）;
 

但测试产生错误。

 类型错误：无法读取的未定义的属性长度
            在Function.v.extend.map（C：/用户/ kmukhort /文件/ _files / TMate / A
ngularTest /应用/ lib中/ jQuery的-1.8.3.min.js：2：15334）
            在innerMatch（C：/用户/ kmukhort /文件/ _files / TMate / AngularTest /
应用程序/ JS / services.js：8：18）
 

我想这是什么毛病嘲笑回应，因为它似乎不返回数组。
但我不明白为什么它不返回数组。

在此先感谢！

解决方案

由于彼得·培根达尔文我愚蠢的错误被发现。

  

确定这样你的成功函数需要您的HTTP调用返回的
  与字段对象调用GEONAMES，目前你的模拟正在恢复
  直阵列中。

  
  

也许你应该将模拟改变呢？

 ＆GT; $ httpBackend.whenJSONP（/ searchJSON /）。
＆GT;回应（{GEONAMES：
＆GT; {名称：'City1'，adminName1：区域1，国家名称：国家1，geonameId：1}，
＆GT; {名称：'城2，国家名称：COUNTRY2'，geonameId：2}]
＆GT; }）;
 

https://groups.google.com/forum/ ＃！话题/角/ U-FYR-AC8Ec

I've got a service calling external web service:

angular.module('myApp.services', [])
.service('autoCmpltDataSvc', function ($http) {
    var innerMatch = function (data) {
        return $.map(data, function (item) {
            return {
                fullName: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                shortName: item.name,
                itemId: item.geonameId
            };
        });
    };

    this.fetchFromGeonamesDb = function (request, response, matcher) {
        $http({
            method: 'jsonp',
            url: 'http://ws.geonames.org/searchJSON?callback=JSON_CALLBACK',
            params: {
                featureClass: "P",
                style: "full",
                maxRows: 12,
                name_startsWith: request.destName
            }
        }).success(function (data, status) {
            console.log(data);
            response($.map(innerMatch(data.geonames), matcher));
        });
    };
});

I'm trying to test that it correctly forms the output, so I mock the call to real web service. Here is my unit-test.

describe('Services', function () {

    beforeEach(module('myApp.services'));

    describe('autoCompleteService', function () {
        var $httpBackend, svc;
        var results = [];
        var matcher = function (item) {
            return item;
        };
        var response = function (arr) {
            results = arr;
        };

        beforeEach(inject(function ($injector, autoCmpltDataSvc) {
            svc = autoCmpltDataSvc;
            $httpBackend = $injector.get('$httpBackend');
            $httpBackend.whenJSONP(/searchJSON/).
              respond([
              { name: 'City1', adminName1: 'Region1', countryName: 'Country1', geonameId: 1 },
              { name: 'City2', countryName: 'Country2', geonameId: 2}]);
        }));

        afterEach(function () {
            $httpBackend.verifyNoOutstandingExpectation();
            $httpBackend.verifyNoOutstandingRequest();
        });

        it('should return values', function () {
            $httpBackend.expectJSONP(/searchJSON/);
            svc.fetchFromGeonamesDb({ 'destName': 'fra' }, response, matcher);
            $httpBackend.flush();
            expect(results.length).toBe(2);
        });
    });
});

But the test produces an error.

         TypeError: Cannot read property 'length' of undefined
            at Function.v.extend.map (C:/Users/kmukhort/Documents/_files/TMate/A
ngularTest/app/lib/jquery-1.8.3.min.js:2:15334)
            at innerMatch (C:/Users/kmukhort/Documents/_files/TMate/AngularTest/
app/js/services.js:8:18)

I suppose it's something wrong with mock respond, as it seems it doesn't return the array. But I can't understand why it doesn't return the array.

Thanks in advance!

解决方案

Due to Peter Bacon Darwin my silly mistake was found.

OK so your success function is expecting your http call to return an object with a field called geonames, currently your mock is returning a straight array.

Perhaps you should change your mock to this?

> $httpBackend.whenJSONP(/searchJSON/).
>               respond( { geonames: [
>                 { name: 'City1', adminName1: 'Region1', countryName: 'Country1', geonameId: 1 },
>                 { name: 'City2', countryName: 'Country2', geonameId: 2}]
>               });

https://groups.google.com/forum/#!topic/angular/u-fYR-AC8Ec

这篇关于这有什么错角服务测试？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！