import datePicker from "./date-picker"; // Supporting Files import { shallowMount } from "@vue/test-utils"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; import store from "@/store"; // Constants const mockValuesForSetDate01 = { overrideDate: "2023-12-01", monthEnd: "2023-12-31", initialViewWeeks: [ { weekNum: 1, weekStartDate: "2023-12-01", weekEndDate: "2023-12-02", }, { weekNum: 2, weekStartDate: "2023-12-03", weekEndDate: "2023-12-09", }, { weekNum: 3, weekStartDate: "2023-12-10", weekEndDate: "2023-12-16", }, { weekNum: 4, weekStartDate: "2023-12-17", weekEndDate: "2023-12-23", }, { weekNum: 5, weekStartDate: "2023-12-24", weekEndDate: "2023-12-30", }, ], config: { todayDate: "2023-12-01", initialViewStartDate: "2023-12-01", initialViewEndDate: "2023-12-30", calendarViewDirection: "future", initialShopTimeSlotsResponse: { inshopTimeSlotsData: { days: [ { date: "2023-12-30", timeSlots: [ { id: "06747-01820-S-B*20453*7 AM", startTime: "07:00", endTime: "08:00", offerPremium: false, }, ], }, ], }, mobileTimeSlotsData: { days: [ { date: "2023-12-30", timeSlots: [ { id: "06747-01820-S-B*20453*7 AM", startTime: "07:00", endTime: "08:00", offerPremium: false, }, ], }, ], }, estimatedServiceMinutesMinimum: 90, estimatedServiceMinutesMaximum: 120, }, hideSomeDaysForInitialView: true, hideSecondMonth: true, preSelectedDate: null, }, monthsData: [ { monthLabel: "December", monthIndex: 12, monthString: "December-2023", yearNum: 2023, datesInshop: [ { dateNum: 1, dayClasses: " current-day", inputValue: "2023-12-01", isAvailable: false, }, { dateNum: 2, dayClasses: "", inputValue: "2023-12-02", isAvailable: false, }, { dateNum: 3, dayClasses: " sunday", inputValue: "2023-12-03", isAvailable: false, }, { dateNum: 4, dayClasses: "", inputValue: "2023-12-04", isAvailable: false, }, { dateNum: 5, dayClasses: "", inputValue: "2023-12-05", isAvailable: false, }, { dateNum: 6, dayClasses: "", inputValue: "2023-12-06", isAvailable: false, }, { dateNum: 7, dayClasses: "", inputValue: "2023-12-07", isAvailable: false, }, { dateNum: 8, dayClasses: "", inputValue: "2023-12-08", isAvailable: false, }, { dateNum: 9, dayClasses: "", inputValue: "2023-12-09", isAvailable: false, }, { dateNum: 10, dayClasses: " sunday", inputValue: "2023-12-10", isAvailable: false, }, { dateNum: 11, dayClasses: "", inputValue: "2023-12-11", isAvailable: false, }, { dateNum: 12, dayClasses: "", inputValue: "2023-12-12", isAvailable: false, }, { dateNum: 13, dayClasses: "", inputValue: "2023-12-13", isAvailable: false, }, { dateNum: 14, dayClasses: "", inputValue: "2023-12-14", isAvailable: false, }, { dateNum: 15, dayClasses: "", inputValue: "2023-12-15", isAvailable: false, }, { dateNum: 16, dayClasses: "", inputValue: "2023-12-16", isAvailable: false, }, { dateNum: 17, dayClasses: " sunday", inputValue: "2023-12-17", isAvailable: false, }, { dateNum: 18, dayClasses: "", inputValue: "2023-12-18", isAvailable: false, }, { dateNum: 19, dayClasses: "", inputValue: "2023-12-19", isAvailable: false, }, { dateNum: 20, dayClasses: "", inputValue: "2023-12-20", isAvailable: false, }, { dateNum: 21, dayClasses: "", inputValue: "2023-12-21", isAvailable: false, }, { dateNum: 22, dayClasses: "", inputValue: "2023-12-22", isAvailable: false, }, { dateNum: 23, dayClasses: "", inputValue: "2023-12-23", isAvailable: false, }, { dateNum: 24, dayClasses: " sunday", inputValue: "2023-12-24", isAvailable: false, }, { dateNum: 25, dayClasses: "", inputValue: "2023-12-25", isAvailable: false, }, { dateNum: 26, dayClasses: "", inputValue: "2023-12-26", isAvailable: false, }, { dateNum: 27, dayClasses: "", inputValue: "2023-12-27", isAvailable: false, }, { dateNum: 28, dayClasses: "", inputValue: "2023-12-28", isAvailable: false, }, { dateNum: 29, dayClasses: "", inputValue: "2023-12-29", isAvailable: false, }, { dateNum: 30, dayClasses: "", inputValue: "2023-12-30", isAvailable: true, }, { dateNum: 31, dayClasses: " sunday day-hidden", inputValue: "2023-12-31", isAvailable: false, }, ], datesMobile: [], startDateDayIndex: 5, monthClass: "", isMonthThatHidesSomeDaysForInitialView: true, }, { monthLabel: "January", monthIndex: 1, monthString: "January-2024", yearNum: 2024, datesInshop: [ { dateNum: 1, dayClasses: "", inputValue: "2024-01-01", isAvailable: false, }, { dateNum: 2, dayClasses: "", inputValue: "2024-01-02", isAvailable: false, }, { dateNum: 30, dayClasses: "", inputValue: "2024-01-30", isAvailable: false, }, { dateNum: 31, dayClasses: "", inputValue: "2024-01-31", isAvailable: false, }, ], datesMobile: [], startDateDayIndex: 1, monthClass: " month-hidden", }, ], }; const mockInitialData = { todayDate: "2023-07-04", initialViewStartDate: "2023-07-05", initialViewEndDate: "2023-08-19", calendarViewDirection: "future", initialShopTimeSlotsResponse: { inshopTimeSlotsData: { days: [ { date: "2023-07-25", timeSlots: [ { id: "06747-01820-S-B*20295*7 AM", startTime: "07:00", endTime: "08:00", offerPremium: false, }, { id: "06747-01820-S-B*20295*730 AM", startTime: "07:30", endTime: "08:30", offerPremium: false, }, ], }, { date: "2023-07-26", timeSlots: [ { id: "06747-01820-S-B*20296*7 AM", startTime: "07:00", endTime: "08:00", offerPremium: false, }, ], }, ], }, mobileTimeSlotsData: { days: [ { date: "2023-07-25", timeSlots: [ { id: "06747-01820-S-B*20295*7 AM", startTime: "07:00", endTime: "08:00", offerPremium: false, }, { id: "06747-01820-S-B*20295*730 AM", startTime: "07:30", endTime: "08:30", offerPremium: false, }, ], }, { date: "2023-07-26", timeSlots: [ { id: "06747-01820-S-B*20296*7 AM", startTime: "07:00", endTime: "08:00", offerPremium: false, }, ], }, ], }, estimatedServiceMinutesMinimum: 90, estimatedServiceMinutesMaximum: 120, }, hideSomeDaysForInitialView: true, hideSecondMonth: false, preSelectedDate: null, }; const mockCallbackResponse = { inshopTimeSlotsData: { days: [ { date: "2024-12-30", timeSlots: [ { id: "06747-01820-S-B*20453*7 AM", startTime: "07:00", endTime: "08:00", offerPremium: false, }, ], }, { date: "2024-01-02", timeSlots: [ { id: "06747-01820-S-B*20453*7 AM", startTime: "07:00", endTime: "08:00", offerPremium: false, }, ], }, ], }, mobileTimeSlotsData: { days: [ { date: "2024-12-30", timeSlots: [ { id: "06747-01820-S-B*20453*7 AM", startTime: "07:00", endTime: "08:00", offerPremium: false, }, ], }, { date: "2024-01-02", timeSlots: [ { id: "06747-01820-S-B*20453*7 AM", startTime: "07:00", endTime: "08:00", offerPremium: false, }, ], }, ], }, estimatedServiceMinutesMinimum: 90, estimatedServiceMinutesMaximum: 120, }; const mockPromiseResolve = (returnValue) => jest.fn(async () => Promise.resolve({ valid: returnValue })); describe("date-picker.vue", () => { describe("initial setup", () => { test("Expect initializeComponent to be run", () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", }, }); wrapper.vm.initializeComponent = jest.fn().mockImplementation(); wrapper.vm.initializeComponent(mockInitialData); // Assert expect(wrapper.vm.initializeComponent).toHaveBeenCalled(); wrapper.unmount(); }); test("When initializeComponent runs, expect will run setCalendarData method", () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", }, }); const spy = jest.spyOn(wrapper.vm, "setCalendarData"); wrapper.vm.$refs.timeSlotModalQuestion.initializeComponent = jest.fn(); wrapper.vm.$nextTick(); // Act wrapper.vm.initializeComponent(mockInitialData); // Assert expect(spy).toHaveBeenCalled(); wrapper.unmount(); }); test("If prop customComponentId is supplied, expect it will be used for componentId in setup method", () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", customComponentId: "dateQuestion", }, }); // Act const componentIdValue = wrapper.vm.componentId; // Assert expect(componentIdValue).toEqual("dateQuestion"); wrapper.unmount(); }); test("If prop getMoreDatesCallback is not supplied, expect the default function will return empty array", () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", }, }); // Act const callbackResponse = wrapper.vm.getMoreDatesCallback( "2023-07-24", "2023-08-19", "Inshop", "006747" ); // Assert expect(callbackResponse).toEqual([]); wrapper.unmount(); }); test("expect a date string created from today", () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", }, }); const todayDate = new Date(); const todayDateString = todayDate.getFullYear() + "-" + ("0" + (todayDate.getMonth() + 1)).slice(-2) + "-" + ("0" + todayDate.getDate()).slice(-2); // Assert expect(wrapper.vm.todayString).toEqual(todayDateString); wrapper.unmount(); }); test("expect a date string created from todayOverrideDateString", () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: "2023-07-02", }, }); // Assert expect(wrapper.vm.todayString).toEqual("2023-07-02"); wrapper.unmount(); }); test("expect computed todayDayIndex returns the correct day index", () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: "2023-07-02", }, }); // Assert expect(wrapper.vm.todayDayIndex).toEqual(0); wrapper.unmount(); }); test("expect computed todayDateNum returns the correct date number", () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: "2023-07-02", }, }); // Assert expect(wrapper.vm.todayDateNum).toEqual(2); wrapper.unmount(); }); test("expect computed currentWeekStartDateNum returns the correct date number when todayDayIndex is < todayDateNum", () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: "2023-07-05", }, }); // Assert expect(wrapper.vm.currentWeekStartDateNum).toEqual(2); wrapper.unmount(); }); test("expect computed currentWeekStartDateNum returns 1 when todayDayIndex is >= todayDateNum", () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: "2023-07-01", }, }); // Assert expect(wrapper.vm.currentWeekStartDateNum).toEqual(1); wrapper.unmount(); }); test("expect computed currentWeekEndDateNum returns correct value", () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: "2023-07-05", }, }); // Assert expect(wrapper.vm.currentWeekEndDateNum).toEqual(8); wrapper.unmount(); }); test("expect computed calendarViewDirection returns 'past' when prop selectableDatesSetting is 'past'", () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "past", todayOverrideDateString: "2023-07-05", }, }); // Assert expect(wrapper.vm.calendarViewDirection).toEqual("past"); wrapper.unmount(); }); test("expect computed calendarViewDirection returns 'future' when prop selectableDatesSetting is 'custom'", () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: "2023-07-05", }, }); // Assert expect(wrapper.vm.calendarViewDirection).toEqual("future"); wrapper.unmount(); }); describe("when loadInitialData is run...", () => { test("and this.todayString exists, expect it should have a todayDate matching today", async () => { // Arrange const { wrapper } = setupMocks({}); const todayDate = new Date(); const todayDateString = todayDate.getFullYear() + "-" + ("0" + (todayDate.getMonth() + 1)).slice(-2) + "-" + ("0" + todayDate.getDate()).slice(-2); // Act const testResult = await wrapper.vm.loadInitialData({ selectableDatesSetting: "custom", initialViewRowsToShow: 5, getSelectableDatesCallback: mockPromiseResolve, preSelectedDate: null, }); // Assert expect(testResult).toMatchObject({ todayDate: todayDateString, }); wrapper.unmount(); }); test("and overrride date exists, expect it should have a todayDate matching the override", async () => { // Arrange const overrideDate = mockValuesForSetDate01.overrideDate; const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: overrideDate, }, }); // Act const localThis = { todayString: null, todayOverrideDateString: overrideDate, getMonthEnd: () => mockValuesForSetDate01.monthEnd, getInitialViewWeeks: () => mockValuesForSetDate01.initialViewWeeks, }; const testResult = await datePicker.methods.loadInitialData.call(localThis, { selectableDatesSetting: "custom", initialViewRowsToShow: 5, getSelectableDatesCallback: mockPromiseResolve, preSelectedDate: null, todayOverrideDateString: overrideDate, }); // Assert expect(testResult).toMatchObject({ todayDate: overrideDate, }); wrapper.unmount(); }); test("with no this.todayString or overrride date, expect it should have a todayDate matching today", async () => { // Arrange const { wrapper } = setupMocks({}); const todayDate = new Date(); const todayDateString = todayDate.getFullYear() + "-" + ("0" + (todayDate.getMonth() + 1)).slice(-2) + "-" + ("0" + todayDate.getDate()).slice(-2); // Act const localThis = { todayString: null, getMonthEnd: () => mockValuesForSetDate01.monthEnd, getInitialViewWeeks: () => mockValuesForSetDate01.initialViewWeeks, }; //Act const testResult = await datePicker.methods.loadInitialData.call(localThis, { selectableDatesSetting: "custom", initialViewRowsToShow: 5, getSelectableDatesCallback: mockPromiseResolve, preSelectedDate: null, }); // Assert expect(testResult).toMatchObject({ todayDate: todayDateString, }); wrapper.unmount(); }); test("and config.selectableDatesSetting is PAST, expect it should have a calendarViewDirection of PAST", async () => { // Arrange const { wrapper } = setupMocks({}); // Act const testResult = await wrapper.vm.loadInitialData({ selectableDatesSetting: "past", initialViewRowsToShow: 5, getSelectableDatesCallback: mockPromiseResolve, }); // Assert expect(testResult).toMatchObject({ calendarViewDirection: "past", }); wrapper.unmount(); }); test("and config.selectableDatesSetting is CUSTOM, expect it should have a calendarViewDirection of FUTURE", async () => { // Arrange const { wrapper } = setupMocks({}); // Act const testResult = await wrapper.vm.loadInitialData({ selectableDatesSetting: "custom", initialViewRowsToShow: 5, getSelectableDatesCallback: mockPromiseResolve, }); // Assert expect(testResult).toMatchObject({ calendarViewDirection: "future", }); wrapper.unmount(); }); }); describe("when setCalendarData is run...", () => { test("expect that data elements are updated properly", async () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: mockValuesForSetDate01.overrideDate, }, }); // Act await wrapper.vm.setCalendarData(mockValuesForSetDate01.config); // Assert expect(wrapper.vm.hideSomeDaysForInitialView).toBe(true); expect(wrapper.vm.selectableDatesInshop[0]).toMatchObject({ date: "2023-12-30", }); expect(wrapper.vm.selectableDatesInshop[0].timeSlots.length).toBeGreaterThan(0); expect(wrapper.vm.months.length).toBe(7); expect(wrapper.vm.months[0]).toMatchObject({ monthLabel: "December", monthIndex: 12, monthString: "December-2023", yearNum: 2023, startDateDayIndex: 5, monthClass: "", isMonthThatHidesSomeDaysForInitialView: true, }); wrapper.unmount(); }); test("expect that this.months are reversed if direction is past", async () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "past", todayOverrideDateString: mockValuesForSetDate01.overrideDate, }, }); const modifiedConfig = { ...mockValuesForSetDate01.config }; modifiedConfig.calendarViewDirection = "past"; // Act await wrapper.vm.setCalendarData(modifiedConfig); // Assert expect(wrapper.vm.months.length).toBe(37); expect(wrapper.vm.months[0]).toMatchObject({ monthString: "December-2020", startDateDayIndex: 2, monthClass: " month-hidden last-available-month", }); wrapper.unmount(); }); test("expect that if there's a pre-selected date that it will scroll to it", async () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: mockValuesForSetDate01.overrideDate, }, }); const modifiedConfig = { ...mockValuesForSetDate01.config }; modifiedConfig.preSelectedDate = "2023-12-25"; wrapper.vm.scrollToElement = jest.fn().mockImplementation(); // Act await wrapper.vm.setCalendarData(modifiedConfig); await wrapper.vm.$nextTick(); // Assert expect(wrapper.vm.scrollToElement).toHaveBeenCalledWith("December-2023"); wrapper.unmount(); }); test("expect that if there's a pre-selected date within the last month available then the View More Dates button will be hidden", async () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: mockValuesForSetDate01.overrideDate, }, }); const modifiedConfig = { ...mockValuesForSetDate01.config }; modifiedConfig.preSelectedDate = "2024-06-11"; wrapper.vm.scrollToElement = jest.fn().mockImplementation(); // Act await wrapper.vm.setCalendarData(modifiedConfig); await wrapper.vm.$nextTick(); // Assert expect(wrapper.vm.disableViewMoreDatesButton).toBe(true); wrapper.unmount(); }); test("expect that this.months are reversed if direction is past", async () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "past", todayOverrideDateString: mockValuesForSetDate01.overrideDate, }, }); const modifiedConfig = { ...mockValuesForSetDate01.config }; modifiedConfig.calendarViewDirection = "past"; // Act await wrapper.vm.setCalendarData(modifiedConfig); // Assert expect(wrapper.vm.months.length).toBe(37); expect(wrapper.vm.months[0]).toMatchObject({ monthString: "December-2020", startDateDayIndex: 2, monthClass: " month-hidden last-available-month", }); wrapper.unmount(); }); test("expect that if there's a pre-selected date that it will scroll to it", async () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: mockValuesForSetDate01.overrideDate, }, }); const modifiedConfig = { ...mockValuesForSetDate01.config }; modifiedConfig.preSelectedDate = "2023-12-25"; wrapper.vm.scrollToElement = jest.fn().mockImplementation(); // Act await wrapper.vm.setCalendarData(modifiedConfig); await wrapper.vm.$nextTick(); // Assert expect(wrapper.vm.scrollToElement).toHaveBeenCalledWith("December-2023"); wrapper.unmount(); }); }); describe("when getInitialViewWeeks is run...", () => { test("expect that 5 weeks will be returned when no preselected date", () => { // Arrange const { wrapper } = setupMocks({}); const todayString = "2023-02-01"; // Act const testResult = wrapper.vm.getInitialViewWeeks(todayString, 5); // Assert expect(testResult.length).toBe(5); wrapper.unmount(); }); test("expect that today will be in the start/end range of dates of the first week when no preselected date", () => { // Arrange const { wrapper } = setupMocks({}); const todayString = "2023-02-01"; // Act const testResult = wrapper.vm.getInitialViewWeeks(todayString, 5); // Assert expect( testResult[0].weekStartDate <= todayString && todayString <= testResult[0].weekEndDate ).toBe(true); wrapper.unmount(); }); test("expect that single weeks that span 2 months will be split into separate shorter 'week' spans", () => { // Arrange const { wrapper } = setupMocks({}); const todayString = "2023-02-15"; // Act const testResult = wrapper.vm.getInitialViewWeeks(todayString, 5); // Assert expect(testResult.length).toBe(5); expect(testResult[0]).toMatchObject({ weekStartDate: "2023-02-12", }); expect(testResult[testResult.length - 1]).toMatchObject({ weekEndDate: "2023-03-11", }); wrapper.unmount(); }); test("expect that if today is 7/31/23 and there's a preselected date of 10/1/23 that there will be 14 initial weeks returned", () => { // Arrange const { wrapper } = setupMocks({}); const mockPreSelectedDate = "2023-10-01"; // Act const testResult = wrapper.vm.getInitialViewWeeks( "2023-07-31", 5, mockPreSelectedDate ); // Assert expect(testResult.length).toBe(14); wrapper.unmount(); }); test("expect that if there's a preselected date that the last week end date will be the end of the month of the preselected date", () => { // Arrange const { wrapper } = setupMocks({}); const mockPreSelectedDate = "2023-10-01"; // Act const testResult = wrapper.vm.getInitialViewWeeks( "2023-07-31", 5, mockPreSelectedDate ); // Assert expect(testResult[testResult.length - 1]).toMatchObject({ weekEndDate: "2023-10-31", }); wrapper.unmount(); }); }); describe("when there's a pre-selected date...", () => { test("and loadInitialData runs, expect hideSomeDaysForInitialView and hideSecondMonth to be false", async () => { // Arrange // uses "2023-12-01" which would set both hideSomeDaysForInitialView and hideSecondMonth to true, unless there was a pre-selected date const overrideDate = mockValuesForSetDate01.overrideDate; const mockMonthEnd = mockValuesForSetDate01.monthEnd; const mockInitialViewWeeks = mockValuesForSetDate01.initialViewWeeks; const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: overrideDate, }, }); // Act const localThis = { todayString: null, todayOverrideDateString: overrideDate, getMonthEnd: () => mockMonthEnd, getInitialViewWeeks: () => mockInitialViewWeeks, }; const testResult = await datePicker.methods.loadInitialData.call(localThis, { selectableDatesSetting: "custom", initialViewRowsToShow: 5, getSelectableDatesCallback: mockPromiseResolve, preSelectedDate: "2024-01-01", todayOverrideDateString: overrideDate, }); // Assert expect(testResult).toMatchObject({ hideSomeDaysForInitialView: false, hideSecondMonth: false, }); wrapper.unmount(); }); }); }); describe("showAnotherMonth method...", () => { test("expect that when hideSomeDaysForInitialView is true that it scrolls to correct month", async () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: mockValuesForSetDate01.overrideDate, }, }); wrapper.vm.months = mockValuesForSetDate01.monthsData; wrapper.vm.updateSelectableDates = jest.fn().mockImplementation(); wrapper.vm.scrollToElement = jest.fn().mockImplementation(); wrapper.vm.hideSomeDaysForInitialView = true; // Act await wrapper.vm.showAnotherMonth(); // // Assert // expect(wrapper.vm.updateSelectableDates).toHaveBeenCalledWith( // "2023-12-31", // "2023-12-31" // ); // expect(wrapper.vm.scrollToElement).toHaveBeenCalledWith("December-2023"); // wrapper.unmount(); }); test("expect that when hideSomeDaysForInitialView is false and direction is FUTURE that it scrolls to correct month", async () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: mockValuesForSetDate01.overrideDate, }, }); wrapper.vm.months = [...mockValuesForSetDate01.monthsData]; // copy array w/o reference to original wrapper.vm.updateSelectableDates = jest.fn().mockImplementation(); wrapper.vm.scrollToElement = jest.fn().mockImplementation(); wrapper.vm.hideSomeDaysForInitialView = false; // Act await wrapper.vm.showAnotherMonth(); // Assert expect(wrapper.vm.updateSelectableDates).toHaveBeenCalledWith( "2024-01-01", "2024-01-31" ); expect(wrapper.vm.scrollToElement).toHaveBeenCalledWith("January-2024"); wrapper.unmount(); }); test("expect that when hideSomeDaysForInitialView is false and direction is PAST that it scrolls to correct month", async () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "past", todayOverrideDateString: mockValuesForSetDate01.overrideDate, }, }); // Force correct state for this test. // TODO - figure out why original array is getting mutated here, making next line necessary mockValuesForSetDate01.monthsData[1].monthClass = " month-hidden"; wrapper.vm.months = [...mockValuesForSetDate01.monthsData]; // copy array w/o reference to original wrapper.vm.updateSelectableDates = jest.fn().mockImplementation(); wrapper.vm.scrollToElement = jest.fn().mockImplementation(); wrapper.vm.hideSomeDaysForInitialView = false; // Act await wrapper.vm.showAnotherMonth(); // Assert expect(wrapper.vm.updateSelectableDates).toHaveBeenCalledWith( "2024-01-01", "2024-01-31" ); expect(wrapper.vm.scrollToElement).toHaveBeenCalledWith("January-2024"); wrapper.unmount(); }); test("expect that when the month to scroll to is the last available month that it will disable the View More Dates button", async () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: mockValuesForSetDate01.overrideDate, }, }); wrapper.vm.months = [...mockValuesForSetDate01.monthsData]; // copy array w/o reference to original wrapper.vm.updateSelectableDates = jest.fn().mockImplementation(); wrapper.vm.scrollToElement = jest.fn().mockImplementation(); wrapper.vm.disableViewMoreDatesButton = false; mockValuesForSetDate01.monthsData[1].monthClass = " month-hidden last-available-month"; // Force correct state for this test. // Act await wrapper.vm.showAnotherMonth(); // Assert expect(wrapper.vm.disableViewMoreDatesButton).toBe(true); wrapper.unmount(); }); }); describe("updateSelectableDates method...", () => { test("expect that new dates from callback are added to selectableDatesInshop", async () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: mockValuesForSetDate01.overrideDate, getMoreDatesCallback: jest.fn(() => mockCallbackResponse), }, }); wrapper.vm.selectableDatesInshop = [ { date: "2023-12-30", timeSlots: [ { id: "06747-01820-S-B*20453*7 AM", startTime: "07:00", endTime: "08:00", offerPremium: false, }, ], }, ]; wrapper.vm.months = mockValuesForSetDate01.monthsData; // Act await wrapper.vm.updateSelectableDates("2024-01-01", "2024-01-05"); const isFoundInArray = wrapper.vm.selectableDatesInshop.find((obj) => { return obj.date === "2024-01-02"; }); // Assert expect(isFoundInArray).not.toBeUndefined(); wrapper.unmount(); }); test("expect that isAvailable flag on selectable dates is set to true", async () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: mockValuesForSetDate01.overrideDate, getMoreDatesCallback: jest.fn(() => mockCallbackResponse), }, }); wrapper.vm.selectableDatesInshop = [ { date: "2023-12-30", timeSlots: [ { id: "06747-01820-S-B*20453*7 AM", startTime: "07:00", endTime: "08:00", offerPremium: false, }, ], }, ]; wrapper.vm.months = mockValuesForSetDate01.monthsData; // Act await wrapper.vm.updateSelectableDates("2024-01-01", "2024-01-05"); const targetMonth = wrapper.vm.months.find((month) => { return month.monthString === "January-2024"; }); console.log("TEST targetMonth: ", targetMonth); const dateInArray = targetMonth.datesInshop.find((date) => { return date.inputValue === "2024-01-02"; }); // Assert expect(dateInArray).toMatchObject({ isAvailable: true, }); wrapper.unmount(); }); }); describe("scrollToElement method...", () => { test("expect that new dates from callback are added to selectableDatesInshop", () => { // Arrange const container = document.createElement("div"); container.classList.add("page-container-grouped-styles"); const targetElement = document.createElement("div"); targetElement.setAttribute("id", "January-2024"); container.appendChild(targetElement); document.body.appendChild(container); window.requestAnimationFrame = jest.fn(); const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: mockValuesForSetDate01.overrideDate, }, }); // Act wrapper.vm.scrollToElement("January-2024"); // Assert expect(window.requestAnimationFrame).toBeCalled(); wrapper.unmount(); }); }); describe("If user selects a date...", () => { test("expect it will emit update:modelValue", () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: "2023-07-05", }, }); const dateToSelect = "2023-07-07"; // Act wrapper.setValue({ selectedDate: dateToSelect }); // Assert expect(wrapper.emitted()["update:modelValue"][0]).toEqual([ { selectedDate: "2023-07-07" }, ]); wrapper.unmount(); }); test("expect watched modelValue will be triggered", () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: "2023-07-05", }, }); const dateToSelect = "2023-07-07"; wrapper.vm.resetField = jest.fn(); // Act wrapper.vm.$options.watch.modelValue.call(wrapper.vm, dateToSelect); // Assert expect(wrapper.vm.resetField).toBeCalled(); expect(wrapper.vm.resetField).toBeCalledWith({ value: dateToSelect }); wrapper.unmount(); }); }); describe("If fireDateSelectedEvent runs... ", () => { test("expect it will emit date-clicked on mouse clicks ", () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", }, }); // Act wrapper.vm.fireDateSelectedEvent({}); const flattenedEmitted = JSON.stringify(wrapper.emitted()); // Assert expect(wrapper.emitted()).toHaveProperty("date-clicked"); expect(flattenedEmitted.includes("date-clicked")).toBeTruthy; wrapper.unmount(); }); test("expect it will NOT emit date-clicked on keyboard arrow navigation ", () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", }, }); // Act wrapper.vm.fireDateSelectedEvent({ screenX: 0, screenY: 0 }); const flattenedEmitted = JSON.stringify(wrapper.emitted()); // Assert expect(wrapper.emitted()).not.toHaveProperty("date-clicked"); expect(flattenedEmitted.includes("date-clicked")).toBe(false); wrapper.unmount(); }); }); describe("If user triggers a validation error...", () => { test("expect that watched errorMessage will be triggered", () => { // Arrange const { wrapper } = setupMocks({ propsData: { selectableDatesSetting: "custom", todayOverrideDateString: "2023-07-05", }, }); wrapper.vm.scrollToElement = jest.fn(); // Act wrapper.vm.$options.watch.errorMessage.call(wrapper.vm, "anything"); // Assert expect(wrapper.vm.scrollToElement).toBeCalled(); expect(wrapper.vm.scrollToElement).toBeCalledWith("date-of-month-error"); wrapper.unmount(); }); }); }); function setupMocks(mountOptionsMockData = {}) { store.getters = { order: { serviceLocation: { appointmentType: "Inshop", provider: { providerNumber: "12345" } }, }, lineItems: { supportingItems: [] }, }; const initialMountOptionsMockData = { store: { getters: store.getters, }, }; const mountOptions = getMountOptions( Object.assign(initialMountOptionsMockData, mountOptionsMockData) ); const wrapper = shallowMount(datePicker, mountOptions); return { wrapper }; }