Question

我有一个指令，在某些权限检查时删除了一个dom元素：

angular.module('app').directive('permissionNeeded', function ($location, $route, SecurityService) {
    return {
        restrict: 'A',
        link: function (scope, element, attributes) {

            var permissionNeeded = attributes.permissionNeeded;

            if (permissionNeeded) {
                if (SecurityService.checkAccess($route.current.name) !== permissionNeeded) {
                    element.remove();
                }
            }
        }
    };
});

指令工作正常，但我无法测试。在我期望断言之后，DOM操作（element.remove（））似乎被触发了：

 it('should not do anything cos permissions are correct', function () {
        $route.current = {
            name: 'import'
        }
        var element = compileTemplate('<span permission-needed="W">Some content goes here</span>');
        $rootScope.$digest();
        expect(element.html()).toBe(''); // FAIL!!! it's still equals to 'Some Content goes here'
    });

我已经看到了关于使用$ timeout函数延迟期望断言的一些答案，但无论我尝试过什么断言失败（element.html（）仍然等于'某些内容在这里'）< / p>

然而，有趣的是（是吗？）如果我只是改变dom而不是在我的指令中删除它，我的测试就可以了：

angular.module('app').directive('permissionNeeded', function ($location, $route, SecurityService) {
    return {
        restrict: 'A',
        link: function (scope, element, attributes) {

            var permissionNeeded = attributes.permissionNeeded;

            if (permissionNeeded) {
                if (SecurityService.checkAccess($route.current.name) !== permissionNeeded) {
                    element.html('');
                }
            }
        }
    };
});

使用上面的指令，测试正在传递。

当我在做断言时，我猜Dom渲染还没有结束，我是否正确？如果是这样，我可以做些什么来在DOM渲染后延迟我的断言？

谢谢。

马修。

Answer 1

当您执行element.remove()时，它只会从其父级remove bound events, etc中删除该元素。

最短的解决方案是将指令括在父元素中：

var element = compileTemplate('<div><span permission-needed="W">Some content goes here</span></div>');

然后

expect(element.html()).toBe('')

将会传递，因为element不再包含span

测试删除dom元素的angular指令不起作用（至少对我而言......）

1 个答案: