使用刷新成功茉莉花模拟POST请求不执行AngularJS成功功能 [英] Flushing successful mock POST request using Jasmine does not execute the AngularJS success function

问题描述

这是我的AngularJS post.js ：

This is my AngularJS post.js:

angular.module("PostPageApp", ["BaseApp"])
    .controller("MainCtrl", ["$http", "$window", "BaseService", function($http, $window, BaseService) {

        var self = this;

        self.add = function() {
            BaseService.add.post(self.post, function() {
                self.cerrorMessages = BaseService.cerrorMessages;
            });
        };
    }]);

这是 base.js ：

angular.module("BaseApp", [])
    .config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.xsrfCookieName = 'csrftoken';
        $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
    }])

    .config(['$locationProvider', function($locationProvider){
        $locationProvider.html5Mode(true);
    }])

    .factory("BaseService", ["$http", "$window", function($http, $window) {
        var self = this;
        self.posts = [];
        self.cerrorMessages = [];

        /* This function sets self.cerrorMessages. After calling this function,
         * you should do a callback to a function on the front-end which
         * sets cerrorMessage. */
        self.accessErrors = function(data) {
             self.cerrorMessages = [];
             for (prop in data) {
                 if (data.hasOwnProperty(prop)){
                     /* if (data[prop] != null && data[prop].constructor ==  Object) {
                         self.accessErrors(data[prop]);
                     }
                     else { */
                     self.cerrorMessages.push(data[prop]);
                     // }
                 }
             }
         };

        self.add = {
            post: function(post, callback) {
                $http.post("/posts/", post)
                .then(function(response) {
                    $window.location.href = "/";
                }, function(response) {
                    self.accessErrors(response.data);
                    callback();
                });
            }
         };

        return self;
    }]);

这是我的 test_post.js ：

describe('Controller: MainCtrl', function() {
    beforeEach(module('PostPageApp'));

    var ctrl, $loc;

    beforeEach(inject(function($controller, $location, $httpBackend, BaseService) {
        ctrl = $controller('MainCtrl');
        $loc = $location;
        mockBackend = $httpBackend;

        spyOn(BaseService, 'add').and.callThrough();
        baseService = BaseService;
    }));

    it('should have an add function', function() {
        expect(ctrl.add).toBeDefined();
    });

    it('should be able to create a post object', function() {
        $loc.path('/post');
        ctrl.post = {'post':'Test post'}
        mockBackend.expectPOST('/posts/', ctrl.post)
            .respond(201, {'post':'TestPost', 'posting': 1});

        ctrl.add();

        mockBackend.flush();
        expect(baseService.add).toHaveBeenCalled();
        expect($loc.path()).toEqual('/');
        expect(ctrl.cerrorMessages).toBeUndefined();
    });
});

现在，当我运行人缘启动，它返回这样的：

Now, when I run karma start, it returns this:

Chromium 47.0.2526 (Ubuntu 0.0.0) Controller: MainCtrl should be able to create a valid post object FAILED
    Expected spy add to have been called.
        at Object.<anonymous> (/home/u/Documents/CMS/CMSApp/static/js/karma/tests/test_post.js:32:33)
    Expected '/post' to equal '/'.
        at Object.<anonymous> (/home/u/Documents/CMS/CMSApp/static/js/karma/tests/test_post.js:33:29)
Chromium 47.0.2526 (Ubuntu 0.0.0): Executed 3 of 3 (1 FAILED) (0 secs / 0.119 secChromium 47.0.2526 (Ubuntu 0.0.0): Executed 3 of 3 (1 FAILED) (0.163 secs / 0.119 secs)

正如你所看到的，间谍插件预计将被调用，但由于来一直呼吁的预期间谍插件。被印在终端上，从我的理解，这也就是说，它不叫吧？

As you can see, spy add was expected to be called, but since Expected spy add to have been called. was printed on the terminal, from my understanding, this means that it was not called, right?

此外，还印预计'/后'平等'/'.到终端所以这也意味着该网址仍处于/后，是否正确？

Also, it also printed Expected '/post' to equal '/'. onto the terminal so this also means that the URL is still at '/post', correct?

任何想法，为什么URL没有改变和间谍插件不叫？

Any idea why the URL did not change and spy add was not called?

推荐答案

如果你正在测试的控制器，仅测试控制器。这就是为什么它被称为的单元测试的。你应该嘲笑任何外部服务。

If you're testing the controller, only test the controller. That's why it's called a unit test. You should be mocking any external services.

describe('Controller: MainCtrl', function() {
    var ctrl, mockBaseService;

    beforeEach(function() {
        mockBaseService = {
            cerrorMessages: 'whatever',
            add: jasmine.createSpyObj('BaseService.add', ['post'])
        };

        mockBaseService.add.post.and.callFake(function(something, cb) {
            cb(); // execute the callback immediately
        });

        module('PostPageApp');

        inject(function($controller) {
            ctrl = $controller('MainCtrl', {
                BaseService: mockBaseService
            });
        });
    });

    it('add calls through to BaseService.add.post', function() {
        ctrl.post = 'something'; // just adding this because I can't see it anywhere else

        ctrl.add();

        expect(mockBaseService.add.post).toHaveBeenCalledWith(ctrl.post, jasmine.any(Function));
        expect(ctrl.cerrorMessages).toBe(mockBaseService.cerrorMessages);
    });
});

这篇关于使用刷新成功茉莉花模拟POST请求不执行AngularJS成功功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！