AngularJS + Jasmine如何監視控制器中調用的服務的構造函數

Question

我正在嘗試對我的構造函數進行單元測試。 在構造函數中，我正在注入一個自定義服務，該服務包含數據並發出http請求。 在構造函數的保存功能中，我通過調用構造函數到自定義服務來實例化作用域上的對象。

我想測試以確保正在調用我的自定義服務的構造函數。 我正在嘗試使用茉莉花間諜監視構造函數調用，但未成功。 我正在嘗試遵循Jasmine給出的示例，該示例如何對構造函數（[Jasmine Spies]） 1進行監視，但是它不起作用。

我的控制器定義如下：

controller('comments.EditCtrl', ['$scope', '$location', '$routeParams', 'Comment', function($scope, $location, $routeParams, Comment) {

    $scope.save = function(comment) {
        $scope.comment = new Comment(comment);

        $scope.comment.postId = $routeParams.postId;

        Comment.save($scope.comment, function() {
            $location.path('/blog/' + $routeParams.postId);
        });
    };
}])

定制服務被命名為“注釋”。 興趣線是

$scope.comment = new Comment(comment);

我無法通過測試來正常運行。 我對控制器的測試代碼如下：

describe('comment.edit', function() {

    beforeEach(function() {
        module('app');
        module('blog.comments');
        module('comments.edit');
    });

    describe('edit controller', function() {
        var $scope, editCtrl, Comment, commentNamespace;

        var mockComment = {
            email: 'spencerdev@maasive.net',
            text: 'mock text'
        };

        beforeEach(inject(function($rootScope, $injector, $controller) {
            var routeParamsStub = jasmine.createSpy('routeParamsStub');
            routeParamsStub.postId = '7';

            Comment = $injector.get('Comment');
            commentNamespace = {
                Comment: Comment
            };
            commentNamespace.Comment.save = function(comment, callback) {
                callback();
                return '';
            };

            $scope = $rootScope.$new();

            editCtrl = $controller('comments.EditCtrl', {
                $scope: $scope,
                $routeParams: routeParamsStub,
                Comment: commentNamespace.Comment
            });
        }));

        it('should have a edit controller', function() {
            expect(editCtrl).not.toBe(null);
            expect(editCtrl).not.toBe(undefined);
        });

        describe('save function', function() {

            beforeEach(function() {
                spyOn(commentNamespace, 'Comment');
                $scope.save(mockComment);
            });

            //TODO: figure out how to spy on Comment constructor call
            it('should create a Comment object via its constructor', function() {
                expect(commentNamespace.Comment).toHaveBeenCalled();
            });
        });
    });
});

您可以看到我正在嘗試按照Jasmine的建議創建一個名稱空間，然后監視“注釋”，以希望它能夠接收構造函數調用。 運行測試時，我從Karma收到以下錯誤消息：

[2013-07-23 21:58:47.720] [DEBUG] config - autoWatch set to false, because of singleRun
INFO [karma]: Karma server started at http://localhost:8080/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 28.0 (Mac)]: Connected on socket id QmSDHIAEJnuGEbe8Zmq3
Chrome 28.0 (Mac) LOG: null
Chrome 28.0 (Mac) comment.edit edit controller save function should create a Comment    object via its constructor FAILED
    Expected spy constructor to have been called.
    Error: Expected spy constructor to have been called.
    at null.<anonymous> (/Users/spencer/Projects/angular-blog/src/app/blog/comments/edit/edit.unit.js:68:55)
Chrome 28.0 (Mac): Executed 20 of 20 (1 FAILED) (0.266 secs / 0.092 secs)
Warning: Task "karma:unit" failed. Use --force to continue.

Aborted due to warnings.

我覺得我已經嘗試過其他各種策略的每一種組合，例如暗中監視Comment.prototype.constructor，但是每次都會收到相同的消息。 有人對如何執行此操作有任何線索嗎？ 我知道這里有很多東西，請讓我知道信息中是否有任何漏洞可以排除。 謝謝

Answer 1

這是由於茉莉花如何安裝間諜程序。 當您說spyOn(foo, 'bar')茉莉花會將foo上的bar屬性替換為行為類似於方法的間諜對象。 這意味着，當您將commentNamespace.Comment傳遞給控制器​​時，它已經具有對原始構造函數的引用，因此， spyOn(commentNamespace, 'Comment')再使用spyOn(commentNamespace, 'Comment') ，為時已晚。