@keenthemes/ktui 1.1.0 → 1.1.1

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

@@ -1,435 +0,0 @@
-/**
- * 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

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