javascript - 使用参数对 AngularJs $resource 查询进行单元测试

Question

我想知道如何使用参数对 AngularJs $resource 查询进行单元测试。

我有这个:

services.js

angular.module('conciergeApp.services', ['ngResource'])
    .factory('Reply', function($resource) {
        return $resource('/api/reply/:id/');
    });

controllers.js

conciergeControllers.controller('ReplyCtrl', ['$scope', 'Reply',
    function($scope, Reply) {

        $scope.hotel_replies = Reply.query({
            hotel: $scope.hotel_id
        });
    }
]);

因此，此处查询的 API 端点是:

'/api/reply/?hotel=<hotel_id>'

// aka

'/api/reply/?hotel=1'

这在手动测试时有效，但如何对其进行单元测试？

使用 Jasmine spyOn 或 $httpBackend。哪个好？

这个可以用吗？我尝试了这种模式，但未能成功:

spyOn(object, 'method').andCallFake(function({foo:bar}) {
  return myMockObject
});

Answer 1

示例 here使用 Jasmine 2.0 和 htmlRunner。解释如下:

所以在您的 ReplyCtrl 单元测试中:

describe('ReplyCtrl Controller', function () {
    var Reply;
    var ReplyCtrl;
    var $scope;
    var ReplyQueryMock;
    var HOTEL_ID = 1234;
    beforeEach(module('conciergeApp'));
    beforeEach(inject(function (_Reply_, $controller, $rootScope) {
        // This object can be used throughout your controller unit test for the
        // response of calling the Reply.query method
        ReplyQueryMock = {};
        Reply = _Reply_;
        spyOn(Reply, 'query').and.returnValue(ReplyQueryMock);
        $scope = $rootScope.$new();
        $scope.hotel_id = HOTEL_ID;
        ReplyCtrl = $controller('ReplyCtrl', {$scope: $scope});
    }));

    it('should populate hotel_replies', function () {
        expect(Reply.query).toHaveBeenCalledWith({
            hotel: HOTEL_ID
        });
        expect($scope.hotel_replies).toBe(ReplyQueryMock);
    });
});

这将模拟您的回复服务并返回查询的模拟对象。您将验证您的 $scope 的 hotel_replies 是使用 $scope 上存在的 hotel_id 调用 Reply.query 的结果。

编辑: 大概 $resource 已经为您进行了单元测试(由 Angular 团队进行!)。您可能只想验证您是否使用正确的 URL 设置了资源，而不是深入了解 $resource 的真正作用(例如调用 $http)。上面的 Fiddle 链接已更新，看起来像下面这样:

describe('Reply Resource', function () {
    var Reply;
    var $resource;
    var ReplyResourceMock;
    beforeEach(module('conciergeApp.services', function ($provide) {
        // Mock out $resource here
        $provide.factory('$resource', function () {
            ReplyResourceMock = {};
            var $resource = jasmine.createSpy('$resource');
            $resource.and.returnValue(ReplyResourceMock);
            return $resource;
        });
    }));
    beforeEach(inject(function (_Reply_, _$resource_) {
        Reply = _Reply_;
        $resource = _$resource_;
    }));

    it('should initialize resource', function () {
        expect($resource).toHaveBeenCalledWith('/api/reply/:id/');
        expect(Reply).toBe(ReplyResourceMock);
    });
});

从最初的答案来看，可能有点矫枉过正，因为您使用 $resource 来抽象 $http(仍然显示在 fiddle 中)

然后为了验证 $resource 从您的 Reply 工厂/服务正常工作，您需要注入(inject) $httpBackend。您可以验证是否使用正确的数据调用了正确的 REST 端点。