@zap-wunschlachen/wl-shared-components 1.0.12 → 1.0.14

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

@@ -1,545 +1,545 @@
-import { describe, it, expect, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-import Checkbox from '@components/CheckBox/Checkbox.vue';
-
-describe('Checkbox', () => {
-  // Test default behavior and rendering
-  describe('Default Behavior', () => {
-    it('renders with default props', () => {
-      const wrapper = mount(Checkbox);
-      
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-      expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true);
-      expect(wrapper.vm.success).toBe(false);
-      expect(wrapper.vm.error).toBe(false);
-      expect(wrapper.vm.disabled).toBe(false);
-      expect(wrapper.vm.value).toBe('checkbox');
-      expect(wrapper.vm.density).toBe('default');
-      expect(Array.isArray(wrapper.vm.modelValue)).toBe(true);
-      expect(wrapper.vm.modelValue).toEqual([]);
-    });
-
-    it('renders with label', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          label: 'Test Checkbox'
-        }
-      });
-      
-      expect(wrapper.text()).toBe('Test Checkbox');
-    });
-
-    it('applies default CSS classes', () => {
-      const wrapper = mount(Checkbox);
-      
-      expect(wrapper.find('.label').exists()).toBe(true);
-      expect(wrapper.find('.checkbox-container').exists()).toBe(true);
-      expect(wrapper.find('.input-checkbox').exists()).toBe(true);
-      expect(wrapper.find('.density-default').exists()).toBe(true);
-    });
-  });
-
-  // Test v-model with arrays (multiple selection)
-  describe('v-model with Arrays', () => {
-    it('handles unchecked state with empty array', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          modelValue: [],
-          value: 'option1'
-        }
-      });
-      
-      expect(wrapper.vm.isChecked).toBe(false);
-      expect(wrapper.find('input').element.checked).toBe(false);
-    });
-
-    it('handles checked state when value is in array', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          modelValue: ['option1', 'option2'],
-          value: 'option1'
-        }
-      });
-      
-      expect(wrapper.vm.isChecked).toBe(true);
-      expect(wrapper.find('input').element.checked).toBe(true);
-    });
-
-    it('handles unchecked state when value is not in array', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          modelValue: ['option2', 'option3'],
-          value: 'option1'
-        }
-      });
-      
-      expect(wrapper.vm.isChecked).toBe(false);
-      expect(wrapper.find('input').element.checked).toBe(false);
-    });
-
-    it('adds value to array when checked', async () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          modelValue: [],
-          value: 'option1'
-        }
-      });
-
-      const input = wrapper.find('input');
-      await input.setValue(true);
-
-      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['option1']]);
-    });
-
-    it('removes value from array when unchecked', async () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          modelValue: ['option1', 'option2'],
-          value: 'option1'
-        }
-      });
-
-      const input = wrapper.find('input');
-      await input.setValue(false);
-
-      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['option2']]);
-    });
-
-    it('maintains other values when adding new value', async () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          modelValue: ['option2', 'option3'],
-          value: 'option1'
-        }
-      });
-
-      const input = wrapper.find('input');
-      await input.setValue(true);
-
-      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['option2', 'option3', 'option1']]);
-    });
-  });
-
-  // Test v-model with boolean (single selection)
-  describe('v-model with Boolean', () => {
-    it('handles false boolean value', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          modelValue: false,
-          value: 'option1'
-        }
-      });
-      
-      expect(wrapper.vm.isChecked).toBe(false);
-      expect(wrapper.find('input').element.checked).toBe(false);
-    });
-
-    it('handles true boolean value', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          modelValue: true,
-          value: 'option1'
-        }
-      });
-      
-      expect(wrapper.vm.isChecked).toBe(true);
-      expect(wrapper.find('input').element.checked).toBe(true);
-    });
-
-    it('emits true when checked with boolean model', async () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          modelValue: false,
-          value: 'option1'
-        }
-      });
-
-      const input = wrapper.find('input');
-      await input.setValue(true);
-
-      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true]);
-    });
-
-    it('emits false when unchecked with boolean model', async () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          modelValue: true,
-          value: 'option1'
-        }
-      });
-
-      const input = wrapper.find('input');
-      await input.setValue(false);
-
-      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false]);
-    });
-  });
-
-  // Test state props
-  describe('State Props', () => {
-    it('applies success state', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          success: true
-        }
-      });
-      
-      expect(wrapper.find('.label-success').exists()).toBe(true);
-      expect(wrapper.find('.input-success').exists()).toBe(true);
-      expect(wrapper.vm.success).toBe(true);
-    });
-
-    it('applies error state', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          error: true
-        }
-      });
-      
-      expect(wrapper.find('.label-error').exists()).toBe(true);
-      expect(wrapper.find('.input-error').exists()).toBe(true);
-      expect(wrapper.vm.error).toBe(true);
-    });
-
-    it('applies disabled state', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          disabled: true
-        }
-      });
-      
-      expect(wrapper.find('.label-disabled').exists()).toBe(true);
-      expect(wrapper.find('.input-disabled').exists()).toBe(true);
-      expect(wrapper.find('input').element.disabled).toBe(true);
-      expect(wrapper.vm.disabled).toBe(true);
-    });
-
-    it('handles multiple states together', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          success: true,
-          error: true,
-          disabled: true
-        }
-      });
-      
-      expect(wrapper.find('.label-success').exists()).toBe(true);
-      expect(wrapper.find('.label-error').exists()).toBe(true);
-      expect(wrapper.find('.label-disabled').exists()).toBe(true);
-      expect(wrapper.find('.input-success').exists()).toBe(true);
-      expect(wrapper.find('.input-error').exists()).toBe(true);
-      expect(wrapper.find('.input-disabled').exists()).toBe(true);
-    });
-  });
-
-  // Test density prop and validation
-  describe('Density', () => {
-    it('applies default density', () => {
-      const wrapper = mount(Checkbox);
-      expect(wrapper.find('.density-default').exists()).toBe(true);
-    });
-
-    it('applies comfortable density', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          density: 'comfortable'
-        }
-      });
-      
-      expect(wrapper.find('.density-comfortable').exists()).toBe(true);
-      expect(wrapper.vm.density).toBe('comfortable');
-    });
-
-    it('applies compact density', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          density: 'compact'
-        }
-      });
-      
-      expect(wrapper.find('.density-compact').exists()).toBe(true);
-      expect(wrapper.vm.density).toBe('compact');
-    });
-
-    it('validates density prop with valid values', () => {
-      const validValues = ['comfortable', 'default', 'compact'];
-      
-      validValues.forEach(density => {
-        expect(() => {
-          mount(Checkbox, {
-            props: { density }
-          });
-        }).not.toThrow();
-      });
-    });
-  });
-
-  // Test custom value prop
-  describe('Value Prop', () => {
-    it('uses custom value', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          value: 'custom-value'
-        }
-      });
-      
-      expect(wrapper.find('input').element.name).toBe('custom-value');
-      expect(wrapper.vm.value).toBe('custom-value');
-    });
-
-    it('uses default value when not provided', () => {
-      const wrapper = mount(Checkbox);
-      
-      expect(wrapper.find('input').element.name).toBe('checkbox');
-      expect(wrapper.vm.value).toBe('checkbox');
-    });
-  });
-
-  // Test events
-  describe('Events', () => {
-    it('emits update:modelValue on change', async () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          modelValue: false,
-          value: 'test'
-        }
-      });
-
-      const input = wrapper.find('input');
-      await input.setValue(true);
-
-      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-    });
-
-    it('emits input-error event with correct payload', async () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          modelValue: false,
-          value: 'test-checkbox'
-        }
-      });
-
-      const input = wrapper.find('input');
-      await input.setValue(true);
-
-      expect(wrapper.emitted('input-error')).toBeTruthy();
-      expect(wrapper.emitted('input-error')?.[0]).toEqual([{ id: 'test-checkbox', isError: false }]);
-    });
-
-    it('emits input-error with isError: true when unchecked', async () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          modelValue: true,
-          value: 'test-checkbox'
-        }
-      });
-
-      const input = wrapper.find('input');
-      await input.setValue(false);
-
-      expect(wrapper.emitted('input-error')?.[0]).toEqual([{ id: 'test-checkbox', isError: true }]);
-    });
-
-    it('does not emit events when disabled', async () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          disabled: true,
-          modelValue: false
-        }
-      });
-
-      const input = wrapper.find('input');
-      
-      // Try to trigger change event on disabled input
-      await input.trigger('change');
-
-      // Events should not be emitted for disabled checkbox
-      expect(wrapper.emitted('update:modelValue')).toBeFalsy();
-      expect(wrapper.emitted('input-error')).toBeFalsy();
-    });
-  });
-
-  // Test computed properties
-  describe('Computed Properties', () => {
-    it('computes labelClasses correctly', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          success: true,
-          error: false,
-          disabled: false
-        }
-      });
-      
-      const labelClasses = wrapper.vm.labelClasses;
-      expect(labelClasses.label).toBe(true);
-      expect(labelClasses['label-success']).toBe(true);
-      expect(labelClasses['label-error']).toBe(false);
-      expect(labelClasses['label-disabled']).toBe(false);
-    });
-
-    it('computes inputClasses correctly', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          success: false,
-          error: true,
-          disabled: false,
-          density: 'compact'
-        }
-      });
-      
-      const inputClasses = wrapper.vm.inputClasses;
-      expect(inputClasses['input-checkbox']).toBe(true);
-      expect(inputClasses['input-success']).toBe(false);
-      expect(inputClasses['input-error']).toBe(true);
-      expect(inputClasses['input-disabled']).toBe(false);
-      expect(inputClasses['density-compact']).toBe(true);
-    });
-  });
-
-  // Test accessibility
-  describe('Accessibility', () => {
-    it('has proper label association', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          label: 'Accessible checkbox',
-          value: 'accessible'
-        }
-      });
-      
-      const label = wrapper.find('label');
-      const input = wrapper.find('input');
-      
-      expect(label.exists()).toBe(true);
-      expect(input.element.name).toBe('accessible');
-      expect(wrapper.text()).toContain('Accessible checkbox');
-    });
-
-    it('maintains accessibility when disabled', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          label: 'Disabled checkbox',
-          disabled: true
-        }
-      });
-      
-      expect(wrapper.find('input').element.disabled).toBe(true);
-      expect(wrapper.text()).toContain('Disabled checkbox');
-    });
-
-    it('has data-testid for testing', () => {
-      const wrapper = mount(Checkbox);
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-  });
-
-  // Test edge cases
-  describe('Edge Cases', () => {
-    it('handles empty label', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          label: ''
-        }
-      });
-      
-      expect(wrapper.text().trim()).toBe('');
-    });
-
-    it('handles undefined label', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          label: undefined
-        }
-      });
-      
-      expect(wrapper.vm.label).toBeUndefined();
-    });
-
-    it('handles large arrays in modelValue', () => {
-      const largeArray = Array.from({ length: 1000 }, (_, i) => `option${i}`);
-      const wrapper = mount(Checkbox, {
-        props: {
-          modelValue: largeArray,
-          value: 'option500'
-        }
-      });
-      
-      expect(wrapper.vm.isChecked).toBe(true);
-    });
-
-    it('handles special characters in value', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          value: 'special!@#$%^&*()_+{}|:"<>?`~value',
-          modelValue: []
-        }
-      });
-      
-      expect(wrapper.vm.value).toBe('special!@#$%^&*()_+{}|:"<>?`~value');
-    });
-
-    it('handles rapid state changes', async () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          modelValue: [],
-          value: 'rapid-test'
-        }
-      });
-
-      const input = wrapper.find('input');
-      
-      // Rapid changes
-      await input.setValue(true);
-      await input.setValue(false);
-      await input.setValue(true);
-
-      expect(wrapper.emitted('update:modelValue')).toHaveLength(3);
-      expect(wrapper.emitted('input-error')).toHaveLength(3);
-    });
-  });
-
-  // Test complex scenarios
-  describe('Complex Scenarios', () => {
-    it('works with all props combined', () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          label: 'Complex checkbox',
-          success: false,
-          error: true,
-          disabled: false,
-          value: 'complex-value',
-          modelValue: ['other-value', 'complex-value'],
-          density: 'comfortable'
-        }
-      });
-      
-      expect(wrapper.vm.isChecked).toBe(true);
-      expect(wrapper.find('.label-error').exists()).toBe(true);
-      expect(wrapper.find('.density-comfortable').exists()).toBe(true);
-      expect(wrapper.text()).toBe('Complex checkbox');
-    });
-
-    it('handles switching between array and boolean modelValue types', async () => {
-      const wrapper = mount(Checkbox, {
-        props: {
-          modelValue: [],
-          value: 'test'
-        }
-      });
-
-      expect(wrapper.vm.isChecked).toBe(false);
-
-      // Switch to boolean
-      await wrapper.setProps({ modelValue: true });
-      expect(wrapper.vm.isChecked).toBe(true);
-
-      // Switch back to array
-      await wrapper.setProps({ modelValue: ['test'] });
-      expect(wrapper.vm.isChecked).toBe(true);
-
-      await wrapper.setProps({ modelValue: [] });
-      expect(wrapper.vm.isChecked).toBe(false);
-    });
-  });
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Checkbox from '@components/CheckBox/Checkbox.vue';
+
+describe('Checkbox', () => {
+  // Test default behavior and rendering
+  describe('Default Behavior', () => {
+    it('renders with default props', () => {
+      const wrapper = mount(Checkbox);
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true);
+      expect(wrapper.vm.success).toBe(false);
+      expect(wrapper.vm.error).toBe(false);
+      expect(wrapper.vm.disabled).toBe(false);
+      expect(wrapper.vm.value).toBe('checkbox');
+      expect(wrapper.vm.density).toBe('default');
+      expect(Array.isArray(wrapper.vm.modelValue)).toBe(true);
+      expect(wrapper.vm.modelValue).toEqual([]);
+    });
+
+    it('renders with label', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          label: 'Test Checkbox'
+        }
+      });
+      
+      expect(wrapper.text()).toBe('Test Checkbox');
+    });
+
+    it('applies default CSS classes', () => {
+      const wrapper = mount(Checkbox);
+      
+      expect(wrapper.find('.label').exists()).toBe(true);
+      expect(wrapper.find('.checkbox-container').exists()).toBe(true);
+      expect(wrapper.find('.input-checkbox').exists()).toBe(true);
+      expect(wrapper.find('.density-default').exists()).toBe(true);
+    });
+  });
+
+  // Test v-model with arrays (multiple selection)
+  describe('v-model with Arrays', () => {
+    it('handles unchecked state with empty array', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          modelValue: [],
+          value: 'option1'
+        }
+      });
+      
+      expect(wrapper.vm.isChecked).toBe(false);
+      expect(wrapper.find('input').element.checked).toBe(false);
+    });
+
+    it('handles checked state when value is in array', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          modelValue: ['option1', 'option2'],
+          value: 'option1'
+        }
+      });
+      
+      expect(wrapper.vm.isChecked).toBe(true);
+      expect(wrapper.find('input').element.checked).toBe(true);
+    });
+
+    it('handles unchecked state when value is not in array', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          modelValue: ['option2', 'option3'],
+          value: 'option1'
+        }
+      });
+      
+      expect(wrapper.vm.isChecked).toBe(false);
+      expect(wrapper.find('input').element.checked).toBe(false);
+    });
+
+    it('adds value to array when checked', async () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          modelValue: [],
+          value: 'option1'
+        }
+      });
+
+      const input = wrapper.find('input');
+      await input.setValue(true);
+
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['option1']]);
+    });
+
+    it('removes value from array when unchecked', async () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          modelValue: ['option1', 'option2'],
+          value: 'option1'
+        }
+      });
+
+      const input = wrapper.find('input');
+      await input.setValue(false);
+
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['option2']]);
+    });
+
+    it('maintains other values when adding new value', async () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          modelValue: ['option2', 'option3'],
+          value: 'option1'
+        }
+      });
+
+      const input = wrapper.find('input');
+      await input.setValue(true);
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['option2', 'option3', 'option1']]);
+    });
+  });
+
+  // Test v-model with boolean (single selection)
+  describe('v-model with Boolean', () => {
+    it('handles false boolean value', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          modelValue: false,
+          value: 'option1'
+        }
+      });
+      
+      expect(wrapper.vm.isChecked).toBe(false);
+      expect(wrapper.find('input').element.checked).toBe(false);
+    });
+
+    it('handles true boolean value', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          modelValue: true,
+          value: 'option1'
+        }
+      });
+      
+      expect(wrapper.vm.isChecked).toBe(true);
+      expect(wrapper.find('input').element.checked).toBe(true);
+    });
+
+    it('emits true when checked with boolean model', async () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          modelValue: false,
+          value: 'option1'
+        }
+      });
+
+      const input = wrapper.find('input');
+      await input.setValue(true);
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true]);
+    });
+
+    it('emits false when unchecked with boolean model', async () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          modelValue: true,
+          value: 'option1'
+        }
+      });
+
+      const input = wrapper.find('input');
+      await input.setValue(false);
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false]);
+    });
+  });
+
+  // Test state props
+  describe('State Props', () => {
+    it('applies success state', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          success: true
+        }
+      });
+      
+      expect(wrapper.find('.label-success').exists()).toBe(true);
+      expect(wrapper.find('.input-success').exists()).toBe(true);
+      expect(wrapper.vm.success).toBe(true);
+    });
+
+    it('applies error state', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          error: true
+        }
+      });
+      
+      expect(wrapper.find('.label-error').exists()).toBe(true);
+      expect(wrapper.find('.input-error').exists()).toBe(true);
+      expect(wrapper.vm.error).toBe(true);
+    });
+
+    it('applies disabled state', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          disabled: true
+        }
+      });
+      
+      expect(wrapper.find('.label-disabled').exists()).toBe(true);
+      expect(wrapper.find('.input-disabled').exists()).toBe(true);
+      expect(wrapper.find('input').element.disabled).toBe(true);
+      expect(wrapper.vm.disabled).toBe(true);
+    });
+
+    it('handles multiple states together', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          success: true,
+          error: true,
+          disabled: true
+        }
+      });
+      
+      expect(wrapper.find('.label-success').exists()).toBe(true);
+      expect(wrapper.find('.label-error').exists()).toBe(true);
+      expect(wrapper.find('.label-disabled').exists()).toBe(true);
+      expect(wrapper.find('.input-success').exists()).toBe(true);
+      expect(wrapper.find('.input-error').exists()).toBe(true);
+      expect(wrapper.find('.input-disabled').exists()).toBe(true);
+    });
+  });
+
+  // Test density prop and validation
+  describe('Density', () => {
+    it('applies default density', () => {
+      const wrapper = mount(Checkbox);
+      expect(wrapper.find('.density-default').exists()).toBe(true);
+    });
+
+    it('applies comfortable density', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          density: 'comfortable'
+        }
+      });
+      
+      expect(wrapper.find('.density-comfortable').exists()).toBe(true);
+      expect(wrapper.vm.density).toBe('comfortable');
+    });
+
+    it('applies compact density', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          density: 'compact'
+        }
+      });
+      
+      expect(wrapper.find('.density-compact').exists()).toBe(true);
+      expect(wrapper.vm.density).toBe('compact');
+    });
+
+    it('validates density prop with valid values', () => {
+      const validValues = ['comfortable', 'default', 'compact'];
+      
+      validValues.forEach(density => {
+        expect(() => {
+          mount(Checkbox, {
+            props: { density }
+          });
+        }).not.toThrow();
+      });
+    });
+  });
+
+  // Test custom value prop
+  describe('Value Prop', () => {
+    it('uses custom value', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          value: 'custom-value'
+        }
+      });
+      
+      expect(wrapper.find('input').element.name).toBe('custom-value');
+      expect(wrapper.vm.value).toBe('custom-value');
+    });
+
+    it('uses default value when not provided', () => {
+      const wrapper = mount(Checkbox);
+      
+      expect(wrapper.find('input').element.name).toBe('checkbox');
+      expect(wrapper.vm.value).toBe('checkbox');
+    });
+  });
+
+  // Test events
+  describe('Events', () => {
+    it('emits update:modelValue on change', async () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          modelValue: false,
+          value: 'test'
+        }
+      });
+
+      const input = wrapper.find('input');
+      await input.setValue(true);
+
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    });
+
+    it('emits input-error event with correct payload', async () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          modelValue: false,
+          value: 'test-checkbox'
+        }
+      });
+
+      const input = wrapper.find('input');
+      await input.setValue(true);
+
+      expect(wrapper.emitted('input-error')).toBeTruthy();
+      expect(wrapper.emitted('input-error')?.[0]).toEqual([{ id: 'test-checkbox', isError: false }]);
+    });
+
+    it('emits input-error with isError: true when unchecked', async () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          modelValue: true,
+          value: 'test-checkbox'
+        }
+      });
+
+      const input = wrapper.find('input');
+      await input.setValue(false);
+
+      expect(wrapper.emitted('input-error')?.[0]).toEqual([{ id: 'test-checkbox', isError: true }]);
+    });
+
+    it('does not emit events when disabled', async () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          disabled: true,
+          modelValue: false
+        }
+      });
+
+      const input = wrapper.find('input');
+      
+      // Try to trigger change event on disabled input
+      await input.trigger('change');
+
+      // Events should not be emitted for disabled checkbox
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+      expect(wrapper.emitted('input-error')).toBeFalsy();
+    });
+  });
+
+  // Test computed properties
+  describe('Computed Properties', () => {
+    it('computes labelClasses correctly', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          success: true,
+          error: false,
+          disabled: false
+        }
+      });
+      
+      const labelClasses = wrapper.vm.labelClasses;
+      expect(labelClasses.label).toBe(true);
+      expect(labelClasses['label-success']).toBe(true);
+      expect(labelClasses['label-error']).toBe(false);
+      expect(labelClasses['label-disabled']).toBe(false);
+    });
+
+    it('computes inputClasses correctly', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          success: false,
+          error: true,
+          disabled: false,
+          density: 'compact'
+        }
+      });
+      
+      const inputClasses = wrapper.vm.inputClasses;
+      expect(inputClasses['input-checkbox']).toBe(true);
+      expect(inputClasses['input-success']).toBe(false);
+      expect(inputClasses['input-error']).toBe(true);
+      expect(inputClasses['input-disabled']).toBe(false);
+      expect(inputClasses['density-compact']).toBe(true);
+    });
+  });
+
+  // Test accessibility
+  describe('Accessibility', () => {
+    it('has proper label association', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          label: 'Accessible checkbox',
+          value: 'accessible'
+        }
+      });
+      
+      const label = wrapper.find('label');
+      const input = wrapper.find('input');
+      
+      expect(label.exists()).toBe(true);
+      expect(input.element.name).toBe('accessible');
+      expect(wrapper.text()).toContain('Accessible checkbox');
+    });
+
+    it('maintains accessibility when disabled', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          label: 'Disabled checkbox',
+          disabled: true
+        }
+      });
+      
+      expect(wrapper.find('input').element.disabled).toBe(true);
+      expect(wrapper.text()).toContain('Disabled checkbox');
+    });
+
+    it('has data-testid for testing', () => {
+      const wrapper = mount(Checkbox);
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+  });
+
+  // Test edge cases
+  describe('Edge Cases', () => {
+    it('handles empty label', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          label: ''
+        }
+      });
+      
+      expect(wrapper.text().trim()).toBe('');
+    });
+
+    it('handles undefined label', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          label: undefined
+        }
+      });
+      
+      expect(wrapper.vm.label).toBeUndefined();
+    });
+
+    it('handles large arrays in modelValue', () => {
+      const largeArray = Array.from({ length: 1000 }, (_, i) => `option${i}`);
+      const wrapper = mount(Checkbox, {
+        props: {
+          modelValue: largeArray,
+          value: 'option500'
+        }
+      });
+      
+      expect(wrapper.vm.isChecked).toBe(true);
+    });
+
+    it('handles special characters in value', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          value: 'special!@#$%^&*()_+{}|:"<>?`~value',
+          modelValue: []
+        }
+      });
+      
+      expect(wrapper.vm.value).toBe('special!@#$%^&*()_+{}|:"<>?`~value');
+    });
+
+    it('handles rapid state changes', async () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          modelValue: [],
+          value: 'rapid-test'
+        }
+      });
+
+      const input = wrapper.find('input');
+      
+      // Rapid changes
+      await input.setValue(true);
+      await input.setValue(false);
+      await input.setValue(true);
+
+      expect(wrapper.emitted('update:modelValue')).toHaveLength(3);
+      expect(wrapper.emitted('input-error')).toHaveLength(3);
+    });
+  });
+
+  // Test complex scenarios
+  describe('Complex Scenarios', () => {
+    it('works with all props combined', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          label: 'Complex checkbox',
+          success: false,
+          error: true,
+          disabled: false,
+          value: 'complex-value',
+          modelValue: ['other-value', 'complex-value'],
+          density: 'comfortable'
+        }
+      });
+      
+      expect(wrapper.vm.isChecked).toBe(true);
+      expect(wrapper.find('.label-error').exists()).toBe(true);
+      expect(wrapper.find('.density-comfortable').exists()).toBe(true);
+      expect(wrapper.text()).toBe('Complex checkbox');
+    });
+
+    it('handles switching between array and boolean modelValue types', async () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          modelValue: [],
+          value: 'test'
+        }
+      });
+
+      expect(wrapper.vm.isChecked).toBe(false);
+
+      // Switch to boolean
+      await wrapper.setProps({ modelValue: true });
+      expect(wrapper.vm.isChecked).toBe(true);
+
+      // Switch back to array
+      await wrapper.setProps({ modelValue: ['test'] });
+      expect(wrapper.vm.isChecked).toBe(true);
+
+      await wrapper.setProps({ modelValue: [] });
+      expect(wrapper.vm.isChecked).toBe(false);
+    });
+  });
 });