8

我想测试 angularjs 资源。

'use strict';

/**
 * AddressService provides functionality to use address resource in easy way.
 *
 * This is an example usage of method:
 *
 * `get`:
 *
     var a = AddressService.get({id: '1'},
         function (data) {
            // Work here with your resource
         }
     );
 *
 */
App.factory('AddressService', function ($resource, $rootScope) {
    var url = [
            $rootScope.GLOBALS.API_PATH,
            $rootScope.GLOBALS.API_VERSION,
            'models/address/:id'
        ].join('/'),

        actions = {
            'get': {
                method: 'GET',
                params: {id: '@id'}
            }
        };
    return $resource(url, {}, actions);
});

我创建了测试：

'use strict';

var $httpBackend;

describe('Service: AddressService', function () {

    beforeEach(module('myApp'));

    beforeEach(inject(function ($injector) {
        var url_get = 'api/v1/models/address/5';

        var response_get = {
            address_line_1: '8 Austin House Netly Road',
            address_line_2: 'Ilford IR2 7ND'
        };

        $httpBackend = $injector.get('$httpBackend');

        $httpBackend.whenGET(url_get).respond(response_get);

    }));

    describe('AddressService get test', function () {
        it('Tests get address', inject(function (AddressService) {
            var address = AddressService.get({ id: '5'});
            $httpBackend.flush();
            expect(address.address_line_1).toEqual('8 Austin House Netly Road');
            expect(address.address_line_2).toEqual('Ilford IR2 7ND');
        }));
    });
});

我对角度的经验不是很好。我在 karma.config.js 中设置了 jasmine。AngularJS v1.0.6 Yoeman 和 Grunt 管理项目。

我试试grunt test

Running "karma:unit" (karma) task
INFO [karma]: Karma server started at http://localhost:8080/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 27.0 (Linux)]: Connected on socket id RFFUY5bW8Hb5eTu0n-8L
Chrome 27.0 (Linux) Service: AddressService AddressService get Tests get address FAILED
        Error: Unexpected request: GET views/home.html
        No more request expected
            at Error (<anonymous>)
            at $httpBackend (/home/bart/y/projects/x/frontend/app/components/angular-mocks/angular-mocks.js:910:9)
            at sendReq (/home/bart/y/projects/x/frontend/app/components/angular/angular.js:9087:9)
            at $http (/home/bart/y/projects/x/frontend/app/components/angular/angular.js:8878:17)
            at Function.$http.(anonymous function) [as get] (/home/bart/y/projects/x/frontend/app/components/angular/angular.js:9021:18)
            at $q.when.then.then.next.locals (/home/bart/y/projects/x/frontend/app/components/angular/angular.js:7394:34)
            at wrappedCallback (/home/bart/y/projects/x/frontend/app/components/angular/angular.js:6797:59)
            at wrappedCallback (/home/bart/y/projects/x/frontend/app/components/angular/angular.js:6797:59)
            at /home/bart/y/projects/x/frontend/app/components/angular/angular.js:6834:26
            at Object.Scope.$eval (/home/bart/y/projects/x/frontend/app/components/angular/angular.js:8011:28)
        Error: Declaration Location
            at window.jasmine.window.inject.angular.mock.inject (/home/bart/y/projects/x/frontend/app/components/angular-mocks/angular-mocks.js:1744:25)
            at null.<anonymous> (/home/bart/y/projects/x/frontend/test/spec/services/userdata/AddressService.js:32:30)
            at null.<anonymous> (/home/bart/y/projects/x/frontend/test/spec/services/userdata/AddressService.js:31:5)
            at /home/bart/y/projects/x/frontend/test/spec/services/userdata/AddressService.js:5:1
..................................................................
Chrome 27.0 (Linux): Executed 67 of 67 (1 FAILED) (0.343 secs / 0.179 secs)
Warning: Task "karma:unit" failed. Use --force to continue.

$httpBackend.flush()如果我在测试中删除。测试通过。但我undefined从address. 我看到了一些例子：example all use the flush()But only I get silly exception：Error: Unexpected request: GET views/home.html

views/home.html是我在项目目录中的视图。我不知道如何解决我的问题我找不到任何解决方案。我是否以某种方式错过了重点？

有人能在我的代码中看到错误吗？所有建议将不胜感激。

编辑

我发现我需要使用这个： 

$httpBackend.when('GET', /\.html$/).passThrough();

但另一个问题是我得到：

TypeError: Object #<Object> has no method 'passThrough'
4

2 回答 2

9

该错误是由您的测试尝试加载您的应用程序的主页引起的。由于您没有告诉测试期待此服务器调用，因此返回错误。有关这一点的说明，请参阅$httpBackend的文档。

您的 $templateCache 解决方法是为单元测试指令设计的，而不是其他任何东西。你非常接近：

$httpBackend.when('GET', /\.html$/).passThrough();

由于您不需要对实际的模板文件执行任何操作，因此将其添加到您的 beforeEach() 块中是一种安全且简单的工作。

$httpBackend.whenGET(/\.html$/).respond('');

这会阻止你得到你所拥有的 TypeError 。

TypeError: Object #<Object> has no method 'passThrough'

respond('')在升级到新版本的 Angular JS 并使用工作正常后，我在单元测试中遇到了同样的问题。

于 2015-01-29T23:29:04.240 回答
8

我终于找到了解决方案：

我试图遵循这个：其他帖子

所以我补充说$templateCache： 

'use strict';

var $httpBackend;

describe('Service: AddressService', function () {

    beforeEach(module('myApp'));

    beforeEach(inject(function ($injector, $templateChache) {
        $templateCache.put('views/home.html', '.<template-goes-here />');
        var url_get = 'api/v1/models/address/5';

        var response_get = {
            address_line_1: '8 Austin House Netly Road',
            address_line_2: 'Ilford IR2 7ND'
        };

        $httpBackend = $injector.get('$httpBackend');

        $httpBackend.whenGET(url_get).respond(response_get);

    }));

    describe('AddressService get test', function () {
        it('Tests get address', inject(function (AddressService) {
            var address = AddressService.get({ id: '5'});
            $httpBackend.flush();
            expect(address.address_line_1).toEqual('8 Austin House Netly Road');
            expect(address.address_line_2).toEqual('Ilford IR2 7ND');
        }));
    });
});
于 2013-05-28T15:16:11.443 回答