From f48755f116c7e3d650b14fa3ff69459309df4b75 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 25 Apr 2024 11:53:15 +0200
Subject: [PATCH] test: improve

---
 test/components/Collapsible.spec.ts           | 10 +++-
 test/components/Drawer.spec.ts                | 26 +++++-----
 test/components/Modal.spec.ts                 | 36 +++++++-------
 test/components/Popover.spec.ts               |  8 +++-
 test/components/Slideover.spec.ts             | 40 ++++++++--------
 test/components/Tooltip.spec.ts               | 12 +++--
 .../__snapshots__/Collapsible.spec.ts.snap    | 32 ++++++++++++-
 .../__snapshots__/Popover.spec.ts.snap        | 47 +++++++++++++++++--
 .../__snapshots__/Tooltip.spec.ts.snap        | 10 ++--
 9 files changed, 158 insertions(+), 63 deletions(-)

diff --git a/test/components/Collapsible.spec.ts b/test/components/Collapsible.spec.ts
index 9b8d55cd..42436a76 100644
--- a/test/components/Collapsible.spec.ts
+++ b/test/components/Collapsible.spec.ts
@@ -3,8 +3,16 @@ import Collapsible, { type CollapsibleProps, type CollapsibleSlots } from '../..
 import ComponentRender from '../component-render'
 
 describe('Collapsible', () => {
+  const props = { open: true }
+
   it.each([
-    ['with open', { props: { open: true }, slots: { default: () => 'Click me', content: () => 'Collapsible content' } }]
+    // Props
+    ['with open', { props }],
+    ['with class', { props: { ...props, class: 'space-y-2' } }],
+    ['with ui', { props: { ...props, ui: { content: 'bg-gray-50 dark:bg-gray-800' } } }],
+    // Slots
+    ['with default slot', { props, slots: { default: () => 'Default slot' } }],
+    ['with content slot', { props, slots: { content: () => 'Content slot' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: CollapsibleProps, slots?: Partial<CollapsibleSlots> }) => {
     const html = await ComponentRender(nameOrHtml, options, Collapsible)
     expect(html).toMatchSnapshot()
diff --git a/test/components/Drawer.spec.ts b/test/components/Drawer.spec.ts
index 5b808fbd..9648e17b 100644
--- a/test/components/Drawer.spec.ts
+++ b/test/components/Drawer.spec.ts
@@ -3,21 +3,23 @@ import Drawer, { type DrawerProps, type DrawerSlots } from '../../src/runtime/co
 import ComponentRender from '../component-render'
 
 describe('Drawer', () => {
+  const props = { open: true, portal: false }
+
   it.each([
     // Props
-    ['with title', { props: { open: true, portal: false, title: 'Title' } }],
-    ['with description', { props: { open: true, portal: false, title: 'Title', description: 'Description' } }],
-    ['without overlay', { props: { open: true, portal: false, overlay: false, title: 'Title', description: 'Description' } }],
-    ['with class', { props: { open: true, portal: false, class: 'bg-gray-50 dark:bg-gray-800' } }],
-    ['with ui', { props: { open: true, portal: false, ui: { handle: 'w-20' } } }],
+    ['with title', { props: { ...props, title: 'Title' } }],
+    ['with description', { props: { ...props, title: 'Title', description: 'Description' } }],
+    ['without overlay', { props: { ...props, overlay: false, title: 'Title', description: 'Description' } }],
+    ['with class', { props: { ...props, class: 'bg-gray-50 dark:bg-gray-800' } }],
+    ['with ui', { props: { ...props, ui: { handle: 'w-20' } } }],
     // Slots
-    ['with default slot', { props: { open: true, portal: false }, slots: { default: () => 'Default slot' } }],
-    ['with content slot', { props: { open: true, portal: false }, slots: { content: () => 'Content slot' } }],
-    ['with header slot', { props: { open: true, portal: false }, slots: { header: () => 'Header slot' } }],
-    ['with title slot', { props: { open: true, portal: false }, slots: { title: () => 'Title slot' } }],
-    ['with description slot', { props: { open: true, portal: false }, slots: { description: () => 'Description slot' } }],
-    ['with body slot', { props: { open: true, portal: false }, slots: { body: () => 'Body slot' } }],
-    ['with footer slot', { props: { open: true, portal: false }, slots: { footer: () => 'Footer slot' } }]
+    ['with default slot', { props, slots: { default: () => 'Default slot' } }],
+    ['with content slot', { props, slots: { content: () => 'Content slot' } }],
+    ['with header slot', { props, slots: { header: () => 'Header slot' } }],
+    ['with title slot', { props, slots: { title: () => 'Title slot' } }],
+    ['with description slot', { props, slots: { description: () => 'Description slot' } }],
+    ['with body slot', { props, slots: { body: () => 'Body slot' } }],
+    ['with footer slot', { props, slots: { footer: () => 'Footer slot' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: DrawerProps, slots?: Partial<DrawerSlots> }) => {
     const html = await ComponentRender(nameOrHtml, options, Drawer)
     expect(html).toMatchSnapshot()
diff --git a/test/components/Modal.spec.ts b/test/components/Modal.spec.ts
index 58422379..96e4b14c 100644
--- a/test/components/Modal.spec.ts
+++ b/test/components/Modal.spec.ts
@@ -3,26 +3,28 @@ import Modal, { type ModalProps, type ModalSlots } from '../../src/runtime/compo
 import ComponentRender from '../component-render'
 
 describe('Modal', () => {
+  const props = { open: true, portal: false }
+
   it.each([
     // Props
-    ['with open', { props: { open: true, portal: false } }],
-    ['with title', { props: { open: true, portal: false, title: 'Title' } }],
-    ['with description', { props: { open: true, portal: false, title: 'Title', description: 'Description' } }],
-    ['with fullscreen', { props: { open: true, portal: false, fullscreen: true, title: 'Title', description: 'Description' } }],
-    ['without overlay', { props: { open: true, portal: false, overlay: false, title: 'Title', description: 'Description' } }],
-    ['without transition', { props: { open: true, portal: false, transition: false, title: 'Title', description: 'Description' } }],
-    ['without close', { props: { open: true, portal: false, close: null, title: 'Title', description: 'Description' } }],
-    ['with class', { props: { open: true, portal: false, class: 'bg-gray-50 dark:bg-gray-800' } }],
-    ['with ui', { props: { open: true, portal: false, ui: { close: 'right-2' } } }],
+    ['with open', { props }],
+    ['with title', { props: { ...props, title: 'Title' } }],
+    ['with description', { props: { ...props, title: 'Title', description: 'Description' } }],
+    ['with fullscreen', { props: { ...props, fullscreen: true, title: 'Title', description: 'Description' } }],
+    ['without overlay', { props: { ...props, overlay: false, title: 'Title', description: 'Description' } }],
+    ['without transition', { props: { ...props, transition: false, title: 'Title', description: 'Description' } }],
+    ['without close', { props: { ...props, close: null, title: 'Title', description: 'Description' } }],
+    ['with class', { props: { ...props, class: 'bg-gray-50 dark:bg-gray-800' } }],
+    ['with ui', { props: { ...props, ui: { close: 'right-2' } } }],
     // Slots
-    ['with default slot', { props: { open: true, portal: false }, slots: { default: () => 'Default slot' } }],
-    ['with content slot', { props: { open: true, portal: false }, slots: { content: () => 'Content slot' } }],
-    ['with header slot', { props: { open: true, portal: false }, slots: { header: () => 'Header slot' } }],
-    ['with title slot', { props: { open: true, portal: false }, slots: { title: () => 'Title slot' } }],
-    ['with description slot', { props: { open: true, portal: false }, slots: { description: () => 'Description slot' } }],
-    ['with close slot', { props: { open: true, portal: false }, slots: { close: () => 'Close slot' } }],
-    ['with body slot', { props: { open: true, portal: false }, slots: { body: () => 'Body slot' } }],
-    ['with footer slot', { props: { open: true, portal: false }, slots: { footer: () => 'Footer slot' } }]
+    ['with default slot', { props, slots: { default: () => 'Default slot' } }],
+    ['with content slot', { props, slots: { content: () => 'Content slot' } }],
+    ['with header slot', { props, slots: { header: () => 'Header slot' } }],
+    ['with title slot', { props, slots: { title: () => 'Title slot' } }],
+    ['with description slot', { props, slots: { description: () => 'Description slot' } }],
+    ['with close slot', { props, slots: { close: () => 'Close slot' } }],
+    ['with body slot', { props, slots: { body: () => 'Body slot' } }],
+    ['with footer slot', { props, slots: { footer: () => 'Footer slot' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: ModalProps, slots?: Partial<ModalSlots> }) => {
     const html = await ComponentRender(nameOrHtml, options, Modal)
     expect(html).toMatchSnapshot()
diff --git a/test/components/Popover.spec.ts b/test/components/Popover.spec.ts
index 5bf28177..b98e22e6 100644
--- a/test/components/Popover.spec.ts
+++ b/test/components/Popover.spec.ts
@@ -3,9 +3,15 @@ import Popover, { type PopoverProps, type PopoverSlots } from '../../src/runtime
 import ComponentRender from '../component-render'
 
 describe('Popover', () => {
+  const props = { open: true, portal: false }
+
   it.each([
     // Props
-    ['with open', { props: { open: true, portal: false, arrow: true }, slots: { default: () => 'Click me', content: () => 'Popover content' } }]
+    ['with open', { props }],
+    ['with arrow', { props: { ...props, arrow: true } }],
+    // Slots
+    ['with default slot', { props, slots: { default: () => 'Default slot' } }],
+    ['with content slot', { props, slots: { content: () => 'Content slot' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: PopoverProps, slots?: Partial<PopoverSlots> }) => {
     const html = await ComponentRender(nameOrHtml, options, Popover)
     expect(html).toMatchSnapshot()
diff --git a/test/components/Slideover.spec.ts b/test/components/Slideover.spec.ts
index 20f26ecd..0f9653f1 100644
--- a/test/components/Slideover.spec.ts
+++ b/test/components/Slideover.spec.ts
@@ -3,28 +3,30 @@ import Slideover, { type SlideoverProps, type SlideoverSlots } from '../../src/r
 import ComponentRender from '../component-render'
 
 describe('Slideover', () => {
+  const props = { open: true, portal: false }
+
   it.each([
     // Props
-    ['with open', { props: { open: true, portal: false } }],
-    ['with title', { props: { open: true, portal: false, title: 'Title' } }],
-    ['with description', { props: { open: true, portal: false, title: 'Title', description: 'Description' } }],
-    ['with left side', { props: { open: true, portal: false, side: 'left' as const, title: 'Title', description: 'Description' } }],
-    ['with top side', { props: { open: true, portal: false, side: 'top' as const, title: 'Title', description: 'Description' } }],
-    ['with bottom side', { props: { open: true, portal: false, side: 'bottom' as const, title: 'Title', description: 'Description' } }],
-    ['without overlay', { props: { open: true, portal: false, overlay: false, title: 'Title', description: 'Description' } }],
-    ['without transition', { props: { open: true, portal: false, transition: false, title: 'Title', description: 'Description' } }],
-    ['without close', { props: { open: true, portal: false, close: null, title: 'Title', description: 'Description' } }],
-    ['with class', { props: { open: true, portal: false, class: 'bg-gray-50 dark:bg-gray-800' } }],
-    ['with ui', { props: { open: true, portal: false, ui: { close: 'right-2' } } }],
+    ['with open', { props }],
+    ['with title', { props: { ...props, title: 'Title' } }],
+    ['with description', { props: { ...props, title: 'Title', description: 'Description' } }],
+    ['with left side', { props: { ...props, side: 'left' as const, title: 'Title', description: 'Description' } }],
+    ['with top side', { props: { ...props, side: 'top' as const, title: 'Title', description: 'Description' } }],
+    ['with bottom side', { props: { ...props, side: 'bottom' as const, title: 'Title', description: 'Description' } }],
+    ['without overlay', { props: { ...props, overlay: false, title: 'Title', description: 'Description' } }],
+    ['without transition', { props: { ...props, transition: false, title: 'Title', description: 'Description' } }],
+    ['without close', { props: { ...props, close: null, title: 'Title', description: 'Description' } }],
+    ['with class', { props: { ...props, class: 'bg-gray-50 dark:bg-gray-800' } }],
+    ['with ui', { props: { ...props, ui: { close: 'right-2' } } }],
     // Slots
-    ['with default slot', { props: { open: true, portal: false }, slots: { default: () => 'Default slot' } }],
-    ['with content slot', { props: { open: true, portal: false }, slots: { content: () => 'Content slot' } }],
-    ['with header slot', { props: { open: true, portal: false }, slots: { header: () => 'Header slot' } }],
-    ['with title slot', { props: { open: true, portal: false }, slots: { title: () => 'Title slot' } }],
-    ['with description slot', { props: { open: true, portal: false }, slots: { description: () => 'Description slot' } }],
-    ['with close slot', { props: { open: true, portal: false }, slots: { close: () => 'Close slot' } }],
-    ['with body slot', { props: { open: true, portal: false }, slots: { body: () => 'Body slot' } }],
-    ['with footer slot', { props: { open: true, portal: false }, slots: { footer: () => 'Footer slot' } }]
+    ['with default slot', { props, slots: { default: () => 'Default slot' } }],
+    ['with content slot', { props, slots: { content: () => 'Content slot' } }],
+    ['with header slot', { props, slots: { header: () => 'Header slot' } }],
+    ['with title slot', { props, slots: { title: () => 'Title slot' } }],
+    ['with description slot', { props, slots: { description: () => 'Description slot' } }],
+    ['with close slot', { props, slots: { close: () => 'Close slot' } }],
+    ['with body slot', { props, slots: { body: () => 'Body slot' } }],
+    ['with footer slot', { props, slots: { footer: () => 'Footer slot' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: SlideoverProps, slots?: Partial<SlideoverSlots> }) => {
     const html = await ComponentRender(nameOrHtml, options, Slideover)
     expect(html).toMatchSnapshot()
diff --git a/test/components/Tooltip.spec.ts b/test/components/Tooltip.spec.ts
index ee7fc440..614e75fc 100644
--- a/test/components/Tooltip.spec.ts
+++ b/test/components/Tooltip.spec.ts
@@ -14,14 +14,16 @@ const TooltipWrapper = defineComponent({
 })
 
 describe('Tooltip', () => {
+  const props = { text: 'Tooltip', open: true, portal: false }
+
   it.each([
     // Props
-    ['with text', { props: { text: 'Tooltip', open: true, portal: false } }],
-    ['with arrow', { props: { text: 'Tooltip', arrow: true, open: true, portal: false } }],
-    ['with kbds', { props: { text: 'Tooltip', kbds: ['meta', 'K'], open: true, portal: false } }],
+    ['with text', { props }],
+    ['with arrow', { props: { ...props, arrow: true } }],
+    ['with kbds', { props: { ...props, kbds: ['meta', 'K'] } }],
     // Slots
-    ['with default slot', { props: { text: 'Tooltip', kbds: ['meta', 'K'], open: true, portal: false }, slots: { default: () => 'Default slot' } }],
-    ['with content slot', { props: { open: true, portal: false }, slots: { content: () => 'Content slot' } }]
+    ['with default slot', { props, slots: { default: () => 'Default slot' } }],
+    ['with content slot', { props, slots: { content: () => 'Content slot' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: TooltipProps, slots?: Partial<TooltipSlots> }) => {
     const html = await ComponentRender(nameOrHtml, options, TooltipWrapper)
     expect(html).toMatchSnapshot()
diff --git a/test/components/__snapshots__/Collapsible.spec.ts.snap b/test/components/__snapshots__/Collapsible.spec.ts.snap
index e8ea0e79..839ddb9f 100644
--- a/test/components/__snapshots__/Collapsible.spec.ts.snap
+++ b/test/components/__snapshots__/Collapsible.spec.ts.snap
@@ -1,6 +1,34 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Collapsible > renders with open correctly 1`] = `
-"<div data-state="open">Click me<div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="radix-vue-collapsible-content-1" data-state="open" style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;">Collapsible content</div>
+exports[`Collapsible > renders with class correctly 1`] = `
+"<div data-state="open" class="space-y-2">
+  <!--v-if-->
+  <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="radix-vue-collapsible-content-2" data-state="open" style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
+</div>"
+`;
+
+exports[`Collapsible > renders with content slot correctly 1`] = `
+"<div data-state="open">
+  <!--v-if-->
+  <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="radix-vue-collapsible-content-5" data-state="open" style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;">Content slot</div>
+</div>"
+`;
+
+exports[`Collapsible > renders with default slot correctly 1`] = `
+"<div data-state="open">Default slot<div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="radix-vue-collapsible-content-4" data-state="open" style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
+</div>"
+`;
+
+exports[`Collapsible > renders with open correctly 1`] = `
+"<div data-state="open">
+  <!--v-if-->
+  <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="radix-vue-collapsible-content-1" data-state="open" style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
+</div>"
+`;
+
+exports[`Collapsible > renders with ui correctly 1`] = `
+"<div data-state="open">
+  <!--v-if-->
+  <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden bg-gray-50 dark:bg-gray-800" id="radix-vue-collapsible-content-3" data-state="open" style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/Popover.spec.ts.snap b/test/components/__snapshots__/Popover.spec.ts.snap
index d8fad435..1e1e20ad 100644
--- a/test/components/__snapshots__/Popover.spec.ts.snap
+++ b/test/components/__snapshots__/Popover.spec.ts.snap
@@ -1,12 +1,53 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Popover > renders with open correctly 1`] = `
-"Click me
+exports[`Popover > renders with arrow correctly 1`] = `
+"<!--v-if-->
 <!--teleport start-->
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div trapfocus="false" disableoutsidepointerevents="false" id="radix-vue-popover-content-1" data-state="open" role="dialog" style="--radix-popover-content-transform-origin: var(--radix-popper-transform-origin); --radix-popover-content-available-width: var(--radix-popper-available-width); --radix-popover-content-available-height: var(--radix-popper-available-height); --radix-popover-trigger-width: var(--radix-popper-anchor-width); --radix-popover-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" tabindex="-1" class="bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 data-[state=open]:animate-[slide-in-from-bottom-and-fade_200ms_ease-out] data-[state=closed]:animate-[slide-out-to-bottom-and-fade_200ms_ease-in]" data-side="bottom" data-align="center">Popover content<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></div>
+  <div trapfocus="false" disableoutsidepointerevents="false" id="radix-vue-popover-content-2" data-state="open" role="dialog" style="--radix-popover-content-transform-origin: var(--radix-popper-transform-origin); --radix-popover-content-available-width: var(--radix-popper-available-width); --radix-popover-content-available-height: var(--radix-popper-available-height); --radix-popover-trigger-width: var(--radix-popper-anchor-width); --radix-popover-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" tabindex="-1" class="bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 data-[state=open]:animate-[slide-in-from-bottom-and-fade_200ms_ease-out] data-[state=closed]:animate-[slide-out-to-bottom-and-fade_200ms_ease-in]" data-side="bottom" data-align="center"><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></div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Popover > renders with content slot correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+  <div trapfocus="false" disableoutsidepointerevents="false" id="radix-vue-popover-content-4" data-state="open" role="dialog" style="--radix-popover-content-transform-origin: var(--radix-popper-transform-origin); --radix-popover-content-available-width: var(--radix-popper-available-width); --radix-popover-content-available-height: var(--radix-popper-available-height); --radix-popover-trigger-width: var(--radix-popper-anchor-width); --radix-popover-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" tabindex="-1" class="bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 data-[state=open]:animate-[slide-in-from-bottom-and-fade_200ms_ease-out] data-[state=closed]:animate-[slide-out-to-bottom-and-fade_200ms_ease-in]" data-side="bottom" data-align="center">Content slot
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Popover > renders with default slot correctly 1`] = `
+"Default slot
+<!--teleport start-->
+
+
+<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+  <div trapfocus="false" disableoutsidepointerevents="false" id="radix-vue-popover-content-3" data-state="open" role="dialog" style="--radix-popover-content-transform-origin: var(--radix-popper-transform-origin); --radix-popover-content-available-width: var(--radix-popper-available-width); --radix-popover-content-available-height: var(--radix-popper-available-height); --radix-popover-trigger-width: var(--radix-popper-anchor-width); --radix-popover-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" tabindex="-1" class="bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 data-[state=open]:animate-[slide-in-from-bottom-and-fade_200ms_ease-out] data-[state=closed]:animate-[slide-out-to-bottom-and-fade_200ms_ease-in]" data-side="bottom" data-align="center"></div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Popover > renders with open correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+  <div trapfocus="false" disableoutsidepointerevents="false" id="radix-vue-popover-content-1" data-state="open" role="dialog" style="--radix-popover-content-transform-origin: var(--radix-popper-transform-origin); --radix-popover-content-available-width: var(--radix-popper-available-width); --radix-popover-content-available-height: var(--radix-popper-available-height); --radix-popover-trigger-width: var(--radix-popper-anchor-width); --radix-popover-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" tabindex="-1" class="bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 data-[state=open]:animate-[slide-in-from-bottom-and-fade_200ms_ease-out] data-[state=closed]:animate-[slide-out-to-bottom-and-fade_200ms_ease-in]" data-side="bottom" data-align="center"></div>
 </div>
 
 
diff --git a/test/components/__snapshots__/Tooltip.spec.ts.snap b/test/components/__snapshots__/Tooltip.spec.ts.snap
index a712bbb3..890fd067 100644
--- a/test/components/__snapshots__/Tooltip.spec.ts.snap
+++ b/test/components/__snapshots__/Tooltip.spec.ts.snap
@@ -19,7 +19,10 @@ exports[`Tooltip > renders with content slot correctly 1`] = `
 
 
 <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 data-[state=delayed-open]:animate-[slide-in-from-bottom-and-fade_200ms_ease-out]" data-side="bottom" data-align="center"><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-5" role="tooltip"></span></div>
+  <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 data-[state=delayed-open]:animate-[slide-in-from-bottom-and-fade_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-5" role="tooltip">Tooltipv-ifv-if</span>
+  </div>
 </div>
 
 
@@ -32,8 +35,9 @@ exports[`Tooltip > renders with default slot correctly 1`] = `
 
 
 <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 data-[state=delayed-open]:animate-[slide-in-from-bottom-and-fade_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 px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-4 min-w-[16px] text-[10px]">⌃</kbd><kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 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-4" role="tooltip">Tooltipv-if</span>
+  <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 data-[state=delayed-open]:animate-[slide-in-from-bottom-and-fade_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-4" role="tooltip">Tooltipv-ifv-if</span>
   </div>
 </div>