@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +1,486 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Dialog from '@components/Dialog/Dialog.vue';
+
+// Mock console.log to avoid cluttering test output
+vi.spyOn(console, 'log').mockImplementation(() => {});
+
+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);
+      expect(console.log).toHaveBeenCalledWith('entereed 1');
+    });
+
+    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);
+      expect(console.log).toHaveBeenCalledWith('entereed 2');
+    });
+
+    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 console logging
+  describe('Console Logging', () => {
+    it('logs when opening dialog', () => {
+      const wrapper = mount(Dialog);
+      
+      wrapper.vm.openDialog();
+      
+      expect(console.log).toHaveBeenCalledWith('entereed 1');
+    });
+
+    it('logs when closing dialog', () => {
+      const wrapper = mount(Dialog);
+      
+      wrapper.vm.closeDialog();
+      
+      expect(console.log).toHaveBeenCalledWith('entereed 2');
+    });
+
+    it('logs multiple times for multiple operations', () => {
+      const wrapper = mount(Dialog);
+      
+      wrapper.vm.openDialog();
+      wrapper.vm.closeDialog();
+      wrapper.vm.openDialog();
+      
+      expect(console.log).toHaveBeenCalledTimes(3);
+      expect(console.log).toHaveBeenNthCalledWith(1, 'entereed 1');
+      expect(console.log).toHaveBeenNthCalledWith(2, 'entereed 2');
+      expect(console.log).toHaveBeenNthCalledWith(3, 'entereed 1');
+    });
+  });
+
+  // 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);
+      expect(console.log).toHaveBeenCalledTimes(5);
+    });
+  });
+
+  // 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);
+    });
+  });
+});