diff --git a/jest.config.js b/jest.config.js index bfb4bf71f..ceeb6f781 100644 --- a/jest.config.js +++ b/jest.config.js @@ -15,7 +15,7 @@ module.exports = { "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue", "!src/layouts/reveal/**/*.vue", "!src/ux-components/text-link/**/*.vue", - "!src/common-components/date-picker/**/*.vue", + "!src/common-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", // END diff --git a/src/constants/scheduling.js b/src/constants/scheduling.js new file mode 100644 index 000000000..c656ac60a --- /dev/null +++ b/src/constants/scheduling.js @@ -0,0 +1,16 @@ +const monthsOfYear = [ + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December", +]; + +export { monthsOfYear }; diff --git a/src/digital-components/date-picker/date-picker.spec.js b/src/digital-components/date-picker/date-picker.spec.js new file mode 100644 index 000000000..f140e9adb --- /dev/null +++ b/src/digital-components/date-picker/date-picker.spec.js @@ -0,0 +1,437 @@ +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", () => { + // Arrange + const { wrapper } = setupMocks({}); + + // Act + const testResult = wrapper.vm.todayDate instanceof Date; + + // 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 }; +} diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index 1c83c0a4e..e3b5ff5d1 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -1,224 +1,376 @@ - diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index e10f437d3..890351d8d 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -19,7 +19,7 @@ ref="closeButton" type="button" class="btn-close" - data-bs-dismiss="modal" + @mousedown="closeModal" aria-label="Close">
diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js index 9de0cf5a6..1210f119c 100644 --- a/src/helpers/unit-test-helper.js +++ b/src/helpers/unit-test-helper.js @@ -71,8 +71,9 @@ export function getMountOptions(mockData) { mixins: mockData.mixins, stubs: { Form }, }; + const props = mockData.propsData || {}; - return { global }; + return { global, props }; } export function setupMocksForJsFiles(mockData = {}) { diff --git a/src/layouts/demo-date-picker/demo-date-picker.spec.js b/src/layouts/demo-date-picker/demo-date-picker.spec.js new file mode 100644 index 000000000..9f7fa378b --- /dev/null +++ b/src/layouts/demo-date-picker/demo-date-picker.spec.js @@ -0,0 +1,19 @@ +import demoDatePicker from "./demo-date-picker"; + +// Supporting Files +import { shallowMount } from "@vue/test-utils"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; + +describe("demo-date-picker.vue", () => { + test.only("test TK...", () => {}); +}); + +function setupMocks({ mountOptionsMockData = {} }) { + const mountOptions = getMountOptions({ + ...mountOptionsMockData, + }); + + const wrapper = shallowMount(demoDatePicker, mountOptions); + + return { wrapper }; +} diff --git a/src/layouts/demo-date-picker/demo-date-picker.vue b/src/layouts/demo-date-picker/demo-date-picker.vue new file mode 100644 index 000000000..885156d66 --- /dev/null +++ b/src/layouts/demo-date-picker/demo-date-picker.vue @@ -0,0 +1,83 @@ + + + diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue index 812870f83..0671c1015 100644 --- a/src/layouts/estimate/estimate.vue +++ b/src/layouts/estimate/estimate.vue @@ -271,7 +271,7 @@ export default { // call saveSession here - navigateWithSaving saves too late in the flow await saveSession({}); - return this.$router.navigateWithoutSaving( + return this.$router.navigateWithSaving( this.navigationScenarios.CLICKED_FORWARD_WITH_NO_QUESTIONS, this.$route ); diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue index 3872635e2..afc81261f 100644 --- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue +++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue @@ -66,7 +66,7 @@ import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/servi export default { name: "mobile-location-modal-questions", - emits: ["update:modelValue", "updated-mobile-fee-part"], + emits: ["update:modelValue", "updated-mobile-fee-part", "updated-contains-military-base"], data() { return { internalModel: deepClone(this.modelValue), @@ -200,6 +200,7 @@ export default { // Update the page level model this.$emit("update:modelValue", this.internalModel); + this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase); this.closeModal(); } }, diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js index 0653e91f0..b48fa2f06 100644 --- a/src/layouts/service-location/service-location.spec.js +++ b/src/layouts/service-location/service-location.spec.js @@ -319,11 +319,15 @@ describe("service-location.vue", () => { state: "OH", }; - // Assert - wrapper.setData({ zipCode: newServiceZipCodeQuestion.zipCode }); - wrapper.vm.$nextTick(() => { - expect(wrapper.vm.zipContainsMilitaryBase).toBe(true); + const serviceZipCodeComponent = wrapper.findComponent({ + ref: "serviceZipCodeQuestion", }); + + // Act + serviceZipCodeComponent.vm.$emit("updated-contains-military-base", true); + + // Assert + expect(wrapper.vm.zipContainsMilitaryBase).toBe(true); }); }); diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 04e8a7359..8b3042678 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -10,11 +10,12 @@ :mobileFeePart="mobileFeePart" @updated-mobile-fee-part="setMobileFeePart" linkWidgetName="ServiceZipLinkWidget" - modalWidgetName="ServiceZipModalWidget" /> + modalWidgetName="ServiceZipModalWidget" + @updated-contains-military-base="setContainsMilitaryBase" /> { const wrapper = shallowMount( buttonMain, setupMocks({ - props: { + propsData: { isPrimary: true, }, }) @@ -25,7 +25,7 @@ describe("buttonMain.vue", () => { const wrapper = shallowMount( buttonMain, setupMocks({ - props: { + propsData: { isDisabled: true, }, }) @@ -41,7 +41,7 @@ describe("buttonMain.vue", () => { const wrapper = shallowMount( buttonMain, setupMocks({ - props: { + propsData: { loaderColor: "blue", loaderEnabled: true, }, @@ -62,7 +62,7 @@ describe("buttonMain.vue", () => { const wrapper = shallowMount( buttonMain, setupMocks({ - props: { + propsData: { loaderPosition: "right", loaderEnabled: true, }, @@ -83,7 +83,7 @@ describe("buttonMain.vue", () => { const wrapper = shallowMount( buttonMain, setupMocks({ - props: { + propsData: { loaderPosition: "right", loaderEnabled: true, }, @@ -108,7 +108,7 @@ describe("buttonMain.vue", () => { const wrapper = shallowMount( buttonMain, setupMocks({ - props: { + propsData: { loaderPosition: "right", loaderEnabled: true, }, @@ -132,7 +132,7 @@ describe("buttonMain.vue", () => { const wrapper = shallowMount( buttonMain, setupMocks({ - props: { + propsData: { loaderPosition: "right", loaderEnabled: true, isDisabled: false, @@ -156,7 +156,7 @@ describe("buttonMain.vue", () => { const wrapper = shallowMount( buttonMain, setupMocks({ - props: { + propsData: { loaderPosition: "right", loaderEnabled: true, isDisabled: true,