more calendar tests

src/tests/calendar/Calendar.spec.ts

@@ -6,6 +6,7 @@ import { testKbd as kbd } from "../utils.js";
 import CalendarTest from "./CalendarTest.svelte";
 import type { Calendar } from "$lib";
 import { CalendarDate, CalendarDateTime, toZoned } from "@internationalized/date";
+import CalendarMultiTest from "./CalendarMultiTest.svelte";
 
 const calendarDate = new CalendarDate(1980, 1, 20);
 const calendarDateTime = new CalendarDateTime(1980, 1, 20, 12, 30, 0, 0);
@@ -25,6 +26,14 @@ function setup(props: Calendar.Props = {}) {
 	return { ...returned, user, calendar };
 }
 
+function setupMulti(props: Calendar.Props<true> = {}) {
+	const user = userEvent.setup();
+	const returned = render(CalendarMultiTest, { ...props, multiple: true });
+	const calendar = returned.getByTestId("calendar");
+	expect(calendar).toBeVisible();
+	return { ...returned, user, calendar };
+}
+
 describe("Calendar", () => {
 	it("has no accessibility violations", async () => {
 		const { container } = render(CalendarTest);
@@ -551,4 +560,88 @@ describe("Calendar", () => {
 	});
 });
 
-describe.todo("Calendar - `multiple`");
+describe("Calendar - `multiple`", () => {
+	it("handles default value when `value` prop is provided - `CalendarDate[]`", async () => {
+		const d1 = new CalendarDate(1980, 1, 2);
+		const d2 = new CalendarDate(1980, 1, 5);
+
+		const { calendar } = setupMulti({
+			value: [d1, d2]
+		});
+
+		const selectedDays = calendar.querySelectorAll("[data-selected]");
+		expect(selectedDays.length).toBe(2);
+		expect(selectedDays[0]).toHaveTextContent(String(d1.day));
+		expect(selectedDays[1]).toHaveTextContent(String(d2.day));
+	});
+
+	it("handles default value when `value` prop is provided - `CalendarDateTime[]`", async () => {
+		const d1 = new CalendarDateTime(1980, 1, 2);
+		const d2 = new CalendarDateTime(1980, 1, 5);
+
+		const { calendar } = setupMulti({
+			value: [d1, d2]
+		});
+
+		const selectedDays = calendar.querySelectorAll("[data-selected]");
+		expect(selectedDays.length).toBe(2);
+		expect(selectedDays[0]).toHaveTextContent(String(d1.day));
+		expect(selectedDays[1]).toHaveTextContent(String(d2.day));
+	});
+
+	it("handles default value when `value` prop is provided - `ZonedDateTime[]`", async () => {
+		const d1 = toZoned(new CalendarDateTime(1980, 1, 2), "America/New_York");
+		const d2 = toZoned(new CalendarDateTime(1980, 1, 5), "America/New_York");
+
+		const { calendar } = setupMulti({
+			value: [d1, d2]
+		});
+
+		const selectedDays = calendar.querySelectorAll("[data-selected]");
+		expect(selectedDays.length).toBe(2);
+		expect(selectedDays[0]).toHaveTextContent(String(d1.day));
+		expect(selectedDays[1]).toHaveTextContent(String(d2.day));
+	});
+
+	it("sets placeholder to last value in `value` prop", async () => {
+		const d1 = new CalendarDate(1980, 1, 2);
+		const d2 = new CalendarDate(1980, 5, 5);
+
+		const { calendar, getByTestId } = setupMulti({
+			value: [d1, d2]
+		});
+
+		const selectedDays = calendar.querySelectorAll("[data-selected]");
+		expect(selectedDays.length).toBe(1);
+		expect(getByTestId("heading")).toHaveTextContent("May 1980");
+	});
+
+	it("allows deselection", async () => {
+		const d1 = new CalendarDate(1980, 1, 2);
+		const d2 = new CalendarDate(1980, 1, 5);
+
+		const { calendar, user } = setupMulti({
+			value: [d1, d2]
+		});
+		const selectedDays = calendar.querySelectorAll<HTMLElement>("[data-selected]");
+		expect(selectedDays.length).toBe(2);
+		await user.click(selectedDays[0]);
+		expect(calendar.querySelectorAll("[data-selected]").length).toBe(1);
+	});
+
+	it("prevents deselection when only one date is selected and `preventDeselect` is `true`", async () => {
+		const d1 = new CalendarDate(1980, 1, 2);
+
+		const { calendar, user } = setupMulti({
+			value: [d1],
+			preventDeselect: true
+		});
+		const selectedDays = calendar.querySelectorAll("[data-selected]");
+		expect(selectedDays.length).toBe(1);
+		await user.click(selectedDays[0]);
+		const selectedDays2 = calendar.querySelectorAll("[data-selected]");
+		expect(selectedDays2.length).toBe(1);
+		await user.click(selectedDays2[0]);
+		expect(calendar.querySelectorAll("[data-selected]").length).toBe(1);
+	});
+});

src/tests/calendar/CalendarMultiTest.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { Calendar } from "$lib";
+
+	type $$Props = Calendar.Props<true>;
+
+	export let placeholder: $$Props["placeholder"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export let multiple: $$Props["multiple"] = true;
+</script>
+
+<main>
+	<div data-testid="value">{value}</div>
+	<Calendar.Root
+		let:months
+		let:weekdays
+		bind:placeholder
+		bind:value
+		{...$$restProps}
+		{multiple}
+		data-testid="calendar"
+	>
+		<Calendar.Header data-testid="header">
+			<Calendar.PrevButton data-testid="prev-button">Prev</Calendar.PrevButton>
+			<Calendar.Heading data-testid="heading" />
+			<Calendar.NextButton data-testid="next-button">Next</Calendar.NextButton>
+		</Calendar.Header>
+		<div>
+			{#each months as month}
+				{@const m = month.value.month}
+				<Calendar.Grid data-testid="grid-{m}">
+					<Calendar.GridHead data-testid="grid-head-{m}">
+						<Calendar.GridRow data-testid="grid-row-{m}">
+							{#each weekdays as day, i}
+								<Calendar.HeadCell data-testid="weekday-{m}-{i}">
+									{day}
+								</Calendar.HeadCell>
+							{/each}
+						</Calendar.GridRow>
+					</Calendar.GridHead>
+					<Calendar.GridBody data-testid="grid-body-{m}">
+						{#each month.weeks as weekDates, i}
+							<Calendar.GridRow data-testid="grid-row-{m}-{i}" data-week>
+								{#each weekDates as date, d}
+									<Calendar.Cell {date} data-testid="cell-{date.month}-{d}">
+										<Calendar.Date
+											{date}
+											month={month.value}
+											data-testid="date-{date.month}-{date.day}"
+										>
+											{date.day}
+										</Calendar.Date>
+									</Calendar.Cell>
+								{/each}
+							</Calendar.GridRow>
+						{/each}
+					</Calendar.GridBody>
+				</Calendar.Grid>
+			{/each}
+		</div>
+	</Calendar.Root>
+</main>