@keenthemes/ktui 1.1.0 → 1.1.1

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

@@ -1,356 +0,0 @@
-/**
- * datepicker-events.test.ts - Test suite for KTDatepicker event handling
- * Tests the fixes for state management and synchronous event firing
- */
-
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { KTDatepicker } from '../datepicker';
-import { KTDatepickerConfig } from '../config/types';
-
-describe('KTDatepicker Event Handling', () => {
-  let element: HTMLElement;
-  let mockOnChange: ReturnType<typeof vi.fn>;
-  let mockOnOpen: ReturnType<typeof vi.fn>;
-  let mockOnClose: ReturnType<typeof vi.fn>;
-
-  beforeEach(() => {
-    // Create a mock DOM element with proper structure
-    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>
-    `;
-
-    // Reset mocks for each test
-    mockOnChange = vi.fn();
-    mockOnOpen = vi.fn();
-    mockOnClose = vi.fn();
-
-    // Clear any existing event listeners or state
-    document.body.innerHTML = '';
-    document.body.appendChild(element);
-  });
-
-  describe('Event Handler Configuration', () => {
-    it('should accept event handler configuration', () => {
-      const config: KTDatepickerConfig = {
-        format: 'dd/MM/yyyy',
-        onChange: mockOnChange,
-        onOpen: mockOnOpen,
-        onClose: mockOnClose
-      };
-
-      expect(() => {
-        new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
-      }).not.toThrow();
-    });
-
-    it('should handle undefined event handlers gracefully', () => {
-      const config: KTDatepickerConfig = {
-        format: 'dd/MM/yyyy'
-        // No event handlers defined
-      };
-
-      expect(() => {
-        new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
-      }).not.toThrow();
-    });
-  });
-
-  describe('onChange Event', () => {
-    it('should fire onChange immediately when date is set programmatically', async () => {
-      const config: KTDatepickerConfig = {
-        format: 'dd/MM/yyyy',
-        onChange: mockOnChange
-      };
-
-      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
-
-      // Clear any initial calls
-      mockOnChange.mockClear();
-
-      // Set date programmatically
-      const testDate = new Date(2024, 0, 15); // January 15, 2024
-      datepicker.setDate(testDate);
-
-      // onChange should be called immediately (not batched)
-      expect(mockOnChange).toHaveBeenCalledTimes(1);
-      expect(mockOnChange).toHaveBeenCalledWith(testDate, datepicker);
-    });
-
-    it('should fire onChange with correct date format', async () => {
-      const config: KTDatepickerConfig = {
-        format: 'yyyy-MM-dd',
-        onChange: mockOnChange
-      };
-
-      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
-
-      // Clear any initial calls
-      mockOnChange.mockClear();
-
-      const testDate = new Date(2024, 0, 15);
-      datepicker.setDate(testDate);
-
-      expect(mockOnChange).toHaveBeenCalledWith(testDate, datepicker);
-    });
-
-    it('should not fire onChange when event handler throws error', async () => {
-      const errorHandler = vi.fn().mockImplementation(() => {
-        throw new Error('Event handler error');
-      });
-
-      const config: KTDatepickerConfig = {
-        format: 'dd/MM/yyyy',
-        onChange: errorHandler
-      };
-
-      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
-
-      // Should not throw when setting date
-      expect(() => {
-        datepicker.setDate(new Date(2024, 0, 15));
-      }).not.toThrow();
-
-      // Error handler should still be called
-      expect(errorHandler).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('onOpen/onClose Events', () => {
-    it('should fire onOpen immediately when dropdown opens', async () => {
-      const config: KTDatepickerConfig = {
-        onOpen: mockOnOpen,
-        onClose: mockOnClose
-      };
-
-      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
-
-      // Clear any initial calls
-      mockOnOpen.mockClear();
-      mockOnClose.mockClear();
-
-      // Open dropdown
-      datepicker.open();
-
-      // onOpen should be called immediately
-      expect(mockOnOpen).toHaveBeenCalledTimes(1);
-      expect(mockOnOpen).toHaveBeenCalledWith(datepicker);
-
-      // onClose should not have been called
-      expect(mockOnClose).not.toHaveBeenCalled();
-    });
-
-    it('should fire onClose immediately when dropdown closes', async () => {
-      const config: KTDatepickerConfig = {
-        onOpen: mockOnOpen,
-        onClose: mockOnClose
-      };
-
-      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
-
-      // First open the dropdown
-      datepicker.open();
-      mockOnOpen.mockClear();
-      mockOnClose.mockClear();
-
-      // Close dropdown
-      datepicker.close();
-
-      // onClose should be called immediately
-      expect(mockOnClose).toHaveBeenCalledTimes(1);
-      expect(mockOnClose).toHaveBeenCalledWith(datepicker);
-
-      // onOpen should not be called again
-      expect(mockOnOpen).not.toHaveBeenCalled();
-    });
-
-    it('should handle rapid open/close sequences', async () => {
-      const config: KTDatepickerConfig = {
-        onOpen: mockOnOpen,
-        onClose: mockOnClose
-      };
-
-      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
-
-      // Clear any initial calls
-      mockOnOpen.mockClear();
-      mockOnClose.mockClear();
-
-      // Open and close rapidly
-      datepicker.open();
-      datepicker.close();
-      datepicker.open();
-
-      // Should have correct call counts
-      expect(mockOnOpen).toHaveBeenCalledTimes(2);
-      expect(mockOnClose).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('State Management Integration', () => {
-    it('should maintain state consistency during event firing', async () => {
-      let capturedState: any = null;
-
-      const config: KTDatepickerConfig = {
-        onChange: (date, datepicker) => {
-          // Capture the datepicker state during event firing
-          capturedState = {
-            date,
-            isOpen: datepicker.isOpen?.() || false
-          };
-        }
-      };
-
-      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
-
-      const testDate = new Date(2024, 0, 15);
-      datepicker.setDate(testDate);
-
-      // State should be captured correctly during event firing
-      expect(capturedState).not.toBeNull();
-      expect(capturedState.date).toEqual(testDate);
-    });
-
-    it('should handle multiple datepicker instances independently', async () => {
-      // 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);
-
-      const mockOnChange2 = vi.fn();
-
-      const config1: KTDatepickerConfig = {
-        onChange: mockOnChange
-      };
-
-      const config2: KTDatepickerConfig = {
-        onChange: mockOnChange2
-      };
-
-      const datepicker1 = new KTDatepicker(element.querySelector('.kt-datepicker')!, config1);
-      const datepicker2 = new KTDatepicker(element2.querySelector('.kt-datepicker')!, config2);
-
-      // Set dates on both datepickers
-      const date1 = new Date(2024, 0, 15);
-      const date2 = new Date(2024, 1, 20);
-
-      datepicker1.setDate(date1);
-      datepicker2.setDate(date2);
-
-      // Each datepicker should fire its own event
-      expect(mockOnChange).toHaveBeenCalledWith(date1, datepicker1);
-      expect(mockOnChange2).toHaveBeenCalledWith(date2, datepicker2);
-
-      // Cleanup
-      document.body.removeChild(element2);
-    });
-  });
-
-  describe('Error Handling', () => {
-    it('should not crash when event handler throws error', async () => {
-      const errorOnChange = vi.fn().mockImplementation(() => {
-        throw new Error('Test error');
-      });
-
-      const config: KTDatepickerConfig = {
-        onChange: errorOnChange
-      };
-
-      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
-
-      // Should not throw despite error in event handler
-      expect(() => {
-        datepicker.setDate(new Date(2024, 0, 15));
-      }).not.toThrow();
-
-      expect(errorOnChange).toHaveBeenCalledTimes(1);
-    });
-
-    it('should continue functioning after event handler error', async () => {
-      let callCount = 0;
-      const errorOnChange = vi.fn().mockImplementation(() => {
-        callCount++;
-        if (callCount === 1) {
-          throw new Error('First call error');
-        }
-      });
-
-      const config: KTDatepickerConfig = {
-        onChange: errorOnChange
-      };
-
-      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
-
-      // First call should throw but not crash
-      datepicker.setDate(new Date(2024, 0, 15));
-
-      // Second call should still work
-      datepicker.setDate(new Date(2024, 1, 20));
-
-      expect(errorOnChange).toHaveBeenCalledTimes(2);
-    });
-  });
-
-  describe('Performance and Timing', () => {
-    it('should fire events synchronously for immediate state updates', async () => {
-      const callOrder: string[] = [];
-
-      const config: KTDatepickerConfig = {
-        onChange: () => {
-          callOrder.push('onChange');
-        }
-      };
-
-      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
-
-      callOrder.push('before-setDate');
-      datepicker.setDate(new Date(2024, 0, 15));
-      callOrder.push('after-setDate');
-
-      // onChange should be called synchronously between setDate calls
-      expect(callOrder).toEqual(['before-setDate', 'onChange', 'after-setDate']);
-    });
-
-    it('should fire events quickly for user interactions', async () => {
-      const eventTimestamps: number[] = [];
-
-      const config: KTDatepickerConfig = {
-        onChange: () => {
-          eventTimestamps.push(Date.now());
-        },
-        onOpen: () => {
-          eventTimestamps.push(Date.now());
-        },
-        onClose: () => {
-          eventTimestamps.push(Date.now());
-        }
-      };
-
-      const datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
-
-      const startTime = Date.now();
-
-      datepicker.setDate(new Date(2024, 0, 15));
-      datepicker.open();
-      datepicker.close();
-
-      const endTime = Date.now();
-
-      // All events should fire relatively quickly (within reasonable time for user interactions)
-      expect(eventTimestamps.length).toBe(3);
-      eventTimestamps.forEach(timestamp => {
-        expect(timestamp - startTime).toBeLessThan(50); // Allow reasonable time for DOM operations
-      });
-
-      // Events should fire in correct order: change, open, close
-      expect(eventTimestamps[0]).toBeLessThanOrEqual(eventTimestamps[1]); // change before open
-      expect(eventTimestamps[1]).toBeLessThanOrEqual(eventTimestamps[2]); // open before close
-    });
-  });
-});

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

@@ -1,343 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { KTDatepicker, initDatepickers } from '../datepicker';
-
-describe('KTDatepicker Initialization', () => {
-  let container: HTMLElement;
-
-  beforeEach(() => {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    document.body.removeChild(container);
-  });
-
-  describe('initDatepickers', () => {
-    it('should initialize datepickers for elements with data-kt-datepicker attribute', () => {
-      // Create multiple elements with the data attribute
-      const element1 = document.createElement('div');
-      element1.setAttribute('data-kt-datepicker', '');
-      container.appendChild(element1);
-
-      const element2 = document.createElement('div');
-      element2.setAttribute('data-kt-datepicker', 'true');
-      container.appendChild(element2);
-
-      const element3 = document.createElement('div');
-      element3.setAttribute('data-kt-datepicker', '');
-      container.appendChild(element3);
-
-      // Call initDatepickers
-      initDatepickers();
-
-      // Check that datepicker instances were created
-      expect((element1 as any).instance).toBeInstanceOf(KTDatepicker);
-      expect((element2 as any).instance).toBeInstanceOf(KTDatepicker);
-      expect((element3 as any).instance).toBeInstanceOf(KTDatepicker);
-    });
-
-    it('should skip elements that already have datepicker instances', () => {
-      // Create an element with existing instance
-      const element = document.createElement('div');
-      element.setAttribute('data-kt-datepicker', '');
-      container.appendChild(element);
-
-      // Manually create a datepicker instance
-      const existingDatepicker = new KTDatepicker(element);
-      (element as any).instance = existingDatepicker;
-
-      // Spy on KTDatepicker constructor
-      const constructorSpy = vi.spyOn(KTDatepicker.prototype, 'constructor' as any);
-
-      // Call initDatepickers
-      initDatepickers();
-
-      // Constructor should not be called again for the element with existing instance
-      expect(constructorSpy).not.toHaveBeenCalled();
-      expect((element as any).instance).toBe(existingDatepicker);
-    });
-
-    it('should not initialize elements without data-kt-datepicker attribute', () => {
-      // Create elements without the data attribute
-      const element1 = document.createElement('div');
-      container.appendChild(element1);
-
-      const element2 = document.createElement('div');
-      element2.className = 'some-datepicker-class';
-      container.appendChild(element2);
-
-      // Call initDatepickers
-      initDatepickers();
-
-      // Check that no instances were created
-      expect((element1 as any).instance).toBeUndefined();
-      expect((element2 as any).instance).toBeUndefined();
-    });
-
-    it('should handle empty result set gracefully', () => {
-      // Call initDatepickers when no elements exist
-      expect(() => initDatepickers()).not.toThrow();
-    });
-
-    it('should initialize datepickers in document order', () => {
-      // Create elements in a specific order
-      const elements: HTMLElement[] = [];
-      for (let i = 0; i < 5; i++) {
-        const element = document.createElement('div');
-        element.setAttribute('data-kt-datepicker', '');
-        element.setAttribute('data-order', i.toString());
-        container.appendChild(element);
-        elements.push(element);
-      }
-
-      // Call initDatepickers
-      initDatepickers();
-
-      // Verify all elements have instances and are in correct order
-      elements.forEach((element, index) => {
-        expect((element as any).instance).toBeInstanceOf(KTDatepicker);
-        expect(element.getAttribute('data-order')).toBe(index.toString());
-      });
-    });
-  });
-
-  describe('Public API Methods', () => {
-    it('should return correct isOpen state', () => {
-      const element = document.createElement('div');
-      element.setAttribute('data-kt-datepicker', '');
-      container.appendChild(element);
-
-      const datepicker = new KTDatepicker(element);
-
-      // Initially should be closed
-      expect(datepicker.isOpen()).toBe(false);
-
-      // After opening, should be open
-      datepicker.open();
-      expect(datepicker.isOpen()).toBe(true);
-
-      // After closing, should be closed again
-      datepicker.close();
-      expect(datepicker.isOpen()).toBe(false);
-    });
-
-    it('should return complete state object via getState', () => {
-      const element = document.createElement('div');
-      element.setAttribute('data-kt-datepicker', '');
-      container.appendChild(element);
-
-      const datepicker = new KTDatepicker(element);
-      const testDate = new Date(2024, 0, 15);
-
-      // Set a date to change state
-      datepicker.setDate(testDate);
-
-      // Get state
-      const state = datepicker.getState();
-
-      // Should return a complete state object
-      expect(state).toBeDefined();
-      expect(typeof state).toBe('object');
-      expect(state).toHaveProperty('selectedDate');
-      expect(state).toHaveProperty('isOpen');
-      expect(state).toHaveProperty('isDisabled');
-      expect(state).toHaveProperty('isFocused');
-      expect(state).toHaveProperty('isTransitioning');
-      expect(state).toHaveProperty('validationErrors');
-      expect(state).toHaveProperty('isValid');
-
-      // Should be a copy, not the original reference
-      expect(state).not.toBe(datepicker.getState()); // Different object references
-    });
-
-    it('should getState return independent copies', () => {
-      const element = document.createElement('div');
-      element.setAttribute('data-kt-datepicker', '');
-      container.appendChild(element);
-
-      const datepicker = new KTDatepicker(element);
-      const testDate = new Date(2024, 0, 15);
-
-      // Set a date
-      datepicker.setDate(testDate);
-
-      // Get two state objects
-      const state1 = datepicker.getState();
-      const state2 = datepicker.getState();
-
-      // Should be different objects (copies)
-      expect(state1).not.toBe(state2);
-
-      // But should have same content initially
-      expect(state1.selectedDate).toEqual(state2.selectedDate);
-      expect(state1.isOpen).toEqual(state2.isOpen);
-
-      // Note: getState returns a shallow copy, so Date objects are shared references
-      // This is expected behavior - consumers should treat state as read-only
-      if (state1.selectedDate) {
-        state1.selectedDate.setFullYear(2025);
-        expect(state2.selectedDate?.getFullYear()).toBe(2025); // Both affected due to shared reference
-      }
-    });
-  });
-
-  describe('Public API Methods', () => {
-    it('should return correct isOpen state', () => {
-      const element = document.createElement('div');
-      element.setAttribute('data-kt-datepicker', '');
-      container.appendChild(element);
-
-      const datepicker = new KTDatepicker(element);
-
-      // Initially should be closed
-      expect(datepicker.isOpen()).toBe(false);
-
-      // After opening, should be open
-      datepicker.open();
-      expect(datepicker.isOpen()).toBe(true);
-
-      // After closing, should be closed again
-      datepicker.close();
-      expect(datepicker.isOpen()).toBe(false);
-    });
-
-    it('should return complete state object via getState', () => {
-      const element = document.createElement('div');
-      element.setAttribute('data-kt-datepicker', '');
-      container.appendChild(element);
-
-      const datepicker = new KTDatepicker(element);
-      const testDate = new Date(2024, 0, 15);
-
-      // Set a date to change state
-      datepicker.setDate(testDate);
-
-      // Get state
-      const state = datepicker.getState();
-
-      // Should return a complete state object
-      expect(state).toBeDefined();
-      expect(typeof state).toBe('object');
-      expect(state).toHaveProperty('selectedDate');
-      expect(state).toHaveProperty('isOpen');
-      expect(state).toHaveProperty('isDisabled');
-      expect(state).toHaveProperty('isFocused');
-      expect(state).toHaveProperty('isTransitioning');
-      expect(state).toHaveProperty('validationErrors');
-      expect(state).toHaveProperty('isValid');
-
-      // Should be a copy, not the original reference
-      expect(state).not.toBe(datepicker.getState()); // Different object references
-    });
-
-    it('should getState return independent copies', () => {
-      const element = document.createElement('div');
-      element.setAttribute('data-kt-datepicker', '');
-      container.appendChild(element);
-
-      const datepicker = new KTDatepicker(element);
-      const testDate = new Date(2024, 0, 15);
-
-      // Set a date
-      datepicker.setDate(testDate);
-
-      // Get two state objects
-      const state1 = datepicker.getState();
-      const state2 = datepicker.getState();
-
-      // Should be different objects (copies)
-      expect(state1).not.toBe(state2);
-
-      // But should have same content initially
-      expect(state1.selectedDate).toEqual(state2.selectedDate);
-      expect(state1.isOpen).toEqual(state2.isOpen);
-
-      // Note: getState returns a shallow copy, so Date objects are shared references
-      // This is expected behavior - consumers should treat state as read-only
-      if (state1.selectedDate) {
-        state1.selectedDate.setFullYear(2025);
-        expect(state2.selectedDate?.getFullYear()).toBe(2025); // Both affected due to shared reference
-      }
-    });
-
-    it('should toggle between open and closed states', () => {
-      const element = document.createElement('div');
-      element.setAttribute('data-kt-datepicker', '');
-      container.appendChild(element);
-
-      const datepicker = new KTDatepicker(element);
-
-      // Initially closed
-      expect(datepicker.isOpen()).toBe(false);
-
-      // Toggle to open
-      datepicker.toggle();
-      expect(datepicker.isOpen()).toBe(true);
-
-      // Toggle to close
-      datepicker.toggle();
-      expect(datepicker.isOpen()).toBe(false);
-
-      // Toggle to open again
-      datepicker.toggle();
-      expect(datepicker.isOpen()).toBe(true);
-    });
-  });
-
-  describe('getDropdownState', () => {
-    it('should return the current dropdown state from state manager', () => {
-      const element = document.createElement('div');
-      element.setAttribute('data-kt-datepicker', '');
-      container.appendChild(element);
-
-      const datepicker = new KTDatepicker(element);
-
-      // Get dropdown state
-      const state = datepicker.getDropdownState();
-
-      // Should return an object with expected properties
-      expect(state).toBeDefined();
-      expect(typeof state).toBe('object');
-      expect(state).toHaveProperty('isOpen');
-      expect(state).toHaveProperty('isTransitioning');
-      expect(state).toHaveProperty('isDisabled');
-      expect(state).toHaveProperty('isFocused');
-    });
-
-    it('should return consistent state after opening dropdown', () => {
-      const element = document.createElement('div');
-      element.setAttribute('data-kt-datepicker', '');
-      container.appendChild(element);
-
-      const datepicker = new KTDatepicker(element);
-
-      // Initially closed
-      const initialState = datepicker.getDropdownState();
-      expect(initialState.isOpen).toBe(false);
-
-      // Open dropdown
-      datepicker.open();
-
-      // Check state after opening
-      const openState = datepicker.getDropdownState();
-      expect(openState.isOpen).toBe(true);
-    });
-
-    it('should return consistent state after closing dropdown', () => {
-      const element = document.createElement('div');
-      element.setAttribute('data-kt-datepicker', '');
-      container.appendChild(element);
-
-      const datepicker = new KTDatepicker(element);
-
-      // Open then close
-      datepicker.open();
-      datepicker.close();
-
-      // Check state after closing
-      const closedState = datepicker.getDropdownState();
-      expect(closedState.isOpen).toBe(false);
-    });
-  });
-});