@keenthemes/ktui 1.0.28 → 1.1.0

package/src/components/datepicker/__tests__/datepicker-integration.test.ts

@@ -0,0 +1,435 @@
+/**
+ * datepicker-integration.test.ts - Integration tests for KTDatepicker
+ * Tests backward compatibility, configuration options, and real-world usage patterns
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { KTDatepicker } from '../datepicker';
+import { KTDatepickerConfig } from '../config/types';
+
+describe('KTDatepicker Integration', () => {
+  let element: HTMLElement;
+
+  beforeEach(() => {
+    // Create a fresh element for each test
+    element = document.createElement('div');
+    element.innerHTML = `
+      <div class="kt-datepicker" data-kt-datepicker-segmented>
+        <input type="text" data-kt-datepicker-input placeholder="Select date">
+      </div>
+    `;
+
+    // Clear any existing content and add our test element
+    document.body.innerHTML = '';
+    document.body.appendChild(element);
+  });
+
+  describe('Configuration Options', () => {
+    it('should accept all configuration options without errors', () => {
+      const config: KTDatepickerConfig = {
+        format: 'dd/MM/yyyy',
+        range: false,
+        multiDate: false,
+        minDate: new Date(2024, 0, 1),
+        maxDate: new Date(2024, 11, 31),
+        disabled: false,
+        locale: 'en-US',
+        placeholder: 'Select a date',
+        value: new Date(2024, 0, 15),
+        showOnFocus: true,
+        closeOnSelect: true,
+        closeOnOutsideClick: true,
+        visibleMonths: 1,
+        enableTime: false,
+        timeGranularity: 'minute',
+        timeFormat: '24h',
+        minTime: '00:00',
+        maxTime: '23:59',
+        timeStep: 1,
+        dropdownPlacement: 'bottom-start',
+        dropdownOffset: '0,8',
+        dropdownBoundary: 'clippingParents',
+        dropdownWidth: 'auto',
+        dropdownZindex: 9999,
+        classes: {
+          container: 'custom-container',
+          inputWrapper: 'custom-input-wrapper'
+        },
+        onChange: vi.fn(),
+        onOpen: vi.fn(),
+        onClose: vi.fn()
+      };
+
+      expect(() => {
+        new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
+      }).not.toThrow();
+    });
+
+    it('should work with minimal configuration', () => {
+      const config: KTDatepickerConfig = {
+        format: 'yyyy-MM-dd'
+      };
+
+      expect(() => {
+        const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
+        expect(datepicker).toBeDefined();
+      }).not.toThrow();
+    });
+
+    it('should handle undefined configuration', () => {
+      expect(() => {
+        const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, undefined);
+        expect(datepicker).toBeDefined();
+      }).not.toThrow();
+    });
+  });
+
+  describe('DOM Integration', () => {
+    it('should create proper DOM structure', () => {
+      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!);
+
+      // Should have created input wrapper
+      const inputWrapper = element.querySelector('[data-kt-datepicker-input-wrapper]');
+      expect(inputWrapper).toBeTruthy();
+
+      // Should have segmented input elements
+      const segments = element.querySelectorAll('[data-segment]');
+      expect(segments.length).toBeGreaterThan(0);
+
+      // Dropdown is created lazily when opened
+      datepicker.open();
+      // Wait a bit for DOM updates
+      return new Promise(resolve => {
+        setTimeout(() => {
+          const dropdown = document.querySelector('[data-kt-datepicker-dropdown]');
+          expect(dropdown).toBeTruthy();
+          resolve(void 0);
+        }, 10);
+      });
+    });
+
+    it('should handle existing input element', () => {
+      // Element already has input in beforeEach
+      const existingInput = element.querySelector('input');
+      expect(existingInput).toBeTruthy(); // Input should exist before datepicker creation
+
+      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!);
+
+      // In segmented mode, the input is processed and segmented UI is created
+      // Check that segmented input elements were created (this is the expected behavior)
+      const segmentedElements = element.querySelectorAll('[data-segment]');
+      expect(segmentedElements.length).toBeGreaterThan(0);
+
+      // Verify datepicker was created successfully
+      expect(datepicker).toBeDefined();
+    });
+
+    it('should create input element if none exists', () => {
+      // Create a fresh element without input
+      const testElement = document.createElement('div');
+      testElement.innerHTML = `
+        <div class="kt-datepicker" data-kt-datepicker-segmented>
+        </div>
+      `;
+      document.body.appendChild(testElement);
+
+      const datepicker = new KTDatepicker(testElement.querySelector('.kt-datepicker')!);
+
+      // Should have created new input - it might be in the document root or moved
+      const newInput = document.querySelector('input[data-kt-datepicker-input]');
+      expect(newInput).toBeTruthy();
+
+      // Cleanup
+      document.body.removeChild(testElement);
+    });
+  });
+
+  describe('Data Attributes', () => {
+    it('should read data attributes for configuration', () => {
+      element.innerHTML = `
+        <div class="kt-datepicker"
+             data-kt-datepicker-segmented
+             data-kt-datepicker-show-on-focus="false"
+             data-kt-datepicker-close-on-select="false"
+             data-kt-datepicker-enable-time="true"
+             data-kt-datepicker-range="true"
+             data-kt-datepicker-close-on-outside-click="false">
+          <input type="text" data-kt-datepicker-input>
+        </div>
+      `;
+
+      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!);
+
+      // Note: We can't easily test internal config, but the component should initialize without errors
+      expect(datepicker).toBeDefined();
+    });
+
+    it('should parse JSON config from data attribute', () => {
+      const jsonConfig = {
+        format: 'MM/dd/yyyy',
+        disabled: true,
+        placeholder: 'Custom placeholder'
+      };
+
+      element.innerHTML = `
+        <div class="kt-datepicker"
+             data-kt-datepicker-config='${JSON.stringify(jsonConfig)}'>
+          <input type="text" data-kt-datepicker-input>
+        </div>
+      `;
+
+      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!);
+
+      expect(datepicker).toBeDefined();
+    });
+
+    it('should handle invalid JSON config gracefully', () => {
+      element.innerHTML = `
+        <div class="kt-datepicker"
+             data-kt-datepicker-config='{invalid json}'>
+          <input type="text" data-kt-datepicker-input>
+        </div>
+      `;
+
+      expect(() => {
+        new KTDatepicker(element.querySelector('.kt-datepicker')!);
+      }).not.toThrow();
+    });
+  });
+
+  describe('Range Mode', () => {
+    it('should initialize in range mode', () => {
+      const config: KTDatepickerConfig = {
+        range: true,
+        format: 'dd/MM/yyyy'
+      };
+
+      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
+
+      expect(datepicker).toBeDefined();
+    });
+
+    it('should handle range value initialization', () => {
+      const config: KTDatepickerConfig = {
+        range: true,
+        format: 'dd/MM/yyyy',
+        valueRange: {
+          start: new Date(2024, 0, 15),
+          end: new Date(2024, 0, 20)
+        }
+      };
+
+      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
+
+      expect(datepicker).toBeDefined();
+    });
+  });
+
+  describe('Multi-Date Mode', () => {
+    it('should initialize in multi-date mode', () => {
+      const config: KTDatepickerConfig = {
+        multiDate: true,
+        format: 'dd/MM/yyyy'
+      };
+
+      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
+
+      expect(datepicker).toBeDefined();
+    });
+
+    it('should handle multiple values initialization', () => {
+      const config: KTDatepickerConfig = {
+        multiDate: true,
+        format: 'dd/MM/yyyy',
+        values: [
+          new Date(2024, 0, 15),
+          new Date(2024, 0, 20),
+          new Date(2024, 0, 25)
+        ]
+      };
+
+      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
+
+      expect(datepicker).toBeDefined();
+    });
+  });
+
+  describe('Time Picker', () => {
+    it('should initialize with time picker enabled', () => {
+      const config: KTDatepickerConfig = {
+        enableTime: true,
+        timeFormat: '12h',
+        format: 'dd/MM/yyyy'
+      };
+
+      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
+
+      expect(datepicker).toBeDefined();
+    });
+
+    it('should handle time constraints', () => {
+      const config: KTDatepickerConfig = {
+        enableTime: true,
+        format: 'dd/MM/yyyy',
+        minTime: '09:00',
+        maxTime: '17:00',
+        timeStep: 30
+      };
+
+      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
+
+      expect(datepicker).toBeDefined();
+    });
+
+    it('should preserve time when selecting dates from calendar after setting time via segmented inputs', () => {
+      // Set up datepicker with time enabled
+      const config: KTDatepickerConfig = {
+        enableTime: true,
+        timeFormat: '12h',
+        format: 'dd/MM/yyyy',
+        value: new Date(2024, 10, 15, 10, 30) // Nov 15, 2024, 10:30 AM
+      };
+
+      const datepickerElement = element.querySelector('.kt-datepicker')!;
+      const datepicker = new KTDatepicker(datepickerElement, config);
+
+      // Wait for initialization
+      expect(datepicker).toBeDefined();
+
+      return new Promise<void>((resolve) => {
+        setTimeout(() => {
+          // Simulate segmented input changing time to 3:45 PM
+          const newDateTime = new Date(2024, 10, 15, 15, 45); // Nov 15, 2024, 3:45 PM
+          (datepicker as any)._handleSegmentedInputChange(newDateTime);
+
+          // Wait for state update and verify selectedTime was updated
+          setTimeout(() => {
+            const updatedState = (datepicker as any)._unifiedStateManager.getState();
+            expect(updatedState.selectedTime).toBeTruthy();
+            expect(updatedState.selectedTime.hour).toBe(15); // 3 PM in 24-hour format
+            expect(updatedState.selectedTime.minute).toBe(45);
+            expect(updatedState.selectedDate.getHours()).toBe(15);
+            expect(updatedState.selectedDate.getMinutes()).toBe(45);
+
+            // Now simulate calendar date selection (November 20th)
+            const newDate = new Date(2024, 10, 20); // Nov 20, 2024
+            datepicker.setDate(newDate);
+
+            // Wait for update and verify time is still preserved
+            setTimeout(() => {
+              const finalState = (datepicker as any)._unifiedStateManager.getState();
+              expect(finalState.selectedTime).toBeTruthy();
+              expect(finalState.selectedTime.hour).toBe(15); // Time should still be 3:45 PM
+              expect(finalState.selectedTime.minute).toBe(45);
+              expect(finalState.selectedDate.getDate()).toBe(20); // Date should be 20th
+              expect(finalState.selectedDate.getHours()).toBe(15); // Time should be preserved
+              expect(finalState.selectedDate.getMinutes()).toBe(45);
+
+              resolve();
+            }, 50);
+          }, 50);
+        }, 100);
+      });
+    });
+  });
+
+  describe('Constraints', () => {
+    it('should handle min/max date constraints', () => {
+      const config: KTDatepickerConfig = {
+        format: 'dd/MM/yyyy',
+        minDate: new Date(2024, 0, 1),
+        maxDate: new Date(2024, 11, 31)
+      };
+
+      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
+
+      expect(datepicker).toBeDefined();
+    });
+
+    it('should handle disabled dates array', () => {
+      const config: KTDatepickerConfig = {
+        format: 'dd/MM/yyyy',
+        disabledDates: [
+          new Date(2024, 0, 1), // New Year's Day
+          new Date(2024, 0, 15), // Some holiday
+        ]
+      };
+
+      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
+
+      expect(datepicker).toBeDefined();
+    });
+  });
+
+  describe('Multiple Instances', () => {
+    it('should support multiple independent datepickers', () => {
+      // Create first datepicker
+      const datepicker1 = new KTDatepicker(element.querySelector('.kt-datepicker')!, {
+        format: 'dd/MM/yyyy'
+      });
+
+      // Create second datepicker element
+      const element2 = document.createElement('div');
+      element2.innerHTML = `
+        <div class="kt-datepicker" data-kt-datepicker-segmented>
+          <input type="text" data-kt-datepicker-input placeholder="Select date 2">
+        </div>
+      `;
+      document.body.appendChild(element2);
+
+      // Create second datepicker
+      const datepicker2 = new KTDatepicker(element2.querySelector('.kt-datepicker')!, {
+        format: 'yyyy-MM-dd'
+      });
+
+      // Both should exist independently
+      expect(datepicker1).toBeDefined();
+      expect(datepicker2).toBeDefined();
+
+      // Cleanup
+      document.body.removeChild(element2);
+    });
+  });
+
+  describe('Error Recovery', () => {
+    it('should handle invalid element gracefully', () => {
+      expect(() => {
+        new KTDatepicker(null as any);
+      }).toThrow(); // Should throw for null element
+    });
+
+    it('should handle missing DOM methods gracefully', () => {
+      // Create element without proper DOM methods
+      const mockElement = {
+        querySelector: () => null,
+        setAttribute: vi.fn(),
+        getAttribute: vi.fn()
+      };
+
+      expect(() => {
+        new KTDatepicker(mockElement as any);
+      }).toThrow(); // Should throw when DOM methods fail
+    });
+  });
+
+  describe('Memory Management', () => {
+    it('should clean up event listeners on destruction', () => {
+      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!);
+
+      // Mock the event manager's removeListener method
+      const mockRemoveListener = vi.fn();
+      (datepicker as any)._eventManager = {
+        removeListener: mockRemoveListener,
+        addListener: vi.fn()
+      };
+
+      // Trigger cleanup (this would normally happen on destruction)
+      if ((datepicker as any).dispose) {
+        (datepicker as any).dispose();
+      }
+
+      // Event listeners should be cleaned up
+      // Note: This test assumes a dispose method exists or will be added
+    });
+  });
+});

package/src/components/datepicker/__tests__/datepicker-timezone.test.ts

@@ -0,0 +1,220 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { KTDatepicker } from '../datepicker';
+import { formatDateToLocalString, parseLocalDate } from '../utils/date-utils';
+
+describe('KTDatepicker - Timezone Handling', () => {
+	let container: HTMLElement;
+
+	beforeEach(() => {
+		container = document.createElement('div');
+		container.setAttribute('data-kt-datepicker', '');
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		if (container.parentNode) {
+			document.body.removeChild(container);
+		}
+	});
+
+	describe('Date Selection with Local Timezone', () => {
+		it('should store selected date in local timezone', () => {
+			const datepicker = new KTDatepicker(container);
+			const testDate = new Date(2024, 0, 15, 14, 30, 0); // Jan 15, 2024 2:30 PM
+
+			datepicker.setDate(testDate);
+			const state = datepicker.getState();
+
+			expect(state.selectedDate).toBeDefined();
+			if (state.selectedDate) {
+				// Date should preserve the local date components
+				expect(state.selectedDate.getFullYear()).toBe(2024);
+				expect(state.selectedDate.getMonth()).toBe(0);
+				expect(state.selectedDate.getDate()).toBe(15);
+			}
+		});
+
+		it('should not shift dates when selecting late evening times', () => {
+			const datepicker = new KTDatepicker(container);
+			// Late evening that could shift to next day in UTC
+			const lateEvening = new Date(2024, 0, 15, 23, 30, 0); // Jan 15, 11:30 PM
+
+			datepicker.setDate(lateEvening);
+			const state = datepicker.getState();
+
+			expect(state.selectedDate).toBeDefined();
+			if (state.selectedDate) {
+				// Should still be Jan 15, not shifted to Jan 16
+				expect(state.selectedDate.getDate()).toBe(15);
+				expect(state.selectedDate.getMonth()).toBe(0);
+			}
+		});
+
+		it('should format dates using local timezone in calendar cells', () => {
+			const datepicker = new KTDatepicker(container);
+			const testDate = new Date(2024, 0, 15);
+			datepicker.setDate(testDate);
+			datepicker.open();
+
+			// Wait for dropdown to render
+			const dropdown = container.querySelector('[data-kt-datepicker-dropdown]') as HTMLElement;
+			if (!dropdown) {
+				// If dropdown not found, skip this test (may need async rendering)
+				return;
+			}
+
+			// Find the selected date cell
+			const selectedCell = dropdown.querySelector('[data-kt-selected="true"]') as HTMLElement;
+			if (selectedCell) {
+				// Check that the data-date attribute uses local timezone format
+				const dateAttr = selectedCell.getAttribute('data-date');
+				expect(dateAttr).toBe(formatDateToLocalString(testDate));
+			}
+		});
+	});
+
+	describe('Date Range Selection with Local Timezone', () => {
+		it('should store range dates in local timezone', () => {
+			const datepicker = new KTDatepicker(container, { range: true });
+			const startDate = new Date(2024, 0, 10, 10, 0, 0);
+			const endDate = new Date(2024, 0, 15, 20, 0, 0);
+
+			datepicker.setDate(startDate);
+			datepicker.setDate(endDate);
+
+			const state = datepicker.getState();
+			expect(state.selectedRange).toBeDefined();
+			if (state.selectedRange) {
+				expect(state.selectedRange.start).toBeDefined();
+				expect(state.selectedRange.end).toBeDefined();
+				if (state.selectedRange.start && state.selectedRange.end) {
+					expect(state.selectedRange.start.getDate()).toBe(10);
+					expect(state.selectedRange.end.getDate()).toBe(15);
+				}
+			}
+		});
+
+		it('should format range dates using local timezone in data attributes', () => {
+			const datepicker = new KTDatepicker(container, { range: true });
+			const startDate = new Date(2024, 0, 10);
+			const endDate = new Date(2024, 0, 15);
+
+			datepicker.setDate(startDate);
+			datepicker.setDate(endDate);
+			datepicker.open();
+
+			const dropdown = container.querySelector('[data-kt-datepicker-dropdown]') as HTMLElement;
+			if (!dropdown) return;
+
+			const calendar = dropdown.querySelector('table') as HTMLElement;
+			if (calendar) {
+				// Check range attributes use local timezone format
+				const rangeStart = calendar.getAttribute('data-kt-range-start');
+				const rangeEnd = calendar.getAttribute('data-kt-range-end');
+
+				if (rangeStart && rangeEnd) {
+					expect(rangeStart).toBe(formatDateToLocalString(startDate));
+					expect(rangeEnd).toBe(formatDateToLocalString(endDate));
+				}
+			}
+		});
+
+		it('should parse range dates from attributes using local timezone', () => {
+			const datepicker = new KTDatepicker(container, { range: true });
+			const startDate = new Date(2024, 0, 10);
+			const endDate = new Date(2024, 0, 15);
+
+			datepicker.setDate(startDate);
+			datepicker.setDate(endDate);
+			datepicker.open();
+
+			const dropdown = container.querySelector('[data-kt-datepicker-dropdown]') as HTMLElement;
+			if (!dropdown) return;
+
+			const calendar = dropdown.querySelector('table') as HTMLElement;
+			if (calendar) {
+				// Get attributes and parse them
+				const rangeStartAttr = calendar.getAttribute('data-kt-range-start');
+				const rangeEndAttr = calendar.getAttribute('data-kt-range-end');
+
+				if (rangeStartAttr && rangeEndAttr) {
+					const parsedStart = parseLocalDate(rangeStartAttr);
+					const parsedEnd = parseLocalDate(rangeEndAttr);
+
+					// Parsed dates should match original dates
+					expect(parsedStart.getDate()).toBe(startDate.getDate());
+					expect(parsedStart.getMonth()).toBe(startDate.getMonth());
+					expect(parsedEnd.getDate()).toBe(endDate.getDate());
+					expect(parsedEnd.getMonth()).toBe(endDate.getMonth());
+				}
+			}
+		});
+	});
+
+	describe('Date Comparison with Local Timezone', () => {
+		it('should compare dates using local timezone normalization', () => {
+			const datepicker = new KTDatepicker(container);
+			const date1 = new Date(2024, 0, 15, 10, 0, 0);
+			const date2 = new Date(2024, 0, 15, 20, 0, 0);
+
+			datepicker.setDate(date1);
+			const state1 = datepicker.getState();
+
+			datepicker.setDate(date2);
+			const state2 = datepicker.getState();
+
+			// Both should be considered the same day
+			if (state1.selectedDate && state2.selectedDate) {
+				expect(state1.selectedDate.getDate()).toBe(state2.selectedDate.getDate());
+				expect(state1.selectedDate.getMonth()).toBe(state2.selectedDate.getMonth());
+			}
+		});
+
+		it('should highlight correct date cell regardless of time component', () => {
+			const datepicker = new KTDatepicker(container);
+			const testDate = new Date(2024, 0, 15, 23, 59, 59); // Late in the day
+
+			datepicker.setDate(testDate);
+			datepicker.open();
+
+			const dropdown = container.querySelector('[data-kt-datepicker-dropdown]') as HTMLElement;
+			if (dropdown) {
+				const selectedCell = dropdown.querySelector('[data-kt-selected="true"]') as HTMLElement;
+				if (selectedCell) {
+					const dateAttr = selectedCell.getAttribute('data-date');
+					expect(dateAttr).toBe('2024-01-15'); // Should be Jan 15, not shifted
+				}
+			}
+		});
+	});
+
+	describe('Date String Formatting Consistency', () => {
+		it('should use consistent local timezone format throughout', () => {
+			const datepicker = new KTDatepicker(container);
+			const testDate = new Date(2024, 0, 15, 14, 30, 0);
+
+			datepicker.setDate(testDate);
+			datepicker.open();
+
+			const dropdown = container.querySelector('[data-kt-datepicker-dropdown]') as HTMLElement;
+			if (dropdown) {
+				const calendar = dropdown.querySelector('table') as HTMLElement;
+				if (calendar) {
+					// All date cells should use local timezone format
+					const dateCells = calendar.querySelectorAll('[data-date]');
+					dateCells.forEach(cell => {
+						const dateStr = cell.getAttribute('data-date');
+						if (dateStr) {
+							// Should be in YYYY-MM-DD format
+							expect(dateStr).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+							// Should be parseable as local date
+							const parsed = parseLocalDate(dateStr);
+							expect(parsed).toBeInstanceOf(Date);
+						}
+					});
+				}
+			}
+		});
+	});
+});
+