在karma能不能测试hover触发的样式

Question

问题描述

在karma能不能测试hover触发的样式

问题出现的环境背景及自己尝试过哪些方法

在vue的环境下写东西，想到karma能创建浏览器环境，一般来说样式是能供mocha之类的拿到的。用mouseenter模拟hover，这样应该能拿到hover之后的样式。但是经过以下代码实现，发现并不能：

相关代码

test-hover.vue文件:

<template>
  <div class="test-hover">
    <div id="test3">测试字体hover后颜色</div>
  </div>
</template>

<script>
export default {
  name: 'TestHover'
}
</script>

<style lang="scss">
  .test-hover {
    #test3 {
      color: red;
      &:hover {
        color: blue;
      }
    }
  }
</style>

test-hover-spec.js文件:

import chai, { expect } from 'chai'
import { mount } from '@vue/test-utils'

import TestHover from '../../src/packages/test-hover'

const triggerMouseEnterEvent = function(elm) {
  const name = 'mouseenter'
  const evt = document.createEvent('MouseEvents');

  evt.initEvent('mouseenter');
  elm.dispatchEvent
    ? elm.dispatchEvent(evt)
    : elm.fireEvent('onmouseenter', evt);

  return elm;
};


describe('TestHover', () => {
  it('可拿到hover之后的样式', () => {
    const wrapper = mount(TestHover, {
      attachToDocument: true,
      propsData: {}
    })
    console.log(getComputedStyle(tt.element).color) // rgb(255, 0, 0)
    const test3 = document.getElementById('test3')
    const res = triggerMouseEnterEvent(test3, 'mouseenter')
    console.log(getComputedStyle(res).color) // 期望拿到rgb(0, 0, 255)
  })
})

你期待的结果是什么？

期望的结果是在mouseenter(模拟hover)之后，下一行log打印rgb(0, 0, 255)

Answer 1

可以给vue元素@mouseenter的时候增加.hover，@mouseleave的时候移除.hover，这其实是模拟css hover。把需要的hover样式通过.hover来挂载。

这是通过js和class挂载，来模拟实现的。坏处是经常要多写一个class类，好处是方便单元测试