测试angularjs $httpbackend和$resource

Question

*更新-见post*的结尾

我有一个依赖于服务的控制器。该服务封装$resource。这是代码

app.controller('charactersController', function ($scope, $routeParams, $location, marvelRepository) {
    var page = parseInt($routeParams.pageNumber);

    marvelRepository.fetch(page - 1).then(function (data) {
        $scope.characters = data.results;
        $scope.paging = {
            page: page,
            total: data.total,
            pageSize: data.limit
        };
    });

    $scope.goto = function (pageNumber) {
        $location.path('/characters/' + pageNumber);
    };
});

marvel.service('marvelRepository', function (hash, $resource) {
    var extended = ng.extend(hash.authenticate(), { id: '@id' });
    var characters = $resource('http://gateway.marvel.com/v1/public/characters/:id', extended);

    return {
        get: function (characterId) {
            return characters
                .get({ id: characterId })
                .$promise
                .then(function (response) {
                    if (response.code !== 200) {
                        throw response;
                    }

                    return response.data.results[0];
                });
        },
        fetch: function (pageIndex) {
            return characters
                .get({ limit: 20, offset: pageIndex * 20 })
                .$promise
                .then(function (response) {
                    if (response.code !== 200) {
                        throw response;
                    }

                    return response.data;
                });
        }
    };
});

散列依赖项为惊奇的api创建身份验证参数:公钥、时间戳和哈希值。

该网站工作，我可以显示一个字符列表。现在我正在尝试编写测试(因为角促进了容易的测试性.)

这是我的测试

describe("Angular Demo - Test", function () {
    beforeEach(angular.mock.module('demo'));

    describe('requiring Marvel respository', function() {
        var url = 'http://gateway.marvel.com/v1/public/characters?apikey=123&hash=abc123&limit=20&offset=0&ts=20140601073322';
        var httpBackend, location, scope, controller;

        beforeEach(module(function (hashProvider) {
            hashProvider.override({
                apikey: '123',
                ts: '20140601073322',
                hash: 'abc123'
            });
        }));

        beforeEach(inject(function ($httpBackend, $location, $rootScope, $controller) {
            controller = $controller;
            location = $location;
            scope = $rootScope.$new();
            httpBackend = $httpBackend;
        }));

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

        describe('charactersController', function () {
            var characters;

            beforeEach(function() {
                characters = new Array(20);

                httpBackend.when('get', url).respond({ data: { results: characters, offset: 2, limit: 20, total: 100 } });

            });

            it('should be able to get a page of characters', function () {
                httpBackend.expect('get', url);

                controller('charactersController', { $scope: scope, $routeParams: { pageNumber: 1 } });

                httpBackend.flush();

                expect(scope.characters).toBe(characters);
            });

            it('should be able to configure paging', function () {
                 httpBackend.expect('get', url);

                controller('charactersController', { $scope: scope, $routeParams: { pageNumber: 1 } });

                httpBackend.flush();

                expect(scope.paging.total).toBe(100);
                expect(scope.paging.page).toBe(1);
                expect(scope.paging.pageSize).toBe(20);
            });

            it('should be able to navigate to another page of characters', function () {
                controller('charactersController', { $scope: scope });

                scope.goto(5);

                expect(location.path()).toBe('/characters/5');
            });
        });
    });
});

当我执行测试时，我得到以下结果

错误:意外请求:获取http://gateway.marvel.com/v1/public/characters/1?apikey=123&hash=abc123&ts=20140601073322 期望得到http://gateway.marvel.com/v1/public/characters/1?apikey=123&hash=abc123&ts=20140601073322 错误:意外请求:获取http://gateway.marvel.com/v1/public/characters/1?apikey=123&hash=abc123&ts=20140601073322 预期获得http://gateway.marvel.com/v1/public/characters/1?apikey=123&hash=abc123&ts=20140601073322 at $httpBackend (/js/ang-mock.js:1172:13)，sendReq (/js/angular.js:8286:9)，$http.serverRequest (/js/angular.js:8027:16)，wrappedCallback (/js/angular.js:11574:81)，wrappedCallback (/js/angular.js:11574:81)，/js/angular.js:11660:26。在作用域，$eval(/js/angular.js:12724:28)在作用域，$摘要(/js/angular.js:12536:31)位于Function.$httpBackend.flush (/test/ang-mock.js:1447:20)。(/test/tests.js:113:29)

如果我在代码中添加控制台语句。我看得出来，marvelRepository.fetch(1)正在接到电话。但是，.$promise.then()似乎没有执行。

对我来说没有意义的是错误的前两行。它首先声明了一个意外的请求，然后表示对url进行了一个预期的调用。而且是同一个网址。

对我忽略的东西有什么想法吗？

*更新*我更新了测试的结构。设置when和expect调用。

我还发现，如果我将后端调用从when('get', ...更改为when('GET', ...，则会收到以下测试错误

undefined: undefined

没有堆栈跟踪或行号，但没有定义。检查它所述的原始错误。

Error: Unexpected request: GET url....
Expected get url...

因此，我想知道它是否失败了，因为比较了请求方法的大小写敏感性。然而，我认为这是一个时间问题。注入服务并调用该方法，但是promise.then(cb)不执行。但可能不是因为请求方法不匹配而导致$httpbackend不返回吗？

Answer 1

在BeforeEach中，您需要使用.when()而不是.expect()。

httpBackend
.when('GET', 'http://gateway.marvel.com/v1/public/characters?apikey=123&hash=abc123&limit=20&offset=0&ts=20140601073322')
.respond({ data: { results: characters, offset: 2, limit: 20, total: 100 } });

使用.expect()通常是在断言中完成的，而不是安装过程。

Answer 2

终于找到了解决办法。问题是承诺的使用和延期执行。我还需要调用$scope.apply()和'$httpBackend.flush()‘

这是一个合格的测试

describe('characterController', function () {
    var characterUrl = 'http://gateway.marvel.com/v1/public/characters/1';
    var character;

    beforeEach(function () {
        character = { name: 'Wolverine'};

        httpBackend.whenGET(characterUrl).respond({ data: { results: [character] } });
    });

    it('should be able to get character with id of 1', function () {
        controller('characterController', { $scope: scope, $routeParams: { id: 1 } });

        scope.$apply();//execute promises
        httpBackend.flush(); //process http requests

        expect(scope.character).toEqual(character);
    });
});