@mhmo91/schmancy 0.10.42 → 0.10.43

package/src/form/fields/date-range/date-range.test.ts

@@ -1,146 +1,383 @@
-import { afterEach, beforeEach, describe, expect, it } from 'vitest'
-import './date-range'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { expectNoA11yViolations } from '../../../test-utils/a11y'
+import type { SchmancyDateRange } from './date-range'
+import './date-range'
+// Ensure schmancy-overlay is registered in this page's customElements registry
+// (the decorator in overlay.component runs on import, which is required before
+// show() can create a functional overlay element in browser tests).
+import '../../../overlay/overlay.component'
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
 
 const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
 
+/** Mount a <schmancy-date-range> in a host div appended to body. */
+async function mountEl(innerHTML: string): Promise<HTMLDivElement> {
+	const host = document.createElement('div')
+	host.innerHTML = innerHTML
+	document.body.appendChild(host)
+	const el = host.querySelector('schmancy-date-range') as SchmancyDateRange
+	await nextUpdate()
+	await nextUpdate()
+	if (el && 'updateComplete' in el) await (el as unknown as { updateComplete: Promise<unknown> }).updateComplete
+	return host
+}
+
+const dr = (root: HTMLElement): SchmancyDateRange =>
+	root.querySelector('schmancy-date-range') as SchmancyDateRange
+
+// ---------------------------------------------------------------------------
+// Suites
+// ---------------------------------------------------------------------------
+
 describe('schmancy-date-range', () => {
-	let host: HTMLDivElement
+	const hosts: HTMLDivElement[] = []
 
-	beforeEach(() => {
-		host = document.createElement('div')
-		document.body.appendChild(host)
+	afterEach(async () => {
+		for (const h of hosts) h.remove()
+		hosts.length = 0
+		// Flush microtasks so overlay.finalize's queueMicrotask(() => el.remove()) runs,
+		// then remove any stray overlay elements left in the DOM.
+		await nextUpdate()
+		document.querySelectorAll('schmancy-overlay').forEach(o => o.remove())
 	})
 
-	afterEach(() => {
-		host.remove()
-	})
+	async function mount(innerHTML: string): Promise<HTMLDivElement> {
+		const host = await mountEl(innerHTML)
+		hosts.push(host)
+		return host
+	}
 
-	it('contributes flat-suffix dateFrom/dateTo entries to FormData', async () => {
-		host.innerHTML = `
-			<form>
-				<schmancy-date-range name="window"></schmancy-date-range>
-			</form>
-		`
-		const form = host.querySelector('form') as HTMLFormElement
-		const dr = host.querySelector('schmancy-date-range') as HTMLElement & {
-			dateFrom: { label: string; value: string }
-			dateTo: { label: string; value: string }
-		}
-		await nextUpdate()
-		await nextUpdate()
-		dr.dateFrom = { label: 'From', value: '2026-01-01' }
-		dr.dateTo = { label: 'To', value: '2026-01-31' }
-		await nextUpdate()
-		await nextUpdate()
-		const fd = new FormData(form)
-		expect(fd.get('windowFrom')).toBe('2026-01-01')
-		expect(fd.get('windowTo')).toBe('2026-01-31')
+	// -------------------------------------------------------------------------
+	describe('FormData contract', () => {
+		it('contributes ${name}.start and ${name}.end when both set', async () => {
+			const host = await mount('<form><schmancy-date-range name="window"></schmancy-date-range></form>')
+			const form = host.querySelector('form') as HTMLFormElement
+			const el = dr(host)
+			el.start = '2026-01-01'
+			el.end = '2026-01-31'
+			await el.updateComplete
+			const fd = new FormData(form)
+			expect(fd.get('window.start')).toBe('2026-01-01')
+			expect(fd.get('window.end')).toBe('2026-01-31')
+		})
+
+		it('omits empty endpoint from FormData', async () => {
+			const host = await mount('<form><schmancy-date-range name="window"></schmancy-date-range></form>')
+			const form = host.querySelector('form') as HTMLFormElement
+			const el = dr(host)
+			el.start = '2026-01-01'
+			el.end = null
+			await el.updateComplete
+			const fd = new FormData(form)
+			expect(fd.get('window.start')).toBe('2026-01-01')
+			expect(fd.get('window.end')).toBeNull()
+		})
+
+		it('submits nothing when name is unset', async () => {
+			const host = await mount('<form><schmancy-date-range></schmancy-date-range></form>')
+			const form = host.querySelector('form') as HTMLFormElement
+			const el = dr(host)
+			el.start = '2026-01-01'
+			el.end = '2026-01-31'
+			await el.updateComplete
+			expect([...new FormData(form).keys()]).toEqual([])
+		})
+
+		it('submits nothing when disabled', async () => {
+			const host = await mount('<form><schmancy-date-range name="window" disabled></schmancy-date-range></form>')
+			const form = host.querySelector('form') as HTMLFormElement
+			const el = dr(host)
+			el.start = '2026-01-01'
+			el.end = '2026-01-31'
+			await el.updateComplete
+			expect([...new FormData(form).keys()]).toEqual([])
+		})
 	})
 
-	it('omits from FormData when name is not set', async () => {
-		host.innerHTML = `<form><schmancy-date-range></schmancy-date-range></form>`
-		const form = host.querySelector('form') as HTMLFormElement
-		await nextUpdate()
-		expect([...new FormData(form).keys()]).toEqual([])
+	// -------------------------------------------------------------------------
+	describe('validity', () => {
+		it('is invalid when required and both endpoints empty', async () => {
+			const host = await mount('<form><schmancy-date-range name="w" required></schmancy-date-range></form>')
+			const form = host.querySelector('form') as HTMLFormElement
+			const el = dr(host)
+			await el.updateComplete
+			expect(el.checkValidity()).toBe(false)
+			expect(form.checkValidity()).toBe(false)
+		})
+
+		it('becomes valid once both endpoints are set', async () => {
+			const host = await mount('<form><schmancy-date-range name="w" required></schmancy-date-range></form>')
+			const form = host.querySelector('form') as HTMLFormElement
+			const el = dr(host)
+			el.start = '2026-01-01'
+			el.end = '2026-01-02'
+			await el.updateComplete
+			expect(el.checkValidity()).toBe(true)
+			expect(form.checkValidity()).toBe(true)
+		})
+
+		it('renders invalid surface with the ACTUAL message after markSubmitted', async () => {
+			const host = await mount('<form><schmancy-date-range name="w" required></schmancy-date-range></form>')
+			const form = host.querySelector('form') as HTMLFormElement
+			const el = dr(host)
+			await el.updateComplete
+
+			// Platform surface blocks submit
+			expect(form.checkValidity()).toBe(false)
+
+			// Rendered surface gates on submit (validateOn default)
+			el.markSubmitted()
+			el.checkValidity()
+			await el.updateComplete
+			await nextUpdate()
+
+			const root = el.shadowRoot!
+			const alert = root.querySelector('[role="alert"]')
+			expect(alert, 'role=alert must render').not.toBeNull()
+			expect(alert?.textContent?.trim()).toBe('Please select a complete date range.')
+			expect(
+				root.querySelector('section.outline-error-default'),
+				'control must carry invalid treatment',
+			).not.toBeNull()
+		})
+
+		it('clears both validity surfaces once both endpoints set', async () => {
+			const host = await mount('<form><schmancy-date-range name="w" required></schmancy-date-range></form>')
+			const form = host.querySelector('form') as HTMLFormElement
+			const el = dr(host)
+			await el.updateComplete
+			el.markSubmitted()
+			el.checkValidity()
+			await el.updateComplete
+
+			el.start = '2026-01-01'
+			el.end = '2026-01-31'
+			await el.updateComplete
+			await nextUpdate()
+
+			expect(form.checkValidity()).toBe(true)
+			expect(el.shadowRoot!.querySelector('[role="alert"]')).toBeNull()
+			expect(el.shadowRoot!.querySelector('section.outline-error-default')).toBeNull()
+		})
 	})
 
-	it('reports invalid when required and both dates empty', async () => {
-		host.innerHTML = `<form><schmancy-date-range name="w" required></schmancy-date-range></form>`
-		const form = host.querySelector('form') as HTMLFormElement
-		const dr = host.querySelector('schmancy-date-range') as HTMLElement & {
-			dateFrom: { label: string; value: string }
-			dateTo: { label: string; value: string }
-			checkValidity(): boolean
-		}
-		await nextUpdate()
-		await nextUpdate()
-		dr.dateFrom = { label: 'From', value: '' }
-		dr.dateTo = { label: 'To', value: '' }
-		await nextUpdate()
-		expect(dr.checkValidity()).toBe(false)
-		expect(form.checkValidity()).toBe(false)
-		dr.dateFrom = { label: 'From', value: '2026-01-01' }
-		dr.dateTo = { label: 'To', value: '2026-01-02' }
-		await nextUpdate()
-		await nextUpdate()
-		expect(dr.checkValidity()).toBe(true)
-		expect(form.checkValidity()).toBe(true)
+	// -------------------------------------------------------------------------
+	describe('events', () => {
+		it('change event detail carries {start, end, preset}', async () => {
+			const host = await mount('<schmancy-date-range name="window"></schmancy-date-range>')
+			const el = dr(host)
+			el.start = '2026-01-01'
+			el.end = '2026-01-07'
+			await el.updateComplete
+
+			const received: CustomEvent[] = []
+			el.addEventListener('change', (e) => received.push(e as CustomEvent))
+
+			// PageDown keyboard shortcut triggers shiftDateRange → commitRange → change event
+			el.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'PageDown', bubbles: true, cancelable: true }),
+			)
+			await el.updateComplete
+
+			expect(received.length).toBeGreaterThan(0)
+			const detail = received[received.length - 1].detail as {
+				start: string | null
+				end: string | null
+				preset: string | null
+			}
+			expect(detail).toHaveProperty('start')
+			expect(detail).toHaveProperty('end')
+			expect(detail).toHaveProperty('preset')
+		})
+
+		it('change event is composed (crosses shadow boundary)', async () => {
+			const host = await mount('<form><schmancy-date-range name="window"></schmancy-date-range></form>')
+			const form = host.querySelector('form') as HTMLFormElement
+			const el = dr(host)
+			el.start = '2026-01-01'
+			el.end = '2026-01-07'
+			await el.updateComplete
+
+			const received: CustomEvent[] = []
+			form.addEventListener('change', (e) => received.push(e as CustomEvent))
+
+			el.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'PageDown', bubbles: true, cancelable: true }),
+			)
+			await el.updateComplete
+
+			expect(received.length).toBeGreaterThan(0)
+			expect(received[received.length - 1].composed).toBe(true)
+			expect(received[received.length - 1].detail).toHaveProperty('start')
+			expect(received[received.length - 1].detail).toHaveProperty('end')
+			expect(received[received.length - 1].detail).toHaveProperty('preset')
+		})
+
+		// -----------------------------------------------------------------------
+		// input event — provisional sweep-preview contract
+		// -----------------------------------------------------------------------
+
+		it('input event detail carries exactly {start, end} — no preset field', async () => {
+			const host = await mount('<schmancy-date-range name="window"></schmancy-date-range>')
+			const el = dr(host)
+			await el.updateComplete
+
+			// Open the picker. Fire a pointerdown on the document first so the
+			// ambient-anchor capture in overlay.service records a MouseEvent with
+			// clientX/clientY, then use schmancy-button's overridden click() so the
+			// composed Event reaches toggleDropdown the same way the CTA wiring test
+			// does (btn.click() calls SchmancyButton.click() → dispatchEvent).
+			const btn = el.shadowRoot!.querySelector('schmancy-button') as HTMLElement
+			document.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, composed: true, clientX: 10, clientY: 10 }))
+			btn.click()
+			await el.updateComplete
+			await nextUpdate()
+
+			const inputReceived: CustomEvent[] = []
+			const changeReceived: CustomEvent[] = []
+			el.addEventListener('input', (e) => inputReceived.push(e as CustomEvent))
+			el.addEventListener('change', (e) => changeReceived.push(e as CustomEvent))
+
+			// The overlay appends to document.body (or schmancy-theme). Wait for the
+			// dialog to appear inside the overlay's shadow root.
+			const dialog = await vi.waitFor(
+				() => {
+					for (const o of document.querySelectorAll('schmancy-overlay')) {
+						const d = o.shadowRoot?.querySelector('schmancy-date-range-dialog')
+						if (d) return d
+					}
+					throw new Error('dialog not mounted yet')
+				},
+				{ timeout: 2000 },
+			)
+
+			// Drive the bridge seam: dispatch the `calendar-input` event that
+			// schmancy-date-range-dialog re-emits from schmancy-calendar's `input`.
+			// The date-range @calendar-input handler re-emits as `input {start, end}`.
+			dialog.dispatchEvent(
+				new CustomEvent('calendar-input', {
+					detail: { start: '2026-06-01', end: '2026-06-15' },
+					bubbles: true,
+					composed: true,
+				}),
+			)
+			await el.updateComplete
+
+			// Must have fired at least one input event.
+			expect(inputReceived.length, 'input event must fire for sweep preview').toBeGreaterThan(0)
+
+			const detail = inputReceived[inputReceived.length - 1].detail as Record<string, unknown>
+			// Exact shape: {start, end} — no preset field.
+			expect(detail.start).toBe('2026-06-01')
+			expect(detail.end).toBe('2026-06-15')
+			expect(Object.keys(detail).sort()).toEqual(['end', 'start'])
+
+			// change must NOT have fired — provisional sweep is not a commit.
+			expect(changeReceived.length, 'change must not fire for provisional sweep').toBe(0)
+		})
+
+		it('input event is composed: true so it crosses the shadow boundary a <schmancy-form> listens across', async () => {
+			const host = await mount('<form><schmancy-date-range name="window"></schmancy-date-range></form>')
+			const form = host.querySelector('form') as HTMLFormElement
+			const el = dr(host)
+			await el.updateComplete
+
+			// Open the picker — same pointerdown + btn.click() pattern as the first test.
+			const btn2 = el.shadowRoot!.querySelector('schmancy-button') as HTMLElement
+			document.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, composed: true, clientX: 10, clientY: 10 }))
+			btn2.click()
+			await el.updateComplete
+			await nextUpdate()
+
+			const dialog = await vi.waitFor(
+				() => {
+					for (const o of document.querySelectorAll('schmancy-overlay')) {
+						const d = o.shadowRoot?.querySelector('schmancy-date-range-dialog')
+						if (d) return d
+					}
+					throw new Error('dialog not mounted yet')
+				},
+				{ timeout: 2000 },
+			)
+
+			// Listen at the form boundary — outside the component's shadow root.
+			const formReceived: Event[] = []
+			form.addEventListener('input', (e) => formReceived.push(e))
+
+			dialog.dispatchEvent(
+				new CustomEvent('calendar-input', {
+					detail: { start: '2026-07-01', end: '2026-07-10' },
+					bubbles: true,
+					composed: true,
+				}),
+			)
+			await el.updateComplete
+
+			const last = formReceived[formReceived.length - 1] as CustomEvent<{ start: string; end: string }>
+			expect(formReceived.length, 'input must cross shadow boundary (composed: true)').toBeGreaterThan(0)
+			expect(last.composed).toBe(true)
+			expect(last.detail.start).toBe('2026-07-01')
+			expect(last.detail.end).toBe('2026-07-10')
+		})
 	})
 
-	it('paints both validity surfaces when required, empty, and submitted', async () => {
-		host.innerHTML = `<form><schmancy-date-range name="w" required></schmancy-date-range></form>`
-		const form = host.querySelector('form') as HTMLFormElement
-		const dr = host.querySelector('schmancy-date-range') as HTMLElement & {
-			dateFrom: { label: string; value: string }
-			dateTo: { label: string; value: string }
-			markSubmitted(): void
-			checkValidity(): boolean
-		}
-		await nextUpdate()
-		await nextUpdate()
-		dr.dateFrom = { label: 'From', value: '' }
-		dr.dateTo = { label: 'To', value: '' }
-		await nextUpdate()
+	// -------------------------------------------------------------------------
+	describe('CTA wiring', () => {
+		it('clicking the label button sets aria-expanded=true', async () => {
+			const host = await mount('<schmancy-date-range name="window"></schmancy-date-range>')
+			const el = dr(host)
+			await el.updateComplete
 
-		// Platform surface: the form blocks submit.
-		expect(form.checkValidity()).toBe(false)
+			const btn = el.shadowRoot!.querySelector('schmancy-button') as HTMLElement
+			expect(btn).not.toBeNull()
 
-		// Rendered surface is gated until submit (validateOn default 'dirty').
-		dr.markSubmitted()
-		dr.checkValidity()
-		await nextUpdate()
-		await nextUpdate()
+			btn.click()
+			await el.updateComplete
+			await nextUpdate()
 
-		const root = (dr as unknown as { shadowRoot: ShadowRoot }).shadowRoot
-		const alert = root.querySelector('[role="alert"]')
-		expect(alert, 'a role=alert message must render').not.toBeNull()
-		expect(alert?.textContent?.trim()).toBe('Please select a date range.')
-		// Control itself carries a visible invalid treatment.
-		expect(
-			root.querySelector('section.outline-error-default'),
-			'the control must carry an invalid treatment',
-		).not.toBeNull()
-
-		// Filling the range clears both surfaces.
-		dr.dateFrom = { label: 'From', value: '2026-01-01' }
-		dr.dateTo = { label: 'To', value: '2026-01-31' }
-		await nextUpdate()
-		await nextUpdate()
-		expect(form.checkValidity()).toBe(true)
-		expect(root.querySelector('[role="alert"]')).toBeNull()
-		expect(root.querySelector('section.outline-error-default')).toBeNull()
+			expect(
+				el.shadowRoot!.querySelector('[aria-expanded="true"]'),
+				'aria-expanded must be true after CTA click',
+			).not.toBeNull()
+		})
 	})
 
-	it('has no axe-core a11y violations', async () => {
-		host.innerHTML = `<schmancy-date-range name="window"></schmancy-date-range>`
-		await nextUpdate()
-		await nextUpdate()
-		// Trigger button-group rendering with values populated.
-		const dr = host.querySelector('schmancy-date-range') as HTMLElement & {
-			dateFrom: { label: string; value: string }
-			dateTo: { label: string; value: string }
-		}
-		dr.dateFrom = { label: 'From', value: '2026-01-01' }
-		dr.dateTo = { label: 'To', value: '2026-01-31' }
-		await nextUpdate()
-		await nextUpdate()
-		await expectNoA11yViolations(host)
+	// -------------------------------------------------------------------------
+	describe('teardown', () => {
+		it('stops responding to document keydown after disconnect', async () => {
+			const host = await mount('<schmancy-date-range name="window"></schmancy-date-range>')
+			const el = dr(host)
+			el.start = '2026-01-01'
+			el.end = '2026-01-07'
+			await el.updateComplete
+
+			const received: Event[] = []
+			el.addEventListener('change', (e) => received.push(e))
+
+			el.remove()
+
+			document.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'PageDown', bubbles: true, cancelable: true }),
+			)
+			await nextUpdate()
+
+			expect(received).toHaveLength(0)
+		})
 	})
 
-	it('omits empty dates from FormData', async () => {
-		host.innerHTML = `<form><schmancy-date-range name="w"></schmancy-date-range></form>`
-		const form = host.querySelector('form') as HTMLFormElement
-		const dr = host.querySelector('schmancy-date-range') as HTMLElement & {
-			dateFrom: { label: string; value: string }
-			dateTo: { label: string; value: string }
-		}
-		await nextUpdate()
-		dr.dateFrom = { label: 'From', value: '' }
-		dr.dateTo = { label: 'To', value: '' }
-		await nextUpdate()
-		const fd = new FormData(form)
-		expect(fd.get('wFrom')).toBeNull()
-		expect(fd.get('wTo')).toBeNull()
+	// -------------------------------------------------------------------------
+	describe('axe-core accessibility', () => {
+		it('has no a11y violations', async () => {
+			const host = await mount('<schmancy-date-range name="window"></schmancy-date-range>')
+			const el = dr(host)
+			el.start = '2026-01-01'
+			el.end = '2026-01-31'
+			await el.updateComplete
+			await nextUpdate()
+			await expectNoA11yViolations(host)
+		})
 	})
 })