如何测试调用 AJAX 函数而不使用 jasmine 触发它的函数？

我已经签到了如何使用 Jasmine 验证 jQuery AJAX 事件？ https://stackoverflow.com/questions/4662641/how-do-i-verify-jquery-ajax-events-with-jasmine and 如何使用进行 AJAX 调用的函数来测试 Angular 控制器而不模拟 AJAX 调用？ https://stackoverflow.com/questions/26487051/how-to-test-an-angular-controller-with-a-function-that-makes-an-ajax-call-withou但由于某种原因，他们不一定会推出适合我的格式。

我的问题是我正在对一个函数进行单元测试，该函数调用触发 AJAX 请求的函数。我想在不触发 AJAX 请求（或停止该请求）的情况下测试外部函数，这样我就不会在数据服务器中收到一堆错误的数据。

这是我的外部函数（它调用包含 AJAX 的函数）：

vm.clickSubmit = function () {
    vm.loading = true; // starts the loading spinner
    vm.updateData(); // makes current data current in the data model
    vm.inputData = {    // build the data to be submitted
        ...
    };
    vm.submit(); // calls the AJAX function
};

这是我的 AJAX 函数：

vm.submit = function () {
    var d = $.ajax({
        type: "POST"
        , data: angular.toJson(vm.inputData)
        , url: "http://submit_the_data"
        , contentType: "application/json"
        , xhrFields: { withCredentials: true }
        , crossDomain: true
    })
    .success(function (resp) {
        DataService.ticketNumber = resp; // returns ticket# for the data model
    })
    .error(function (error) {
        DataService.ticketNumber = DataService.submitError;
    });
    d.then(function (d) {
        vm.loading = false; // stops the loading spinner
        DataService.tickets = []; // empty's the array to be filled anew
        $location.path('/submitted'); // success splash html
        $scope.$apply();
    });
};

我已经编写了所有将读取并验证中的值的测试inputData对象，但我不确定如何围绕调用clickSubmit()所以实际上没有任何内容提交到服务器。我在单元测试中已经达到这一点：

'use strict';

describe('Controller: HomeController', function () {
    beforeEach(module('tickets'));
    var controller, scope, $location, DataService;
    var tests = 0;
    beforeEach(inject(function ($rootScope, $controller, _$location_, _DataService_) {
        $location = _$location_;
        DataService = _DataService_;
        scope = $rootScope.$new();
        controller = $controller('HomeController', {
            $scope: scope
        });
    }));
    afterEach(function () {
        tests += 1;
    });
    describe('clickSubmit should verify data and submit new ticket', function () {
        beforeEach(function () {
            jasmine.Ajax.install();
            controller.loading = false;
                ... // inputData fields filled in with test data
        });
        afterEach(function () {
            jasmine.Ajax.uninstall();
        });
        it('should start the spinner when called', function () {
            controller.clickSubmit();
            expect(controller.loading).toBeTruthy();
        });
        // other it('') tests
    });
    it('should have tests', function () {
        expect(tests).toBeGreaterThan(0);
    });
});

那么在加载微调器上的期望之后应该做什么来取消对vm.submit()在实际代码中？

Thanks,

-C§

我建议模拟该调用而不是实际调用它。粒度由您决定，您可以存根 ajax 调用，也可以存根整个提交函数。

以下是如何存根提交函数：

spyOn(controller, 'submit').and.callFake(function() {
    DataService.ticketNumber = somevalue;
});

将该代码放置在实际调用控制器（caller.clickSubmit()）之前。

然后，您可以跟进对间谍的期望，例如：

expect(controller.submit).toHaveBeenCalled()

或与间谍相关的任何其他期望。

这是茉莉花文档：http://jasmine.github.io/2.0/introduction.html http://jasmine.github.io/2.0/introduction.html
往下看“间谍”区域。

如果你想模拟 ajax 调用，你将不得不模拟这样的承诺：

spyOn($, 'ajax').and.callFake(function() {
    var deferred = $q.defer();
    deferred.resolve(someResponse);
    return deferred.promise;
});

另外，为了让代码等待 Promise 解析，在进行提交调用后，您需要运行 $scope.$digest() 以便 Angular 可以处理 Promise 解析。然后，您可以检查您对取决于承诺的解决或拒绝的代码的期望。