Skip to content

chore(vue3): explicitly unstub root component in test

Illya Klymov requested to merge xanf-road2vue3-form-group-spec-stub into main

What does this MR do?

@vue/test-utils v1 has a limitation - when you're using shallowMount it is not stubbing the component, located at root.

So if you have following template (for component named GlFormGroup):

<template>
  <b-form-group>
    <div><b-some-component></b-some-component></div>
  </b-form-group>
</template>

in @vue/test-utils@1 only <b-some-component> will be stubbed:

flowchart LR
GlFormGroup:::unstubbed-->BFormGroup:::unstubbed-->div-->BSomeComponent:::stubbed

classDef unstubbed fill:lightgreen,stroke:black,stroke-width:4px
classDef stubbed fill:pink,stroke:black,stroke-width: 4px, stroke-dasharray: 20 5

This is due to limitations of extremely hacky createElement patching.

In @vue/test-utils@2 situation is more consistent and expected:

flowchart LR
GlFormGroup:::unstubbed-->BFormGroup:::stubbed-->div-->BSomeComponent:::stubbed

classDef unstubbed fill:lightgreen,stroke:black,stroke-width:4px
classDef stubbed fill:pink,stroke:black,stroke-width: 4px, stroke-dasharray: 20 5

In order to support future migration to @vue/compat we're explicitly unstubbing BFormGroup in test

This is forward-compatible change to support @vue/compat #1981 (closed)

Does this MR meet the acceptance criteria?

Conformity

  • Code review guidelines.
  • GitLab UI's contributing guidlines.
  • If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
  • If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
  • If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • Added the ~"component:*" label(s) if applicable.
Edited by Illya Klymov

Merge request reports