@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +1,566 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import TextArea from '@components/TextArea/TextArea.vue';
+
+describe('TextArea', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Test default behavior and rendering
+  describe('Default Behavior', () => {
+    it('renders with default props', () => {
+      const wrapper = mount(TextArea);
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.text-area').exists()).toBe(true);
+      expect(wrapper.vm.modelValue).toBe('');
+      expect(wrapper.vm.clearIcon).toBe('text-area');
+      expect(wrapper.vm.label).toBe('Label');
+      expect(wrapper.vm.prependIcon).toBeNull();
+      expect(wrapper.vm.prependInnerIcon).toBeNull();
+      expect(wrapper.vm.appendIcon).toBeNull();
+      expect(wrapper.vm.appendInnerIcon).toBeNull();
+    });
+
+    it('has data-testid for testing', () => {
+      const wrapper = mount(TextArea);
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('applies text-area CSS class', () => {
+      const wrapper = mount(TextArea);
+      expect(wrapper.find('.text-area').exists()).toBe(true);
+    });
+  });
+
+  // Test v-model functionality
+  describe('v-model', () => {
+    it('displays initial modelValue', () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          modelValue: 'Initial text content'
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe('Initial text content');
+    });
+
+    it('emits update:modelValue when internalValue changes', async () => {
+      const wrapper = mount(TextArea);
+      
+      wrapper.vm.internalValue = 'New text content';
+      
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['New text content']);
+    });
+
+    it('handles string modelValue', () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          modelValue: 'String value'
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe('String value');
+    });
+
+    it('handles number modelValue', () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          modelValue: 12345
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe(12345);
+    });
+
+    it('handles empty string modelValue', () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          modelValue: ''
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe('');
+    });
+
+    it('handles zero as modelValue', () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          modelValue: 0
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe(0);
+    });
+
+    it('updates when modelValue prop changes', async () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          modelValue: 'Initial'
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe('Initial');
+      
+      await wrapper.setProps({ modelValue: 'Updated' });
+      
+      expect(wrapper.vm.internalValue).toBe('Updated');
+    });
+  });
+
+  // Test computed property
+  describe('Computed Property', () => {
+    it('internalValue getter returns modelValue', () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          modelValue: 'Test content'
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe('Test content');
+    });
+
+    it('internalValue setter emits update:modelValue', () => {
+      const wrapper = mount(TextArea);
+      
+      wrapper.vm.internalValue = 'Updated content';
+      
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['Updated content']);
+    });
+
+    it('handles multiple value updates', () => {
+      const wrapper = mount(TextArea);
+      
+      wrapper.vm.internalValue = 'First update';
+      wrapper.vm.internalValue = 'Second update';
+      wrapper.vm.internalValue = 'Third update';
+      
+      expect(wrapper.emitted('update:modelValue')).toHaveLength(3);
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['First update']);
+      expect(wrapper.emitted('update:modelValue')?.[1]).toEqual(['Second update']);
+      expect(wrapper.emitted('update:modelValue')?.[2]).toEqual(['Third update']);
+    });
+  });
+
+  // Test label prop
+  describe('Label', () => {
+    it('uses default label', () => {
+      const wrapper = mount(TextArea);
+      expect(wrapper.vm.label).toBe('Label');
+    });
+
+    it('uses custom label', () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          label: 'Custom TextArea Label'
+        }
+      });
+      
+      expect(wrapper.vm.label).toBe('Custom TextArea Label');
+    });
+
+    it('handles empty label', () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          label: ''
+        }
+      });
+      
+      expect(wrapper.vm.label).toBe('');
+    });
+  });
+
+  // Test clear icon
+  describe('Clear Icon', () => {
+    it('uses default clear icon', () => {
+      const wrapper = mount(TextArea);
+      expect(wrapper.vm.clearIcon).toBe('text-area');
+    });
+
+    it('uses custom clear icon', () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          clearIcon: 'mdi-close'
+        }
+      });
+      
+      expect(wrapper.vm.clearIcon).toBe('mdi-close');
+    });
+
+    it('handles empty clear icon', () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          clearIcon: ''
+        }
+      });
+      
+      expect(wrapper.vm.clearIcon).toBe('');
+    });
+  });
+
+  // Test icons
+  describe('Icons', () => {
+    it('handles prepend icon', () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          prependIcon: 'mdi-home'
+        }
+      });
+      
+      expect(wrapper.vm.prependIcon).toBe('mdi-home');
+    });
+
+    it('handles prepend inner icon', () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          prependInnerIcon: 'mdi-search'
+        }
+      });
+      
+      expect(wrapper.vm.prependInnerIcon).toBe('mdi-search');
+    });
+
+    it('handles append icon', () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          appendIcon: 'mdi-arrow-right'
+        }
+      });
+      
+      expect(wrapper.vm.appendIcon).toBe('mdi-arrow-right');
+    });
+
+    it('handles append inner icon', () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          appendInnerIcon: 'mdi-eye'
+        }
+      });
+      
+      expect(wrapper.vm.appendInnerIcon).toBe('mdi-eye');
+    });
+
+    it('handles all icons together', () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          prependIcon: 'mdi-home',
+          prependInnerIcon: 'mdi-search',
+          appendIcon: 'mdi-arrow-right',
+          appendInnerIcon: 'mdi-eye'
+        }
+      });
+      
+      expect(wrapper.vm.prependIcon).toBe('mdi-home');
+      expect(wrapper.vm.prependInnerIcon).toBe('mdi-search');
+      expect(wrapper.vm.appendIcon).toBe('mdi-arrow-right');
+      expect(wrapper.vm.appendInnerIcon).toBe('mdi-eye');
+    });
+
+    it('defaults icons to null', () => {
+      const wrapper = mount(TextArea);
+      
+      expect(wrapper.vm.prependIcon).toBeNull();
+      expect(wrapper.vm.prependInnerIcon).toBeNull();
+      expect(wrapper.vm.appendIcon).toBeNull();
+      expect(wrapper.vm.appendInnerIcon).toBeNull();
+    });
+  });
+
+  // Test click events
+  describe('Click Events', () => {
+    it('emits click:append event', async () => {
+      const wrapper = mount(TextArea);
+      const mockEvent = { target: {} };
+      
+      await wrapper.vm.$emit('click:append', mockEvent);
+      
+      expect(wrapper.emitted('click:append')).toBeTruthy();
+      expect(wrapper.emitted('click:append')?.[0]).toEqual([mockEvent]);
+    });
+
+    it('emits click:appendInner event', async () => {
+      const wrapper = mount(TextArea);
+      const mockEvent = { target: {} };
+      
+      await wrapper.vm.$emit('click:appendInner', mockEvent);
+      
+      expect(wrapper.emitted('click:appendInner')).toBeTruthy();
+      expect(wrapper.emitted('click:appendInner')?.[0]).toEqual([mockEvent]);
+    });
+
+    it('emits click:clear event', async () => {
+      const wrapper = mount(TextArea);
+      const mockEvent = { target: {} };
+      
+      await wrapper.vm.$emit('click:clear', mockEvent);
+      
+      expect(wrapper.emitted('click:clear')).toBeTruthy();
+      expect(wrapper.emitted('click:clear')?.[0]).toEqual([mockEvent]);
+    });
+
+    it('emits click:control event', async () => {
+      const wrapper = mount(TextArea);
+      const mockEvent = { target: {} };
+      
+      await wrapper.vm.$emit('click:control', mockEvent);
+      
+      expect(wrapper.emitted('click:control')).toBeTruthy();
+      expect(wrapper.emitted('click:control')?.[0]).toEqual([mockEvent]);
+    });
+
+    it('emits click:prepend event', async () => {
+      const wrapper = mount(TextArea);
+      const mockEvent = { target: {} };
+      
+      await wrapper.vm.$emit('click:prepend', mockEvent);
+      
+      expect(wrapper.emitted('click:prepend')).toBeTruthy();
+      expect(wrapper.emitted('click:prepend')?.[0]).toEqual([mockEvent]);
+    });
+
+    it('emits click:prependInner event', async () => {
+      const wrapper = mount(TextArea);
+      const mockEvent = { target: {} };
+      
+      await wrapper.vm.$emit('click:prependInner', mockEvent);
+      
+      expect(wrapper.emitted('click:prependInner')).toBeTruthy();
+      expect(wrapper.emitted('click:prependInner')?.[0]).toEqual([mockEvent]);
+    });
+
+    it('handles multiple click events', async () => {
+      const wrapper = mount(TextArea);
+      const mockEvent1 = { target: { id: 'first' } };
+      const mockEvent2 = { target: { id: 'second' } };
+      
+      await wrapper.vm.$emit('click:append', mockEvent1);
+      await wrapper.vm.$emit('click:append', mockEvent2);
+      
+      expect(wrapper.emitted('click:append')).toHaveLength(2);
+      expect(wrapper.emitted('click:append')?.[0]).toEqual([mockEvent1]);
+      expect(wrapper.emitted('click:append')?.[1]).toEqual([mockEvent2]);
+    });
+  });
+
+  // Test Vuetify integration and styling
+  describe('Vuetify Integration', () => {
+    it('applies Vuetify props correctly', () => {
+      const wrapper = mount(TextArea);
+      
+      // Verify the component renders with Vuetify stub
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      
+      // Since we're using stubs, we can't directly test Vuetify props
+      // but we can verify the component renders correctly
+    });
+
+    it('uses clearable by default', () => {
+      const wrapper = mount(TextArea);
+      
+      // The component template includes clearable attribute
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('applies custom styling properties', () => {
+      const wrapper = mount(TextArea);
+      
+      expect(wrapper.find('.text-area').exists()).toBe(true);
+    });
+  });
+
+  // Test CSS styling
+  describe('CSS Styling', () => {
+    it('applies text-area class', () => {
+      const wrapper = mount(TextArea);
+      expect(wrapper.find('.text-area').exists()).toBe(true);
+    });
+
+    it('includes CSS variables for Vuetify customization', () => {
+      const wrapper = mount(TextArea);
+      
+      // The component template includes various color and styling props
+      // These are handled by Vuetify, so we just verify the component renders
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+  });
+
+  // Test accessibility
+  describe('Accessibility', () => {
+    it('has data-testid for testing', () => {
+      const wrapper = mount(TextArea);
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('provides label for accessibility', () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          label: 'Description field'
+        }
+      });
+      
+      expect(wrapper.vm.label).toBe('Description field');
+    });
+
+    it('supports icon-based interactions', () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          prependIcon: 'mdi-home',
+          appendIcon: 'mdi-send'
+        }
+      });
+      
+      expect(wrapper.vm.prependIcon).toBe('mdi-home');
+      expect(wrapper.vm.appendIcon).toBe('mdi-send');
+    });
+  });
+
+  // Test edge cases
+  describe('Edge Cases', () => {
+    it('handles undefined modelValue gracefully', () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          modelValue: undefined
+        }
+      });
+      
+      // When undefined is passed, the component falls back to the default empty string
+      expect(wrapper.vm.internalValue).toBe('');
+    });
+
+    it('handles null modelValue gracefully', () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          modelValue: null
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBeNull();
+    });
+
+    it('handles very long text content', () => {
+      const longText = 'Lorem ipsum '.repeat(1000);
+      const wrapper = mount(TextArea, {
+        props: {
+          modelValue: longText
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe(longText);
+    });
+
+    it('handles special characters in text', () => {
+      const specialText = '!@#$%^&*()_+{}|:"<>?`~[]\\;\',./ \n\t\r';
+      const wrapper = mount(TextArea, {
+        props: {
+          modelValue: specialText
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe(specialText);
+    });
+
+    it('handles newlines and multiline content', () => {
+      const multilineText = 'Line 1\nLine 2\nLine 3\n\nLine 5';
+      const wrapper = mount(TextArea, {
+        props: {
+          modelValue: multilineText
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe(multilineText);
+    });
+
+    it('handles numeric values correctly', () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          modelValue: 42.5
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe(42.5);
+      
+      wrapper.vm.internalValue = 100;
+      
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([100]);
+    });
+  });
+
+  // Test complex scenarios
+  describe('Complex Scenarios', () => {
+    it('works with all props configured', () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          modelValue: 'Full configuration test',
+          label: 'Complete TextArea',
+          clearIcon: 'mdi-close-circle',
+          prependIcon: 'mdi-format-text',
+          prependInnerIcon: 'mdi-pencil',
+          appendIcon: 'mdi-check',
+          appendInnerIcon: 'mdi-send'
+        }
+      });
+      
+      expect(wrapper.vm.modelValue).toBe('Full configuration test');
+      expect(wrapper.vm.label).toBe('Complete TextArea');
+      expect(wrapper.vm.clearIcon).toBe('mdi-close-circle');
+      expect(wrapper.vm.prependIcon).toBe('mdi-format-text');
+      expect(wrapper.vm.prependInnerIcon).toBe('mdi-pencil');
+      expect(wrapper.vm.appendIcon).toBe('mdi-check');
+      expect(wrapper.vm.appendInnerIcon).toBe('mdi-send');
+    });
+
+    it('handles rapid value changes', async () => {
+      const wrapper = mount(TextArea);
+      
+      const values = ['First', 'Second', 'Third', 'Fourth'];
+      
+      for (const value of values) {
+        wrapper.vm.internalValue = value;
+      }
+      
+      expect(wrapper.emitted('update:modelValue')).toHaveLength(4);
+      expect(wrapper.emitted('update:modelValue')?.[3]).toEqual(['Fourth']);
+    });
+
+    it('handles switching between string and number values', async () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          modelValue: 'Initial string'
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe('Initial string');
+      
+      await wrapper.setProps({ modelValue: 123 });
+      expect(wrapper.vm.internalValue).toBe(123);
+      
+      await wrapper.setProps({ modelValue: 'Back to string' });
+      expect(wrapper.vm.internalValue).toBe('Back to string');
+    });
+
+    it('maintains reactivity with external prop changes', async () => {
+      const wrapper = mount(TextArea, {
+        props: {
+          modelValue: 'Original',
+          label: 'Original Label'
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe('Original');
+      expect(wrapper.vm.label).toBe('Original Label');
+      
+      await wrapper.setProps({
+        modelValue: 'Updated',
+        label: 'Updated Label',
+        clearIcon: 'new-icon'
+      });
+      
+      expect(wrapper.vm.internalValue).toBe('Updated');
+      expect(wrapper.vm.label).toBe('Updated Label');
+      expect(wrapper.vm.clearIcon).toBe('new-icon');
+    });
+  });
+});