@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

package/tests/unit/components/Core/Dialog.spec.ts

@@ -1,449 +1,449 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { mount } from '@vue/test-utils';
-import Dialog from '@components/Dialog/Dialog.vue';
-
-describe('Dialog', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  // Test default behavior and rendering
-  describe('Default Behavior', () => {
-    it('renders with default state', () => {
-      const wrapper = mount(Dialog);
-      
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-      expect(wrapper.find('[data-testid="v-dialog"]').exists()).toBe(true);
-      expect(wrapper.vm.dialog).toBe(false);
-    });
-
-    it('applies correct CSS classes', () => {
-      const wrapper = mount(Dialog);
-      
-      expect(wrapper.find('.text-center').exists()).toBe(true);
-      expect(wrapper.find('.pa-4').exists()).toBe(true);
-    });
-
-    it('initializes dialog state as closed', () => {
-      const wrapper = mount(Dialog);
-      
-      expect(wrapper.vm.dialog).toBe(false);
-    });
-  });
-
-  // Test dialog state management
-  describe('Dialog State Management', () => {
-    it('opens dialog when openDialog is called', () => {
-      const wrapper = mount(Dialog);
-
-      expect(wrapper.vm.dialog).toBe(false);
-
-      wrapper.vm.openDialog();
-
-      expect(wrapper.vm.dialog).toBe(true);
-    });
-
-    it('closes dialog when closeDialog is called', () => {
-      const wrapper = mount(Dialog);
-
-      // First open the dialog
-      wrapper.vm.openDialog();
-      expect(wrapper.vm.dialog).toBe(true);
-
-      // Then close it
-      wrapper.vm.closeDialog();
-
-      expect(wrapper.vm.dialog).toBe(false);
-    });
-
-    it('can toggle dialog state multiple times', () => {
-      const wrapper = mount(Dialog);
-      
-      // Initial state
-      expect(wrapper.vm.dialog).toBe(false);
-      
-      // Open -> Close -> Open -> Close
-      wrapper.vm.openDialog();
-      expect(wrapper.vm.dialog).toBe(true);
-      
-      wrapper.vm.closeDialog();
-      expect(wrapper.vm.dialog).toBe(false);
-      
-      wrapper.vm.openDialog();
-      expect(wrapper.vm.dialog).toBe(true);
-      
-      wrapper.vm.closeDialog();
-      expect(wrapper.vm.dialog).toBe(false);
-    });
-  });
-
-  // Test v-model binding
-  describe('v-model Binding', () => {
-    it('binds dialog state to v-dialog model', async () => {
-      const wrapper = mount(Dialog);
-      
-      // Initially closed
-      expect(wrapper.vm.dialog).toBe(false);
-      
-      // Open dialog
-      wrapper.vm.openDialog();
-      await wrapper.vm.$nextTick();
-      
-      expect(wrapper.vm.dialog).toBe(true);
-      // The v-dialog component should receive the updated model value
-      expect(wrapper.find('[data-testid="v-dialog"]').exists()).toBe(true);
-    });
-
-    it('updates when dialog reactive ref changes', async () => {
-      const wrapper = mount(Dialog);
-      
-      // Directly modify the reactive ref
-      wrapper.vm.dialog = true;
-      await wrapper.vm.$nextTick();
-      
-      expect(wrapper.vm.dialog).toBe(true);
-      
-      wrapper.vm.dialog = false;
-      await wrapper.vm.$nextTick();
-      
-      expect(wrapper.vm.dialog).toBe(false);
-    });
-  });
-
-  // Test slots
-  describe('Slots', () => {
-    it('renders activator slot with openDialog prop', () => {
-      const wrapper = mount(Dialog, {
-        slots: {
-          activator: `
-            <template #activator="{ openDialog }">
-              <button @click="openDialog" data-testid="activator-button">
-                Open Dialog
-              </button>
-            </template>
-          `
-        }
-      });
-      
-      const activatorButton = wrapper.find('[data-testid="activator-button"]');
-      expect(activatorButton.exists()).toBe(true);
-      expect(activatorButton.text()).toBe('Open Dialog');
-    });
-
-    it('renders content slot with closeDialog prop', () => {
-      const wrapper = mount(Dialog, {
-        slots: {
-          content: `
-            <template #content="{ closeDialog }">
-              <div data-testid="dialog-content">
-                <h1>Dialog Content</h1>
-                <button @click="closeDialog" data-testid="close-button">
-                  Close
-                </button>
-              </div>
-            </template>
-          `
-        }
-      });
-      
-      const dialogContent = wrapper.find('[data-testid="dialog-content"]');
-      expect(dialogContent.exists()).toBe(true);
-      expect(dialogContent.text()).toContain('Dialog Content');
-      
-      const closeButton = wrapper.find('[data-testid="close-button"]');
-      expect(closeButton.exists()).toBe(true);
-    });
-
-    it('renders both activator and content slots together', () => {
-      const wrapper = mount(Dialog, {
-        slots: {
-          activator: `
-            <template #activator="{ openDialog }">
-              <button @click="openDialog" data-testid="activator">
-                Open
-              </button>
-            </template>
-          `,
-          content: `
-            <template #content="{ closeDialog }">
-              <div data-testid="content">
-                <span>Content</span>
-                <button @click="closeDialog" data-testid="close">
-                  Close
-                </button>
-              </div>
-            </template>
-          `
-        }
-      });
-      
-      expect(wrapper.find('[data-testid="activator"]').exists()).toBe(true);
-      expect(wrapper.find('[data-testid="content"]').exists()).toBe(true);
-      expect(wrapper.find('[data-testid="close"]').exists()).toBe(true);
-    });
-  });
-
-  // Test slot prop functionality
-  describe('Slot Prop Functionality', () => {
-    it('openDialog slot prop opens the dialog', async () => {
-      const wrapper = mount(Dialog, {
-        slots: {
-          activator: `
-            <template #activator="{ openDialog }">
-              <button @click="openDialog" data-testid="open-btn">
-                Open
-              </button>
-            </template>
-          `
-        }
-      });
-      
-      expect(wrapper.vm.dialog).toBe(false);
-      
-      const openButton = wrapper.find('[data-testid="open-btn"]');
-      await openButton.trigger('click');
-      
-      expect(wrapper.vm.dialog).toBe(true);
-    });
-
-    it('closeDialog slot prop closes the dialog', async () => {
-      const wrapper = mount(Dialog, {
-        slots: {
-          content: `
-            <template #content="{ closeDialog }">
-              <button @click="closeDialog" data-testid="close-btn">
-                Close
-              </button>
-            </template>
-          `
-        }
-      });
-      
-      // First open the dialog
-      wrapper.vm.openDialog();
-      expect(wrapper.vm.dialog).toBe(true);
-      
-      const closeButton = wrapper.find('[data-testid="close-btn"]');
-      await closeButton.trigger('click');
-      
-      expect(wrapper.vm.dialog).toBe(false);
-    });
-  });
-
-  // Test Vuetify integration
-  describe('Vuetify Integration', () => {
-    it('passes width="auto" to v-dialog', () => {
-      const wrapper = mount(Dialog);
-      
-      const vDialog = wrapper.find('[data-testid="v-dialog"]');
-      expect(vDialog.exists()).toBe(true);
-      // With stubbed components, we can't directly test Vuetify props
-      // but we can verify the component renders correctly
-    });
-
-    it('properly binds v-model to v-dialog', async () => {
-      const wrapper = mount(Dialog);
-      
-      // Initially false
-      expect(wrapper.vm.dialog).toBe(false);
-      
-      // Open dialog
-      wrapper.vm.openDialog();
-      await wrapper.vm.$nextTick();
-      
-      // Verify binding
-      expect(wrapper.vm.dialog).toBe(true);
-    });
-  });
-
-  // Test accessibility
-  describe('Accessibility', () => {
-    it('has data-testid for testing', () => {
-      const wrapper = mount(Dialog);
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-
-    it('provides accessible activator pattern', () => {
-      const wrapper = mount(Dialog, {
-        slots: {
-          activator: `
-            <template #activator="{ openDialog }">
-              <button @click="openDialog" aria-label="Open dialog">
-                Open
-              </button>
-            </template>
-          `
-        }
-      });
-      
-      const button = wrapper.find('button');
-      expect(button.exists()).toBe(true);
-      expect(button.attributes('aria-label')).toBe('Open dialog');
-    });
-
-    it('supports keyboard interactions through slots', () => {
-      const wrapper = mount(Dialog, {
-        slots: {
-          activator: `
-            <template #activator="{ openDialog }">
-              <button @click="openDialog" @keydown.enter="openDialog">
-                Open
-              </button>
-            </template>
-          `,
-          content: `
-            <template #content="{ closeDialog }">
-              <button @click="closeDialog" @keydown.escape="closeDialog">
-                Close
-              </button>
-            </template>
-          `
-        }
-      });
-      
-      expect(wrapper.find('button').exists()).toBe(true);
-    });
-  });
-
-
-  // Test edge cases
-  describe('Edge Cases', () => {
-    it('handles empty activator slot', () => {
-      const wrapper = mount(Dialog, {
-        slots: {
-          activator: ''
-        }
-      });
-      
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-      expect(wrapper.vm.dialog).toBe(false);
-    });
-
-    it('handles empty content slot', () => {
-      const wrapper = mount(Dialog, {
-        slots: {
-          content: ''
-        }
-      });
-      
-      expect(wrapper.find('[data-testid="v-dialog"]').exists()).toBe(true);
-      expect(wrapper.vm.dialog).toBe(false);
-    });
-
-    it('handles no slots provided', () => {
-      const wrapper = mount(Dialog);
-      
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-      expect(wrapper.find('[data-testid="v-dialog"]').exists()).toBe(true);
-      expect(wrapper.vm.dialog).toBe(false);
-    });
-
-    it('handles rapid open/close calls', () => {
-      const wrapper = mount(Dialog);
-
-      // Rapid calls
-      wrapper.vm.openDialog();
-      wrapper.vm.closeDialog();
-      wrapper.vm.openDialog();
-      wrapper.vm.closeDialog();
-      wrapper.vm.openDialog();
-
-      expect(wrapper.vm.dialog).toBe(true);
-    });
-  });
-
-  // Test complex slot scenarios
-  describe('Complex Slot Scenarios', () => {
-    it('supports complex activator with multiple elements', () => {
-      const wrapper = mount(Dialog, {
-        slots: {
-          activator: `
-            <template #activator="{ openDialog }">
-              <div class="activator-container">
-                <button @click="openDialog" data-testid="primary-button">
-                  Primary Open
-                </button>
-                <button @click="openDialog" data-testid="secondary-button">
-                  Secondary Open
-                </button>
-              </div>
-            </template>
-          `
-        }
-      });
-      
-      expect(wrapper.find('.activator-container').exists()).toBe(true);
-      expect(wrapper.find('[data-testid="primary-button"]').exists()).toBe(true);
-      expect(wrapper.find('[data-testid="secondary-button"]').exists()).toBe(true);
-    });
-
-    it('supports complex content with multiple interaction elements', () => {
-      const wrapper = mount(Dialog, {
-        slots: {
-          content: `
-            <template #content="{ closeDialog }">
-              <div class="dialog-content">
-                <header>
-                  <h1>Dialog Title</h1>
-                  <button @click="closeDialog" data-testid="header-close">×</button>
-                </header>
-                <main>
-                  <p>Dialog content goes here</p>
-                </main>
-                <footer>
-                  <button @click="closeDialog" data-testid="cancel-button">
-                    Cancel
-                  </button>
-                  <button @click="closeDialog" data-testid="confirm-button">
-                    Confirm
-                  </button>
-                </footer>
-              </div>
-            </template>
-          `
-        }
-      });
-      
-      expect(wrapper.find('.dialog-content').exists()).toBe(true);
-      expect(wrapper.find('[data-testid="header-close"]').exists()).toBe(true);
-      expect(wrapper.find('[data-testid="cancel-button"]').exists()).toBe(true);
-      expect(wrapper.find('[data-testid="confirm-button"]').exists()).toBe(true);
-    });
-
-    it('handles nested components in slots', () => {
-      const wrapper = mount(Dialog, {
-        slots: {
-          activator: `
-            <template #activator="{ openDialog }">
-              <div class="nested-component">
-                <span>Click to open:</span>
-                <button @click="openDialog">Open Dialog</button>
-              </div>
-            </template>
-          `,
-          content: `
-            <template #content="{ closeDialog }">
-              <div class="modal-wrapper">
-                <div class="modal-header">
-                  <h2>Nested Modal</h2>
-                </div>
-                <div class="modal-body">
-                  <p>This is a nested component structure</p>
-                </div>
-                <div class="modal-footer">
-                  <button @click="closeDialog">Close</button>
-                </div>
-              </div>
-            </template>
-          `
-        }
-      });
-      
-      expect(wrapper.find('.nested-component').exists()).toBe(true);
-      expect(wrapper.find('.modal-wrapper').exists()).toBe(true);
-      expect(wrapper.find('.modal-header').exists()).toBe(true);
-      expect(wrapper.find('.modal-body').exists()).toBe(true);
-      expect(wrapper.find('.modal-footer').exists()).toBe(true);
-    });
-  });
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Dialog from '@components/Dialog/Dialog.vue';
+
+describe('Dialog', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Test default behavior and rendering
+  describe('Default Behavior', () => {
+    it('renders with default state', () => {
+      const wrapper = mount(Dialog);
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="v-dialog"]').exists()).toBe(true);
+      expect(wrapper.vm.dialog).toBe(false);
+    });
+
+    it('applies correct CSS classes', () => {
+      const wrapper = mount(Dialog);
+      
+      expect(wrapper.find('.text-center').exists()).toBe(true);
+      expect(wrapper.find('.pa-4').exists()).toBe(true);
+    });
+
+    it('initializes dialog state as closed', () => {
+      const wrapper = mount(Dialog);
+      
+      expect(wrapper.vm.dialog).toBe(false);
+    });
+  });
+
+  // Test dialog state management
+  describe('Dialog State Management', () => {
+    it('opens dialog when openDialog is called', () => {
+      const wrapper = mount(Dialog);
+
+      expect(wrapper.vm.dialog).toBe(false);
+
+      wrapper.vm.openDialog();
+
+      expect(wrapper.vm.dialog).toBe(true);
+    });
+
+    it('closes dialog when closeDialog is called', () => {
+      const wrapper = mount(Dialog);
+
+      // First open the dialog
+      wrapper.vm.openDialog();
+      expect(wrapper.vm.dialog).toBe(true);
+
+      // Then close it
+      wrapper.vm.closeDialog();
+
+      expect(wrapper.vm.dialog).toBe(false);
+    });
+
+    it('can toggle dialog state multiple times', () => {
+      const wrapper = mount(Dialog);
+      
+      // Initial state
+      expect(wrapper.vm.dialog).toBe(false);
+      
+      // Open -> Close -> Open -> Close
+      wrapper.vm.openDialog();
+      expect(wrapper.vm.dialog).toBe(true);
+      
+      wrapper.vm.closeDialog();
+      expect(wrapper.vm.dialog).toBe(false);
+      
+      wrapper.vm.openDialog();
+      expect(wrapper.vm.dialog).toBe(true);
+      
+      wrapper.vm.closeDialog();
+      expect(wrapper.vm.dialog).toBe(false);
+    });
+  });
+
+  // Test v-model binding
+  describe('v-model Binding', () => {
+    it('binds dialog state to v-dialog model', async () => {
+      const wrapper = mount(Dialog);
+      
+      // Initially closed
+      expect(wrapper.vm.dialog).toBe(false);
+      
+      // Open dialog
+      wrapper.vm.openDialog();
+      await wrapper.vm.$nextTick();
+      
+      expect(wrapper.vm.dialog).toBe(true);
+      // The v-dialog component should receive the updated model value
+      expect(wrapper.find('[data-testid="v-dialog"]').exists()).toBe(true);
+    });
+
+    it('updates when dialog reactive ref changes', async () => {
+      const wrapper = mount(Dialog);
+      
+      // Directly modify the reactive ref
+      wrapper.vm.dialog = true;
+      await wrapper.vm.$nextTick();
+      
+      expect(wrapper.vm.dialog).toBe(true);
+      
+      wrapper.vm.dialog = false;
+      await wrapper.vm.$nextTick();
+      
+      expect(wrapper.vm.dialog).toBe(false);
+    });
+  });
+
+  // Test slots
+  describe('Slots', () => {
+    it('renders activator slot with openDialog prop', () => {
+      const wrapper = mount(Dialog, {
+        slots: {
+          activator: `
+            <template #activator="{ openDialog }">
+              <button @click="openDialog" data-testid="activator-button">
+                Open Dialog
+              </button>
+            </template>
+          `
+        }
+      });
+      
+      const activatorButton = wrapper.find('[data-testid="activator-button"]');
+      expect(activatorButton.exists()).toBe(true);
+      expect(activatorButton.text()).toBe('Open Dialog');
+    });
+
+    it('renders content slot with closeDialog prop', () => {
+      const wrapper = mount(Dialog, {
+        slots: {
+          content: `
+            <template #content="{ closeDialog }">
+              <div data-testid="dialog-content">
+                <h1>Dialog Content</h1>
+                <button @click="closeDialog" data-testid="close-button">
+                  Close
+                </button>
+              </div>
+            </template>
+          `
+        }
+      });
+      
+      const dialogContent = wrapper.find('[data-testid="dialog-content"]');
+      expect(dialogContent.exists()).toBe(true);
+      expect(dialogContent.text()).toContain('Dialog Content');
+      
+      const closeButton = wrapper.find('[data-testid="close-button"]');
+      expect(closeButton.exists()).toBe(true);
+    });
+
+    it('renders both activator and content slots together', () => {
+      const wrapper = mount(Dialog, {
+        slots: {
+          activator: `
+            <template #activator="{ openDialog }">
+              <button @click="openDialog" data-testid="activator">
+                Open
+              </button>
+            </template>
+          `,
+          content: `
+            <template #content="{ closeDialog }">
+              <div data-testid="content">
+                <span>Content</span>
+                <button @click="closeDialog" data-testid="close">
+                  Close
+                </button>
+              </div>
+            </template>
+          `
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="activator"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="content"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="close"]').exists()).toBe(true);
+    });
+  });
+
+  // Test slot prop functionality
+  describe('Slot Prop Functionality', () => {
+    it('openDialog slot prop opens the dialog', async () => {
+      const wrapper = mount(Dialog, {
+        slots: {
+          activator: `
+            <template #activator="{ openDialog }">
+              <button @click="openDialog" data-testid="open-btn">
+                Open
+              </button>
+            </template>
+          `
+        }
+      });
+      
+      expect(wrapper.vm.dialog).toBe(false);
+      
+      const openButton = wrapper.find('[data-testid="open-btn"]');
+      await openButton.trigger('click');
+      
+      expect(wrapper.vm.dialog).toBe(true);
+    });
+
+    it('closeDialog slot prop closes the dialog', async () => {
+      const wrapper = mount(Dialog, {
+        slots: {
+          content: `
+            <template #content="{ closeDialog }">
+              <button @click="closeDialog" data-testid="close-btn">
+                Close
+              </button>
+            </template>
+          `
+        }
+      });
+      
+      // First open the dialog
+      wrapper.vm.openDialog();
+      expect(wrapper.vm.dialog).toBe(true);
+      
+      const closeButton = wrapper.find('[data-testid="close-btn"]');
+      await closeButton.trigger('click');
+      
+      expect(wrapper.vm.dialog).toBe(false);
+    });
+  });
+
+  // Test Vuetify integration
+  describe('Vuetify Integration', () => {
+    it('passes width="auto" to v-dialog', () => {
+      const wrapper = mount(Dialog);
+      
+      const vDialog = wrapper.find('[data-testid="v-dialog"]');
+      expect(vDialog.exists()).toBe(true);
+      // With stubbed components, we can't directly test Vuetify props
+      // but we can verify the component renders correctly
+    });
+
+    it('properly binds v-model to v-dialog', async () => {
+      const wrapper = mount(Dialog);
+      
+      // Initially false
+      expect(wrapper.vm.dialog).toBe(false);
+      
+      // Open dialog
+      wrapper.vm.openDialog();
+      await wrapper.vm.$nextTick();
+      
+      // Verify binding
+      expect(wrapper.vm.dialog).toBe(true);
+    });
+  });
+
+  // Test accessibility
+  describe('Accessibility', () => {
+    it('has data-testid for testing', () => {
+      const wrapper = mount(Dialog);
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('provides accessible activator pattern', () => {
+      const wrapper = mount(Dialog, {
+        slots: {
+          activator: `
+            <template #activator="{ openDialog }">
+              <button @click="openDialog" aria-label="Open dialog">
+                Open
+              </button>
+            </template>
+          `
+        }
+      });
+      
+      const button = wrapper.find('button');
+      expect(button.exists()).toBe(true);
+      expect(button.attributes('aria-label')).toBe('Open dialog');
+    });
+
+    it('supports keyboard interactions through slots', () => {
+      const wrapper = mount(Dialog, {
+        slots: {
+          activator: `
+            <template #activator="{ openDialog }">
+              <button @click="openDialog" @keydown.enter="openDialog">
+                Open
+              </button>
+            </template>
+          `,
+          content: `
+            <template #content="{ closeDialog }">
+              <button @click="closeDialog" @keydown.escape="closeDialog">
+                Close
+              </button>
+            </template>
+          `
+        }
+      });
+      
+      expect(wrapper.find('button').exists()).toBe(true);
+    });
+  });
+
+
+  // Test edge cases
+  describe('Edge Cases', () => {
+    it('handles empty activator slot', () => {
+      const wrapper = mount(Dialog, {
+        slots: {
+          activator: ''
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.vm.dialog).toBe(false);
+    });
+
+    it('handles empty content slot', () => {
+      const wrapper = mount(Dialog, {
+        slots: {
+          content: ''
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="v-dialog"]').exists()).toBe(true);
+      expect(wrapper.vm.dialog).toBe(false);
+    });
+
+    it('handles no slots provided', () => {
+      const wrapper = mount(Dialog);
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="v-dialog"]').exists()).toBe(true);
+      expect(wrapper.vm.dialog).toBe(false);
+    });
+
+    it('handles rapid open/close calls', () => {
+      const wrapper = mount(Dialog);
+
+      // Rapid calls
+      wrapper.vm.openDialog();
+      wrapper.vm.closeDialog();
+      wrapper.vm.openDialog();
+      wrapper.vm.closeDialog();
+      wrapper.vm.openDialog();
+
+      expect(wrapper.vm.dialog).toBe(true);
+    });
+  });
+
+  // Test complex slot scenarios
+  describe('Complex Slot Scenarios', () => {
+    it('supports complex activator with multiple elements', () => {
+      const wrapper = mount(Dialog, {
+        slots: {
+          activator: `
+            <template #activator="{ openDialog }">
+              <div class="activator-container">
+                <button @click="openDialog" data-testid="primary-button">
+                  Primary Open
+                </button>
+                <button @click="openDialog" data-testid="secondary-button">
+                  Secondary Open
+                </button>
+              </div>
+            </template>
+          `
+        }
+      });
+      
+      expect(wrapper.find('.activator-container').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="primary-button"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="secondary-button"]').exists()).toBe(true);
+    });
+
+    it('supports complex content with multiple interaction elements', () => {
+      const wrapper = mount(Dialog, {
+        slots: {
+          content: `
+            <template #content="{ closeDialog }">
+              <div class="dialog-content">
+                <header>
+                  <h1>Dialog Title</h1>
+                  <button @click="closeDialog" data-testid="header-close">×</button>
+                </header>
+                <main>
+                  <p>Dialog content goes here</p>
+                </main>
+                <footer>
+                  <button @click="closeDialog" data-testid="cancel-button">
+                    Cancel
+                  </button>
+                  <button @click="closeDialog" data-testid="confirm-button">
+                    Confirm
+                  </button>
+                </footer>
+              </div>
+            </template>
+          `
+        }
+      });
+      
+      expect(wrapper.find('.dialog-content').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="header-close"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="cancel-button"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="confirm-button"]').exists()).toBe(true);
+    });
+
+    it('handles nested components in slots', () => {
+      const wrapper = mount(Dialog, {
+        slots: {
+          activator: `
+            <template #activator="{ openDialog }">
+              <div class="nested-component">
+                <span>Click to open:</span>
+                <button @click="openDialog">Open Dialog</button>
+              </div>
+            </template>
+          `,
+          content: `
+            <template #content="{ closeDialog }">
+              <div class="modal-wrapper">
+                <div class="modal-header">
+                  <h2>Nested Modal</h2>
+                </div>
+                <div class="modal-body">
+                  <p>This is a nested component structure</p>
+                </div>
+                <div class="modal-footer">
+                  <button @click="closeDialog">Close</button>
+                </div>
+              </div>
+            </template>
+          `
+        }
+      });
+      
+      expect(wrapper.find('.nested-component').exists()).toBe(true);
+      expect(wrapper.find('.modal-wrapper').exists()).toBe(true);
+      expect(wrapper.find('.modal-header').exists()).toBe(true);
+      expect(wrapper.find('.modal-body').exists()).toBe(true);
+      expect(wrapper.find('.modal-footer').exists()).toBe(true);
+    });
+  });
 });