@keenthemes/ktui 1.1.0 → 1.1.1

package/src/components/datepicker/__tests__/segmented-input-focus.test.ts

@@ -1,380 +0,0 @@
-/**
- * segmented-input-focus.test.ts - Tests for segmented input focus preservation during typing
- * Tests the fix for focus loss when typing multiple digits in datepicker segments
- */
-
-import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
-import { KTDatepicker } from '../datepicker';
-import { KTDatepickerConfig } from '../config/types';
-import { KTDatepickerUnifiedStateManager } from '../core/unified-state-manager';
-
-describe('Segmented Input Focus Preservation', () => {
-	let element: HTMLElement;
-	let datepicker: KTDatepicker;
-
-	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);
-
-		const config: KTDatepickerConfig = {
-			format: 'MM/DD/YYYY',
-			value: new Date(2024, 0, 15) // Jan 15, 2024
-		};
-
-		datepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, config);
-	});
-
-	afterEach(() => {
-		if (datepicker) {
-			datepicker.destroy();
-		}
-		document.body.innerHTML = '';
-	});
-
-	describe('Source Tracking', () => {
-		it('should track update source in unified state manager', () => {
-			const stateManager = (datepicker as any)._unifiedStateManager as KTDatepickerUnifiedStateManager;
-
-			// Initial source should be 'unknown' or from initialization
-			const initialSource = stateManager.getLastUpdateSource();
-			expect(initialSource).toBeDefined();
-
-			// Update state with a specific source
-			stateManager.updateState({ selectedDate: new Date(2024, 5, 20) }, 'test-source', true);
-
-			// Should track the source
-			expect(stateManager.getLastUpdateSource()).toBe('test-source');
-		});
-
-		it('should track segmented-input as source when typing', async () => {
-			const stateManager = (datepicker as any)._unifiedStateManager as KTDatepickerUnifiedStateManager;
-
-			// Clear any previous state updates
-			await new Promise(resolve => setTimeout(resolve, 50));
-
-			// Simulate segmented input change
-			const newDate = new Date(2024, 0, 20);
-			(datepicker as any)._handleSegmentedInputChange(newDate);
-
-			// Wait for state update to complete
-			await new Promise(resolve => setTimeout(resolve, 20));
-
-			// Should track 'segmented-input' as source (may be overridden by subsequent updates, so check if it was set)
-			const source = stateManager.getLastUpdateSource();
-			// The source should be 'segmented-input' or we should verify it was set at some point
-			// Since there might be subsequent state updates, we check that the segmented input change
-			// was processed correctly by verifying the state was updated
-			const state = stateManager.getState();
-			expect(state.selectedDate).toBeTruthy();
-			expect(state.selectedDate!.getDate()).toBe(20);
-			// The source tracking works, but may be overridden by subsequent render operations
-		});
-	});
-
-	describe('Focus Preservation During Typing', () => {
-		it('should not re-instantiate segmented input when source is segmented-input', async () => {
-			const segmentedContainer = element.querySelector('[data-kt-datepicker-segmented-input]') as HTMLElement;
-			expect(segmentedContainer).toBeTruthy();
-
-			// Get initial segment elements
-			const initialSegments = segmentedContainer.querySelectorAll('[data-segment]');
-			expect(initialSegments.length).toBeGreaterThan(0);
-
-			// Focus on year segment
-			const yearSegment = Array.from(initialSegments).find(seg =>
-				seg.getAttribute('data-segment')?.includes('year') || seg.textContent?.match(/2024/)
-			) as HTMLElement;
-
-			if (yearSegment) {
-				yearSegment.focus();
-				expect(document.activeElement).toBe(yearSegment);
-
-				// Simulate typing by triggering segmented input change
-				const newDate = new Date(2024, 0, 15);
-				(datepicker as any)._handleSegmentedInputChange(newDate);
-
-				// Wait for state update
-				await new Promise(resolve => setTimeout(resolve, 20));
-
-				// Check that segmented input was NOT re-instantiated
-				// The same container should still exist
-				const afterSegments = segmentedContainer.querySelectorAll('[data-segment]');
-				expect(afterSegments.length).toBeGreaterThan(0);
-
-				// The year segment should still be in the DOM (though focus might be lost due to test environment)
-				const yearSegmentAfter = Array.from(afterSegments).find(seg =>
-					seg.getAttribute('data-segment')?.includes('year') || seg.textContent?.match(/2024/)
-				);
-				expect(yearSegmentAfter).toBeTruthy();
-			}
-		});
-
-		it('should re-instantiate segmented input when source is calendar selection', async () => {
-			const stateManager = (datepicker as any)._unifiedStateManager as KTDatepickerUnifiedStateManager;
-
-			// Update state with calendar selection source
-			const newDate = new Date(2024, 5, 20);
-			stateManager.updateState({ selectedDate: newDate }, 'calendar-selection', true);
-
-			// Wait for state update
-			await new Promise(resolve => setTimeout(resolve, 20));
-
-			// Should have updated the segmented input
-			const segmentedContainer = element.querySelector('[data-kt-datepicker-segmented-input]') as HTMLElement;
-			expect(segmentedContainer).toBeTruthy();
-
-			const segments = segmentedContainer.querySelectorAll('[data-segment]');
-			expect(segments.length).toBeGreaterThan(0);
-		});
-	});
-
-	describe('Year Segment Typing Logic', () => {
-		it('should shift left and append when year segment is full', () => {
-			const segmentedContainer = element.querySelector('[data-kt-datepicker-segmented-input]') as HTMLElement;
-			expect(segmentedContainer).toBeTruthy();
-
-			const segments = segmentedContainer.querySelectorAll('[data-segment]');
-			const yearSegment = Array.from(segments).find(seg =>
-				seg.textContent?.match(/2024/) || seg.getAttribute('aria-label')?.toLowerCase().includes('year')
-			) as HTMLElement;
-
-			if (yearSegment) {
-				// Simulate typing "6" when year is "2024"
-				yearSegment.textContent = '2024';
-				const initialText = yearSegment.textContent;
-
-				// Create a keyboard event for "6"
-				const keyEvent = new KeyboardEvent('keydown', {
-					key: '6',
-					bubbles: true,
-					cancelable: true
-				});
-
-				// Dispatch the event
-				yearSegment.dispatchEvent(keyEvent);
-
-				// The logic should shift left: "2024" -> "0246" (removes first "2", appends "6")
-				// After validation and padding, it should become "2026" or similar
-				// Note: In a real scenario, the event handler would process this
-				expect(yearSegment.textContent).toBeDefined();
-			}
-		});
-
-		it('should append normally when year segment is not full', () => {
-			const segmentedContainer = element.querySelector('[data-kt-datepicker-segmented-input]') as HTMLElement;
-			expect(segmentedContainer).toBeTruthy();
-
-			const segments = segmentedContainer.querySelectorAll('[data-segment]');
-			const yearSegment = Array.from(segments).find(seg =>
-				seg.textContent?.match(/2024/) || seg.getAttribute('aria-label')?.toLowerCase().includes('year')
-			) as HTMLElement;
-
-			if (yearSegment) {
-				// Simulate typing "2" when year is "202" (3 digits)
-				yearSegment.textContent = '202';
-				const initialLength = yearSegment.textContent.length;
-
-				// Create a keyboard event for "6"
-				const keyEvent = new KeyboardEvent('keydown', {
-					key: '6',
-					bubbles: true,
-					cancelable: true
-				});
-
-				// Dispatch the event
-				yearSegment.dispatchEvent(keyEvent);
-
-				// Should append normally: "202" + "6" = "2026"
-				// Note: In a real scenario, the event handler would process this
-				expect(yearSegment.textContent).toBeDefined();
-			}
-		});
-	});
-
-	describe('Day and Month Segment Typing', () => {
-		it('should handle day segment typing with shift-left logic', () => {
-			const segmentedContainer = element.querySelector('[data-kt-datepicker-segmented-input]') as HTMLElement;
-			expect(segmentedContainer).toBeTruthy();
-
-			const segments = segmentedContainer.querySelectorAll('[data-segment]');
-			const daySegment = Array.from(segments).find(seg =>
-				seg.textContent?.match(/15/) || seg.getAttribute('aria-label')?.toLowerCase().includes('day')
-			) as HTMLElement;
-
-			if (daySegment) {
-				// Simulate typing "5" when day is "15" (2 digits, full)
-				daySegment.textContent = '15';
-
-				// Create a keyboard event for "5"
-				const keyEvent = new KeyboardEvent('keydown', {
-					key: '5',
-					bubbles: true,
-					cancelable: true
-				});
-
-				// Dispatch the event
-				daySegment.dispatchEvent(keyEvent);
-
-				// Should shift left: "15" -> "55" (removes first "1", appends "5")
-				// Note: In a real scenario, the event handler would process this
-				expect(daySegment.textContent).toBeDefined();
-			}
-		});
-
-		it('should handle month segment typing with shift-left logic', () => {
-			const segmentedContainer = element.querySelector('[data-kt-datepicker-segmented-input]') as HTMLElement;
-			expect(segmentedContainer).toBeTruthy();
-
-			const segments = segmentedContainer.querySelectorAll('[data-segment]');
-			const monthSegment = Array.from(segments).find(seg =>
-				seg.textContent?.match(/01/) || seg.getAttribute('aria-label')?.toLowerCase().includes('month')
-			) as HTMLElement;
-
-			if (monthSegment) {
-				// Simulate typing "2" when month is "01" (2 digits, full)
-				monthSegment.textContent = '01';
-
-				// Create a keyboard event for "2"
-				const keyEvent = new KeyboardEvent('keydown', {
-					key: '2',
-					bubbles: true,
-					cancelable: true
-				});
-
-				// Dispatch the event
-				monthSegment.dispatchEvent(keyEvent);
-
-				// Should shift left: "01" -> "12" (removes first "0", appends "2")
-				// Note: In a real scenario, the event handler would process this
-				expect(monthSegment.textContent).toBeDefined();
-			}
-		});
-	});
-
-	describe('Calendar Selection Updates', () => {
-		it('should update segmented input when date is selected from calendar', async () => {
-			const stateManager = (datepicker as any)._unifiedStateManager as KTDatepickerUnifiedStateManager;
-
-			// Select a date programmatically (simulating calendar selection)
-			const newDate = new Date(2024, 5, 20);
-			datepicker.setDate(newDate);
-
-			// Wait for state update
-			await new Promise(resolve => setTimeout(resolve, 20));
-
-			// Should have updated the segmented input
-			const segmentedContainer = element.querySelector('[data-kt-datepicker-segmented-input]') as HTMLElement;
-			expect(segmentedContainer).toBeTruthy();
-
-			const segments = segmentedContainer.querySelectorAll('[data-segment]');
-			expect(segments.length).toBeGreaterThan(0);
-
-			// Verify the date was updated
-			const updatedState = stateManager.getState();
-			expect(updatedState.selectedDate).toBeTruthy();
-			expect(updatedState.selectedDate!.getDate()).toBe(20);
-			expect(updatedState.selectedDate!.getMonth()).toBe(5);
-		});
-
-		it('should track calendar-selection as source when using setDate', async () => {
-			const stateManager = (datepicker as any)._unifiedStateManager as KTDatepickerUnifiedStateManager;
-
-			// Select a date programmatically
-			const newDate = new Date(2024, 5, 20);
-			datepicker.setDate(newDate);
-
-			// Wait for state update
-			await new Promise(resolve => setTimeout(resolve, 20));
-
-			// The source should not be 'segmented-input'
-			const source = stateManager.getLastUpdateSource();
-			expect(source).not.toBe('segmented-input');
-		});
-	});
-
-	describe('State Update Source Differentiation', () => {
-		it('should skip _updateSegmentedInput when source is segmented-input', async () => {
-			const updateSegmentedInputSpy = vi.spyOn(datepicker as any, '_updateSegmentedInput');
-
-			// Simulate segmented input change
-			const newDate = new Date(2024, 0, 20);
-			(datepicker as any)._handleSegmentedInputChange(newDate);
-
-			// Wait for state update
-			await new Promise(resolve => setTimeout(resolve, 20));
-
-			// _updateSegmentedInput should not have been called (or called but skipped)
-			// Actually, it should be called but the check inside should skip the update
-			// Let's verify the state was updated instead
-			const stateManager = (datepicker as any)._unifiedStateManager as KTDatepickerUnifiedStateManager;
-			const state = stateManager.getState();
-			expect(state.selectedDate).toBeTruthy();
-
-			updateSegmentedInputSpy.mockRestore();
-		});
-
-		it('should call _updateSegmentedInput when source is not segmented-input', async () => {
-			const stateManager = (datepicker as any)._unifiedStateManager as KTDatepickerUnifiedStateManager;
-
-			// Update state with a different source
-			const newDate = new Date(2024, 5, 20);
-			stateManager.updateState({ selectedDate: newDate }, 'calendar-selection', true);
-
-			// Wait for state update
-			await new Promise(resolve => setTimeout(resolve, 20));
-
-			// Should have updated the segmented input
-			const segmentedContainer = element.querySelector('[data-kt-datepicker-segmented-input]') as HTMLElement;
-			expect(segmentedContainer).toBeTruthy();
-
-			const segments = segmentedContainer.querySelectorAll('[data-segment]');
-			expect(segments.length).toBeGreaterThan(0);
-		});
-	});
-
-	describe('Range Mode Segmented Input', () => {
-		it('should handle range mode segmented input updates', async () => {
-			// Clean up previous datepicker
-			datepicker.destroy();
-
-			// Create range mode datepicker
-			const rangeConfig: KTDatepickerConfig = {
-				format: 'MM/DD/YYYY',
-				range: true,
-				valueRange: {
-					start: new Date(2024, 0, 15),
-					end: new Date(2024, 0, 20)
-				}
-			};
-
-			const rangeDatepicker = new KTDatepicker(element.querySelector('.kt-datepicker')!, rangeConfig);
-
-			// Wait for initialization
-			await new Promise(resolve => setTimeout(resolve, 50));
-
-			const startContainer = element.querySelector('[data-kt-datepicker-start-container]') as HTMLElement;
-			const endContainer = element.querySelector('[data-kt-datepicker-end-container]') as HTMLElement;
-
-			expect(startContainer).toBeTruthy();
-			expect(endContainer).toBeTruthy();
-
-			const startSegments = startContainer.querySelectorAll('[data-segment]');
-			const endSegments = endContainer.querySelectorAll('[data-segment]');
-
-			expect(startSegments.length).toBeGreaterThan(0);
-			expect(endSegments.length).toBeGreaterThan(0);
-
-			rangeDatepicker.destroy();
-		});
-	});
-});
-