Find / FindRef: wrapper function to find element based on ref about vue-test-utils HOT 15 CLOSED

I think we should just add support for refs at the moment ☺

from vue-test-utils.

@eddyerburgh To make it a little more concise, how do you feel about:

find({ ref: 'myRefName' })

from vue-test-utils.

Ah that's a good point.

If we add this then we need to:

• Update all methods that take a selector: is, contains, find, findAll
• Update the selectors page to include the refs object
• Link to the selectors page in the validation error

That's a fairly big change. Before we go further, I would like some input from others.

Do we want to extend the selector to include { refs: 'refName' }

from vue-test-utils.

I think this is a good idea, but I don't think we should add an extra method.

We could extend find and findAll, so that they could take a selector object.

find({
  selector: 'refs',
  value: 'value' 
})

Then we could extend it to other selectors, like props.

find({
  selector: 'props',
  value: 'value' 
})

from vue-test-utils.

I wonder how many alternate use cases we would have for a selector other than CSS, component name, or $ref. I'm not sure if component with prop: xwould ever be used as a selector, but I could be wrong.

from vue-test-utils.

But, if we do want to go with the selector/value find/findAll functions, I could start a PR. Initially it could look for $props / $refs. I guess the tough part would be matching $props because the values could be any

from vue-test-utils.

Yep that looks good 👍

from vue-test-utils.

Great, updating the PR to reflect this. Currently, the validation error messages for find/findAll display: wrapper.find/findAll() must be passed a valid CSS selector or a Vue constructor. As we update the API to accept this new options object, how should we refer to it?

If we're going to start with refs for now, we could use:

wrapper.find() must be passed a valid CSS selector, Vue constructor, or ref object

Or wrapper.find() must be passed a valid CSS selector, Vue constructor, or options object

My only concern with the latter is that it may be too vague.

from vue-test-utils.

So, one thing other thing to note: When selecting $refs, we rely on the $ref property to be available on the wrapper.vm, because we want to limit the results to this scope. This is one of the benefits of $refs. If we are using a wrapper on a non-Vue HTML Element, we should not allow selecting by $ref.

from vue-test-utils.

from vue-test-utils.

The PR for this change mentioned wanting some feedback from the community, so I thought I'd chime in.

This would be great to have, I liked the initial suggestion of having wrapper.ref, but I understand from a consistency standpoint why you'd want to extend the current finders. The current recommendation of using wrapper.find({refs: 'refName'}) feels comfortable to me.

from vue-test-utils.

Thanks for the feedback @skray.

I'm happy for this work to continue. @matt-oconnell do you have any blockers?

from vue-test-utils.

This is pretty much fully implemented in the corresponding PR. The blocker was that the Flow types were invalid (specifically Component,) so this PR fails the type check unless any is used

from vue-test-utils.

I think we'll have to use any until proper flowtypes are exported from Vue — vuejs/vue#5027

from vue-test-utils.

This can be closed, released in 1.0.0-beta.5

from vue-test-utils.