javascript - 单元测试传递 Promise 的 Angular 指令表达式属性

Question

我花了很多时间尝试对在 Controller 内生成/跟踪 promise 的指令进行单元测试，可以在此处查看如何完成此操作的示例:https://plnkr.co/edit/d8wMq0qlpiE4P25q5lhB

指令:

.directive('testDirective', function() {
    return {
        scope: {
            save: '&',
        },
        template: '<div><a href="#" ng-click="handleSave($event)">Click Here</a></div>',
        link: function(scope, element, attr, controllers) {

            scope.someData = {
                saving: false
            };

            scope.handleSave = function() {
                scope.someData.name = parseInt(Math.random() * 100);
                scope.someData.saving = true;
                scope.someData.error = false;
                scope.someData.id = null;
                return scope.save()(scope.someData)
                    .then(function(data) {
                        scope.someData = data;
                    })
                    .catch(function(err) {
                        scope.someData.error = true;
                    })
                    .finally(function() {
                        scope.someData.saving = false;
                    });
            };

        }
    };
})

Controller :

.controller('TestCtrl', function($scope, $q, $timeout) {
    $scope.saveCtrl = function(directiveData) {
        return $q(function(resolve, reject) {
            $timeout(function() {
                if (Math.round(Math.random())) {
                    directiveData.id = parseInt(Math.random() * 100);
                    resolve(directiveData);
                } else {
                    reject(new Error());
                }
            }, 2000)
        });
    }
});

模板:

<test-directive save="saveCtrl"></test-directive>

如示例中所示，它作为组件发挥作用，但测试无法完成，因为 .finally() 从未被调用。我尝试了很多变体来强制 $digest，但似乎没有什么可以完成 promise 。

Answer 1

我想我明白了。 https://plnkr.co/edit/CBvrZo4g9LjJC61VV0wp

```

$scope.saveCtrl = function(data) {
    return $q(function(resolve, reject) {
        setTimeout(function() {
            if (Math.round(Math.random())) {
                var id = parseInt(Math.random() * 100);
                resolve(id);
            } else {
                reject(new Error());
            }
            elementScope.$apply();
            $scope.$apply();
        }, 100);
   });
};

```

第 39 行有一个未定义的 var，并且 Angular 超时表现得很奇怪。这应该会导致指令保存的完整流程在超时情况下进行测试。但我认为可能不需要超时，因为您可以假设即时超时情况而不会损失任何测试。