Как проверить Vuetify VHover? - PullRequest
Новая
       20

Как проверить Vuetify VHover?

0 голосов
/ 21 января 2019

Я создал следующий компонент, который упаковывает Vuetify VHover, VTooltip и VBtn, чтобы упростить мое приложение. 

<template>
  <div>
    <v-hover v-if="tooltip">
      <v-tooltip
        slot-scope="{ hover }"
        bottom
      >
        <v-btn
          slot="activator"
          :theme="theme"
          :align="align"
          :justify="justify"
          :disabled="disabled"
          :depressed="type === 'depressed'"
          :block="type === 'block'"
          :flat="type === 'flat'"
          :fab="type === 'fab'"
          :icon="type === 'icon'"
          :outline="type === 'outline'"
          :raised="type === 'raised'"
          :round="type === 'round'"
          :color="hover ? colorHover : color"
          :class="{ 'text-capitalize': label, 'text-lowercase': icon }"
          :size="size"
          @click="onClick()"
        >
          <span v-if="label">{{ label }}</span>
          <v-icon v-else>{{ icon }}</v-icon>
        </v-btn>
        <span>{{ tooltip }}</span>
      </v-tooltip>
    </v-hover>
    <v-hover v-else>
      <v-btn
        slot-scope="{ hover }"
        :theme="theme"
        :align="align"
        :justify="justify"
        :disabled="disabled"
        :depressed="type === 'depressed'"
        :block="type === 'block'"
        :flat="type === 'flat'"
        :fab="type === 'fab'"
        :icon="type === 'icon'"
        :outline="type === 'outline'"
        :raised="type === 'raised'"
        :round="type === 'round'"
        :color="hover ? colorHover : color"
        :class="{ 'text-capitalize': label, 'text-lowercase': icon }"
        :size="size"
        @click="onClick()"
      >
        <span v-if="label">{{ label }}</span>
        <v-icon v-else>{{ icon }}</v-icon>
      </v-btn>
    </v-hover>
  </div>
</template>

<script>
import VueTypes from 'vue-types'
export default {
  name: 'v-btn-plus',
  props: {
    align: VueTypes.oneOf(['bottom', 'top']),
    justify: VueTypes.oneOf(['left', 'right']),
    color: VueTypes.string.def('primary'),
    colorHover: VueTypes.string.def('secondary'),
    disabled: VueTypes.bool.def(false),
    icon: VueTypes.string,
    label: VueTypes.string,
    position: VueTypes.oneOf(['left', 'right']),
    tooltip: VueTypes.string,
    size: VueTypes.oneOf(['small', 'medium', 'large']).def('small'),
    theme: VueTypes.oneOf(['light', 'dark']),
    type: VueTypes.oneOf(['block', 'depressed', 'fab', 'flat', 'icon', 'outline', 'raised', 'round']).def('raised')
  },
  methods: {
    onClick() {
      this.$emit('click')
    }
  },
  created: function() {
    // Workaround as prop validation on multiple props is not possible
    if (!this.icon && !this.label) {
      console.error('[Vue warn]: Missing required prop, specify at least one of the following: "label" or "icon"')
    }
  }
}
</script>

<style scoped>
</style>

Я хочу протестировать VHover и VTooltip и определил следующий файл спецификации. 

import { createLocalVue, mount } from '@vue/test-utils'
import Vuetify from 'vuetify'
import VBtnPlus from '@/components/common/VBtnPlus.vue'

describe('VStatsCard.vue', () => {
  let localVue = null

  beforeEach(() => {
    localVue = createLocalVue()
    localVue.use(Vuetify)
  })

  it('renders with default settings when only label is specified', async () => {
    const label = 'Very cool'
    const defaultColor = 'primary'
    const defaultType = 'raised'
    const defaultSize = 'small'
    const wrapper = mount(VBtnPlus, {
      localVue: localVue,
      propsData: { label }
    })
    expect(wrapper.text()).toMatch(label)
    expect(wrapper.html()).toContain(`${defaultType}="true"`)
    expect(wrapper.html()).toContain(`size="${defaultSize}"`)
    expect(wrapper.html()).toContain(`class="v-btn theme--light ${defaultColor} text-capitalize"`)
    expect(wrapper.html()).not.toContain(`v-icon"`)
    wrapper.find('button').trigger('mouseenter')
    await wrapper.vm.$nextTick()
    const btnHtml = wrapper.find('.v-btn').html()
    expect(btnHtml).toContain('secondary')
    expect(btnHtml).not.toContain('primary')
    const tooltipId = btnHtml.match(/(data-v-.+?)(?:=)/)[1]
    const tooltips = wrapper.findAll('.v-tooltip_content')
    let tooltipHtml = null
    for (let tooltip of tooltips) {
      const html = tooltip.html()
      console.log(html)
      if (html.indexOf(tooltipId) > -1) {
        tooltipHtml = html
        break
      }
    }
    expect(tooltipHtml).toContain('menuable_content_active')
  })
})

wrapper.find('button').trigger('mouseenter') не работает должным образом.Когда я смотрю HTML-код после nextTick, он такой же, как и раньше, trigger вызывался.Похоже, мне не хватает части HTML.Я ожидал увидеть следующий html. 

<div data-v-d3e326b8="">
   <span data-v-d3e326b8="" class="v-tooltip v-tooltip--bottom">
      <span>
         <button data-v-d3e326b8="" type="button" class="v-btn v-btn--depressed theme--light orange text-lowercase" size="small">
            <div class="v-btn__content"><i data-v-d3e326b8="" aria-hidden="true" class="v-icon mdi mdi-account theme--light"></i></div>
         </button>
      </span>
   </span>
</div>

Все, что я получаю, это <button> part.

Любые предложения, как заставить это работать?

1 Ответ

0 голосов
/ 22 января 2019

Явное инициирование mouseenter событий обычно не дает эффекта, вероятно, потому что браузеры игнорируют смоделированные / ненадежные события . Вместо этого вы можете установить v-hover s value на true для принудительного наведения состояния:

VBtnPlus.vue 

<template>
  <div>
    <v-hover :value="hovering">...</v-hover>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hovering: false,
    }
  },
  //...
}
</script>

VBtnPlus.spec.js 

it('...', async () => {
  wrapper.vm.hovering = true;
  // test for hover state here
})
...