.then() 单元测试中的 AngularJS $scope 变量更改答案

【问题标题】：AngularJS $scope variable change in .then() unit testing.then() 单元测试中的 AngularJS $scope 变量更改
【发布时间】：2016-04-16 00:55:55
【问题描述】：

我正在尝试在我的控制器中对一个函数进行单元测试，但我无法获得一个可测试的 $scope 变量。我在控制器的.then() 中设置变量，并希望进行单元测试以确保在遇到 .then 块时设置正确。

我的测试控制器代码：

function submit() {
    myService.submit().then(function(responseData){
        if(!responseData.errors) {
            $scope.complete = true;
            $scope.details = [
                {
                    value: $scope.formattedCurrentDate
                },
                {
                    value: "$" + $scope.premium.toFixed(2)
                },  
            ];
        } else {
            $scope.submitError = true;
        }
    });
}

此服务调用的去向无关紧要。它将返回带有action: 'submitted', 'response' : 'some response' 的JSON。 .then() 检查 responseData 上是否存在错误，如果没有，它应该设置一些详细信息。这些 $scope.details 是我在下面的单元测试中尝试测试的内容：

it('should handle submit details', function () {
    var result;
    var premium = 123.45;
    var formattedCurrentDate = "2016-01-04";
    var promise = myService.submit();
    mockResponse = {
        action: 'submitted',
        response: 'some response'
    };
    var mockDetails = [
        {
            value: formattedCurrentDate
        },
        {
            value: "$"+ premium.toFixed(2)
        }   
    ];

    //Resolve the promise and store results
    promise.then(function(res) {
        result = res;
    });
    //Apply scope changes
    $scope.$apply();
    expect(mockDetails).toEqual(submitController.details);
});

我收到 $scope.details 未定义的错误。我不确定如何让测试识别出控制器内这个 $scope 数据的变化。

在我的单元测试中的每个函数和其他函数之前：

function mockPromise() {
    return {
        then: function(callback) {
            if (callback) {
                callback(mockResponse);
            }
        }
    }
}

beforeEach(function() {
    mockResponse = {};
    module('myApp');

    module(function($provide) {
        $provide.service('myService', function() {
            this.submit = jasmine.createSpy('submit').and.callFake(mockPromise);
        });
    });

    inject(function($injector) {
        $q = $injector.get('$q');
        $controller = $injector.get('$controller');
        $scope = $injector.get('$rootScope');
        myService = $injector.get('myService');

        submitController = $controller('myController', { $scope: $scope, $q : $q, myService: myService});
    });
});

如何解决单元测试中的承诺，以便我可以 $scope.$digest() 并查看 $scope 变量的变化？

【问题讨论】：

同样的问题，让我抓狂。

标签： javascript angularjs unit-testing karma-jasmine angular-promise

【解决方案1】：

你应该看看如何用 jasmine 测试 Promise http://ng-learn.org/2014/08/Testing_Promises_with_Jasmine_Provide_Spy/

使用callFake 会做你试图模拟的事情

spyOn(myService, 'submit').and.callFake(function() {
  return {
    then: function(callback) { return callback(yourMock); }
  };
});

【讨论】：