@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +1,519 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Modal from '@components/Modal/Modal.vue';
+
+describe('Modal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Test default behavior and rendering
+  describe('Default Behavior', () => {
+    it('renders with default state', () => {
+      const wrapper = mount(Modal);
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="v-dialog"]').exists()).toBe(true);
+      expect(wrapper.find('.wl-modal').exists()).toBe(true);
+      expect(wrapper.vm.dialog).toBe(false);
+    });
+
+    it('has data-testid for testing', () => {
+      const wrapper = mount(Modal);
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('applies wl-modal CSS class', () => {
+      const wrapper = mount(Modal);
+      expect(wrapper.find('.wl-modal').exists()).toBe(true);
+    });
+
+    it('initializes dialog state as closed', () => {
+      const wrapper = mount(Modal);
+      expect(wrapper.vm.dialog).toBe(false);
+    });
+  });
+
+  // Test teleport functionality
+  describe('Teleport', () => {
+    it('uses teleport to body', () => {
+      const wrapper = mount(Modal);
+      
+      // With stubs, we can verify the teleport component exists
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('renders content inside teleport', () => {
+      const wrapper = mount(Modal, {
+        slots: {
+          content: '<div data-testid="modal-content">Modal Content</div>'
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="modal-content"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="modal-content"]').text()).toBe('Modal Content');
+    });
+  });
+
+  // Test dialog state management
+  describe('Dialog State Management', () => {
+    it('opens dialog when openDialog is called', () => {
+      const wrapper = mount(Modal);
+      
+      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(Modal);
+      
+      // 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(Modal);
+      
+      // 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);
+    });
+
+    it('handles rapid open/close calls', () => {
+      const wrapper = mount(Modal);
+      
+      // Rapid calls
+      wrapper.vm.openDialog();
+      wrapper.vm.closeDialog();
+      wrapper.vm.openDialog();
+      wrapper.vm.closeDialog();
+      wrapper.vm.openDialog();
+      
+      expect(wrapper.vm.dialog).toBe(true);
+    });
+  });
+
+  // Test exposed methods
+  describe('Exposed Methods', () => {
+    it('exposes openDialog method', () => {
+      const wrapper = mount(Modal);
+      
+      expect(wrapper.vm.openDialog).toBeDefined();
+      expect(typeof wrapper.vm.openDialog).toBe('function');
+    });
+
+    it('exposes closeDialog method', () => {
+      const wrapper = mount(Modal);
+      
+      expect(wrapper.vm.closeDialog).toBeDefined();
+      expect(typeof wrapper.vm.closeDialog).toBe('function');
+    });
+
+    it('can call exposed methods externally', () => {
+      const wrapper = mount(Modal);
+      
+      // Access the component instance
+      const modalInstance = wrapper.vm;
+      
+      expect(modalInstance.dialog).toBe(false);
+      
+      modalInstance.openDialog();
+      expect(modalInstance.dialog).toBe(true);
+      
+      modalInstance.closeDialog();
+      expect(modalInstance.dialog).toBe(false);
+    });
+  });
+
+  // Test v-model binding
+  describe('v-model Binding', () => {
+    it('binds dialog state to v-dialog model', async () => {
+      const wrapper = mount(Modal);
+      
+      // 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(Modal);
+      
+      // 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 content slot
+  describe('Content Slot', () => {
+    it('renders content slot', () => {
+      const wrapper = mount(Modal, {
+        slots: {
+          content: '<div data-testid="slot-content">Slot Content</div>'
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="slot-content"]').text()).toBe('Slot Content');
+    });
+
+    it('passes closeDialog prop to content slot', () => {
+      const wrapper = mount(Modal, {
+        slots: {
+          content: `
+            <template #content="{ closeDialog }">
+              <div data-testid="slot-with-close">
+                <button @click="closeDialog" data-testid="close-button">
+                  Close Modal
+                </button>
+              </div>
+            </template>
+          `
+        }
+      });
+      
+      const closeButton = wrapper.find('[data-testid="close-button"]');
+      expect(closeButton.exists()).toBe(true);
+      expect(closeButton.text()).toBe('Close Modal');
+    });
+
+    it('closeDialog slot prop closes the modal', async () => {
+      const wrapper = mount(Modal, {
+        slots: {
+          content: `
+            <template #content="{ closeDialog }">
+              <button @click="closeDialog" data-testid="close-btn">
+                Close
+              </button>
+            </template>
+          `
+        }
+      });
+      
+      // First open the modal
+      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);
+    });
+
+    it('handles empty content slot', () => {
+      const wrapper = mount(Modal, {
+        slots: {
+          content: ''
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="v-dialog"]').exists()).toBe(true);
+    });
+
+    it('handles complex content in slot', () => {
+      const wrapper = mount(Modal, {
+        slots: {
+          content: `
+            <template #content="{ closeDialog }">
+              <div data-testid="complex-content">
+                <header>
+                  <h1>Modal Title</h1>
+                  <button @click="closeDialog">×</button>
+                </header>
+                <main>
+                  <p>Modal body content goes here</p>
+                  <form>
+                    <input type="text" placeholder="Name" />
+                    <input type="email" placeholder="Email" />
+                  </form>
+                </main>
+                <footer>
+                  <button @click="closeDialog">Cancel</button>
+                  <button type="submit">Save</button>
+                </footer>
+              </div>
+            </template>
+          `
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="complex-content"]').exists()).toBe(true);
+      expect(wrapper.find('header').exists()).toBe(true);
+      expect(wrapper.find('main').exists()).toBe(true);
+      expect(wrapper.find('footer').exists()).toBe(true);
+      expect(wrapper.find('form').exists()).toBe(true);
+      expect(wrapper.find('input[type="text"]').exists()).toBe(true);
+      expect(wrapper.find('input[type="email"]').exists()).toBe(true);
+    });
+  });
+
+  // Test Vuetify integration
+  describe('Vuetify Integration', () => {
+    it('passes width="auto" to v-dialog', () => {
+      const wrapper = mount(Modal);
+      
+      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(Modal);
+      
+      // 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);
+    });
+
+    it('applies wl-modal class to v-dialog', () => {
+      const wrapper = mount(Modal);
+      
+      expect(wrapper.find('.wl-modal').exists()).toBe(true);
+    });
+  });
+
+  // Test accessibility
+  describe('Accessibility', () => {
+    it('has data-testid for testing', () => {
+      const wrapper = mount(Modal);
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('supports accessible modal patterns', () => {
+      const wrapper = mount(Modal, {
+        slots: {
+          content: `
+            <template #content="{ closeDialog }">
+              <div role="dialog" aria-labelledby="modal-title" aria-describedby="modal-description">
+                <h1 id="modal-title">Accessible Modal</h1>
+                <p id="modal-description">This modal follows accessibility guidelines</p>
+                <button @click="closeDialog" aria-label="Close modal">Close</button>
+              </div>
+            </template>
+          `
+        }
+      });
+      
+      const dialogElement = wrapper.find('[role="dialog"]');
+      expect(dialogElement.exists()).toBe(true);
+      expect(dialogElement.attributes('aria-labelledby')).toBe('modal-title');
+      expect(dialogElement.attributes('aria-describedby')).toBe('modal-description');
+      
+      const closeButton = wrapper.find('button');
+      expect(closeButton.attributes('aria-label')).toBe('Close modal');
+    });
+
+    it('supports keyboard interactions through slots', () => {
+      const wrapper = mount(Modal, {
+        slots: {
+          content: `
+            <template #content="{ closeDialog }">
+              <div data-testid="keyboard-modal">
+                <button @keydown.escape="closeDialog">
+                  Content (Press Escape to close)
+                </button>
+                <button @click="closeDialog" @keydown.enter="closeDialog">
+                  Close (Enter to activate)
+                </button>
+              </div>
+            </template>
+          `
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="keyboard-modal"]').exists()).toBe(true);
+      expect(wrapper.findAll('button')).toHaveLength(2);
+    });
+  });
+
+  // Test teleport and body mounting
+  describe('Teleport to Body', () => {
+    it('uses teleport with body target', () => {
+      const wrapper = mount(Modal);
+      
+      // The teleport component should exist
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('renders modal content within teleport', () => {
+      const wrapper = mount(Modal, {
+        slots: {
+          content: '<div data-testid="teleported-content">Teleported to body</div>'
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="teleported-content"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="teleported-content"]').text()).toBe('Teleported to body');
+    });
+  });
+
+  // Test edge cases
+  describe('Edge Cases', () => {
+    it('handles no slots provided', () => {
+      const wrapper = mount(Modal);
+      
+      expect(wrapper.find('[data-testid="v-dialog"]').exists()).toBe(true);
+      expect(wrapper.vm.dialog).toBe(false);
+    });
+
+    it('handles direct dialog property manipulation', async () => {
+      const wrapper = mount(Modal);
+      
+      // Directly set dialog property
+      wrapper.vm.dialog = true;
+      await wrapper.vm.$nextTick();
+      
+      expect(wrapper.vm.dialog).toBe(true);
+      
+      // Use method to close
+      wrapper.vm.closeDialog();
+      expect(wrapper.vm.dialog).toBe(false);
+      
+      // Use method to open
+      wrapper.vm.openDialog();
+      expect(wrapper.vm.dialog).toBe(true);
+    });
+
+    it('maintains state consistency across operations', () => {
+      const wrapper = mount(Modal);
+      
+      // Sequence of operations
+      expect(wrapper.vm.dialog).toBe(false);
+      
+      wrapper.vm.openDialog();
+      expect(wrapper.vm.dialog).toBe(true);
+      
+      wrapper.vm.openDialog(); // Should remain true
+      expect(wrapper.vm.dialog).toBe(true);
+      
+      wrapper.vm.closeDialog();
+      expect(wrapper.vm.dialog).toBe(false);
+      
+      wrapper.vm.closeDialog(); // Should remain false
+      expect(wrapper.vm.dialog).toBe(false);
+    });
+  });
+
+  // Test integration scenarios
+  describe('Integration Scenarios', () => {
+    it('works as a controlled modal', async () => {
+      const wrapper = mount(Modal, {
+        slots: {
+          content: `
+            <template #content="{ closeDialog }">
+              <div data-testid="controlled-modal">
+                <h2>Controlled Modal</h2>
+                <p>This modal can be controlled externally</p>
+                <button @click="closeDialog" data-testid="internal-close">
+                  Internal Close
+                </button>
+              </div>
+            </template>
+          `
+        }
+      });
+      
+      // External control - open
+      wrapper.vm.openDialog();
+      expect(wrapper.vm.dialog).toBe(true);
+      
+      // Internal control - close
+      const internalCloseButton = wrapper.find('[data-testid="internal-close"]');
+      await internalCloseButton.trigger('click');
+      expect(wrapper.vm.dialog).toBe(false);
+      
+      // External control - open again
+      wrapper.vm.openDialog();
+      expect(wrapper.vm.dialog).toBe(true);
+      
+      // External control - close
+      wrapper.vm.closeDialog();
+      expect(wrapper.vm.dialog).toBe(false);
+    });
+
+    it('supports nested content and interactions', () => {
+      const wrapper = mount(Modal, {
+        slots: {
+          content: `
+            <template #content="{ closeDialog }">
+              <div data-testid="nested-modal">
+                <div class="modal-header">
+                  <h1>Nested Modal Structure</h1>
+                </div>
+                <div class="modal-body">
+                  <div class="section">
+                    <h2>Section 1</h2>
+                    <p>Content for section 1</p>
+                  </div>
+                  <div class="section">
+                    <h2>Section 2</h2>
+                    <p>Content for section 2</p>
+                    <div class="nested-component">
+                      <input type="text" placeholder="Nested input" />
+                      <button type="button">Nested button</button>
+                    </div>
+                  </div>
+                </div>
+                <div class="modal-footer">
+                  <button @click="closeDialog">Cancel</button>
+                  <button type="submit">Submit</button>
+                </div>
+              </div>
+            </template>
+          `
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="nested-modal"]').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);
+      expect(wrapper.findAll('.section')).toHaveLength(2);
+      expect(wrapper.find('.nested-component').exists()).toBe(true);
+      expect(wrapper.find('input[type="text"]').exists()).toBe(true);
+      expect(wrapper.findAll('button')).toHaveLength(3); // nested button + cancel + submit
+    });
+  });
+});