@keenthemes/ktui 1.1.0 → 1.1.1

package/src/components/datepicker/ui/renderers/__tests__/calendar-optimizations.test.ts

@@ -1,611 +0,0 @@
-/**
- * calendar-optimizations.test.ts - Tests for calendar rendering optimizations
- * Tests day name caching, event delegation, cell reference caching, and date key optimizations
- */
-
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { renderCalendar } from '../calendar';
-import { getDateKey } from '../../../utils/date-utils';
-import { defaultTemplates } from '../../templates/templates';
-
-describe('Calendar Rendering Optimizations', () => {
-	let container: HTMLElement;
-
-	beforeEach(() => {
-		container = document.createElement('div');
-		document.body.appendChild(container);
-	});
-
-	afterEach(() => {
-		if (container.parentNode) {
-			document.body.removeChild(container);
-		}
-	});
-
-	// Helper to generate calendar days for a month
-	function getCalendarDays(year: number, month: number): Date[] {
-		const firstDay = new Date(year, month, 1);
-		const lastDay = new Date(year, month + 1, 0);
-		const days: Date[] = [];
-		let start = new Date(firstDay);
-		start.setDate(firstDay.getDate() - firstDay.getDay());
-		let end = new Date(lastDay);
-		end.setDate(lastDay.getDate() + (6 - lastDay.getDay()));
-		for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
-			days.push(new Date(d));
-		}
-		return days;
-	}
-
-	describe('Day Name Caching', () => {
-		it('should cache day names per locale', () => {
-			const days = getCalendarDays(2024, 0);
-			const onDayClick = vi.fn();
-			const currentDate = new Date(2024, 0, 15);
-
-			// First render with en-US
-			const calendar1 = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				null,
-				onDayClick,
-				'en-US'
-			);
-
-			// Second render with same locale - should use cache
-			const calendar2 = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				null,
-				onDayClick,
-				'en-US'
-			);
-
-			// Both should have same day names in thead
-			const dayNames1 = Array.from(calendar1.querySelectorAll('thead th')).map(th => th.textContent?.trim()).filter(Boolean);
-			const dayNames2 = Array.from(calendar2.querySelectorAll('thead th')).map(th => th.textContent?.trim()).filter(Boolean);
-			expect(dayNames1.length).toBeGreaterThan(0);
-			expect(dayNames1).toEqual(dayNames2);
-		});
-
-		it('should cache different locales separately', () => {
-			const days = getCalendarDays(2024, 0);
-			const onDayClick = vi.fn();
-			const currentDate = new Date(2024, 0, 15);
-
-			const calendarEN = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				null,
-				onDayClick,
-				'en-US'
-			);
-
-			const calendarDE = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				null,
-				onDayClick,
-				'de-DE'
-			);
-
-			// Day names should be different for different locales
-			const dayNamesEN = Array.from(calendarEN.querySelectorAll('thead th')).map(th => th.textContent?.trim()).filter(Boolean);
-			const dayNamesDE = Array.from(calendarDE.querySelectorAll('thead th')).map(th => th.textContent?.trim()).filter(Boolean);
-			expect(dayNamesEN.length).toBeGreaterThan(0);
-			expect(dayNamesDE.length).toBeGreaterThan(0);
-			// Note: In some test environments, locale formatting might be the same
-			// So we just verify both have day names
-		});
-
-		it('should work with multiple locales (en-US, de-DE, fr-FR)', () => {
-			const days = getCalendarDays(2024, 0);
-			const onDayClick = vi.fn();
-			const currentDate = new Date(2024, 0, 15);
-
-			// Render calendars for all three locales
-			const calendarEN = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				null,
-				onDayClick,
-				'en-US'
-			);
-
-			const calendarDE = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				null,
-				onDayClick,
-				'de-DE'
-			);
-
-			const calendarFR = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				null,
-				onDayClick,
-				'fr-FR'
-			);
-
-			// All should have day names
-			const dayNamesEN = Array.from(calendarEN.querySelectorAll('thead th')).map(th => th.textContent?.trim()).filter(Boolean);
-			const dayNamesDE = Array.from(calendarDE.querySelectorAll('thead th')).map(th => th.textContent?.trim()).filter(Boolean);
-			const dayNamesFR = Array.from(calendarFR.querySelectorAll('thead th')).map(th => th.textContent?.trim()).filter(Boolean);
-
-			expect(dayNamesEN.length).toBe(7);
-			expect(dayNamesDE.length).toBe(7);
-			expect(dayNamesFR.length).toBe(7);
-
-			// Verify cache persists across multiple renders of same locale
-			const calendarEN2 = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				null,
-				onDayClick,
-				'en-US'
-			);
-			const dayNamesEN2 = Array.from(calendarEN2.querySelectorAll('thead th')).map(th => th.textContent?.trim()).filter(Boolean);
-			expect(dayNamesEN).toEqual(dayNamesEN2); // Should be cached
-		});
-
-		it('should work correctly across multiple datepicker instances', () => {
-			const days = getCalendarDays(2024, 0);
-			const onDayClick = vi.fn();
-			const currentDate = new Date(2024, 0, 15);
-
-			// Simulate multiple instances using same locale
-			const instance1_calendar1 = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				null,
-				onDayClick,
-				'en-US'
-			);
-
-			const instance2_calendar1 = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				null,
-				onDayClick,
-				'en-US'
-			);
-
-			// Both instances should use the same cached day names
-			const dayNames1 = Array.from(instance1_calendar1.querySelectorAll('thead th')).map(th => th.textContent?.trim()).filter(Boolean);
-			const dayNames2 = Array.from(instance2_calendar1.querySelectorAll('thead th')).map(th => th.textContent?.trim()).filter(Boolean);
-
-			expect(dayNames1.length).toBe(7);
-			expect(dayNames2.length).toBe(7);
-			expect(dayNames1).toEqual(dayNames2); // Cache should be shared across instances
-
-			// Render again with different months - cache should still work
-			const days2 = getCalendarDays(2024, 1);
-			const instance1_calendar2 = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days2,
-				new Date(2024, 1, 15),
-				null,
-				onDayClick,
-				'en-US'
-			);
-
-			const dayNames1_month2 = Array.from(instance1_calendar2.querySelectorAll('thead th')).map(th => th.textContent?.trim()).filter(Boolean);
-			expect(dayNames1_month2).toEqual(dayNames1); // Same locale = same cached day names
-		});
-	});
-
-	describe('Event Delegation', () => {
-		it('should use event delegation for click events', () => {
-			const days = getCalendarDays(2024, 0);
-			const onDayClick = vi.fn();
-			const currentDate = new Date(2024, 0, 15);
-
-			const calendar = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				null,
-				onDayClick
-			);
-
-			// Count event listeners - should be minimal (delegated)
-			const buttons = calendar.querySelectorAll('button[data-day]');
-			expect(buttons.length).toBeGreaterThan(0);
-
-			// Click a button - should trigger delegated handler
-			const firstButton = buttons[0] as HTMLButtonElement;
-			firstButton.click();
-
-			// Should have called onDayClick if date is in current month
-			// Note: onDayClick only fires for dates in current month
-			const firstCell = firstButton.closest('td[data-kt-datepicker-day]') as HTMLElement;
-			const dateAttr = firstCell?.getAttribute('data-date');
-			if (dateAttr) {
-				const [year, month] = dateAttr.split('-').map(Number);
-				if (month - 1 === currentDate.getMonth()) {
-					expect(onDayClick).toHaveBeenCalled();
-				}
-			}
-		});
-
-		it('should handle hover events via delegation', () => {
-			const days = getCalendarDays(2024, 0);
-			const onDayClick = vi.fn();
-			const currentDate = new Date(2024, 0, 15);
-
-			const calendar = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				null,
-				onDayClick
-			);
-
-			const firstCell = calendar.querySelector('td[data-kt-datepicker-day]') as HTMLElement;
-			const firstButton = firstCell?.querySelector('button[data-day]') as HTMLButtonElement;
-
-			if (firstButton) {
-				// Simulate mouseover - should trigger delegated handler
-				const mouseoverEvent = new MouseEvent('mouseover', { bubbles: true });
-				firstButton.dispatchEvent(mouseoverEvent);
-
-				// Cell should have hover attribute set by delegated handler
-				expect(firstCell.hasAttribute('data-kt-hover')).toBe(true);
-			}
-		});
-
-		it('should only attach listeners to calendar table, not individual cells', () => {
-			const days = getCalendarDays(2024, 0);
-			const onDayClick = vi.fn();
-			const currentDate = new Date(2024, 0, 15);
-
-			const calendar = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				null,
-				onDayClick
-			);
-
-			// Verify calendar has event listeners (delegated)
-			// We can't directly count listeners, but we can verify behavior
-			const buttons = calendar.querySelectorAll('button[data-day]');
-			expect(buttons.length).toBeGreaterThan(0);
-
-			// All buttons should be clickable via delegation
-			// Click a button in current month
-			const currentMonthButtons = Array.from(buttons).filter(btn => {
-				const cell = btn.closest('td[data-kt-datepicker-day]') as HTMLElement;
-				const dateAttr = cell?.getAttribute('data-date');
-				if (dateAttr) {
-					const [year, month] = dateAttr.split('-').map(Number);
-					return month - 1 === currentDate.getMonth();
-				}
-				return false;
-			});
-
-			if (currentMonthButtons.length > 0) {
-				(currentMonthButtons[0] as HTMLButtonElement).click();
-				expect(onDayClick).toHaveBeenCalled();
-			}
-		});
-	});
-
-	describe('Date Key Optimization', () => {
-		it('should use date keys for selected date highlighting', () => {
-			const days = getCalendarDays(2024, 0);
-			const onDayClick = vi.fn();
-			const currentDate = new Date(2024, 0, 15);
-			const selectedDate = new Date(2024, 0, 15);
-
-			const calendar = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				selectedDate,
-				onDayClick
-			);
-
-			// Find the selected cell
-			const selectedCell = calendar.querySelector('[data-kt-selected="true"]') as HTMLElement;
-			expect(selectedCell).toBeTruthy();
-
-			// Verify it has the correct date
-			const dateAttr = selectedCell.getAttribute('data-date');
-			expect(dateAttr).toBe('2024-01-15');
-		});
-
-		it('should use date keys for multi-date selection', () => {
-			const days = getCalendarDays(2024, 0);
-			const onDayClick = vi.fn();
-			const currentDate = new Date(2024, 0, 15);
-			const selectedDates = [
-				new Date(2024, 0, 10),
-				new Date(2024, 0, 15),
-				new Date(2024, 0, 20)
-			];
-
-			const calendar = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				null,
-				onDayClick,
-				'en-US',
-				undefined,
-				selectedDates
-			);
-
-			// All selected dates should be highlighted
-			const selectedCells = calendar.querySelectorAll('[data-kt-selected="true"]');
-			expect(selectedCells.length).toBe(3);
-		});
-
-		it('should use date keys for range selection', () => {
-			const days = getCalendarDays(2024, 0);
-			const onDayClick = vi.fn();
-			const currentDate = new Date(2024, 0, 15);
-			const selectedRange = {
-				start: new Date(2024, 0, 10),
-				end: new Date(2024, 0, 20)
-			};
-
-			const calendar = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				null,
-				onDayClick,
-				'en-US',
-				selectedRange
-			);
-
-		// Start and end dates should be highlighted
-		const selectedCells = calendar.querySelectorAll('[data-kt-selected="true"]');
-		expect(selectedCells.length).toBeGreaterThanOrEqual(2);
-
-		// Range dates should have data-kt-hover-range attribute (consolidated from data-in-range)
-		const inRangeCells = calendar.querySelectorAll('[data-kt-hover-range]');
-		expect(inRangeCells.length).toBeGreaterThan(0);
-		});
-
-		it('should optimize tabbable index calculation using date keys', () => {
-			const days = getCalendarDays(2024, 0);
-			const onDayClick = vi.fn();
-			const currentDate = new Date(2024, 0, 15);
-			const selectedDate = new Date(2024, 0, 15);
-
-			const calendar = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				selectedDate,
-				onDayClick
-			);
-
-			// Selected date should be tabbable (tabindex="0")
-			const selectedCell = calendar.querySelector('[data-kt-selected="true"]') as HTMLElement;
-			expect(selectedCell).toBeTruthy();
-			const selectedButton = selectedCell?.querySelector('button[data-day]') as HTMLButtonElement;
-			expect(selectedButton).toBeTruthy();
-
-			// tabindex is set in the attributes string on the td, not directly on button
-			// The button has tabindex="-1" by default in template, but the cell has tabindex="0" for selected
-			// Check that the cell has the correct tabindex attribute
-			const cellTabindex = selectedCell.getAttribute('tabindex');
-			// The tabindex should be 0 for the selected date (set in attributes)
-			// Since attributes are in the td, we check the cell
-			expect(cellTabindex === '0' || selectedCell.tabIndex === 0).toBe(true);
-		});
-	});
-
-	describe('Cell Reference Caching', () => {
-		it('should cache cell references for hover range updates', () => {
-			const days = getCalendarDays(2024, 0);
-			const onDayClick = vi.fn();
-			const currentDate = new Date(2024, 0, 15);
-			const selectedRange = {
-				start: new Date(2024, 0, 10),
-				end: null
-			};
-
-			const calendar = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				null,
-				onDayClick,
-				'en-US',
-				selectedRange
-			);
-
-			// All cells should have data-date attributes for caching
-			const cells = calendar.querySelectorAll('td[data-kt-datepicker-day]');
-			expect(cells.length).toBeGreaterThan(0);
-			cells.forEach(cell => {
-				expect(cell.hasAttribute('data-date')).toBe(true);
-			});
-		});
-
-		it('should use cached cell references for hover range', () => {
-			const days = getCalendarDays(2024, 0);
-			const onDayClick = vi.fn();
-			const currentDate = new Date(2024, 0, 15);
-			const selectedRange = {
-				start: new Date(2024, 0, 10),
-				end: null
-			};
-
-			const calendar = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				null,
-				onDayClick,
-				'en-US',
-				selectedRange
-			);
-
-			// Simulate hover on a date in range preview mode
-			const hoverCell = calendar.querySelector(`[data-date="2024-01-15"]`) as HTMLElement;
-			const hoverButton = hoverCell?.querySelector('button[data-day]') as HTMLButtonElement;
-
-			if (hoverButton) {
-				const mouseoverEvent = new MouseEvent('mouseover', { bubbles: true });
-				hoverButton.dispatchEvent(mouseoverEvent);
-
-				// Should have hover range attributes set (if in range preview mode)
-				// Note: This depends on the range state being set correctly
-				const hoverRangeCells = calendar.querySelectorAll('[data-kt-hover-range]');
-				// May be 0 if range preview mode conditions aren't met, but cell should exist
-				expect(hoverCell).toBeTruthy();
-			}
-		});
-	});
-
-	describe('Date Object Reuse', () => {
-		it('should cache today date object', () => {
-			const days = getCalendarDays(2024, 0);
-			const onDayClick = vi.fn();
-			const currentDate = new Date(2024, 0, 15);
-
-			const calendar = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				null,
-				onDayClick
-			);
-
-			// Today's date should be marked if it's in the visible month
-			const today = new Date();
-			if (today.getMonth() === currentDate.getMonth() && today.getFullYear() === currentDate.getFullYear()) {
-				const todayKey = getDateKey(today);
-				const todayDateStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
-				const todayCell = calendar.querySelector(`[data-date="${todayDateStr}"]`) as HTMLElement;
-				if (todayCell) {
-					expect(todayCell.hasAttribute('data-today')).toBe(true);
-				}
-			}
-		});
-
-		it('should use date keys for range normalization instead of creating Date objects', () => {
-			const days = getCalendarDays(2024, 0);
-			const onDayClick = vi.fn();
-			const currentDate = new Date(2024, 0, 15);
-			const selectedRange = {
-				start: new Date(2024, 0, 10),
-				end: new Date(2024, 0, 20)
-			};
-
-			const calendar = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				null,
-				onDayClick,
-				'en-US',
-				selectedRange
-			);
-
-		// Range dates should be marked without creating Date objects in loop
-		// Note: Uses data-kt-hover-range (consolidated from data-in-range)
-		const inRangeCells = calendar.querySelectorAll('[data-kt-hover-range]');
-		expect(inRangeCells.length).toBeGreaterThan(0);
-
-		// Verify range calculation is correct using date keys
-		const startKey = getDateKey(selectedRange.start);
-		const endKey = getDateKey(selectedRange.end);
-		inRangeCells.forEach(cell => {
-			const dateAttr = cell.getAttribute('data-date');
-			if (dateAttr) {
-				const [year, month, day] = dateAttr.split('-').map(Number);
-				const cellKey = getDateKey(new Date(year, month - 1, day));
-				expect(cellKey).toBeGreaterThanOrEqual(startKey);
-				expect(cellKey).toBeLessThanOrEqual(endKey);
-			}
-		});
-		});
-	});
-
-	describe('Performance Optimizations Integration', () => {
-		it('should render calendar efficiently with all optimizations', () => {
-			const days = getCalendarDays(2024, 0);
-			const onDayClick = vi.fn();
-			const currentDate = new Date(2024, 0, 15);
-			const selectedDate = new Date(2024, 0, 15);
-			const selectedDates = [
-				new Date(2024, 0, 10),
-				new Date(2024, 0, 20)
-			];
-			const selectedRange = {
-				start: new Date(2024, 0, 5),
-				end: new Date(2024, 0, 25)
-			};
-
-			// Render with all selection modes to test optimizations
-			const calendar = renderCalendar(
-				defaultTemplates.dayCell as string,
-				days,
-				currentDate,
-				selectedDate,
-				onDayClick,
-				'en-US',
-				selectedRange,
-				selectedDates
-			);
-
-			// Verify calendar rendered correctly
-			expect(calendar).toBeTruthy();
-			const cells = calendar.querySelectorAll('td[data-kt-datepicker-day]');
-			expect(cells.length).toBeGreaterThan(0);
-
-			// Verify optimizations are working
-			// 1. Day names should be cached (no way to directly test, but rendering works)
-			// 2. Event delegation should work (tested separately)
-			// 3. Date keys should work (selected dates highlighted)
-			const selectedCells = calendar.querySelectorAll('[data-kt-selected="true"]');
-			expect(selectedCells.length).toBeGreaterThan(0);
-		});
-
-		it('should handle multiple renders efficiently', () => {
-			const days = getCalendarDays(2024, 0);
-			const onDayClick = vi.fn();
-			const currentDate = new Date(2024, 0, 15);
-
-			// Render multiple times - day name cache should speed up subsequent renders
-			const calendars: HTMLElement[] = [];
-			for (let i = 0; i < 5; i++) {
-				const calendar = renderCalendar(
-					defaultTemplates.dayCell as string,
-					days,
-					currentDate,
-					null,
-					onDayClick,
-					'en-US'
-				);
-				calendars.push(calendar);
-			}
-
-			// All calendars should render correctly
-			expect(calendars.length).toBe(5);
-			calendars.forEach(cal => {
-				expect(cal).toBeTruthy();
-				const cells = cal.querySelectorAll('td[data-kt-datepicker-day]');
-				expect(cells.length).toBeGreaterThan(0);
-			});
-		});
-	});
-});
-