Question

我是单元测试的新手，无法在网上找到问题的解决方案，所以我认为社区可能会提供帮助。所以我有以下指令：

angular.module('app')
     .directive('cartSum', function () {
        return {
            template: '<span class="total-amount">{{ sum }}</span>',
            restrict: 'A',
            scope: {
                'cartItems'     : '=attrCartItems'
            },
            link: function postLink(scope) {

                scope.sum = 0;

                scope.$watch('cartItems',function(newVal){

                    if (newVal !== undefined) {

                        scope.sum = 0;

                        angular.forEach(newVal, function(item) {

                        scope.sum = (Number(scope.sum) + Number(item.priceUnformatted)).toFixed(2);

                    });
                }
            });
        }
    });

我想要测试的基本上是在$ watch上更新总和但不知道如何去做。任何帮助是极大的赞赏。

Answer 1

观察者在下一个摘要中被触发，它必须类似于

parentScope = $rootScope.$new();
parentScope.cartItems = [...];

var directive = $compile('<cart-sum attr-cart-items="cartItems">')(parentScope);
parentScope.$digest();
var directiveScope = directive.isolateScope();

expect(directiveScope.sum).toBe(...);

不是测试观察者，而是涉及整个指令及其绑定。如果指令足够大，这是一个问题。

测试的好处是它们表明潜在的设计缺陷。这个显示了为什么link是更好的DOM操作位置，而controller适合作为视图模型和处理范围。

当控制器和观察者可以单独测试时，不会发生这种情况：

scope = $rootScope.$new();
scope.cartItems = [...];
$controller('CartSumController', { $scope: scope });
scope.$digest();

expect(scope.sum).toBe(...);

即使使用在指令中定义的控制器，规范仍然很简单，唯一的变化是

$controller(cartSumDirective[0].controller, { $scope: scope });

如何在指令中对手表表达式进行单元测试

1 个答案: