Disable date-picker advance after 180 days have been loaded
Unit tests to confirm functonality
This commit is contained in:
parent
b580e74cfe
commit
5c10137df1
2 changed files with 74 additions and 1 deletions
|
|
@ -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 5–9) 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
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue