茉莉花测试失败，由于角度模拟做$ httpbackend呼叫接收不正确JSON格式 [英] Jasmine test fails making $httpbackend call due to angular mock receiving incorrect json format

查看：897 发布时间：2016/4/12 19:44:14 javascript angularjs unit-testing jasmine karma-runner

本文介绍了茉莉花测试失败，由于角度模拟做$ httpbackend呼叫接收不正确JSON格式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我无法写什么，我认为应该是一个简单的单元测试。我有以下控制器：

I'm having trouble writing what I think should be a simple unit test. I have the following controller:

 (function(){ 'use strict';
    var LoginController = function($scope, $state, RestService){
        var _user = {};
        var _message = 'hello';

        var _login = function(username, password){
            var _success = function(response){
                _message = response.success;
                _user = response.user;
            };

            var _error = function(response){
                _message = response.success;
            };

            RestService.postData('/api/login', {username: username, password: password}, _success,  _error, {showLoader: true});
        };

        $scope.model = {
            login: _login,
            user: _user,
            message: _message
        };
    };

    angular.module('danny').controller('LoginController',['$scope', '$state', 'RestService',LoginController]);
})();

下面是规格：

describe('LoginController', function(){
    var scope, $httpBackend, controller, restService;
    beforeEach(function(){
        module('danny');
    });

    beforeEach(inject(function(_$controller_, _$rootScope_, _$httpBackend_, _RestService_){
        $httpBackend = _$httpBackend_;
        restService = _RestService_;
        scope = _$rootScope_.$new();
        controller = _$controller_('LoginController', {
            $scope: scope,
            RestService: restService
        });
    }));

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

    describe('successfully logging in', function(){

       it('should redirect to /blog when authenticated', function(){

           var user = {"username":"danny@ravenartmedia.com", "password":"test"};
            expect(user.username).toEqual('danny@ravenartmedia.com');

           $httpBackend.expectPOST('/api/login', user);

           scope.model.login(user);
           $httpBackend.flush();
           expect(scope.model.user).not.toBe(undefined);
       });
    });
});

当我运行测试的业力的输出是这样的：

When I run the test the karma output is this:

    C:\Program Files (x86)\JetBrains\WebStorm 9.0.1\bin\runnerw.exe" C:\nodejs\node.exe c:\Users\danny_000\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt test
Running "karma:development" (karma) task
INFO [karma]: Karma v0.12.16 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.8 (Windows 8)]: Connected on socket SWVDLzehlqv2Z3J0C2Av with id 62852294
PhantomJS 1.9.8 (Windows 8): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
PhantomJS 1.9.8 (Windows 8) LoginController successfully logging in should redirect to /blog when authenticated FAILED
    SyntaxError: Unable to parse JSON string
        at fromJson (c:/Projects/dannyschreiber/public/vendors/angular/angular.js:1066)
        at c:/Projects/dannyschreiber/public/vendors/angular-mocks/angular-mocks.js:1646
        at $httpBackend (c:/Projects/dannyschreiber/public/vendors/angular-mocks/angular-mocks.js:1194)
        at sendReq (c:/Projects/dannyschreiber/public/vendors/angular/angular.js:9616)
        at c:/Projects/dannyschreiber/public/vendors/angular/angular.js:9331
        at processQueue (c:/Projects/dannyschreiber/public/vendors/angular/angular.js:13171)
        at c:/Projects/dannyschreiber/public/vendors/angular/angular.js:13187
        at c:/Projects/dannyschreiber/public/vendors/angular/angular.js:14384
        at c:/Projects/dannyschreiber/public/vendors/angular/angular.js:14200
        at c:/Projects/dannyschreiber/public/vendors/angular-mocks/angular-mocks.js:1525
        at c:/Projects/dannyschreiber/public/src/core/security/login-controller.spec.js:6
    Error: [$rootScope:inprog] $digest already in progress
    http://errors.angularjs.org/1.3.9/$rootScope/inprog?p0=%24digest
        at beginPhase (c:/Projects/dannyschreiber/public/vendors/angular/angular.js:14738)
        at c:/Projects/dannyschreiber/public/vendors/angular/angular.js:14180
        at c:/Projects/dannyschreiber/public/vendors/angular-mocks/angular-mocks.js:1557
        at c:/Projects/dannyschreiber/public/src/core/security/login-controller.spec.js:6
PhantomJS 1.9.8 (Windows 8): Executed 1 of 1 (1 FAILED) (0 secs / 0.031 secs)
PhantomJS 1.9.8 (Windows 8): Executed 1 of 1 (1 FAILED) ERROR (0.028 secs / 0.031 secs)
Warning: Task "karma:development" failed. Use --force to continue.

我最终注释掉角嘲笑行是导致错误（行号1646），并看到由于某种原因，某个地方，我要送数据被格式不正确。这是错误输出现在：

I ended up commenting out the angular-mocks line that was causing the error (line# 1646), and see that for some reason, somewhere, the data i'm sending is being formatted incorrectly. This is the error output now:

    Running "karma:development" (karma) task
INFO [karma]: Karma v0.12.16 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.8 (Windows 8)]: Connected on socket xGP0gRaa3WEdNVw1DrQm with id 89049214
PhantomJS 1.9.8 (Windows 8): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
PhantomJS 1.9.8 (Windows 8) LoginController successfully logging in should redirect to /blog when authenticated FAILED
    Error: Expected POST /api/login with different data
    EXPECTED: {"username":"danny@ravenartmedia.com","password":"test"}
    GOT:      username=danny%40ravenartmedia.com&password=test
        at $httpBackend (c:/Projects/dannyschreiber/public/vendors/angular-mocks/angular-mocks.js:1196)
        at sendReq (c:/Projects/dannyschreiber/public/vendors/angular/angular.js:9616)
        at c:/Projects/dannyschreiber/public/vendors/angular/angular.js:9331
        at processQueue (c:/Projects/dannyschreiber/public/vendors/angular/angular.js:13171)
        at c:/Projects/dannyschreiber/public/vendors/angular/angular.js:13187
        at c:/Projects/dannyschreiber/public/vendors/angular/angular.js:14384
        at c:/Projects/dannyschreiber/public/vendors/angular/angular.js:14200
        at c:/Projects/dannyschreiber/public/vendors/angular-mocks/angular-mocks.js:1525
        at c:/Projects/dannyschreiber/public/src/core/security/login-controller.spec.js:6
    Error: [$rootScope:inprog] $digest already in progress
    http://errors.angularjs.org/1.3.9/$rootScope/inprog?p0=%24digest
        at beginPhase (c:/Projects/dannyschreiber/public/vendors/angular/angular.js:14738)
        at c:/Projects/dannyschreiber/public/vendors/angular/angular.js:14180
        at c:/Projects/dannyschreiber/public/vendors/angular-mocks/angular-mocks.js:1557
        at c:/Projects/dannyschreiber/public/src/core/security/login-controller.spec.js:6
PhantomJS 1.9.8 (Windows 8): Executed 1 of 1 (1 FAILED) (0 secs / 0.032 secs)
PhantomJS 1.9.8 (Windows 8): Executed 1 of 1 (1 FAILED) ERROR (0.029 secs / 0.032 secs)
Warning: Task "karma:development" failed. Use --force to continue.

信息存在的关键部分：

The key piece of info being:

Error: Expected POST /api/login with different data
EXPECTED: {"username":"danny@ravenartmedia.com","password":"test"}
GOT:      username=danny%40ravenartmedia.com&password=test

为什么我的JSON被修改？

Why is my json being altered?

下面是从RestService，我已经在很多项目中使用没有问题POSTDATA功能：

Here is the postData function from the RestService, which I've used in many projects without issues:

var postData = function(url, params, data, successFunction,  errorFunction, config) {

        if(config && config.hasOwnProperty('showLoader')){
            $rootScope.showLoader = config.showLoader;
        }

        $http({
            method: 'POST',
            url: url,
            params: params,
            data: data,
            cache: false
        })
            .success(function(data, status, headers, config) {
                $rootScope.showLoader = false;
                if (successFunction === undefined) {
                    _defaultSuccessFunction(data, status, headers, config);
                }
                else {
                    successFunction(data, status, headers, config);
                }
            })
            .error(function (data, status, headers, config) {
                $rootScope.showLoader = false;
                if (status !== 0){
                    _processError(data, status, headers, config, errorMsg, errorFunction);
                }
            });
    };

编辑：
我能够钩这一切起来plnkr： http://plnkr.co/edit/lJTx0ldR9nEnlYbU5pJd 并测试通过....但完全相同的code给我，我指的是在这个职位的错误。我跑诉既角和角嘲弄的1.3.9。

I was able to hook all of this up in plnkr: http://plnkr.co/edit/lJTx0ldR9nEnlYbU5pJd and the test passes....but the exact same code gives me the error I'm referring to in this post. I'm running v. 1.3.9 of both Angular and Angular-Mocks.

推荐答案

您的辅助方法被定义为功能（URL，参数，可以数据，successFunction，errorFunction，配置） ，其中数据是第三个参数。
与此相比，您的调用：

Your helper method is defined as function(url, params, data, successFunction, errorFunction, config), where data is the third parameter. Compare this to your invocation:

RestService.postData('/api/login', null, null, {username: username, password: password}, _success, 'Invalid login, please try again', _error, {showLoader: true});

在这里，您将您的数据作为第四个参数。所以我觉得你要删除空值之一。不幸的是Javscript不警告错误数量的参数（只是忽略它们）。

Here you pass your data as the fourth parameter. So I think you want to remove one of the null values. Unfortunately Javscript does not warn about wrong amounts of parameters (just ignores them).

编辑：
同时您编辑你的问题，但您的 POSTDATA的调用很可能仍然不正确。
我有$ P $使用code ppared小提琴： http://jsfiddle.net/qwteyak3/ 1 /

Meanwhile you have edited your question, however your invocation of postData is probably still incorrect. I've prepared a fiddle using your code: http://jsfiddle.net/qwteyak3/1/

POSTDATA 的第一次调用获取的数据作为 PARAMS 参数。这告诉 $ HTTP 来发送的表单数据。第二次调用它通过在数据字段。 $ HTTP 检查数据，找到一个对象，然后将其作为一个JSON体。

The first invocation of postData gets the data as the params parameter. This tells $http to send it as form data. The second invocation passes it in the data field. $http checks data, finds an object and then sends it as a JSON-body.

在运行小提琴，Chrome的网络选项卡显示我 http://fiddle.jshell.net/echo/json?password=123&username=test 的请求对于第一次调用和 http://fiddle.jshell.net/echo/json （有身体数据）第二。

When running the fiddle, Chrome's network tab shows me a request to http://fiddle.jshell.net/echo/json?password=123&username=test for the first invocation and http://fiddle.jshell.net/echo/json (with data in body) for the second.

我希望这有助于。

这篇关于茉莉花测试失败，由于角度模拟做$ httpbackend呼叫接收不正确JSON格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

茉莉花测试失败，由于角度模拟做$ httpbackend呼叫接收不正确JSON格式 [英] Jasmine test fails making $httpbackend call due to angular mock receiving incorrect json format

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

茉莉花测试失败，由于角度模拟做$ httpbackend呼叫接收不正确JSON格式 [英] Jasmine test fails making $httpbackend call due to angular mock receiving incorrect json format

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭