angularjs - 测试删除 dom 元素的 Angular 指令不起作用(至少对我来说......)

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() 仍然等于“有些内容放在这里”)

但是，有趣的是(是吗？)，如果我只是更改 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