Disable date-picker advance after 180 days have been loaded

Unit tests to confirm functonality
This commit is contained in:
scottkiener-at-safelite 2026-05-28 16:33:11 -04:00
parent b580e74cfe
commit 5c10137df1
2 changed files with 74 additions and 1 deletions

View file

@ -214,6 +214,76 @@ describe("date-picker.vue", () => {
});
});
describe("forward button disabled at 180-date limit", () => {
function generateDateRange(startStr, count) {
const dates = [];
const [y, m, d] = startStr.split("-").map(Number);
const cursor = new Date(y, m - 1, d);
for (let i = 0; i < count; i++) {
const yy = cursor.getFullYear();
const mm = String(cursor.getMonth() + 1).padStart(2, "0");
const dd = String(cursor.getDate()).padStart(2, "0");
dates.push(`${yy}-${mm}-${dd}`);
cursor.setDate(cursor.getDate() + 1);
}
return dates;
}
test("canGoForward is false when allDates.length >= 180 and the last date is in the current view", async () => {
const allDateValues = generateDateRange("2026-01-01", 180);
const wrapper = mountDesktop({
availableDates: allDateValues,
startDate: allDateValues[0],
endDate: allDateValues[allDateValues.length - 1],
});
// Desktop window size is 5; set windowStart to last window (index 175)
wrapper.vm.windowStart = 175;
await wrapper.vm.$nextTick();
expect(wrapper.vm.canGoForward).toBe(false);
wrapper.unmount();
});
test("forward nav button has disabled attribute when at the end of a 180-date range", async () => {
const allDateValues = generateDateRange("2026-01-01", 180);
const wrapper = mountDesktop({
availableDates: allDateValues,
startDate: allDateValues[0],
endDate: allDateValues[allDateValues.length - 1],
});
wrapper.vm.windowStart = 175;
await wrapper.vm.$nextTick();
const forwardBtn = wrapper.findAll(".date-picker__nav-btn")[1];
expect(forwardBtn.attributes("disabled")).toBeDefined();
wrapper.unmount();
});
test("canGoForward is true when allDates.length >= 180 but the last date is not yet in view", () => {
const allDateValues = generateDateRange("2026-01-01", 180);
const wrapper = mountDesktop({
availableDates: allDateValues,
startDate: allDateValues[0],
endDate: allDateValues[allDateValues.length - 1],
});
// windowStart = 0, first 5 of 180 dates are visible — last date is not in view
expect(wrapper.vm.canGoForward).toBe(true);
wrapper.unmount();
});
test("canGoForward remains true at the last window when allDates.length < 180", async () => {
const allDateValues = generateDateRange("2026-01-01", 10);
const wrapper = mountDesktop({
availableDates: allDateValues,
startDate: allDateValues[0],
endDate: allDateValues[allDateValues.length - 1],
});
// windowStart = 5 puts the last 5 dates (indices 59) in view
wrapper.vm.windowStart = 5;
await wrapper.vm.$nextTick();
expect(wrapper.vm.canGoForward).toBe(true);
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

View file

@ -151,7 +151,10 @@ export default {
return this.windowStart > 0;
},
canGoForward() {
return !this.isLoadingDates && this.allDates.length > 0;
if (this.isLoadingDates || !this.allDates.length) return false;
const lastDateIsVisible = this.windowStart + this.windowSize >= this.allDates.length;
if (this.allDates.length >= 180 && lastDateIsVisible) return false;
return true;
},
},
mounted() {