From cf91171f6ced9cec68947f70951a057ae90bd2ce Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 19 Mar 2024 16:18:11 +0100
Subject: [PATCH] chore(Tooltip): add tests

---
 test/components/Tooltip.spec.ts               | 19 ++++++--
 .../__snapshots__/Tooltip.spec.ts.snap        | 47 +++++++++++++++++++
 2 files changed, 63 insertions(+), 3 deletions(-)
 create mode 100644 test/components/__snapshots__/Tooltip.spec.ts.snap

diff --git a/test/components/Tooltip.spec.ts b/test/components/Tooltip.spec.ts
index f54a1ec2..4c723f50 100644
--- a/test/components/Tooltip.spec.ts
+++ b/test/components/Tooltip.spec.ts
@@ -1,12 +1,25 @@
+import { defineComponent } from 'vue'
 import { describe, it, expect } from 'vitest'
+import Provider from '../../src/runtime/components/Provider.vue'
 import Tooltip, { type TooltipProps } from '../../src/runtime/components/Tooltip.vue'
 import ComponentRender from '../component-render'
 
-describe.skip('Tooltip', () => {
+const TooltipWrapper = defineComponent({
+  components: {
+    UProvider: Provider,
+    UTooltip: Tooltip
+  },
+  inheritAttrs: false,
+  template: '<UProvider><UTooltip v-bind="$attrs"><slot /></UTooltip></UProvider>'
+})
+
+describe('Tooltip', () => {
   it.each([
-    ['with text', { props: { text: 'Tooltip', open: true }, slots: { default: () => 'Hover me' } }]
+    ['with text', { props: { text: 'Tooltip', open: true }, slots: { default: () => 'Hover me' } }],
+    ['with arrow', { props: { text: 'Tooltip', arrow: true, open: true }, slots: { default: () => 'Hover me' } }],
+    ['with shortcuts', { props: { text: 'Tooltip', shortcuts: ['⌘', 'K'], open: true }, slots: { default: () => 'Hover me' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: TooltipProps, slots?: any }) => {
-    const html = await ComponentRender(nameOrHtml, options, Tooltip)
+    const html = await ComponentRender(nameOrHtml, options, TooltipWrapper)
     expect(html).toMatchSnapshot()
   })
 })
diff --git a/test/components/__snapshots__/Tooltip.spec.ts.snap b/test/components/__snapshots__/Tooltip.spec.ts.snap
new file mode 100644
index 00000000..01a0cbd4
--- /dev/null
+++ b/test/components/__snapshots__/Tooltip.spec.ts.snap
@@ -0,0 +1,47 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Tooltip > renders with arrow correctly 1`] = `
+"Hover me
+<!--teleport start-->
+
+
+<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+  <div data-state="instant-open" style="--radix-tooltip-content-transform-origin: var(--radix-popper-transform-origin); --radix-tooltip-content-available-width: var(--radix-popper-available-width); --radix-tooltip-content-available-height: var(--radix-popper-available-height); --radix-tooltip-trigger-width: var(--radix-popper-anchor-width); --radix-tooltip-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="flex items-center gap-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs select-none will-change-[transform,opacity] data-[state=delayed-open]:data-[side=top]:animate-[tooltip-down_200ms_ease-out] data-[state=delayed-open]:data-[side=right]:animate-[tooltip-left_200ms_ease-out] data-[state=delayed-open]:data-[side=left]:animate-[tooltip-right_200ms_ease-out] data-[state=delayed-open]:data-[side=bottom]:animate-[tooltip-up_200ms_ease-out]" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span>
+    <!--v-if--><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none" class="fill-gray-200 dark:fill-gray-800" style="display: block;"><polygon points="0,0 30,0 15,10"></polygon></svg></span><span style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" id="radix-vue-tooltip-content-1" role="tooltip">Tooltipv-if</span>
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Tooltip > renders with shortcuts correctly 1`] = `
+"Hover me
+<!--teleport start-->
+
+
+<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+  <div data-state="instant-open" style="--radix-tooltip-content-transform-origin: var(--radix-popper-transform-origin); --radix-tooltip-content-available-width: var(--radix-popper-available-width); --radix-tooltip-content-available-height: var(--radix-popper-available-height); --radix-tooltip-trigger-width: var(--radix-popper-anchor-width); --radix-tooltip-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="flex items-center gap-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs select-none will-change-[transform,opacity] data-[state=delayed-open]:data-[side=top]:animate-[tooltip-down_200ms_ease-out] data-[state=delayed-open]:data-[side=right]:animate-[tooltip-left_200ms_ease-out] data-[state=delayed-open]:data-[side=left]:animate-[tooltip-right_200ms_ease-out] data-[state=delayed-open]:data-[side=bottom]:animate-[tooltip-up_200ms_ease-out]" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:mr-0.5"><kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-4 min-w-[16px] text-[10px]">⌘</kbd><kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-4 min-w-[16px] text-[10px]">K</kbd></span>
+    <!--v-if--><span style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" id="radix-vue-tooltip-content-2" role="tooltip">Tooltipv-if</span>
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Tooltip > renders with text correctly 1`] = `
+"Hover me
+<!--teleport start-->
+
+
+<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+  <div data-state="instant-open" style="--radix-tooltip-content-transform-origin: var(--radix-popper-transform-origin); --radix-tooltip-content-available-width: var(--radix-popper-available-width); --radix-tooltip-content-available-height: var(--radix-popper-available-height); --radix-tooltip-trigger-width: var(--radix-popper-anchor-width); --radix-tooltip-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="flex items-center gap-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs select-none will-change-[transform,opacity] data-[state=delayed-open]:data-[side=top]:animate-[tooltip-down_200ms_ease-out] data-[state=delayed-open]:data-[side=right]:animate-[tooltip-left_200ms_ease-out] data-[state=delayed-open]:data-[side=left]:animate-[tooltip-right_200ms_ease-out] data-[state=delayed-open]:data-[side=bottom]:animate-[tooltip-up_200ms_ease-out]" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span>
+    <!--v-if-->
+    <!--v-if--><span style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" id="radix-vue-tooltip-content-0" role="tooltip">Tooltipv-ifv-if</span>
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;