1

我正在尝试创建一个行为类似于v-if. 基本上，如果条件为真，则元素应该存在，如果为假，则不应该存在。我还需要确保这些更改通过 JEST 测试。目的是创建一个权限插件（所以我不需要使用v-if="$isAllowed('edit', 'comments')"语法）

我看过这个和这个门票。该指令有效，因为它将元素替换为呈现的 DOM 中的注释，但是在运行测试时，该元素仍然存在。

指令：

Vue.directive('allow', (el, binding, vnode) => {
  if (!isAllowed(binding.value)) {
    const comment = document.createComment(' ');
    Object.defineProperty(comment, 'setAttribute', {
      value: () => undefined,
    });
    vnode.elm = comment;
    vnode.text = ' ';
    vnode.isComment = true;
    vnode.context = undefined;
    vnode.tag = undefined;
    vnode.data.directives = undefined;

    if (vnode.componentInstance) {
      vnode.componentInstance.$el = comment;
    }

    if (el.parentNode) {
      el.parentNode.replaceChild(comment, el);
    }
  }
});

模板：

...
<div v-allow="['edit', 'comments']" test-name="comment">
   <!-- some irrelevant code here -->
</div>
...

考试：

it('does not render element when user has no access to it', () => {
   expect(wrapper.find('[test-name="comment"]').exists()).toBeFalsy();
});

测试失败（说组件存在）。但是，当我打印呈现的 html ( console.log(wrapper.html());) 时，它会打印注释而不是组件。

4

0 回答 0