vm.emit on root component not working

[aldarund]

Version

1.0.0-beta.30

Reproduction link

https://github.com/aldarund/vue-test-utils-transition-bug

Steps to reproduce

add event to root element in vue component, try to trigger it via .vm.$emit .
Relevant test is at components/emit.test.js
If element isnt root - it works fine. If root - no emit happens

What is expected?

test is passed

What is actually happening?

test is faling

[dobromir-hristov]

I tried to investigate a bit.
The component does emit an event, tried with emitted().

This means the root's $listeners are not being called.

[dobromir-hristov]

OK let me try to clear up whats going on.
The DOM element of your tested, aka mounted component is another component's root component.
This means that when the find('#some-id') method starts searching, it matches all the Vue Components, that have that id for example. But in this case, they are both the tested and it's root, so it returns both.

<mounted-component>
  <child-component>

translates to
<div class="the-child-root" />

To make your tests pass, you can:

1. Find by component - this ensures the DOM has nothing to do with this
2. Find by ref - same as above
3. Use a hack wrapper.find('#selector').vm.$children[0].vm.$emit(), which will give you the first child, that you actually want.

@JessicaSachs @lmiller1990 @afontcu I've been at this, debugging for over 6 hours, until a found the issue, unfortunately I am not sure how to fix this. Technically the match logic is correct. The matched DOM element is the root of both components and the dedupe logic just leaves the first one.

Give me your thoughts on this, maybe I can try to explain better if it did not make sense.

[lmiller1990]

Great explanation - I get the problem. This is a really tricky one, no obvious solution comes to mind.

I guess the next step would be get a failing test case in the repo so we can all have a play around. Do you have a branch by any chance?

[dobromir-hristov]

I will push a branch.

[dobromir-hristov]

How it works

This happens inside the find.js file, where we first gatherAllVNodes and then we start matching.
The matching done inside match.js when based on DOM nodes will return all components, that have the same root.
Then the dedupe in find.js will reduce those to just one, as they are technically the same DOM node, but different components.

Proposed solution

I was going to first check if the matched component is the originally mounted and skip it in the matchers, but the bug will stay if you have the same scenario but on a more deeply nested level.

Then I was going to compare the matched node's component against its direct child's node. If they are identical, skip to the next one. But again, this is not correct, because in this case, it will return the first identified, or most deeply nested component, that holds the selector.

[dobromir-hristov]

https://github.com/vuejs/vue-test-utils/tree/fix/1385-fix-find-component-by-dom-selector