Bug: unable to mock component directives

[xanf]

Consider following code, typical for VTU v1:

  const createComponent = (propsData = { items }) => {
    wrapper = mount(Breadcrumb, {
      directives: { GlTooltip: createMockDirective('gl-tooltip') },
    });

In VTU v1 v-gl-tooltip will be mocked with our configuration.

However we can't achieve that with VTU v2 ATM. Usage of global.directives will not work in same way - it will register directive at app level, and in Vue3 lookup (obviously) have priority at instance level.

After quick look I think we could fix that by messing with directives in transformVNodeArgs.

However, if we will look into global.directives inside tranformVNodeArgs this might create confusing behavior when global.directives behave not like app.directives being the only difference among global options.

So the question is do we want to treat this like a bug, and hook global.directives to mocking directive behavior or more like a missing feature and add new option somewhere in mount config for mocking?

WDYT @cexbrayat @lmiller1990?

[cexbrayat]

@xanf Interesting. If I understand correctly, I think I would expect to define a mock directive in stubs. I think directives and components should behave the same (registering a global component/directive) and not mess with stubs/mocks.

I would expect something like this to work:

wrapper = mount(Breadcrumb, {
  stubs: { GlTooltip: true }
});

Maybe we should implement that, if that's doable.

[xanf]

@cexbrayat I find differentiating between components and directives inside stubs confusing.

we could probably utilize the way '<script setup>works - everything named asvSomeName` is treat3d as directive stub?

[cexbrayat]

So you would like:

wrapper = mount(Breadcrumb, {
  stubs: { vGlTooltip: true }
});

If so, I agree 👍

[xanf]

OK, I'll draft a PR