225 lines
8.5 KiB
JavaScript
225 lines
8.5 KiB
JavaScript
import { shallowMount } from "@vue/test-utils";
|
||
import datePicker from "./date-picker";
|
||
|
||
const AVAILABLE_DATES = ["2026-01-21", "2026-01-22", "2026-01-23", "2026-01-25"];
|
||
|
||
function mountDesktop(props = {}) {
|
||
Object.defineProperty(window, "innerWidth", {
|
||
writable: true,
|
||
configurable: true,
|
||
value: 1024,
|
||
});
|
||
return shallowMount(datePicker, {
|
||
props: {
|
||
availableDates: AVAILABLE_DATES,
|
||
startDate: "2026-01-21",
|
||
endDate: "2026-01-25",
|
||
modelValue: null,
|
||
...props,
|
||
},
|
||
});
|
||
}
|
||
|
||
function mountMobile(props = {}) {
|
||
Object.defineProperty(window, "innerWidth", {
|
||
writable: true,
|
||
configurable: true,
|
||
value: 375,
|
||
});
|
||
return shallowMount(datePicker, {
|
||
props: {
|
||
availableDates: AVAILABLE_DATES,
|
||
startDate: "2026-01-21",
|
||
endDate: "2026-01-25",
|
||
modelValue: null,
|
||
...props,
|
||
},
|
||
});
|
||
}
|
||
|
||
describe("date-picker.vue", () => {
|
||
afterEach(() => {
|
||
Object.defineProperty(window, "innerWidth", {
|
||
writable: true,
|
||
configurable: true,
|
||
value: 1024,
|
||
});
|
||
});
|
||
|
||
describe("rendering", () => {
|
||
test("renders 5 date cards on desktop", () => {
|
||
const wrapper = mountDesktop();
|
||
expect(wrapper.findAll(".date-picker__day-card").length).toBe(5);
|
||
wrapper.unmount();
|
||
});
|
||
|
||
test("renders 3 date cards on mobile", () => {
|
||
const wrapper = mountMobile();
|
||
expect(wrapper.findAll(".date-picker__day-card").length).toBe(3);
|
||
wrapper.unmount();
|
||
});
|
||
|
||
test("renders disabled cards for dates not in availableDates", () => {
|
||
const wrapper = mountDesktop();
|
||
// Jan 24 is not in AVAILABLE_DATES but falls in the range Jan 21–25
|
||
const disabledCards = wrapper.findAll(".date-picker__day-card--disabled");
|
||
expect(disabledCards.length).toBeGreaterThan(0);
|
||
wrapper.unmount();
|
||
});
|
||
|
||
test("back navigation button is disabled at the start", () => {
|
||
const wrapper = mountDesktop();
|
||
const backBtn = wrapper.findAll(".date-picker__nav-btn")[0];
|
||
expect(backBtn.attributes("disabled")).toBeDefined();
|
||
wrapper.unmount();
|
||
});
|
||
});
|
||
|
||
describe("allDates computation", () => {
|
||
test("builds a contiguous date range between first and last available date", () => {
|
||
const wrapper = mountDesktop();
|
||
const allValues = wrapper.vm.allDates.map((d) => d.value);
|
||
// Range Jan 21–25 should include all 5 dates
|
||
expect(allValues).toEqual([
|
||
"2026-01-21",
|
||
"2026-01-22",
|
||
"2026-01-23",
|
||
"2026-01-24",
|
||
"2026-01-25",
|
||
]);
|
||
wrapper.unmount();
|
||
});
|
||
|
||
test("marks dates not in availableDates as unavailable", () => {
|
||
const wrapper = mountDesktop();
|
||
const jan24 = wrapper.vm.allDates.find((d) => d.value === "2026-01-24");
|
||
expect(jan24.isAvailable).toBe(false);
|
||
wrapper.unmount();
|
||
});
|
||
|
||
test("marks dates in availableDates as available", () => {
|
||
const wrapper = mountDesktop();
|
||
const jan21 = wrapper.vm.allDates.find((d) => d.value === "2026-01-21");
|
||
expect(jan21.isAvailable).toBe(true);
|
||
wrapper.unmount();
|
||
});
|
||
|
||
test("attaches correct day abbreviation to each date", () => {
|
||
const wrapper = mountDesktop();
|
||
const jan21 = wrapper.vm.allDates.find((d) => d.value === "2026-01-21");
|
||
// 2026-01-21 is a Wednesday
|
||
expect(jan21.dayAbbr).toBe("WED");
|
||
wrapper.unmount();
|
||
});
|
||
|
||
test("returns empty array when availableDates is empty", () => {
|
||
const wrapper = mountDesktop({ availableDates: [] });
|
||
expect(wrapper.vm.allDates).toEqual([]);
|
||
wrapper.unmount();
|
||
});
|
||
});
|
||
|
||
describe("date selection", () => {
|
||
test("emits update:modelValue with the date string when an available card is clicked", async () => {
|
||
const wrapper = mountDesktop();
|
||
const availableCard = wrapper.find(
|
||
".date-picker__day-card:not(.date-picker__day-card--disabled)"
|
||
);
|
||
await availableCard.trigger("click");
|
||
expect(wrapper.emitted("update:modelValue")).toBeTruthy();
|
||
expect(wrapper.emitted("update:modelValue")[0][0]).toBe("2026-01-21");
|
||
wrapper.unmount();
|
||
});
|
||
|
||
test("does not emit when a disabled card is clicked", async () => {
|
||
const wrapper = mountDesktop();
|
||
const disabledCard = wrapper.find(".date-picker__day-card--disabled");
|
||
await disabledCard.trigger("click");
|
||
expect(wrapper.emitted("update:modelValue")).toBeFalsy();
|
||
wrapper.unmount();
|
||
});
|
||
|
||
test("applies the selected class to the card matching modelValue", async () => {
|
||
const wrapper = mountDesktop({ modelValue: "2026-01-21" });
|
||
const selectedCard = wrapper.find(".date-picker__day-card--selected");
|
||
expect(selectedCard.exists()).toBeTruthy();
|
||
wrapper.unmount();
|
||
});
|
||
|
||
test("no card has the selected class when modelValue is null", () => {
|
||
const wrapper = mountDesktop({ modelValue: null });
|
||
expect(wrapper.find(".date-picker__day-card--selected").exists()).toBe(false);
|
||
wrapper.unmount();
|
||
});
|
||
});
|
||
|
||
describe("navigation", () => {
|
||
test("goForward advances windowStart by the window size", async () => {
|
||
// Use a longer range so forward is possible on desktop (window 5)
|
||
const manyDates = ["2026-01-01", "2026-01-02", "2026-01-03", "2026-01-10"];
|
||
const wrapper = mountDesktop({
|
||
availableDates: manyDates,
|
||
startDate: "2026-01-01",
|
||
endDate: "2026-01-10",
|
||
});
|
||
expect(wrapper.vm.canGoForward).toBe(true);
|
||
await wrapper.vm.goForward();
|
||
expect(wrapper.vm.windowStart).toBe(5);
|
||
wrapper.unmount();
|
||
});
|
||
|
||
test("goBack decrements windowStart by the window size", async () => {
|
||
const manyDates = ["2026-01-01", "2026-01-02", "2026-01-03", "2026-01-10"];
|
||
const wrapper = mountDesktop({
|
||
availableDates: manyDates,
|
||
startDate: "2026-01-01",
|
||
endDate: "2026-01-10",
|
||
});
|
||
await wrapper.vm.goForward();
|
||
await wrapper.vm.goBack();
|
||
expect(wrapper.vm.windowStart).toBe(0);
|
||
wrapper.unmount();
|
||
});
|
||
|
||
test("goBack does not go below 0", () => {
|
||
const wrapper = mountDesktop();
|
||
wrapper.vm.goBack();
|
||
expect(wrapper.vm.windowStart).toBe(0);
|
||
wrapper.unmount();
|
||
});
|
||
|
||
test("goForward does not exceed the last window position", async () => {
|
||
// Range Jan 21–25 = 5 dates, window 5 on desktop → already at max
|
||
const wrapper = mountDesktop();
|
||
await wrapper.vm.goForward();
|
||
// windowStart should not push visible window past the array length
|
||
expect(wrapper.vm.windowStart + wrapper.vm.windowSize).toBeLessThanOrEqual(
|
||
wrapper.vm.allDates.length + wrapper.vm.windowSize
|
||
);
|
||
wrapper.unmount();
|
||
});
|
||
|
||
test("back button becomes enabled after navigating forward", async () => {
|
||
const manyDates = ["2026-01-01", "2026-01-02", "2026-01-03", "2026-01-10"];
|
||
const wrapper = mountDesktop({
|
||
availableDates: manyDates,
|
||
startDate: "2026-01-01",
|
||
endDate: "2026-01-10",
|
||
});
|
||
await wrapper.vm.goForward();
|
||
await wrapper.vm.$nextTick();
|
||
const backBtn = wrapper.findAll(".date-picker__nav-btn")[0];
|
||
expect(backBtn.attributes("disabled")).toBeUndefined();
|
||
wrapper.unmount();
|
||
});
|
||
});
|
||
|
||
describe("initial window positioning", () => {
|
||
test("scrolls to the window containing the pre-selected date on mount", () => {
|
||
// Jan 25 is the 5th date (index 4); with window size 5 on desktop it's still in window 0
|
||
const wrapper = mountDesktop({ modelValue: "2026-01-25" });
|
||
expect(wrapper.vm.windowStart).toBe(0);
|
||
wrapper.unmount();
|
||
});
|
||
});
|
||
});
|