@mhmo91/schmancy 0.10.42 → 0.10.44

package/src/calendar/calendar.test.ts

@@ -0,0 +1,504 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { expectNoA11yViolations } from '../test-utils/a11y'
+import type { SchmancyCalendar } from './calendar'
+import './calendar'
+
+const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
+
+const mount = async (attrs = ''): Promise<SchmancyCalendar> => {
+	const host = document.createElement('div')
+	host.innerHTML = `<schmancy-calendar ${attrs}></schmancy-calendar>`
+	document.body.appendChild(host)
+	const el = host.querySelector('schmancy-calendar') as SchmancyCalendar
+	await nextUpdate()
+	await nextUpdate()
+	return el
+}
+
+const cleanup = () => {
+	document.querySelectorAll('div[data-calendar-test]').forEach(el => el.remove())
+	// Remove all test hosts appended to body
+	document.body.querySelectorAll(':scope > div:not([id])').forEach(el => el.remove())
+}
+
+// Helper: click a specific day cell by ISO date string
+async function clickDay(el: SchmancyCalendar, iso: string) {
+	const cell = el.shadowRoot!.querySelector<HTMLElement>(`[aria-label="${iso}"]`)
+	expect(cell, `day cell for ${iso} not found`).toBeTruthy()
+	cell!.click()
+	await nextUpdate()
+	await nextUpdate()
+}
+
+// Helper: hover a specific day cell
+async function hoverDay(el: SchmancyCalendar, iso: string) {
+	const cell = el.shadowRoot!.querySelector<HTMLElement>(`[aria-label="${iso}"]`)
+	expect(cell, `day cell for ${iso} not found`).toBeTruthy()
+	cell!.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true, composed: true }))
+	await nextUpdate()
+}
+
+// ---------------------------------------------------------------------------
+// Collect events off the element
+// ---------------------------------------------------------------------------
+
+function captureEvent<T = unknown>(el: EventTarget, eventName: string): { events: CustomEvent<T>[]; stop: () => void } {
+	const events: CustomEvent<T>[] = []
+	const handler = (e: Event) => events.push(e as CustomEvent<T>)
+	el.addEventListener(eventName, handler)
+	return {
+		events,
+		stop: () => el.removeEventListener(eventName, handler),
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('schmancy-calendar', () => {
+	afterEach(() => cleanup())
+
+	// -----------------------------------------------------------------------
+	// Phase rendering (props-in)
+	// -----------------------------------------------------------------------
+	describe('phase rendering', () => {
+		it('renders the current month by default', async () => {
+			const el = await mount()
+			const shadow = el.shadowRoot!
+			const monthLabel = shadow.querySelector('[part="month-label"]')
+			expect(monthLabel).toBeTruthy()
+			// Should show at least one month label
+			expect(shadow.querySelectorAll('[data-month]').length).toBeGreaterThan(0)
+		})
+
+		it('renders multiple months in the scroll window', async () => {
+			const el = await mount()
+			const months = el.shadowRoot!.querySelectorAll('[data-month]')
+			// Default window is 3 months before + anchor + 9 months after = 13+
+			expect(months.length).toBeGreaterThanOrEqual(10)
+		})
+
+		it('renders weekday headers', async () => {
+			const el = await mount()
+			const weekdays = el.shadowRoot!.querySelectorAll('[part="weekday"]')
+			expect(weekdays.length).toBeGreaterThan(0)
+		})
+
+		it('marks today with day-today part', async () => {
+			const el = await mount()
+			await nextUpdate()
+			const today = el.shadowRoot!.querySelector('[part~="day-today"]')
+			expect(today).toBeTruthy()
+		})
+
+		it('single mode: marks the value date as selected', async () => {
+			const el = await mount()
+			el.mode = 'single'
+			el.value = '2026-05-15'
+			await nextUpdate()
+			await nextUpdate()
+			const selected = el.shadowRoot!.querySelector('[part~="day-selected"]')
+			expect(selected).toBeTruthy()
+			expect(selected!.getAttribute('aria-label')).toBe('2026-05-15')
+		})
+
+		it('range mode: marks start/end dates and in-range days', async () => {
+			const el = await mount()
+			el.mode = 'range'
+			el.start = '2026-05-10'
+			el.end = '2026-05-15'
+			await nextUpdate()
+			await nextUpdate()
+			const rangeStart = el.shadowRoot!.querySelector('[part~="day-range-start"]')
+			const rangeEnd = el.shadowRoot!.querySelector('[part~="day-range-end"]')
+			const inRange = el.shadowRoot!.querySelectorAll('[part~="day-in-range"]')
+			expect(rangeStart).toBeTruthy()
+			expect(rangeEnd).toBeTruthy()
+			// 2026-05-11 through 2026-05-14 = 4 days in-range
+			expect(inRange.length).toBe(4)
+		})
+
+		it('marks disabled days when min/max are set', async () => {
+			const el = await mount()
+			el.min = '2026-05-10'
+			el.max = '2026-05-20'
+			await nextUpdate()
+			await nextUpdate()
+			const disabled = el.shadowRoot!.querySelectorAll('[part~="day-disabled"]')
+			expect(disabled.length).toBeGreaterThan(0)
+		})
+	})
+
+	// -----------------------------------------------------------------------
+	// CTA wiring (event system works)
+	// -----------------------------------------------------------------------
+	describe('CTA wiring', () => {
+		it('a day cell is focusable and has a gridcell role', async () => {
+			const el = await mount()
+			const cell = el.shadowRoot!.querySelector('[role="gridcell"]')
+			expect(cell).toBeTruthy()
+			expect(cell!.getAttribute('tabindex')).toBe('0')
+		})
+
+		it('clicking an enabled day dispatches events', async () => {
+			const el = await mount()
+			el.mode = 'single'
+			await nextUpdate()
+			const { events, stop } = captureEvent<{ value: string | null; start: string | null; end: string | null }>(
+				el,
+				'change',
+			)
+			// Click any non-disabled day
+			const cell = el.shadowRoot!.querySelector<HTMLElement>('[role="gridcell"]:not([aria-disabled="true"])')
+			expect(cell).toBeTruthy()
+			cell!.click()
+			await nextUpdate()
+			expect(events.length).toBe(1)
+			stop()
+		})
+
+		it('disabled days do not dispatch events', async () => {
+			const el = await mount()
+			el.disabled = true
+			await nextUpdate()
+			const { events, stop } = captureEvent(el, 'change')
+			const cell = el.shadowRoot!.querySelector<HTMLElement>('[role="gridcell"]')
+			if (cell) cell.click()
+			await nextUpdate()
+			expect(events.length).toBe(0)
+			stop()
+		})
+	})
+
+	// -----------------------------------------------------------------------
+	// Single mode: input → change state machine
+	// -----------------------------------------------------------------------
+	describe('emits change (single mode)', () => {
+		it('click commits the date via change event', async () => {
+			const el = await mount()
+			el.mode = 'single'
+			await nextUpdate()
+			await nextUpdate()
+
+			const { events: changeEvents, stop: stopChange } = captureEvent<{
+				value: string | null
+				start: string | null
+				end: string | null
+			}>(el, 'change')
+
+			await clickDay(el, '2026-05-19')
+			expect(changeEvents.length).toBe(1)
+			expect(changeEvents[0].detail.value).toBe('2026-05-19')
+			expect(changeEvents[0].detail.start).toBeNull()
+			expect(changeEvents[0].detail.end).toBeNull()
+			stopChange()
+		})
+
+		it('change event bubbles and is composed', async () => {
+			const el = await mount()
+			el.mode = 'single'
+			await nextUpdate()
+			await nextUpdate()
+
+			let bubbled = false
+			document.body.addEventListener(
+				'change',
+				() => {
+					bubbled = true
+				},
+				{ once: true },
+			)
+			await clickDay(el, '2026-05-19')
+			expect(bubbled).toBe(true)
+		})
+	})
+
+	// -----------------------------------------------------------------------
+	// Range mode: input → change state machine
+	// -----------------------------------------------------------------------
+	describe('range state machine (input → change)', () => {
+		it('first click emits input with start set and end null', async () => {
+			const el = await mount()
+			el.mode = 'range'
+			await nextUpdate()
+			await nextUpdate()
+
+			const { events: inputEvents, stop } = captureEvent<{
+				value: string | null
+				start: string | null
+				end: string | null
+			}>(el, 'input')
+
+			await clickDay(el, '2026-05-10')
+			expect(inputEvents.length).toBeGreaterThanOrEqual(1)
+			const first = inputEvents[0]
+			expect(first.detail.start).toBe('2026-05-10')
+			expect(first.detail.end).toBeNull()
+			stop()
+		})
+
+		it('second click emits change with both start and end', async () => {
+			const el = await mount()
+			el.mode = 'range'
+			await nextUpdate()
+			await nextUpdate()
+
+			const { events: changeEvents, stop } = captureEvent<{
+				value: string | null
+				start: string | null
+				end: string | null
+			}>(el, 'change')
+
+			await clickDay(el, '2026-05-10')
+			await clickDay(el, '2026-05-15')
+
+			expect(changeEvents.length).toBe(1)
+			expect(changeEvents[0].detail.start).toBe('2026-05-10')
+			expect(changeEvents[0].detail.end).toBe('2026-05-15')
+			stop()
+		})
+
+		it('second click before first emits correctly ordered range', async () => {
+			const el = await mount()
+			el.mode = 'range'
+			await nextUpdate()
+			await nextUpdate()
+
+			const { events: changeEvents, stop } = captureEvent<{
+				value: string | null
+				start: string | null
+				end: string | null
+			}>(el, 'change')
+
+			// Click end before start — should swap
+			await clickDay(el, '2026-05-20')
+			await clickDay(el, '2026-05-10')
+
+			expect(changeEvents.length).toBe(1)
+			// Regardless of click order, start < end
+			expect(changeEvents[0].detail.start).toBe('2026-05-10')
+			expect(changeEvents[0].detail.end).toBe('2026-05-20')
+			stop()
+		})
+
+		it('hover between first click and second click emits input for preview', async () => {
+			const el = await mount()
+			el.mode = 'range'
+			await nextUpdate()
+			await nextUpdate()
+
+			await clickDay(el, '2026-05-10')
+
+			const { events: inputEvents, stop } = captureEvent<{
+				value: string | null
+				start: string | null
+				end: string | null
+			}>(el, 'input')
+
+			await hoverDay(el, '2026-05-15')
+			expect(inputEvents.length).toBeGreaterThanOrEqual(1)
+			// The latest input event should cover the preview span
+			const last = inputEvents[inputEvents.length - 1]
+			expect(last.detail.start).toBe('2026-05-10')
+			expect(last.detail.end).toBe('2026-05-15')
+			stop()
+		})
+	})
+
+	// -----------------------------------------------------------------------
+	// Range across a month boundary (the continuous-scroll case)
+	// -----------------------------------------------------------------------
+	describe('range across a month boundary', () => {
+		it('emits a correctly ordered change spanning two months', async () => {
+			const el = await mount()
+			el.mode = 'range'
+			await nextUpdate()
+			await nextUpdate()
+
+			const { events: changeEvents, stop } = captureEvent<{
+				value: string | null
+				start: string | null
+				end: string | null
+			}>(el, 'change')
+
+			// Click on the last day of April then the first day of June
+			await clickDay(el, '2026-04-30')
+			await clickDay(el, '2026-06-01')
+
+			expect(changeEvents.length).toBe(1)
+			expect(changeEvents[0].detail.start).toBe('2026-04-30')
+			expect(changeEvents[0].detail.end).toBe('2026-06-01')
+			stop()
+		})
+
+		it('in-range part spans across month boundaries after props are set', async () => {
+			const el = await mount()
+			el.mode = 'range'
+			el.start = '2026-04-28'
+			el.end = '2026-05-03'
+			await nextUpdate()
+			await nextUpdate()
+
+			const inRangeDays = el.shadowRoot!.querySelectorAll('[part~="day-in-range"]')
+			// 2026-04-29, 2026-04-30, 2026-05-01, 2026-05-02 = 4 days
+			expect(inRangeDays.length).toBe(4)
+		})
+	})
+
+	// -----------------------------------------------------------------------
+	// Scroll-driven `navigate` event
+	// -----------------------------------------------------------------------
+	describe('scroll-driven navigate', () => {
+		it('exposes a scroll container with part="scroll"', async () => {
+			const el = await mount()
+			const scroller = el.shadowRoot!.querySelector('[part="scroll"]')
+			expect(scroller).toBeTruthy()
+		})
+
+		it('navigate event fires when the scroller dispatches a scroll event', async () => {
+			const el = await mount()
+			await nextUpdate()
+			await nextUpdate()
+
+			const navigateEvents: Array<CustomEvent<{ month: string }>> = []
+			el.addEventListener('navigate', e => navigateEvents.push(e as CustomEvent<{ month: string }>))
+
+			// Dispatch a real scroll event on the public scroller element.
+			// This exercises the fromEvent(scroller, 'scroll') → dominantMonth → navigate path.
+			const scroller = el.shadowRoot!.querySelector<HTMLElement>('[part="scroll"]')
+			expect(scroller, 'scroller element must be present').toBeTruthy()
+
+			scroller!.dispatchEvent(new Event('scroll', { bubbles: false }))
+
+			// Wait for the debounce (50 ms) + animation frame + microtask
+			await new Promise<void>(r => setTimeout(r, 100))
+
+			// The navigate event must have fired with a valid YYYY-MM month string.
+			expect(navigateEvents.length).toBeGreaterThanOrEqual(1)
+			expect(navigateEvents[0].detail.month).toMatch(/^\d{4}-\d{2}$/)
+		})
+	})
+
+	// -----------------------------------------------------------------------
+	// Keyboard month traversal
+	// -----------------------------------------------------------------------
+	describe('keyboard month traversal', () => {
+		it('Enter on a day cell triggers the same action as a click (single mode)', async () => {
+			const el = await mount()
+			el.mode = 'single'
+			await nextUpdate()
+			await nextUpdate()
+
+			const { events: changeEvents, stop } = captureEvent<{
+				value: string | null
+				start: string | null
+				end: string | null
+			}>(el, 'change')
+
+			const cell = el.shadowRoot!.querySelector<HTMLElement>(`[aria-label="2026-05-19"]:not([aria-disabled="true"])`)
+			if (cell) {
+				cell.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, composed: true }))
+				await nextUpdate()
+				await nextUpdate()
+				expect(changeEvents.length).toBe(1)
+				expect(changeEvents[0].detail.value).toBe('2026-05-19')
+			}
+			stop()
+		})
+
+		it('Space on a day cell triggers click (single mode)', async () => {
+			const el = await mount()
+			el.mode = 'single'
+			await nextUpdate()
+			await nextUpdate()
+
+			const { events: changeEvents, stop } = captureEvent<{
+				value: string | null
+				start: string | null
+				end: string | null
+			}>(el, 'change')
+
+			const cell = el.shadowRoot!.querySelector<HTMLElement>(`[aria-label="2026-05-19"]:not([aria-disabled="true"])`)
+			if (cell) {
+				cell.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true, composed: true }))
+				await nextUpdate()
+				await nextUpdate()
+				expect(changeEvents.length).toBe(1)
+			}
+			stop()
+		})
+	})
+
+	// -----------------------------------------------------------------------
+	// Teardown
+	// -----------------------------------------------------------------------
+	describe('teardown', () => {
+		it('disconnecting completes the pipeline (no errors thrown on remove)', async () => {
+			const el = await mount()
+			await nextUpdate()
+			expect(() => el.parentElement?.removeChild(el)).not.toThrow()
+		})
+	})
+
+	// -----------------------------------------------------------------------
+	// Failure / edge cases
+	// -----------------------------------------------------------------------
+	describe('failure and edge cases', () => {
+		it('disabled=true disables all day cells', async () => {
+			const el = await mount()
+			el.disabled = true
+			await nextUpdate()
+			await nextUpdate()
+			const enabled = el.shadowRoot!.querySelectorAll('[role="gridcell"][tabindex="0"]')
+			expect(enabled.length).toBe(0)
+		})
+
+		it('readonly=true prevents click events from firing change', async () => {
+			const el = await mount()
+			el.mode = 'single'
+			el.readonly = true
+			await nextUpdate()
+			await nextUpdate()
+			const { events, stop } = captureEvent(el, 'change')
+			const cell = el.shadowRoot!.querySelector<HTMLElement>('[role="gridcell"]')
+			if (cell) cell.click()
+			await nextUpdate()
+			expect(events.length).toBe(0)
+			stop()
+		})
+
+		it('scroll container renders when min and max bound the window', async () => {
+			const el = await mount()
+			el.min = '2026-05-01'
+			el.max = '2026-05-31'
+			await nextUpdate()
+			await nextUpdate()
+			const months = el.shadowRoot!.querySelectorAll('[data-month]')
+			// Only one month in window
+			expect(months.length).toBe(1)
+		})
+	})
+
+	// -----------------------------------------------------------------------
+	// Accessibility
+	// -----------------------------------------------------------------------
+	describe('accessibility', () => {
+		it('has no axe-core violations in single mode (idle)', async () => {
+			const el = await mount()
+			await nextUpdate()
+			await nextUpdate()
+			await expectNoA11yViolations(el.parentElement!)
+		})
+
+		it('has no axe-core violations in range mode with a selection', async () => {
+			const el = await mount()
+			el.mode = 'range'
+			el.start = '2026-05-10'
+			el.end = '2026-05-15'
+			await nextUpdate()
+			await nextUpdate()
+			await expectNoA11yViolations(el.parentElement!)
+		})
+	})
+})