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

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

@@ -1,837 +1,837 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { mount } from '@vue/test-utils';
-import TickBox from '@components/TickBox/TickBox.vue';
-
-// Mock siteColors
-vi.mock('@/utils/index', () => ({
-  siteColors: {
-    checkbox_default_text: 'var(--Dental-Blue-0)',
-    checkbox_defaut_border: 'var(--Dental-Blue-0)',
-    checkbox_default_bg: 'var(--White-0)',
-    checkbox_default_checkmark: 'var(--Dental-Blue-0)',
-    checkbox_hovered_border: 'var(--Dental-Blue-1)',
-    checkbox_hovered_bg: 'var(--Dental-Blue--6)',
-    checkbox_hovered_checkmark: 'var(--Dental-Blue-1)',
-    checkbox_checked_border: 'var(--Dental-Blue-0)',
-    checkbox_checked_bg: 'var(--Dental-Blue--5)',
-    checkbox_error_border: 'var(--Error-Red-0)',
-    checkbox_error_bg: 'var(--Light-Gum--3)',
-    checkbox_error_text: 'var(--Error-Red-0)',
-    checkbox_error_checkmark: 'var(--Error-Red-0)',
-    checkbox_success_border: 'var(--Success-Green-0)',
-    checkbox_success_bg: 'var(--Success-Green--1)',
-    checkbox_success_text: 'var(--Success-Green-1)',
-    checkbox_success_checkmark: 'var(--Success-Green-0)',
-    checkbox_disabled_border: 'var(--Soft-Concrete-2)',
-    checkbox_disabled_bg: 'var(--White-0)',
-    checkbox_disabled_text: 'var(--Soft-Concrete-2)',
-    checkbox_disabled_checkmark: 'var(--Soft-Concrete-2)'
-  }
-}));
-
-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('labelClass', () => {
-      it('returns label-default by default', () => {
-        const wrapper = mount(TickBox, {
-          props: {
-            label: 'Default Style Test',
-            modelValue: false
-          }
-        });
-
-        expect(wrapper.vm.labelClass).toBe('label-default');
-      });
-
-      it('returns label-error when error is true', () => {
-        const wrapper = mount(TickBox, {
-          props: {
-            label: 'Error Style Test',
-            modelValue: false,
-            error: true
-          }
-        });
-
-        expect(wrapper.vm.labelClass).toBe('label-error');
-      });
-
-      it('returns label-success when success is true', () => {
-        const wrapper = mount(TickBox, {
-          props: {
-            label: 'Success Style Test',
-            modelValue: false,
-            success: true
-          }
-        });
-
-        expect(wrapper.vm.labelClass).toBe('label-success');
-      });
-
-      it('prioritizes label-error over label-success', () => {
-        const wrapper = mount(TickBox, {
-          props: {
-            label: 'Priority Style Test',
-            modelValue: false,
-            success: true,
-            error: true
-          }
-        });
-
-        expect(wrapper.vm.labelClass).toBe('label-error');
-      });
-
-      it('returns label-disabled when disabled is true', () => {
-        const wrapper = mount(TickBox, {
-          props: {
-            label: 'Disabled Style Test',
-            modelValue: false,
-            disabled: true
-          }
-        });
-
-        expect(wrapper.vm.labelClass).toBe('label-disabled');
-      });
-    });
-
-    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
-          }
-        });
-
-        // Uses checkbox_success_checkmark which is var(--Success-Green-0)
-        expect(wrapper.vm.hoverColor).toBe('var(--Success-Green-0)');
-      });
-
-      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)');
-      });
-
-      it('returns disabled color when disabled is true', () => {
-        const wrapper = mount(TickBox, {
-          props: {
-            label: 'Disabled Hover Test',
-            modelValue: false,
-            disabled: true
-          }
-        });
-
-        expect(wrapper.vm.hoverColor).toBe('var(--Soft-Concrete-2)');
-      });
-    });
-  });
-
-  // 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
-        }
-      });
-      
-      // Uses checkbox_success_checkmark which is var(--Success-Green-0)
-      expect(wrapper.vm.hoverColor).toBe('var(--Success-Green-0)');
-    });
-  });
-
-  // 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.labelClass).toBe('label-error');
-      expect(wrapper.vm.hoverColor).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');
-      // Uses checkbox_success_checkmark which is var(--Success-Green-0)
-      expect(wrapper.vm.hoverColor).toBe('var(--Success-Green-0)');
-    });
-
-    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.labelClass).toBe('label-error');
-    });
-
-    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');
-      // Uses checkbox_success_checkmark which is var(--Success-Green-0)
-      expect(wrapper.vm.hoverColor).toBe('var(--Success-Green-0)');
-
-      // 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');
-      // Uses checkbox_success_checkmark which is var(--Success-Green-0)
-      expect(wrapper.vm.hoverColor).toBe('var(--Success-Green-0)');
-    });
-  });
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import TickBox from '@components/TickBox/TickBox.vue';
+
+// Mock siteColors
+vi.mock('@/utils/index', () => ({
+  siteColors: {
+    checkbox_default_text: 'var(--Dental-Blue-0)',
+    checkbox_defaut_border: 'var(--Dental-Blue-0)',
+    checkbox_default_bg: 'var(--White-0)',
+    checkbox_default_checkmark: 'var(--Dental-Blue-0)',
+    checkbox_hovered_border: 'var(--Dental-Blue-1)',
+    checkbox_hovered_bg: 'var(--Dental-Blue--6)',
+    checkbox_hovered_checkmark: 'var(--Dental-Blue-1)',
+    checkbox_checked_border: 'var(--Dental-Blue-0)',
+    checkbox_checked_bg: 'var(--Dental-Blue--5)',
+    checkbox_error_border: 'var(--Error-Red-0)',
+    checkbox_error_bg: 'var(--Light-Gum--3)',
+    checkbox_error_text: 'var(--Error-Red-0)',
+    checkbox_error_checkmark: 'var(--Error-Red-0)',
+    checkbox_success_border: 'var(--Success-Green-0)',
+    checkbox_success_bg: 'var(--Success-Green--1)',
+    checkbox_success_text: 'var(--Success-Green-1)',
+    checkbox_success_checkmark: 'var(--Success-Green-0)',
+    checkbox_disabled_border: 'var(--Soft-Concrete-2)',
+    checkbox_disabled_bg: 'var(--White-0)',
+    checkbox_disabled_text: 'var(--Soft-Concrete-2)',
+    checkbox_disabled_checkmark: 'var(--Soft-Concrete-2)'
+  }
+}));
+
+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('labelClass', () => {
+      it('returns label-default by default', () => {
+        const wrapper = mount(TickBox, {
+          props: {
+            label: 'Default Style Test',
+            modelValue: false
+          }
+        });
+
+        expect(wrapper.vm.labelClass).toBe('label-default');
+      });
+
+      it('returns label-error when error is true', () => {
+        const wrapper = mount(TickBox, {
+          props: {
+            label: 'Error Style Test',
+            modelValue: false,
+            error: true
+          }
+        });
+
+        expect(wrapper.vm.labelClass).toBe('label-error');
+      });
+
+      it('returns label-success when success is true', () => {
+        const wrapper = mount(TickBox, {
+          props: {
+            label: 'Success Style Test',
+            modelValue: false,
+            success: true
+          }
+        });
+
+        expect(wrapper.vm.labelClass).toBe('label-success');
+      });
+
+      it('prioritizes label-error over label-success', () => {
+        const wrapper = mount(TickBox, {
+          props: {
+            label: 'Priority Style Test',
+            modelValue: false,
+            success: true,
+            error: true
+          }
+        });
+
+        expect(wrapper.vm.labelClass).toBe('label-error');
+      });
+
+      it('returns label-disabled when disabled is true', () => {
+        const wrapper = mount(TickBox, {
+          props: {
+            label: 'Disabled Style Test',
+            modelValue: false,
+            disabled: true
+          }
+        });
+
+        expect(wrapper.vm.labelClass).toBe('label-disabled');
+      });
+    });
+
+    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
+          }
+        });
+
+        // Uses checkbox_success_checkmark which is var(--Success-Green-0)
+        expect(wrapper.vm.hoverColor).toBe('var(--Success-Green-0)');
+      });
+
+      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)');
+      });
+
+      it('returns disabled color when disabled is true', () => {
+        const wrapper = mount(TickBox, {
+          props: {
+            label: 'Disabled Hover Test',
+            modelValue: false,
+            disabled: true
+          }
+        });
+
+        expect(wrapper.vm.hoverColor).toBe('var(--Soft-Concrete-2)');
+      });
+    });
+  });
+
+  // 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
+        }
+      });
+      
+      // Uses checkbox_success_checkmark which is var(--Success-Green-0)
+      expect(wrapper.vm.hoverColor).toBe('var(--Success-Green-0)');
+    });
+  });
+
+  // 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.labelClass).toBe('label-error');
+      expect(wrapper.vm.hoverColor).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');
+      // Uses checkbox_success_checkmark which is var(--Success-Green-0)
+      expect(wrapper.vm.hoverColor).toBe('var(--Success-Green-0)');
+    });
+
+    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.labelClass).toBe('label-error');
+    });
+
+    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');
+      // Uses checkbox_success_checkmark which is var(--Success-Green-0)
+      expect(wrapper.vm.hoverColor).toBe('var(--Success-Green-0)');
+
+      // 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');
+      // Uses checkbox_success_checkmark which is var(--Success-Green-0)
+      expect(wrapper.vm.hoverColor).toBe('var(--Success-Green-0)');
+    });
+  });
 });