From 82b80e47607c24dd0fdc9fb33321e81007c0a2be Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Thu, 28 Jan 2021 17:57:43 +0100
Subject: [PATCH] add test for mixins

---
 src/assets/styles/tooltips.css |  1 -
 src/mixins/tooltips.js         | 13 +++++-----
 tests/unit/tooltips.spec.js    | 46 ++++++++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 8 deletions(-)
 create mode 100644 tests/unit/tooltips.spec.js

diff --git a/src/assets/styles/tooltips.css b/src/assets/styles/tooltips.css
index a79bf90..8847140 100644
--- a/src/assets/styles/tooltips.css
+++ b/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;
diff --git a/src/mixins/tooltips.js b/src/mixins/tooltips.js
index b7baea2..4090e84 100644
--- a/src/mixins/tooltips.js
+++ b/src/mixins/tooltips.js
@@ -1,17 +1,16 @@
 export default {
   data () {
     return {
-      tooltipStyle: {}
+      tooltipStyle: {
+        visibility: 'hidden'
+      }
     }
   },
   methods: {
     showTooltip (e) {
-      this.tooltipStyle = {
-        visibility: 'visible',
-        position: 'fixed',
-        top: e.clientY - 12 + 'px',
-        left: e.clientX + 12 + 'px'
-      }
+      this.$set(this.tooltipStyle, 'top', e.clientY - 12 + 'px')
+      this.$set(this.tooltipStyle, 'left', e.clientX + 12 + 'px')
+      this.$set(this.tooltipStyle, 'visibility', 'visible')
     },
     hideTooltip () {
       this.$set(this.tooltipStyle, 'visibility', 'hidden')
diff --git a/tests/unit/tooltips.spec.js b/tests/unit/tooltips.spec.js
new file mode 100644
index 0000000..277f4c9
--- /dev/null
+++ b/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)
+  })
+})