@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +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);
+    });
+  });
+});