@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +1,691 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import DateInput from '@components/DateInput/DateInput.vue';
+import { parse, format, isValid } from 'date-fns';
+
+// Mock vue-i18n
+const mockT = vi.fn().mockImplementation((key: string, defaultValue?: string | { date: string }) => {
+  const translations: Record<string, string> = {
+    'wl.date_input.placeholder': 'DD.MM.YYYY',
+    'wl.date_input.invalid_date': 'Please enter a valid date',
+    'wl.date_input.max_date_error': 'Date must be before {{date}}',
+    'wl.date_input.min_date_error': 'Date must be after {{date}}'
+  };
+  
+  if (typeof defaultValue === 'object' && defaultValue.date) {
+    return translations[key]?.replace('{{date}}', defaultValue.date) || key;
+  }
+  
+  return translations[key] || defaultValue || key;
+});
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: mockT
+  })
+}));
+
+describe('DateInput', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Test default behavior and rendering
+  describe('Default Behavior', () => {
+    it('renders with default props', () => {
+      const wrapper = mount(DateInput);
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.wl-date-input').exists()).toBe(true);
+      expect(wrapper.vm.layout).toBe('default');
+      expect(wrapper.vm.variant).toBe('outlined');
+      expect(wrapper.vm.modelValue).toBeNull();
+      expect(wrapper.vm.formattedDate).toBe('');
+      expect(wrapper.vm.inputState).toBe('idle');
+      expect(wrapper.vm.inputMessage).toBe('');
+    });
+
+    it('uses i18n placeholder when no placeholder prop provided', () => {
+      const wrapper = mount(DateInput);
+      expect(mockT).toHaveBeenCalledWith('wl.date_input.placeholder', 'TT.MM.JJJJ');
+      expect(wrapper.vm.placeholder).toBe('DD.MM.YYYY');
+    });
+
+    it('uses provided placeholder over i18n default', () => {
+      const wrapper = mount(DateInput, {
+        props: {
+          placeholder: 'Custom placeholder'
+        }
+      });
+      
+      expect(wrapper.vm.placeholder).toBe('Custom placeholder');
+    });
+
+    it('applies edit-field layout class', () => {
+      const wrapper = mount(DateInput, {
+        props: {
+          layout: 'edit-field'
+        }
+      });
+      
+      expect(wrapper.find('.edit-layout').exists()).toBe(true);
+      expect(wrapper.vm.layout).toBe('edit-field');
+    });
+  });
+
+  // Test v-model functionality
+  describe('v-model', () => {
+    it('initializes formattedDate with valid ISO date', () => {
+      const isoDate = '2023-12-25T10:30:00.000Z';
+      const wrapper = mount(DateInput, {
+        props: {
+          modelValue: isoDate
+        }
+      });
+      
+      expect(wrapper.vm.formattedDate).toBe('25.12.2023');
+    });
+
+    it('handles null modelValue', () => {
+      const wrapper = mount(DateInput, {
+        props: {
+          modelValue: null
+        }
+      });
+      
+      expect(wrapper.vm.formattedDate).toBe('');
+    });
+
+    it('handles invalid ISO date string', () => {
+      const wrapper = mount(DateInput, {
+        props: {
+          modelValue: 'invalid-date'
+        }
+      });
+      
+      expect(wrapper.vm.formattedDate).toBe('');
+    });
+
+    it('updates formattedDate when modelValue prop changes', async () => {
+      const wrapper = mount(DateInput, {
+        props: {
+          modelValue: '2023-01-15T00:00:00.000Z'
+        }
+      });
+      
+      expect(wrapper.vm.formattedDate).toBe('15.01.2023');
+      
+      await wrapper.setProps({ modelValue: '2023-12-25T00:00:00.000Z' });
+      
+      expect(wrapper.vm.formattedDate).toBe('25.12.2023');
+    });
+
+    it('emits update:modelValue with ISO string when valid date entered', async () => {
+      const wrapper = mount(DateInput);
+      
+      // Mock the onDateInput method to simulate user input
+      const mockEvent = {
+        target: { value: '25122023' }
+      } as unknown as Event;
+      
+      wrapper.vm.onDateInput(mockEvent);
+      
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      const emittedValue = wrapper.emitted('update:modelValue')?.[0]?.[0];
+      expect(emittedValue).toContain('2023-12-25');
+    });
+  });
+
+  // Test date formatting and parsing
+  describe('Date Formatting', () => {
+    it('formats date input correctly as user types', async () => {
+      const wrapper = mount(DateInput);
+      
+      // Test progressive input formatting
+      let mockEvent = { target: { value: '25' } } as unknown as Event;
+      wrapper.vm.onDateInput(mockEvent);
+      expect(wrapper.vm.formattedDate).toBe('25');
+      
+      mockEvent = { target: { value: '251' } } as unknown as Event;
+      wrapper.vm.onDateInput(mockEvent);
+      expect(wrapper.vm.formattedDate).toBe('25.1');
+      
+      mockEvent = { target: { value: '2512' } } as unknown as Event;
+      wrapper.vm.onDateInput(mockEvent);
+      expect(wrapper.vm.formattedDate).toBe('25.12');
+      
+      mockEvent = { target: { value: '25122' } } as unknown as Event;
+      wrapper.vm.onDateInput(mockEvent);
+      expect(wrapper.vm.formattedDate).toBe('25.12.2');
+      
+      mockEvent = { target: { value: '251220' } } as unknown as Event;
+      wrapper.vm.onDateInput(mockEvent);
+      expect(wrapper.vm.formattedDate).toBe('25.12.20');
+      
+      mockEvent = { target: { value: '25122023' } } as unknown as Event;
+      wrapper.vm.onDateInput(mockEvent);
+      expect(wrapper.vm.formattedDate).toBe('25.12.2023');
+    });
+
+    it('removes non-digit characters', async () => {
+      const wrapper = mount(DateInput);
+      
+      const mockEvent = {
+        target: { value: '2a5b.1c2d.2e0f2g3h' }
+      } as unknown as Event;
+      
+      wrapper.vm.onDateInput(mockEvent);
+      expect(wrapper.vm.formattedDate).toBe('25.12.2023');
+    });
+
+    it('limits input to 10 characters', async () => {
+      const wrapper = mount(DateInput);
+      
+      const mockEvent = {
+        target: { value: '2512202312345' }
+      } as unknown as Event;
+      
+      wrapper.vm.onDateInput(mockEvent);
+      expect(wrapper.vm.formattedDate).toBe('25.12.2023');
+    });
+
+    it('computes isoValue correctly from formatted date', () => {
+      const wrapper = mount(DateInput);
+      wrapper.vm.formattedDate = '25.12.2023';
+      
+      expect(wrapper.vm.isoValue).toBe('2023-12-25');
+    });
+
+    it('returns empty isoValue for invalid formatted date', () => {
+      const wrapper = mount(DateInput);
+      wrapper.vm.formattedDate = '32.13.2023'; // Invalid date
+      
+      expect(wrapper.vm.isoValue).toBe('');
+    });
+  });
+
+  // Test date validation
+  describe('Date Validation', () => {
+    it('sets error state for invalid date', async () => {
+      const wrapper = mount(DateInput);
+      
+      const mockEvent = {
+        target: { value: '32122023' } // Invalid day
+      } as unknown as Event;
+      
+      wrapper.vm.onDateInput(mockEvent);
+      
+      expect(wrapper.vm.inputState).toBe('error');
+      expect(wrapper.vm.inputMessage).toBe('Please enter a valid date');
+    });
+
+    it('sets success state for valid date', async () => {
+      const wrapper = mount(DateInput);
+      
+      const mockEvent = {
+        target: { value: '25122023' }
+      } as unknown as Event;
+      
+      wrapper.vm.onDateInput(mockEvent);
+      
+      expect(wrapper.vm.inputState).toBe('success');
+      expect(wrapper.vm.inputMessage).toBe('');
+    });
+
+    it('resets state for incomplete date', async () => {
+      const wrapper = mount(DateInput);
+      
+      // First enter complete date
+      let mockEvent = {
+        target: { value: '25122023' }
+      } as unknown as Event;
+      wrapper.vm.onDateInput(mockEvent);
+      expect(wrapper.vm.inputState).toBe('success');
+      
+      // Then enter incomplete date
+      mockEvent = {
+        target: { value: '251220' }
+      } as unknown as Event;
+      wrapper.vm.onDateInput(mockEvent);
+      
+      expect(wrapper.vm.inputState).toBe('idle');
+      expect(wrapper.vm.inputMessage).toBe('');
+    });
+  });
+
+  // Test min/max date validation
+  describe('Min/Max Date Validation', () => {
+    it('validates against minDate', async () => {
+      const minDate = new Date('2023-12-20');
+      const wrapper = mount(DateInput, {
+        props: {
+          minDate,
+          minDateErrorMessage: 'Date must be after minimum'
+        }
+      });
+      
+      // Try to enter date before minDate
+      const mockEvent = {
+        target: { value: '15122023' } // 15.12.2023 is before 20.12.2023
+      } as unknown as Event;
+      
+      wrapper.vm.onDateInput(mockEvent);
+      
+      expect(wrapper.vm.inputState).toBe('error');
+      expect(wrapper.vm.inputMessage).toBe('Date must be after minimum');
+    });
+
+    it('validates against maxDate', async () => {
+      const maxDate = new Date('2023-12-20');
+      const wrapper = mount(DateInput, {
+        props: {
+          maxDate,
+          maxDateErrorMessage: 'Date must be before maximum'
+        }
+      });
+      
+      // Try to enter date after maxDate
+      const mockEvent = {
+        target: { value: '25122023' } // 25.12.2023 is after 20.12.2023
+      } as unknown as Event;
+      
+      wrapper.vm.onDateInput(mockEvent);
+      
+      expect(wrapper.vm.inputState).toBe('error');
+      expect(wrapper.vm.inputMessage).toBe('Date must be before maximum');
+    });
+
+    it('accepts date within min/max range', async () => {
+      const minDate = new Date('2023-12-15');
+      const maxDate = new Date('2023-12-25');
+      const wrapper = mount(DateInput, {
+        props: {
+          minDate,
+          maxDate
+        }
+      });
+      
+      const mockEvent = {
+        target: { value: '20122023' } // 20.12.2023 is between min and max
+      } as unknown as Event;
+      
+      wrapper.vm.onDateInput(mockEvent);
+      
+      expect(wrapper.vm.inputState).toBe('success');
+      expect(wrapper.vm.inputMessage).toBe('');
+    });
+
+    it('computes nativeMin and nativeMax correctly', () => {
+      const minDate = new Date('2023-12-15');
+      const maxDate = new Date('2023-12-25');
+      const wrapper = mount(DateInput, {
+        props: {
+          minDate,
+          maxDate
+        }
+      });
+      
+      expect(wrapper.vm.nativeMin).toBe('2023-12-15');
+      expect(wrapper.vm.nativeMax).toBe('2023-12-25');
+    });
+
+    it('handles invalid min/max dates', () => {
+      const wrapper = mount(DateInput, {
+        props: {
+          minDate: new Date('invalid'),
+          maxDate: new Date('invalid')
+        }
+      });
+      
+      expect(wrapper.vm.nativeMin).toBe('');
+      expect(wrapper.vm.nativeMax).toBe('');
+    });
+  });
+
+  // Test native date picker integration
+  describe('Native Date Picker', () => {
+    it('renders native date input', () => {
+      const wrapper = mount(DateInput);
+      
+      expect(wrapper.find('input[type="date"]').exists()).toBe(true);
+      expect(wrapper.find('.native-date').exists()).toBe(true);
+      expect(wrapper.find('.date-wrapper').exists()).toBe(true);
+      expect(wrapper.find('.date-icon').exists()).toBe(true);
+    });
+
+    it('handles native date change', async () => {
+      const wrapper = mount(DateInput);
+      
+      // Mock the native input element
+      const mockNativeDate = {
+        value: '2023-12-25'
+      };
+      wrapper.vm.nativeDate = mockNativeDate as any;
+      
+      const mockEvent = {} as Event;
+      wrapper.vm.onNativeDateChange(mockEvent);
+      
+      expect(wrapper.vm.formattedDate).toBe('25.12.2023');
+    });
+
+    it('handles native date change with edit-field layout', async () => {
+      const wrapper = mount(DateInput, {
+        props: {
+          layout: 'edit-field'
+        }
+      });
+      
+      // Get the real inputRef methods and spy on them
+      const inputRef = wrapper.vm.inputRef;
+      const focusSpy = vi.spyOn(inputRef, 'focus');
+      const blurSpy = vi.spyOn(inputRef, 'blur');
+      
+      // Mock the native input element
+      const mockNativeDate = {
+        value: '2023-12-25'
+      };
+      wrapper.vm.nativeDate = mockNativeDate as any;
+      
+      const mockEvent = {} as Event;
+      wrapper.vm.onNativeDateChange(mockEvent);
+      
+      await nextTick();
+      
+      expect(focusSpy).toHaveBeenCalled();
+      expect(blurSpy).toHaveBeenCalled();
+    });
+
+    it('sets native input attributes correctly', () => {
+      const minDate = new Date('2023-12-01');
+      const maxDate = new Date('2023-12-31');
+      const wrapper = mount(DateInput, {
+        props: {
+          minDate,
+          maxDate,
+          modelValue: '2023-12-15T10:30:00.000Z'
+        }
+      });
+      
+      const nativeInput = wrapper.find('input[type="date"]');
+      expect(nativeInput.attributes('min')).toBe('2023-12-01');
+      expect(nativeInput.attributes('max')).toBe('2023-12-31');
+      expect(nativeInput.attributes('value')).toBe('2023-12-15');
+    });
+  });
+
+  // Test parseDateWithCurrentTime function
+  describe('Date Parsing with Current Time', () => {
+    it('preserves current time when parsing date', () => {
+      const wrapper = mount(DateInput);
+      const now = new Date();
+      
+      // Use today's date to avoid large time differences
+      const todayFormatted = `${now.getDate().toString().padStart(2, '0')}.${(now.getMonth() + 1).toString().padStart(2, '0')}.${now.getFullYear()}`;
+      const result = wrapper.vm.parseDateWithCurrentTime(todayFormatted);
+      
+      expect(result.getDate()).toBe(now.getDate());
+      expect(result.getMonth()).toBe(now.getMonth());
+      expect(result.getFullYear()).toBe(now.getFullYear());
+      
+      // Time should be close to current time (within a few seconds)
+      const timeDiff = Math.abs(result.getTime() - now.getTime());
+      expect(timeDiff).toBeLessThan(5000); // Less than 5 seconds difference
+    });
+  });
+
+  // Test layout-specific behavior
+  describe('Layout Behavior', () => {
+    it('shows success state and messages in default layout', () => {
+      const wrapper = mount(DateInput, {
+        props: {
+          layout: 'default'
+        }
+      });
+      
+      expect(wrapper.vm.isDefaultLayout).toBe(true);
+      
+      // Set success state
+      wrapper.vm.inputState = 'success';
+      wrapper.vm.inputMessage = 'Success message';
+      
+      expect(wrapper.vm.isDefaultLayout).toBe(true);
+    });
+
+    it('hides success state in edit-field layout', () => {
+      const wrapper = mount(DateInput, {
+        props: {
+          layout: 'edit-field'
+        }
+      });
+      
+      expect(wrapper.vm.isDefaultLayout).toBe(false);
+    });
+  });
+
+  // Test exposed methods
+  describe('Exposed Methods', () => {
+    it('exposes focus, blur, and select methods', () => {
+      const wrapper = mount(DateInput);
+      
+      expect(wrapper.vm.focus).toBeDefined();
+      expect(wrapper.vm.blur).toBeDefined();
+      expect(wrapper.vm.select).toBeDefined();
+      expect(typeof wrapper.vm.focus).toBe('function');
+      expect(typeof wrapper.vm.blur).toBe('function');
+      expect(typeof wrapper.vm.select).toBe('function');
+    });
+
+    it('calls inputRef methods when exposed methods are called', () => {
+      const wrapper = mount(DateInput);
+      
+      const mockInputRef = {
+        focus: vi.fn(),
+        blur: vi.fn(),
+        select: vi.fn()
+      };
+      wrapper.vm.inputRef = mockInputRef as any;
+      
+      wrapper.vm.focus();
+      wrapper.vm.blur();
+      wrapper.vm.select();
+      
+      expect(mockInputRef.focus).toHaveBeenCalled();
+      expect(mockInputRef.blur).toHaveBeenCalled();
+      expect(mockInputRef.select).toHaveBeenCalled();
+    });
+  });
+
+  // Test computed properties
+  describe('Computed Properties', () => {
+    it('computes error messages correctly with i18n', () => {
+      const wrapper = mount(DateInput, {
+        props: {
+          invalidDateErrorMessage: 'Custom invalid message'
+        }
+      });
+      
+      expect(wrapper.vm.invalidDateMessage).toBe('Custom invalid message');
+    });
+
+    it('uses i18n for error messages when not provided', () => {
+      mockT.mockClear();
+      const wrapper = mount(DateInput);
+      
+      // The component will call multiple i18n keys, let's verify invalidDateMessage works
+      expect(wrapper.vm.invalidDateMessage).toBe('Please enter a valid date');
+      expect(mockT).toHaveBeenCalledWith('wl.date_input.invalid_date', 'Bitte ein gültiges Datum eingeben');
+    });
+
+    it('computes min/max date messages with formatted dates', () => {
+      const minDate = new Date('2023-12-01');
+      const maxDate = new Date('2023-12-31');
+      
+      const wrapper = mount(DateInput, {
+        props: {
+          minDate,
+          maxDate
+        }
+      });
+      
+      expect(wrapper.vm.minDateMessage).toContain('01.12.2023');
+      expect(wrapper.vm.maxDateMessage).toContain('31.12.2023');
+    });
+  });
+
+  // Test accessibility
+  describe('Accessibility', () => {
+    it('has proper input attributes', () => {
+      const wrapper = mount(DateInput);
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('input[type="tel"]').exists()).toBe(true);
+      expect(wrapper.find('input[id="date-input"]').exists()).toBe(true);
+    });
+
+    it('has keyboard navigation for date picker', () => {
+      const wrapper = mount(DateInput);
+      
+      const dateWrapper = wrapper.find('.date-wrapper');
+      expect(dateWrapper.attributes('tabindex')).toBe('0');
+    });
+
+    it('shows calendar icon', () => {
+      const wrapper = mount(DateInput);
+      
+      const calendarIcon = wrapper.find('[icon="heroicons:calendar"]');
+      expect(calendarIcon.exists()).toBe(true);
+    });
+  });
+
+  // Test edge cases
+  describe('Edge Cases', () => {
+    it('handles leap year dates', async () => {
+      const wrapper = mount(DateInput);
+      
+      const mockEvent = {
+        target: { value: '29022024' } // Feb 29, 2024 (leap year)
+      } as unknown as Event;
+      
+      wrapper.vm.onDateInput(mockEvent);
+      
+      expect(wrapper.vm.inputState).toBe('success');
+      expect(wrapper.vm.formattedDate).toBe('29.02.2024');
+    });
+
+    it('handles invalid leap year dates', async () => {
+      const wrapper = mount(DateInput);
+      
+      const mockEvent = {
+        target: { value: '29022023' } // Feb 29, 2023 (not a leap year)
+      } as unknown as Event;
+      
+      wrapper.vm.onDateInput(mockEvent);
+      
+      expect(wrapper.vm.inputState).toBe('error');
+    });
+
+    it('handles edge case dates like December 31', async () => {
+      const wrapper = mount(DateInput);
+      
+      const mockEvent = {
+        target: { value: '31122023' }
+      } as unknown as Event;
+      
+      wrapper.vm.onDateInput(mockEvent);
+      
+      expect(wrapper.vm.inputState).toBe('success');
+      expect(wrapper.vm.formattedDate).toBe('31.12.2023');
+    });
+
+    it('handles year 2000 (Y2K)', async () => {
+      const wrapper = mount(DateInput);
+      
+      const mockEvent = {
+        target: { value: '01012000' }
+      } as unknown as Event;
+      
+      wrapper.vm.onDateInput(mockEvent);
+      
+      expect(wrapper.vm.inputState).toBe('success');
+      expect(wrapper.vm.formattedDate).toBe('01.01.2000');
+    });
+
+    it('handles various invalid dates', async () => {
+      const wrapper = mount(DateInput);
+      
+      // Use formatted invalid dates that would actually be input by users
+      const invalidDates = [
+        '32.01.2023', // Invalid day
+        '01.13.2023', // Invalid month
+        '30.02.2023', // Invalid date (February 30th)
+        '00.01.2023', // Invalid day (0)
+        '01.00.2023'  // Invalid month (0)
+      ];
+      
+      for (const invalidDate of invalidDates) {
+        const mockEvent = {
+          target: { value: invalidDate }
+        } as unknown as Event;
+        
+        wrapper.vm.onDateInput(mockEvent);
+        expect(wrapper.vm.inputState).toBe('error');
+      }
+    });
+  });
+
+  // Test complex scenarios
+  describe('Complex Scenarios', () => {
+    it('works with all props combined', () => {
+      const minDate = new Date('2023-01-01');
+      const maxDate = new Date('2023-12-31');
+      
+      const wrapper = mount(DateInput, {
+        props: {
+          modelValue: '2023-06-15T10:30:00.000Z',
+          layout: 'edit-field',
+          minDate,
+          maxDate,
+          variant: 'filled',
+          placeholder: 'Enter date here',
+          invalidDateErrorMessage: 'Custom invalid message',
+          minDateErrorMessage: 'Custom min error',
+          maxDateErrorMessage: 'Custom max error'
+        }
+      });
+      
+      expect(wrapper.vm.formattedDate).toBe('15.06.2023');
+      expect(wrapper.vm.layout).toBe('edit-field');
+      expect(wrapper.vm.variant).toBe('filled');
+      expect(wrapper.vm.placeholder).toBe('Enter date here');
+      expect(wrapper.vm.nativeMin).toBe('2023-01-01');
+      expect(wrapper.vm.nativeMax).toBe('2023-12-31');
+      expect(wrapper.find('.edit-layout').exists()).toBe(true);
+    });
+
+    it('handles switching between valid and invalid states', async () => {
+      const wrapper = mount(DateInput);
+      
+      // Start with valid date
+      let mockEvent = {
+        target: { value: '15062023' }
+      } as unknown as Event;
+      wrapper.vm.onDateInput(mockEvent);
+      expect(wrapper.vm.inputState).toBe('success');
+      
+      // Change to invalid date
+      mockEvent = {
+        target: { value: '32062023' }
+      } as unknown as Event;
+      wrapper.vm.onDateInput(mockEvent);
+      expect(wrapper.vm.inputState).toBe('error');
+      
+      // Back to valid date
+      mockEvent = {
+        target: { value: '15062023' }
+      } as unknown as Event;
+      wrapper.vm.onDateInput(mockEvent);
+      expect(wrapper.vm.inputState).toBe('success');
+    });
+  });
+});