Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Make wrapper.find() enable to find ref in v-for directive #1723

Merged
merged 1 commit into from Aug 23, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/baseWrapper.ts
Expand Up @@ -75,7 +75,12 @@ export default abstract class BaseWrapper<ElementType extends Node>
return createWrapperError('DOMWrapper')
}

const result = currentComponent.refs[selector.ref]
let result = currentComponent.refs[selector.ref]

// When using ref inside v-for, then refs contains array of component instances and nodes
if (Array.isArray(result)) {
result = result.length ? result[0] : undefined
}

if (result instanceof Node) {
return createDOMWrapper(result)
Expand Down
16 changes: 16 additions & 0 deletions tests/find.spec.ts
Expand Up @@ -41,6 +41,22 @@ describe('find', () => {
expect(wrapper.find({ ref: 'plain' }).element).toBeInstanceOf(Text)
})

it('works when ref is in v-for directive', () => {
const Component = defineComponent({
template: `
<div v-for="item in ['foo', 'bar']" :key="item">
<span :ref="\`span-\${item}\`" class="my-span" />
</div>
`
})

const wrapper = mount(Component)
expect(wrapper.find({ ref: 'span-foo' }).exists()).toBe(true)
expect(wrapper.find({ ref: 'span-foo' }).attributes('class')).toBe(
'my-span'
)
})

it('does not find ref located in the same component but not in current DOM wrapper', () => {
const Component = defineComponent({
render() {
Expand Down