From 4fbce1a5ecd78c4bb960f19f18edb6f0613cab0c Mon Sep 17 00:00:00 2001
From: Florian Le Heurte <florian.leheurte@lecollectionist.com>
Date: Tue, 13 Jul 2021 12:05:45 +0800
Subject: [PATCH] chore(LcTooltip): [ch7090] add unit tests and add storie and
 typscript type

---
 src/components/LcTooltip/LcTooltip.stories.ts |   6 +
 src/components/LcTooltip/LcTooltip.vue        |  15 ++-
 .../LcTooltip/__tests__/LcTooltip.spec.ts     | 114 ++++++++++++++++++
 .../__snapshots__/LcTooltip.spec.ts.snap      |  15 +++
 4 files changed, 145 insertions(+), 5 deletions(-)
 create mode 100644 src/components/LcTooltip/__tests__/LcTooltip.spec.ts
 create mode 100644 src/components/LcTooltip/__tests__/__snapshots__/LcTooltip.spec.ts.snap

diff --git a/src/components/LcTooltip/LcTooltip.stories.ts b/src/components/LcTooltip/LcTooltip.stories.ts
index ecf2d19..531cb05 100644
--- a/src/components/LcTooltip/LcTooltip.stories.ts
+++ b/src/components/LcTooltip/LcTooltip.stories.ts
@@ -64,3 +64,9 @@ Small.args = {
   ...Base.args,
   size: 'small',
 }
+
+export const Clickable = Template.bind({}) as any
+Clickable.args = {
+  ...White.args,
+  clickable: true,
+}
diff --git a/src/components/LcTooltip/LcTooltip.vue b/src/components/LcTooltip/LcTooltip.vue
index 8c42ccd..73747be 100644
--- a/src/components/LcTooltip/LcTooltip.vue
+++ b/src/components/LcTooltip/LcTooltip.vue
@@ -11,11 +11,16 @@
   >
     <slot name="element" />
 
-    <div v-if="show && $slots['text']" :class="tooltipClass">
+    <div
+      v-if="show && $slots['text']"
+      :class="tooltipClass"
+      data-testid="tooltip"
+    >
       <slot name="text" />
       <lc-icon
         v-if="clickable"
         class="lc_tooltip-icon"
+        data-testid="tooltip__close"
         name="exit"
         size="xs"
         @click.stop="toggleTooltip"
@@ -49,7 +54,7 @@ export default defineComponent({
     position: {
       type: String,
       default: 'top',
-      validator: (value) => {
+      validator: (value: string) => {
         return vPosition.includes(value)
       },
     },
@@ -64,14 +69,14 @@ export default defineComponent({
     size: {
       type: String,
       default: 'medium',
-      validator: (value) => {
+      validator: (value: string) => {
         return vSize.includes(value)
       },
     },
     variant: {
       type: String,
       default: 'grey',
-      validator: (value) => {
+      validator: (value: string) => {
         return vVariant.includes(value)
       },
     },
@@ -82,7 +87,7 @@ export default defineComponent({
     }
   },
   computed: {
-    tooltipClass() {
+    tooltipClass(): string | string[] {
       const baseClass = 'lc_tooltip-content'
 
       if (!this.hoveringTooltip) return `text-center ${baseClass}`
diff --git a/src/components/LcTooltip/__tests__/LcTooltip.spec.ts b/src/components/LcTooltip/__tests__/LcTooltip.spec.ts
new file mode 100644
index 0000000..5782c1c
--- /dev/null
+++ b/src/components/LcTooltip/__tests__/LcTooltip.spec.ts
@@ -0,0 +1,114 @@
+import { mount } from '@vue/test-utils'
+import LcTooltip from '../LcTooltip'
+
+let wrapper: any
+
+afterEach(() => {
+  wrapper?.unmount()
+})
+
+describe('LcTooltip', () => {
+  it('is a Vue instance', () => {
+    wrapper = mount(LcTooltip)
+    expect(wrapper.vm).toBeTruthy()
+  })
+
+  describe('Props format', () => {
+    it('should have a clickable props (default: false)', () => {
+      const { clickable } = LcTooltip.props
+
+      expect(clickable.default).toBe(false)
+      expect(clickable.required).toBeFalsy()
+      expect(clickable.type).toBe(Boolean)
+    })
+
+    it('should have a position props (defaul: top)', () => {
+      const { position } = LcTooltip.props
+      const validPosition = ['top', 'left', 'right', 'bottom']
+
+      expect(position.default).toBe('top')
+      expect(position.type).toBe(String)
+      validPosition.forEach(pos => expect(position.validator(pos)).toBeTruthy())
+      expect(position.validator('upper')).toBeFalsy()
+    })
+  })
+
+  describe('Slots', () => {
+    it('should render an element which should have the tooltip', () => {
+      const buttonEl = '<button>Click to see tooltip!</button>'
+
+      wrapper = mount(LcTooltip, {
+        slots: { element: buttonEl },
+      })
+
+      expect(wrapper.html()).toContain(buttonEl)
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should display some text in the tooltip', () => {
+      const buttonEl = '<button>Click to see tooltip!</button>'
+      const tooltipMessage = 'Hi! I\'m the tooltip message.'
+
+      wrapper = mount(LcTooltip, {
+        props: { show: true },
+        slots: {
+          element: buttonEl,
+          text: tooltipMessage,
+        },
+      })
+
+      expect(wrapper.html()).toContain(tooltipMessage)
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+  })
+
+  describe('Position', () => {
+    it('should be at the top if position=top', () => {
+      wrapper = mount(LcTooltip, {
+        props: { show: true },
+        slots: { text: 'Hello' },
+      })
+
+      const tooltip = wrapper.get('[data-testid="tooltip"]')
+
+      expect(tooltip.classes('lc_tooltip-content--top')).toBeTruthy()
+    })
+
+    it('should be on the left if position=left', () => {
+      wrapper = mount(LcTooltip, {
+        props: { position: 'left', show: true },
+        slots: { text: 'Hello' },
+      })
+
+      const tooltip = wrapper.get('[data-testid="tooltip"]')
+
+      expect(tooltip.classes('lc_tooltip-content--left')).toBeTruthy()
+    })
+  })
+
+  describe('If tooltip is clickable', () => {
+    beforeEach(() => {
+      wrapper = mount(LcTooltip, {
+        props: { show: true, clickable: true },
+        slots: { text: 'Tooltip text' },
+      })
+    })
+
+    it('should appear on click', async() => {
+      expect(wrapper.classes('lc_tooltip--appear')).toBeFalsy()
+
+      await wrapper.trigger('click')
+      expect(wrapper.classes('lc_tooltip--appear')).toBeTruthy()
+    })
+
+    it('should hide when close button is clicked', async() => {
+      await wrapper.trigger('click')
+      expect(wrapper.classes('lc_tooltip--appear')).toBeTruthy()
+
+      const closeIcon = wrapper.get('[data-testid="tooltip__close"]')
+
+      await closeIcon.trigger('click')
+      expect(wrapper.classes('lc_tooltip--appear')).toBeFalsy()
+    })
+  })
+})
diff --git a/src/components/LcTooltip/__tests__/__snapshots__/LcTooltip.spec.ts.snap b/src/components/LcTooltip/__tests__/__snapshots__/LcTooltip.spec.ts.snap
new file mode 100644
index 0000000..547912d
--- /dev/null
+++ b/src/components/LcTooltip/__tests__/__snapshots__/LcTooltip.spec.ts.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LcTooltip Slots should display some text in the tooltip 1`] = `
+"<div class=\\"relative lc_tooltip lc_tooltip--hover\\"><button>Click to see tooltip!</button>
+  <div class=\\"lc_tooltip-content lc_tooltip-content--top lc_tooltip-content--medium lc_tooltip-content--grey lc_tooltip-content--absolute\\" data-testid=\\"tooltip\\">Hi! I'm the tooltip message.
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
+exports[`LcTooltip Slots should render an element which should have the tooltip 1`] = `
+"<div class=\\"relative lc_tooltip lc_tooltip--hover\\"><button>Click to see tooltip!</button>
+  <!--v-if-->
+</div>"
+`;