Update find and findAll to be more robust

[lmiller1990]

Second attempt at #651 . First attempt and related comments in #681 which I closed in favor of this.

Allows users to use find and findAll on a tag. Example:

wrapper = shallowMount(ComponentWithChild)

expect(wrapper.find("child-component").exists()).toBe(true)

@eddyerburgh thanks for previous feedback, updated using a TAG_SELECTOR and isTagSelector method.

@38elements not sure how you feel about this feature but I updated using some of your comments on the previous PR, mainly not using the external npm packages for html/svg elements.

[lmiller1990]

this exact tests appeared twice (duplicated by accident I guess) and also description was wrong so updated for this PR (it was a failing test so I noticed it).

[lmiller1990]

I don't agree the objections raised by @38elements , I think find({ name }) is more intuitive than asserting the actual markup (the tag). Based on my experience training some new devs in writing tests with vue-test-utils, people found it difficult to understand to use the name property (why do I need a name?)

The name property is basically used for nothing else outside of recursive components (uncommon) and error messages. A lot of the devs I work with had no idea why it's needed or used for, and actually weren't writing name until recently (since we need it to use vue-test-utils. Also, it is not necessary the same as the tag, which makes it even more confusing. I would much rather assert based on the markup I wrote.

I think we should match the querySelector web API - if I can do do find("div"), I should be able to do find("component-tag") as well.

Of course this is not essential, but I think it makes writing tests more compact (thus readable) and easier to learn.

Anyway, I think you made your strong objections clear. If other people share the opinion this is not a useful feature, please chime in, we should do what most people feel is a good idea.

@eddyerburgh expressed a positive opinion of this feature in the initial issue, #651 , so unless something has changed since then, I would like to continue working on this feature until it's able to be merged.

[eddyerburgh]

I didn't think there would be objections to this feature. Can you create an issue to discuss it.

My opinion is still to add it. I've seen people assume that tag selectors work for instances.

The concern I have is with pseudo selectors and tags:

wrapper.find('a custom-component') // will be unsuccessful. We should throw an error to let users know it's not possible

I can understand @38elements concern over the tag selector returning an instance, but we're implementing similar behavior with #687.

@lmiller1990 I also don't like using the name selector, are you aware that you can use the component options as a selector? If so is there a reason that your team use the name selector over the constructor?

import SomeComponent from './SomeComponent.vue'

wrapper.find(SomeComponent)

[lmiller1990]

Ok, let's discuss in the original issue, #651

added my thoughts there.

[38elements]

Can you create an issue to discuss it.

I think that it is better to create a new issue.
Since this feature is not essential, it is unnecessary to hurry.
Since it is difficult to remove existing feature, it is necessary to consider well.

we're implementing similar behavior with #687.

#687 is not the similar behavior.
CSS Selector does not return not existing element.
There is a problem which Wrapper.vm is empty even if the returned element has Vue instance.
#687 resolves this problem.
IMHO, #687 might be bug fix, not changing feature.

[lmiller1990]

@38elements ok, I made a new issue. BTW, I wasn't suggesting removing the existing function of, just extending it.

it is here: #695

[38elements]

@lmiller1990
"Since it is difficult to remove existing feature, it is necessary to consider well." is general thing.
I did not mention that this feature removes something in here.
#692 (comment)