@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +1,780 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import TickBox from '@components/TickBox/TickBox.vue';
+
+describe('TickBox', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Test default behavior and rendering
+  describe('Default Behavior', () => {
+    it('renders with required props', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Test Label',
+          modelValue: false
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.tick-box').exists()).toBe(true);
+      expect(wrapper.vm.label).toBe('Test Label');
+      expect(wrapper.vm.modelValue).toBe(false);
+      expect(wrapper.vm.success).toBe(false);
+      expect(wrapper.vm.error).toBe(false);
+      expect(wrapper.vm.disabled).toBe(false);
+      expect(wrapper.vm.value).toBe(true);
+      expect(wrapper.vm.density).toBe('comfortable');
+    });
+
+    it('has data-testid for testing', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Test',
+          modelValue: false
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('applies tick-box CSS class', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Test',
+          modelValue: false
+        }
+      });
+      
+      expect(wrapper.find('.tick-box').exists()).toBe(true);
+    });
+
+    it('requires label prop', () => {
+      // This test verifies that label is marked as required
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Required Label',
+          modelValue: false
+        }
+      });
+      
+      expect(wrapper.vm.label).toBe('Required Label');
+    });
+
+    it('requires modelValue prop', () => {
+      // This test verifies that modelValue is marked as required
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Test',
+          modelValue: true
+        }
+      });
+      
+      expect(wrapper.vm.modelValue).toBe(true);
+    });
+  });
+
+  // Test v-model functionality
+  describe('v-model', () => {
+    it('handles boolean modelValue', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Boolean Test',
+          modelValue: true
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe(true);
+    });
+
+    it('handles false boolean modelValue', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Boolean Test',
+          modelValue: false
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe(false);
+    });
+
+    it('handles array modelValue', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Array Test',
+          modelValue: ['option1', 'option2']
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toEqual(['option1', 'option2']);
+    });
+
+    it('handles empty array modelValue', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Empty Array Test',
+          modelValue: []
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toEqual([]);
+    });
+
+    it('emits update:modelValue when internalValue changes', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Emit Test',
+          modelValue: false
+        }
+      });
+      
+      wrapper.vm.internalValue = true;
+      
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true]);
+    });
+
+    it('updates when modelValue prop changes', async () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Update Test',
+          modelValue: false
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe(false);
+      
+      await wrapper.setProps({ modelValue: true });
+      
+      expect(wrapper.vm.internalValue).toBe(true);
+    });
+
+    it('handles array to boolean modelValue changes', async () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Type Change Test',
+          modelValue: []
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toEqual([]);
+      
+      await wrapper.setProps({ modelValue: true });
+      
+      expect(wrapper.vm.internalValue).toBe(true);
+    });
+  });
+
+  // Test value prop
+  describe('Value Prop', () => {
+    it('uses default value of true', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Default Value Test',
+          modelValue: false
+        }
+      });
+      
+      expect(wrapper.vm.value).toBe(true);
+    });
+
+    it('accepts string value', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'String Value Test',
+          modelValue: false,
+          value: 'option1'
+        }
+      });
+      
+      expect(wrapper.vm.value).toBe('option1');
+    });
+
+    it('accepts number value', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Number Value Test',
+          modelValue: false,
+          value: 42
+        }
+      });
+      
+      expect(wrapper.vm.value).toBe(42);
+    });
+
+    it('accepts boolean value', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Boolean Value Test',
+          modelValue: false,
+          value: false
+        }
+      });
+      
+      expect(wrapper.vm.value).toBe(false);
+    });
+  });
+
+  // Test state props
+  describe('State Props', () => {
+    it('handles success state', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Success Test',
+          modelValue: false,
+          success: true
+        }
+      });
+      
+      expect(wrapper.vm.success).toBe(true);
+      expect(wrapper.vm.error).toBe(false);
+    });
+
+    it('handles error state', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Error Test',
+          modelValue: false,
+          error: true
+        }
+      });
+      
+      expect(wrapper.vm.error).toBe(true);
+      expect(wrapper.vm.success).toBe(false);
+    });
+
+    it('handles disabled state', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Disabled Test',
+          modelValue: false,
+          disabled: true
+        }
+      });
+      
+      expect(wrapper.vm.disabled).toBe(true);
+    });
+
+    it('handles multiple states together', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Multiple States Test',
+          modelValue: false,
+          success: true,
+          disabled: true
+        }
+      });
+      
+      expect(wrapper.vm.success).toBe(true);
+      expect(wrapper.vm.disabled).toBe(true);
+      expect(wrapper.vm.error).toBe(false);
+    });
+
+    it('handles conflicting error and success states', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Conflicting States Test',
+          modelValue: false,
+          success: true,
+          error: true
+        }
+      });
+      
+      expect(wrapper.vm.success).toBe(true);
+      expect(wrapper.vm.error).toBe(true);
+    });
+  });
+
+  // Test density prop
+  describe('Density', () => {
+    it('uses default density of comfortable', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Default Density Test',
+          modelValue: false
+        }
+      });
+      
+      expect(wrapper.vm.density).toBe('comfortable');
+    });
+
+    it('accepts custom density', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Custom Density Test',
+          modelValue: false,
+          density: 'compact'
+        }
+      });
+      
+      expect(wrapper.vm.density).toBe('compact');
+    });
+
+    it('accepts all density variations', () => {
+      const densities = ['comfortable', 'compact', 'default'];
+      
+      densities.forEach(density => {
+        const wrapper = mount(TickBox, {
+          props: {
+            label: `Density ${density} Test`,
+            modelValue: false,
+            density
+          }
+        });
+        
+        expect(wrapper.vm.density).toBe(density);
+      });
+    });
+  });
+
+  // Test computed properties
+  describe('Computed Properties', () => {
+    describe('checkboxClass', () => {
+      it('returns default-state by default', () => {
+        const wrapper = mount(TickBox, {
+          props: {
+            label: 'Default Class Test',
+            modelValue: false
+          }
+        });
+        
+        expect(wrapper.vm.checkboxClass).toBe('default-state');
+        expect(wrapper.find('.default-state').exists()).toBe(true);
+      });
+
+      it('returns error-state when error is true', () => {
+        const wrapper = mount(TickBox, {
+          props: {
+            label: 'Error Class Test',
+            modelValue: false,
+            error: true
+          }
+        });
+        
+        expect(wrapper.vm.checkboxClass).toBe('error-state');
+        expect(wrapper.find('.error-state').exists()).toBe(true);
+      });
+
+      it('returns success-state when success is true', () => {
+        const wrapper = mount(TickBox, {
+          props: {
+            label: 'Success Class Test',
+            modelValue: false,
+            success: true
+          }
+        });
+        
+        expect(wrapper.vm.checkboxClass).toBe('success-state');
+        expect(wrapper.find('.success-state').exists()).toBe(true);
+      });
+
+      it('prioritizes error over success', () => {
+        const wrapper = mount(TickBox, {
+          props: {
+            label: 'Priority Test',
+            modelValue: false,
+            success: true,
+            error: true
+          }
+        });
+        
+        expect(wrapper.vm.checkboxClass).toBe('error-state');
+        expect(wrapper.find('.error-state').exists()).toBe(true);
+      });
+    });
+
+    describe('labelStyles', () => {
+      it('returns default color', () => {
+        const wrapper = mount(TickBox, {
+          props: {
+            label: 'Default Style Test',
+            modelValue: false
+          }
+        });
+        
+        expect(wrapper.vm.labelStyles).toEqual({ color: 'var(--Dental-Blue-0)' });
+      });
+
+      it('returns error color when error is true', () => {
+        const wrapper = mount(TickBox, {
+          props: {
+            label: 'Error Style Test',
+            modelValue: false,
+            error: true
+          }
+        });
+        
+        expect(wrapper.vm.labelStyles).toEqual({ color: 'var(--Error-Red-0)' });
+      });
+
+      it('returns success color when success is true', () => {
+        const wrapper = mount(TickBox, {
+          props: {
+            label: 'Success Style Test',
+            modelValue: false,
+            success: true
+          }
+        });
+        
+        expect(wrapper.vm.labelStyles).toEqual({ color: 'var(--Success-Green-1)' });
+      });
+
+      it('prioritizes error color over success color', () => {
+        const wrapper = mount(TickBox, {
+          props: {
+            label: 'Priority Style Test',
+            modelValue: false,
+            success: true,
+            error: true
+          }
+        });
+        
+        expect(wrapper.vm.labelStyles).toEqual({ color: 'var(--Error-Red-0)' });
+      });
+    });
+
+    describe('hoverColor', () => {
+      it('returns default color', () => {
+        const wrapper = mount(TickBox, {
+          props: {
+            label: 'Default Hover Test',
+            modelValue: false
+          }
+        });
+        
+        expect(wrapper.vm.hoverColor).toBe('var(--Dental-Blue-0)');
+      });
+
+      it('returns error color when error is true', () => {
+        const wrapper = mount(TickBox, {
+          props: {
+            label: 'Error Hover Test',
+            modelValue: false,
+            error: true
+          }
+        });
+        
+        expect(wrapper.vm.hoverColor).toBe('var(--Error-Red-0)');
+      });
+
+      it('returns success color when success is true', () => {
+        const wrapper = mount(TickBox, {
+          props: {
+            label: 'Success Hover Test',
+            modelValue: false,
+            success: true
+          }
+        });
+        
+        expect(wrapper.vm.hoverColor).toBe('var(--Success-Green-1)');
+      });
+
+      it('prioritizes error color over success color', () => {
+        const wrapper = mount(TickBox, {
+          props: {
+            label: 'Priority Hover Test',
+            modelValue: false,
+            success: true,
+            error: true
+          }
+        });
+        
+        expect(wrapper.vm.hoverColor).toBe('var(--Error-Red-0)');
+      });
+    });
+  });
+
+  // Test label slot
+  describe('Label Slot', () => {
+    it('renders label with default styles', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Test Label',
+          modelValue: false
+        }
+      });
+      
+      const labelSpan = wrapper.find('span');
+      expect(labelSpan.exists()).toBe(true);
+      expect(labelSpan.text()).toBe('Test Label');
+    });
+
+    it('applies dynamic styles to label', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Styled Label',
+          modelValue: false,
+          error: true
+        }
+      });
+      
+      const labelSpan = wrapper.find('span');
+      expect(labelSpan.exists()).toBe(true);
+      // The style attribute would be applied by Vue
+      expect(labelSpan.text()).toBe('Styled Label');
+    });
+
+    it('handles empty label', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: '',
+          modelValue: false
+        }
+      });
+      
+      const labelSpan = wrapper.find('span');
+      expect(labelSpan.exists()).toBe(true);
+      expect(labelSpan.text()).toBe('');
+    });
+
+    it('handles long label text', () => {
+      const longLabel = 'This is a very long label that might wrap to multiple lines and should be handled gracefully by the component';
+      const wrapper = mount(TickBox, {
+        props: {
+          label: longLabel,
+          modelValue: false
+        }
+      });
+      
+      const labelSpan = wrapper.find('span');
+      expect(labelSpan.text()).toBe(longLabel);
+    });
+  });
+
+  // Test Vuetify integration
+  describe('Vuetify Integration', () => {
+    it('passes props to v-checkbox correctly', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Vuetify Test',
+          modelValue: true,
+          disabled: true,
+          value: 'test-value',
+          density: 'compact'
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.vm.disabled).toBe(true);
+      expect(wrapper.vm.value).toBe('test-value');
+      expect(wrapper.vm.density).toBe('compact');
+    });
+
+    it('uses custom icons', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Icon Test',
+          modelValue: false
+        }
+      });
+      
+      // The component template specifies heroicons for true and false states
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('applies color and base-color from hoverColor', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Color Test',
+          modelValue: false,
+          success: true
+        }
+      });
+      
+      expect(wrapper.vm.hoverColor).toBe('var(--Success-Green-1)');
+    });
+  });
+
+  // Test accessibility
+  describe('Accessibility', () => {
+    it('has data-testid for testing', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Accessibility Test',
+          modelValue: false
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('provides meaningful label text', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'I agree to the terms and conditions',
+          modelValue: false
+        }
+      });
+      
+      expect(wrapper.vm.label).toBe('I agree to the terms and conditions');
+      expect(wrapper.find('span').text()).toBe('I agree to the terms and conditions');
+    });
+
+    it('maintains accessibility with disabled state', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Disabled option',
+          modelValue: false,
+          disabled: true
+        }
+      });
+      
+      expect(wrapper.vm.disabled).toBe(true);
+      expect(wrapper.find('span').text()).toBe('Disabled option');
+    });
+
+    it('provides visual feedback through states', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Visual feedback test',
+          modelValue: false,
+          error: true
+        }
+      });
+      
+      expect(wrapper.vm.error).toBe(true);
+      expect(wrapper.vm.checkboxClass).toBe('error-state');
+      expect(wrapper.vm.labelStyles.color).toBe('var(--Error-Red-0)');
+    });
+  });
+
+  // Test edge cases
+  describe('Edge Cases', () => {
+    it('handles special characters in label', () => {
+      const specialLabel = 'Special chars: !@#$%^&*()_+{}|:"<>?`~[]\\;\',./ ñáéíóú';
+      const wrapper = mount(TickBox, {
+        props: {
+          label: specialLabel,
+          modelValue: false
+        }
+      });
+      
+      expect(wrapper.vm.label).toBe(specialLabel);
+      expect(wrapper.find('span').text()).toBe(specialLabel);
+    });
+
+    it('handles HTML entities in label', () => {
+      const htmlLabel = 'HTML entities: &lt;&gt;&amp;&quot;&#39;';
+      const wrapper = mount(TickBox, {
+        props: {
+          label: htmlLabel,
+          modelValue: false
+        }
+      });
+      
+      expect(wrapper.vm.label).toBe(htmlLabel);
+    });
+
+    it('handles zero as value', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Zero value test',
+          modelValue: [0],
+          value: 0
+        }
+      });
+      
+      expect(wrapper.vm.value).toBe(0);
+    });
+
+    it('handles empty string as value', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Empty string value test',
+          modelValue: false,
+          value: ''
+        }
+      });
+      
+      expect(wrapper.vm.value).toBe('');
+    });
+
+    it('handles rapid state changes', async () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Rapid changes test',
+          modelValue: false
+        }
+      });
+      
+      await wrapper.setProps({ success: true });
+      expect(wrapper.vm.checkboxClass).toBe('success-state');
+      
+      await wrapper.setProps({ success: false, error: true });
+      expect(wrapper.vm.checkboxClass).toBe('error-state');
+      
+      await wrapper.setProps({ error: false });
+      expect(wrapper.vm.checkboxClass).toBe('default-state');
+    });
+  });
+
+  // Test complex scenarios
+  describe('Complex Scenarios', () => {
+    it('works with all props configured', () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Complete configuration test',
+          modelValue: ['option1', 'option2'],
+          value: 'option1',
+          success: true,
+          disabled: false,
+          density: 'compact'
+        }
+      });
+      
+      expect(wrapper.vm.label).toBe('Complete configuration test');
+      expect(wrapper.vm.modelValue).toEqual(['option1', 'option2']);
+      expect(wrapper.vm.value).toBe('option1');
+      expect(wrapper.vm.success).toBe(true);
+      expect(wrapper.vm.disabled).toBe(false);
+      expect(wrapper.vm.density).toBe('compact');
+      expect(wrapper.vm.checkboxClass).toBe('success-state');
+      expect(wrapper.vm.hoverColor).toBe('var(--Success-Green-1)');
+    });
+
+    it('handles state priority correctly in all combinations', () => {
+      // Test error takes priority
+      const errorPriorityWrapper = mount(TickBox, {
+        props: {
+          label: 'Priority test',
+          modelValue: false,
+          success: true,
+          error: true
+        }
+      });
+      
+      expect(errorPriorityWrapper.vm.checkboxClass).toBe('error-state');
+      expect(errorPriorityWrapper.vm.hoverColor).toBe('var(--Error-Red-0)');
+      expect(errorPriorityWrapper.vm.labelStyles.color).toBe('var(--Error-Red-0)');
+    });
+
+    it('maintains reactive updates across all computed properties', async () => {
+      const wrapper = mount(TickBox, {
+        props: {
+          label: 'Reactive test',
+          modelValue: false
+        }
+      });
+      
+      // Initial state
+      expect(wrapper.vm.checkboxClass).toBe('default-state');
+      expect(wrapper.vm.hoverColor).toBe('var(--Dental-Blue-0)');
+      
+      // Change to success
+      await wrapper.setProps({ success: true });
+      expect(wrapper.vm.checkboxClass).toBe('success-state');
+      expect(wrapper.vm.hoverColor).toBe('var(--Success-Green-1)');
+      
+      // Change to error (should override success)
+      await wrapper.setProps({ error: true });
+      expect(wrapper.vm.checkboxClass).toBe('error-state');
+      expect(wrapper.vm.hoverColor).toBe('var(--Error-Red-0)');
+      
+      // Remove error but keep success
+      await wrapper.setProps({ error: false });
+      expect(wrapper.vm.checkboxClass).toBe('success-state');
+      expect(wrapper.vm.hoverColor).toBe('var(--Success-Green-1)');
+    });
+  });
+});