测试删除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(),它只从父项中删除元素,删除绑定事件等.

最简短的解决方案是将指令包含在父元素中:

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

然后

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

将通过,因为element不再包含span了