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", () => {
|
describe("initial window positioning", () => {
|
||||||
test("scrolls to the window containing the pre-selected date on mount", () => {
|
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
|
// 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;
|
return this.windowStart > 0;
|
||||||
},
|
},
|
||||||
canGoForward() {
|
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() {
|
mounted() {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue