Skip to content

Triggering mouseenter event on v-tooltip does not update the wrapper #1421

@begueradj

Description

@begueradj

Version

1.0.0-beta.31

Reproduction link

https://github.com/begueradj/test-vuetify-tooltip

Steps to reproduce

  1. In pages/index.vue:
<template>
  <component-with-tooltip tooltipText="Some information" />
</template>

<script>
import ComponentWithTooltip from '@/components/ComponentWithTooltip.vue'
export default {
  components: { ComponentWithTooltip }
}
</script>
  1. In components/ComponentWithTooltip.vue:
<template>
  <v-container>
    <v-row>
      <v-col cols="12">
        <v-tooltip bottom>
          <template v-slot:activator="{ on }">
            <v-icon v-on="on" color="grey">
              help
            </v-icon>
          </template>
          <span>
            {{ tooltipText }}
          </span>
        </v-tooltip>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'ComponentWithTooltip',
  props: {
    tooltipText: {
      type: String,
      default: ''
    }
  }
}
</script>
  1. In test/components/ComponentWithTooltip.vue:
it('2. User interface provides one help icon with tooltip text', async () => {
    const icons = wrapper.findAll('.v-icon')
    expect(icons.length).toBe(1) // Ok

    const helpIcon = icons.at(0)
    expect(helpIcon.text()).toEqual('help') // Ok

    helpIcon.trigger('mouseenter')
    await wrapper.vm.$nextTick()
    expect(wrapper.text()).toEqual('science') // why this fails ?
  })

What is expected?

I expect when I trigger the mouseenter event in my test, the wrapper should be updated to show a new text which is the one I defined for the prop.

What is actually happening?

WHen I trigger the mouse event, the wrapper keeps its former state, meaning its only available text is related to the help icon text.

Thank you,
Billal BEGUERADJ

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions