Merge pull request #1287 from Safelite/feature/CSR-886

Feature/CSR-886
This commit is contained in:
AdamCaouetteSafelite 2023-08-09 11:07:04 -04:00 committed by GitHub
commit 5e8ba0b95e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 1353 additions and 483 deletions

View file

@ -15,7 +15,6 @@ module.exports = {
"!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
"!src/layouts/reveal/**/*.vue",
"!src/ux-components/text-link/**/*.vue",
"!src/digital-components/date-picker/**/*.vue", // Temp until unit tests completed
"!src/layouts/vin-lookup/**/*.vue", //Temporary for Quote page testing
"!src/common-components/funnel-header/menu-modal/**/*.vue",
"!src/layouts/schedule/*.vue", // Temp test exclusion while in development

File diff suppressed because it is too large Load diff

View file

@ -1,477 +0,0 @@
import datePicker from "./date-picker";
// Supporting Files
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
describe("date-picker.vue", () => {
describe("initial setup", () => {
test("Creates a date object from today", async () => {
// Arrange
const { wrapper } = await setupMocks({
propsData: {
selectableDatesSetting: "custom"
},
});
wrapper.vm.loadInitialData = jest.fn().mockImplementation(
() =>
new Promise((resolve, reject) => {
resolve({
data: [responseValue],
});
})
);
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
expect(wrapper.vm.loadInitialData).toHaveBeenCalled();
// console.log("wrapper.vm.today: ", wrapper.vm.today)
// // Act
// const testResult = wrapper.vm.today instanceof Date;
// console.log("testResult: ", testResult)
// // Assert
// expect(testResult).toEqual(true);
wrapper.unmount();
});
});
// describe("formatNumberToSetDigits", () => {
// const testScenarios = [
// [0, 3, "000"],
// [8, 2, "08"],
// [345, 2, "345"],
// [4567, 0, "4567"],
// ];
// test.each(testScenarios)(
// "when num is %s and digits is %s, formatNumberToSetDigits should return %s",
// async (num, digits, expectedReturn) => {
// // Arrange
// const { wrapper } = setupMocks({});
// // Act
// const fnReturn = wrapper.vm.formatNumberToSetDigits(num, digits);
// // Assert
// expect(fnReturn).toEqual(expectedReturn);
// }
// );
// });
// describe("formatDate", () => {
// test("Can format a date as MM/dd/yyyy", () => {
// // Arrange
// const { wrapper } = setupMocks({});
// const testDate = new Date("01-26-2023");
// // Act
// const testResult = wrapper.vm.formatDate(testDate);
// // Assert
// expect(testResult).toEqual("01/26/2023");
// wrapper.unmount();
// });
// // test("Can get correct initialFirstDate from today", () => {
// // // Arrange
// // const { wrapper } = setupMocks({
// // propsData: {
// // todayDate: "Thu Jan 26 2023",
// // },
// // });
// // // Act
// // const testResult = wrapper.vm.initialFirstDate;
// // const testResultAsDateString = testResult.toDateString();
// // // Assert
// // expect(testResultAsDateString).toEqual("Sun Jan 22 2023");
// // wrapper.unmount();
// // });
// });
// describe("calendarData", () => {
// test("should return an array", async () => {
// // Arrange
// const { wrapper } = setupMocks({});
// // Act
// const testResult = await wrapper.vm.calendarData;
// // Assert
// expect(Array.isArray(testResult)).toBe(true);
// wrapper.unmount();
// });
// describe("each month should have keys monthLabel, yearNum, dates, firstDateDayIndex", () => {
// const testScenarios = [
// ["monthLabel", true, "string"],
// ["yearNum", true, "number"],
// ["dates", true, "object"],
// ["firstDateDayIndex", true, "number"],
// ["monthClass", true, "string"],
// ];
// test.each(testScenarios)(
// "test for %s key should return %s and be type %s",
// async (label, test, type) => {
// // Arrange
// const { wrapper } = setupMocks({});
// const containsMonthLabel = (obj) => Object.hasOwn(obj, label);
// const isCorrectType = (obj) => typeof obj[label] === type;
// const isTruthyOrZero = (obj) => (obj[label] || obj[label] === 0 ? true : false);
// // Act
// const calendarData = await wrapper.vm.calendarData;
// // console.log("calendarData: ", calendarData);
// // Assert
// expect(calendarData.every(containsMonthLabel)).toBe(true);
// expect(calendarData.every(isCorrectType)).toBe(true);
// expect(calendarData.every(isTruthyOrZero)).toBe(true);
// wrapper.unmount();
// }
// );
// });
// describe("the current month's week which includes today", () => {
// const testScenarios = [
// ["2022-02-05T03:00:00", 1, 2, true],
// ["2024-02-05T03:00:00", 4, 0, true],
// ["2020-01-15T03:00:00", 12, 0, true],
// ];
// test.each(testScenarios)(
// "the first date of the week including the date %s should be the date number %s and be day index %s",
// async (todayDateString, startDate, dayOfWeekIndex) => {
// // Arrange
// const { wrapper } = setupMocks({
// propsData: {
// todayOverrideDateString: todayDateString,
// },
// });
// // Act
// const calendarData = await wrapper.vm.calendarData;
// const currentMonthIndex = calendarData.findIndex((month) => {
// console.log("month: ", month);
// return month.monthClass === "currentMonth";
// });
// console.log("calendarData ", calendarData);
// console.log("currentMonthIndex ", currentMonthIndex);
// // Assert
// expect(calendarData[currentMonthIndex].dates[0].dateNum === startDate).toBe(
// true
// );
// expect(
// calendarData[currentMonthIndex].dates[0].firstDateDayIndex ===
// dayOfWeekIndex
// ).toBe(true);
// wrapper.unmount();
// }
// );
// });
// test("the current month's dates array should start with the first day of the week which includes today", async () => {
// // Arrange
// const { wrapper } = setupMocks({});
// const hasAFirstInDates = (obj) => obj?.dates[0].dateNum === 1;
// // Act
// const calendarData = await wrapper.vm.calendarData;
// const currentMonthIndex = calendarData.findIndex((month) => {
// return month.monthClass === "currentMonth";
// });
// // Assert
// expect(calendarData[currentMonthIndex].dates[0].dateNum === 1).toBe(true);
// wrapper.unmount();
// });
// test("for each month (other than current month), the dates array should have the 1st of the month", async () => {
// // Arrange
// const { wrapper } = setupMocks({});
// const hasAFirstInDates = (obj) => obj?.dates[0].dateNum === 1;
// // Act
// const calendarData = await wrapper.vm.calendarData;
// // Assert
// expect(calendarData.every(hasAFirstInDates)).toBe(true);
// wrapper.unmount();
// });
// describe("for the current month in calendarData, the dates array should have correct days of month", () => {
// const testScenarios = [
// ["2022-02-05T03:00:00", 28, true],
// ["2024-02-05T03:00:00", 29, true],
// ["2020-01-15T03:00:00", 31, true],
// ];
// test.each(testScenarios)(
// "the current month including the date %s should have %s days in its dates array",
// async (dateString, noOfDays) => {
// // Arrange
// const { wrapper } = setupMocks({
// propsData: {
// todayOverrideDateString: dateString,
// },
// });
// // Act
// const calendarData = await wrapper.vm.calendarData;
// const currentMonthIndex = calendarData.findIndex((month) => {
// return month.monthClass === "currentMonth";
// });
// // Assert
// expect(calendarData[currentMonthIndex].dates.length === noOfDays).toBe(true);
// wrapper.unmount();
// }
// );
// // test.each(testScenarios)(
// // "the date %s should have %s days in dates array",
// // async (dateString, noOfDays) => {
// // // Arrange
// // const { wrapper } = setupMocks({
// // propsData: {
// // todayOverrideDateString: dateString,
// // },
// // });
// // const hasCorrectNumberOfDates = (obj) => obj?.dates.length === noOfDays;
// // // Act
// // const calendarData = await wrapper.vm.calendarData;
// // // Assert
// // expect(calendarData.every(hasCorrectNumberOfDates)).toBe(true);
// // wrapper.unmount();
// // }
// // );
// });
// // describe("for each object in array, the dates array should have correct days of month", () => {
// // const testScenarios = [
// // ["2022-02-05T03:00:00", 28, true],
// // ["2024-02-05T03:00:00", 29, true],
// // ["2020-01-15T03:00:00", 31, true],
// // ];
// // test.each(testScenarios)(
// // "the date %s should have %s days in dates array",
// // async (dateString, noOfDays) => {
// // // Arrange
// // const { wrapper } = setupMocks({
// // propsData: {
// // todayOverrideDateString: dateString,
// // },
// // });
// // const hasCorrectNumberOfDates = (obj) => obj?.dates.length === noOfDays;
// // // Act
// // const calendarData = await wrapper.vm.calendarData;
// // // Assert
// // expect(calendarData.every(hasCorrectNumberOfDates)).toBe(true);
// // wrapper.unmount();
// // }
// // );
// // });
// // test.only("each object in array should have a monthLabel", () => {
// // // Arrange
// // const { wrapper } = setupMocks({});
// // // const testTodayDate = new Date("01-26-2023");
// // // Act
// // const testResult = wrapper.vm.calendarData;
// // const containsMonthLabel = (month) => Object.hasOwn(month, 'monthLabel');
// // // Assert
// // expect(testResult.every(containsMonthLabel)).toBe(true);
// // });
// // test.only("array should have a month object with same month as today", () => {
// // // Arrange
// // const { wrapper } = setupMocks({});
// // // const testTodayDate = new Date("01-26-2023");
// // // Act
// // // const testResult = wrapper.vm.calendarData;
// // console.log("wrapper.vm.calendarData: ", wrapper.vm.calendarData)
// // // Assert
// // // expect(wrapper.vm.calendarData).toEqual("something");
// // // expect(wrapper.vm.calendarDataOld).toEqual("something");
// // expect(wrapper.vm.calendarData[1]).toMatchObject({
// // "dates": [
// // {
// // "dateNum": 1
// // },
// // {
// // "dateNum": 2
// // },
// // {
// // "dateNum": 3
// // },
// // {
// // "dateNum": 4
// // },
// // {
// // "dateNum": 5
// // },
// // {
// // "dateNum": 6
// // },
// // {
// // "dateNum": 7
// // },
// // {
// // "dateNum": 8
// // },
// // {
// // "dateNum": 9
// // },
// // {
// // "dateNum": 10
// // },
// // {
// // "dateNum": 11
// // },
// // {
// // "dateNum": 12
// // },
// // {
// // "dateNum": 13
// // },
// // {
// // "dateNum": 14
// // },
// // {
// // "dateNum": 15
// // },
// // {
// // "dateNum": 16
// // },
// // {
// // "dateNum": 17
// // },
// // {
// // "dateNum": 18
// // },
// // {
// // "dateNum": 19
// // },
// // {
// // "dateNum": 20
// // },
// // {
// // "dateNum": 21
// // },
// // {
// // "dateNum": 22
// // },
// // {
// // "dateNum": 23
// // },
// // {
// // "dateNum": 24
// // },
// // {
// // "dateNum": 25
// // },
// // {
// // "dateNum": 26
// // },
// // {
// // "dateNum": 27
// // },
// // {
// // "dateNum": 28
// // },
// // {
// // "dateNum": 29
// // },
// // {
// // "dateNum": 30
// // },
// // {
// // "dateNum": 31
// // }
// // ],
// // "monthLabel": "January",
// // "yearNum": 2023
// // });
// // wrapper.unmount();
// // });
// });
});
function setupMocks(mountOptionsMockData = {}) {
const initialMountOptionsMockData = {
// router: {
// navigate: jest.fn(),
// navigateWithSaving: jest.fn(),
// navigateWithoutSaving: jest.fn(),
// },
// actionList: [
// // {
// // actionName: storeActions.SAVE_PART_QUESTION_ANSWERS,
// // data: {},
// // },
// // {
// // actionName: storeActions.GET_PARTS,
// // data: {},
// // },
// ],
// store: {
// // getters: store.getters,
// // commit: store.commit,
// },
};
const mountOptions = getMountOptions(
Object.assign(initialMountOptionsMockData, mountOptionsMockData)
);
// console.log("mountOptions: ", mountOptions)
const wrapper = shallowMount(datePicker, mountOptions);
return { wrapper };
}

View file

@ -174,9 +174,8 @@ export default {
return this.todayDateNum + (6 - this.todayDayIndex);
},
calendarViewDirection() {
if (this.selectableDatesSetting === "past") return "past";
if (this.selectableDatesSetting === "custom") return "future";
return "none";
return "past";
},
selectedDate: {
get() {
@ -428,7 +427,7 @@ export default {
} else if (direction === "past") {
// first 0, then -1
for (let i = 0; i >= 0 - monthsBeforeToLoadOffset; i--) {
months.unshift(this.getMonthData(i, options));
months.unshift(await this.getMonthData(i, options));
}
} else {
// TODO - IF A CALENDAR WITH BOTH PAST AND FUTURE WAS EVER NEEDED
@ -610,7 +609,7 @@ export default {
// find the first day-hidden to become the next api call start date
monthStartDateNum =
monthToShow.dates.find(({ dayClasses }) => dayClasses.includes("day-hidden"))
.dateNum - 1; // TRY 2
.dateNum - 1;
} else {
if (this.calendarViewDirection === "future") {
monthToShow = this.months.find((month) =>
@ -646,11 +645,12 @@ export default {
this.$store.getters.order.serviceLocation.appointmentType,
this.$store.getters.order.serviceLocation.provider.providerNumber
);
moreSelectableDates.days.forEach((selectableDate) => {
const index = this.selectableDatesData.findIndex(
(dateObj) => dateObj.date === selectableDate.date
);
if (index === -1) this.selectableDatesData.push(selectableDate.date);
if (index === -1) this.selectableDatesData.push(selectableDate);
this.months.forEach((month) => {
// TODO: avoid checking all calendar dates; maybe only ones between monthStart and monthEnd as defined above?
month.dates.forEach((date) => {