fix(findComponent): return root instance if it matches

[xanf]

When we're using findComponent on recursive component, the result is pretty unexpected - if our selector matches root - it will return first nested instance. Considering #211 I've made sure that if root matches - it always takes priority

This resulted in failing test which literally expects other behavior. After some consideration and verifying this is behavior of vue-test-utils v1 CodeSandBox - I've dropped offending test intentionally (@dobromir-hristov will be cool if you could look and approve that)

[dobromir-hristov]

Wait, this is a breaking change right? If I want to find the child, not get the same component I am querying from, right?

So if we have a Child that is the root of Parent, if we search for Child, we would get the Parent back instead?

const parentWrapper = mount(Parent)
const childWrapper = parentWrapper.findComponent(Child) // what would `childWrapper` be? The Parent or the Child?

[xanf]

@dobromir-hristov could you please explain a bit. If Parent !== Child nothing changes. if Parent === Child - yes, you will receive wrapper around same component

[dobromir-hristov]

Ah ok, then why did that test fail? The child was different than the parent.

Also, how should someone fetch the child component if it's the same as the parent? Like in your recursion example? Just curious.

[xanf]

it('finds a component when root of mounted component', async () => {
    const wrapper = mount(compD)
    // make sure it finds the component, not its root
    expect(wrapper.findComponent('.c-as-root-on-d').vm).toHaveProperty(
      '$options.name',
      'ComponentC'
    )
  })

Here we were mounting component D, which render componentC as it's root:

const compD = defineComponent({
  name: 'ComponentD',
  template: '<comp-c class="c-as-root-on-d" />',
  components: { compC }
})

These two obviously share same element and both of them match .c-as-root-on-d selector. Previously we will return child component as match, now we return parent component (which also matches)

Regarding your question - how to reach child component - well, if there are no other ways - by calling findAllComponents for example.

To be honest, I'm not happy with current behavior - mostly because querySelector / querySelectorAll never include root, but:

• this is how VTU v1 works. I can leave with removing this behavior, but removal needs to be consistent (basically that means reverting fix: allow finding root component #214
• wrapper.find(Foo).vm === wrapper.vm is poor-man's replacement for removed .is() from VTU v2. This could be addressed by backporting .is (only for checking component type) in the same way I've done when reviving it for v1

[lmiller1990]

I agree we should match the V1 behavior - it looks like that's the goal of this PR. Seems ✅ to me - @dobromir-hristov do you have any other concerns/questions? I know you use VTU on some pretty big code bases, do you see any problems? Keep in mind the goal should be V1 compat where-ever possible (even if it doesn't really make sense).

[lmiller1990]

Seems fine to me - will wait on @dobromir-hristov to see if he has any further feedback.