在 Jasmine 单元测试中处理 AJAX Post 请求回调

Question

我已经尝试设置此测试很长时间了...我真的不明白这里有什么问题。

我的 Angular 应用程序：

<body ng-app="testApp">
<div class="container" droppable>
    <div class="row"><navi></navi></div>
    <div class="row">
            <div class="col-xs-8">
                <preview></preview>
                <editor></editor>
            </div>
            <div class="col-xs-4">
                <iframe src="" pull-down></iframe>
            </div>
    </div>
</div>

控制器：

testApp.controller('previewController', ['$scope', '$http', function($scope, $http) {
$scope.tmp = "test";
console.log("init controller");
$.ajax({
    url: "http://localhost/angularjs_testapp/request.php",
    type: "POST",
    success: function(data){
        console.log("server data:");
        console.log(data);
        $scope.data = data;},
    error: function(data){
        console.log("error occured");
        console.log(data);
    }
});
}]);

至少测试：

describe('previewController', function() {
beforeEach(module('testApp'));
var scope, createController;

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

    createController = $controller('previewController', {
            '$scope': scope
        });
}));

it('should be "test":', function(done) {
    console.log(scope);
    expect(scope.tmp).toBe("test");  //working
    expect(scope.data).toBe("hallo"); //not working
});
});

如果我只是在网站上调用它，服务器 return 的 ajax return 值是正确的。但是在测试环境之外它不起作用。好像他没有与服务器通信。我也做出了承诺，也尝试用 $http.post() 而不是 ajax 来解决它，但它仍然无法正常工作。我究竟做错了什么？业力引擎可能会导致服务器通信失败吗？

Answer 1

所以您运行遇到的问题是您试图在 $promise 解决之前查看其结果。这意味着您必须更改一些内容，包括使用 $http。由于这是一个单元测试而不是集成测试，您希望使用 $httpBackend 来阻止您的通信，因此您实际上不需要后端服务器。

因此您的更改需要：

//in your controller
testApp.controller('previewController', ['$scope', '$http', function($scope, $http) {
     $scope.tmp = "test";
     $http.post("http://localhost/angularjs_testapp/request.php",{})
.success function(data){
    console.log("server data:");
    console.log(data);
    $scope.data = data;}).
error(function(data){
    console.log("error occured");
    console.log(data);
    })
}]);   

//in your jasmine tests
describe('previewController', function() {
beforeEach(module('testApp'));
var scope, createController, httpBackend;

beforeEach(inject(function ($rootScope, $controller, $httpBackend) {
    scope = $rootScope.$new();
    httpBackend = $httpBackend;
    httpBackend.expectPOST("http://localhost/angularjs_testapp/request.php",{}).respond(200,{...Your Response...});
    createController = $controller('previewController', {
        '$scope': scope
    });

}));
afterEach(function () {
         httpBackend.verifyNoOutstandingExpectation();
         httpBackend.verifyNoOutstandingRequest();
});
it('should be "test":', function(done) {
    console.log(scope);
    expect(scope.tmp).toBe("test");  //working
    httpBackend.flush();
    expect(scope.data).toBe("hallo"); //not working
});
});

在 Jasmine 单元测试中处理 AJAX Post 请求回调

Handling AJAX Post Request Callbacks in Jasmine Unit Test

javascript

ajax

angularjs

karma-jasmine