add test for mixins

src/assets/styles/tooltips.css

@@ -1,5 +1,4 @@
 .icon-tooltip {
-  visibility: hidden;
   background-color: rgba(80, 103, 132, 0.85);
   color: #fff;
   text-align: center;

src/mixins/tooltips.js

@@ -1,17 +1,16 @@
 export default {
   data () {
     return {
-      tooltipStyle: {}
+      tooltipStyle: {
+        visibility: 'hidden'
+      }
     }
   },
   methods: {
     showTooltip (e) {
-      this.tooltipStyle = {
+      this.$set(this.tooltipStyle, 'top', e.clientY - 12 + 'px')
-        visibility: 'visible',
+      this.$set(this.tooltipStyle, 'left', e.clientX + 12 + 'px')
-        position: 'fixed',
+      this.$set(this.tooltipStyle, 'visibility', 'visible')
-        top: e.clientY - 12 + 'px',
-        left: e.clientX + 12 + 'px'
-      }
     },
     hideTooltip () {
       this.$set(this.tooltipStyle, 'visibility', 'hidden')

tests/unit/tooltips.spec.js

@@ -0,0 +1,46 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import tooltipMixin from '@/mixins/tooltips.js'
+
+describe('tooltips.js', () => {
+  it('tooltip is hidden in initial', () => {
+    const component = {
+      template: '<div :style="tooltipStyle"></div>',
+      mixins: [tooltipMixin]
+    }
+    const wrapper = mount(component)
+    expect(wrapper.find('div').isVisible()).to.equal(false)
+  })
+
+  it('tooltipStyle is correct when showTooltip', async () => {
+    const component = {
+      template: '<div :style="tooltipStyle"></div>',
+      mixins: [tooltipMixin]
+    }
+    const wrapper = mount(component)
+    await wrapper.vm.showTooltip(new MouseEvent('mouseover', {
+      clientX: 10,
+      clientY: 20
+    }))
+    expect(wrapper.vm.tooltipStyle).to.eql({
+      visibility: 'visible',
+      top: '8px',
+      left: '22px'
+    })
+    expect(wrapper.find('div').isVisible()).to.equal(true)
+  })
+
+  it('tooltip is not visible after hideTooltip', async () => {
+    const component = {
+      template: '<div :style="tooltipStyle"></div>',
+      mixins: [tooltipMixin]
+    }
+    const wrapper = mount(component)
+    await wrapper.vm.showTooltip(new MouseEvent('mouseover', {
+      clientX: 10,
+      clientY: 20
+    }))
+    await wrapper.vm.hideTooltip()
+    expect(wrapper.find('div').isVisible()).to.equal(false)
+  })
+})