Updated unit tests

src/layouts/schedule/schedule.spec.js

@@ -6,7 +6,6 @@ import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import store from "@/store";
 import router from "@/router";
-import { nextTick } from "vue";
 import baseMixin from "../../mixins/base-mixin";
 
 // Mock basemixin
@@ -130,64 +129,67 @@ afterEach(() => {
 describe("schedule.vue...", () => {
     describe("initial load", () => {
         test("should pass arePagePrerequisitesValid with a mobile order and no providerNumber", () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
             store.getters.order.serviceLocation.appointmentType = "Mobile";
             store.getters.order.serviceLocation.provider = null;
 
-            //Act
+            // Act
             const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
 
-            //Assert
+            // Assert
             expect(arePagePrerequisitesValid).toBe(true);
         });
+
         test("should pass arePagePrerequisitesValid with a inshop order and providerNumber", () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
 
-            //Act
+            // Act
             const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
 
-            //Assert
+            // Assert
             expect(arePagePrerequisitesValid).toBe(true);
         });
+
         test("should fail arePagePrerequisitesValid with a replace with no glass parts", async () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
             store.getters.order.lineItems.glassParts = [];
 
-            //Act
+            // Act
             const arePagePrerequisitesValid2 = await wrapper.vm.arePagePrerequisitesValid();
 
-            //Assert
+            // Assert
             expect(arePagePrerequisitesValid2).toBe(false);
         });
+
         test("should fail arePagePrerequisitesValid without isInsurance", () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
             store.getters.payment.isInsurance = null;
 
-            //Act
+            // Act
             const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
 
-            //Assert
+            // Assert
             expect(arePagePrerequisitesValid).toBe(false);
         });
 
         test("should return newShopTimeSlots when getAvailableDatesMethod is called", async () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
             wrapper.vm.selectableDatesData = {
                 days: [],
             };
 
-            //Act
+            // Act
             const newShopTimeSlots = await wrapper.vm.getAvailableDatesMethod(
                 "2023-01-01",
                 "2023-01-31"
             );
 
-            //Assert
+            // Assert
             expect(newShopTimeSlots).toStrictEqual({
                 days: [
                     {
@@ -208,13 +210,13 @@ describe("schedule.vue...", () => {
         });
 
         test("should call API service in day ranges of 34 or less when getAvailableDatesMethod is called with large date ranges", async () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
             wrapper.vm.selectableDatesData = {
                 days: [],
             };
 
-            //Act
+            // Act
             await wrapper.vm.getAvailableDates.call(
                 wrapper.vm,
                 "2023-01-01",
@@ -223,7 +225,7 @@ describe("schedule.vue...", () => {
                 "123"
             );
 
-            //Assert
+            // Assert
             expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalledTimes(3);
             expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalledWith(
                 "getShopTimeSlots",
@@ -234,7 +236,7 @@ describe("schedule.vue...", () => {
 
         describe("beforeRouteEnter function... ", () => {
             test("should call next() and call all functions within next", async () => {
-                //Arrange
+                // Arrange
                 const { wrapper } = setupMocks({});
                 wrapper.vm.selectableDatesData = {
                     days: [],
@@ -244,7 +246,7 @@ describe("schedule.vue...", () => {
                     c(wrapper.vm);
                 });
 
-                //Act
+                // Act
                 await schedule.beforeRouteEnter.call(
                     wrapper.vm,
                     { query: { fmgPage: "schedule" } },
@@ -252,7 +254,7 @@ describe("schedule.vue...", () => {
                     nextFunction
                 );
 
-                //Assert
+                // Assert
                 expect(nextFunction).toHaveBeenCalled();
                 expect(wrapper.vm.setCmsContent).toHaveBeenCalledWith("content");
                 expect(wrapper.vm.$refs.datePicker.initializeComponent).toHaveBeenCalledWith(
@@ -279,7 +281,7 @@ describe("schedule.vue...", () => {
 
         describe("computed properties...", () => {
             test("timeSlotsForSelectedDate should return timeslots if selected date is available", () => {
-                //Arrange
+                // Arrange
                 const { wrapper } = setupMocks({});
                 wrapper.vm.selectableDatesData = {
                     days: [
@@ -306,10 +308,10 @@ describe("schedule.vue...", () => {
                     selectedDate: "2022-11-11",
                 });
 
-                //Act
+                // Act
                 const testValue = wrapper.vm.timeSlotsForSelectedDate;
 
-                //Assert
+                // Assert
                 expect(testValue).toStrictEqual(
                     expect.objectContaining({
                         date: "2022-11-11",
@@ -318,7 +320,7 @@ describe("schedule.vue...", () => {
             });
 
             test("timeSlotsForSelectedDate should be null if no date has been selected", () => {
-                //Arrange
+                // Arrange
                 const { wrapper } = setupMocks({});
                 wrapper.vm.selectableDatesData = {
                     days: [
@@ -345,10 +347,10 @@ describe("schedule.vue...", () => {
                     selectedDate: undefined,
                 });
 
-                //Act
+                // Act
                 const testValue = wrapper.vm.timeSlotsForSelectedDate;
 
-                //Assert
+                // Assert
                 expect(testValue).toBe(null);
             });
         });
@@ -356,75 +358,67 @@ describe("schedule.vue...", () => {
 
     describe("schedule page methods...", () => {
         test("getServiceZipCtuCodeFromStore should return zipCodeCtu", () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
             wrapper.vm.selectableDatesData = {
                 days: [],
             };
 
-            //Act
+            // Act
             const testValue = wrapper.vm.getServiceZipCtuCodeFromStore();
 
-            //Assert
+            // Assert
             expect(testValue).toStrictEqual("01234");
         });
 
         test("openInshopTimeSlotsModal should trigger openModal method", () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
             wrapper.vm.selectableDatesData = {
                 days: [],
             };
 
-            //Act
+            // Act
             wrapper.vm.openInshopTimeSlotsModal();
 
-            //Assert
+            // Assert
             expect(wrapper.vm.$refs.timeSlotModalQuestion.openModal).toBeCalled();
         });
 
-        test("getSelectedRouteCode should return schedule routeCode", () => {
-            //Arrange
-            const { wrapper } = setupMocks({});
-
-            wrapper.vm.selectableDatesData = {
-                days: [],
-            };
-
-            //Act
-            const testValue = wrapper.vm.getSelectedRouteCode();
-
-            //Assert
-            expect(testValue).toStrictEqual("000");
-        });
-
         test("timeSlotModalClosed should null any selected date when there's no route code", () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
             wrapper.vm.selectableDatesData = {
                 days: [],
             };
+
             wrapper.setData({
                 selectedDate: "1980-05-05",
             });
-            wrapper.setData({
+
-                selectedTimeSlot: {
+            const selectedTimeSlotInfo = {
+                timeSlot: {
                     date: "2019-01-01",
                     startTime: "09:00",
                     endTime: "10:00",
                     routeCode: null,
                 },
+                isPremiumAppointment: null,
+            }
+
+            wrapper.setData({
+                selectedTimeSlotInfo: selectedTimeSlotInfo,
             });
 
-            //Act
+            // Act
             wrapper.vm.timeSlotModalClosed();
 
-            //Assert
+            // Assert
             expect(wrapper.vm.selectedDate).toBe(null);
         });
 
         test("getDisplayTextForMilitaryTime should return the correctly formatted string", () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
             wrapper.vm.selectableDatesData = {
                 days: [],
@@ -432,13 +426,13 @@ describe("schedule.vue...", () => {
             const timeInput1 = "15:00";
             const timeInput2 = "15:30";
 
-            //Act
+            // Act
             const testOutput1 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput1);
             const testOutput2 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput2);
             const testOutput3 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput1, true);
             const testOutput4 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput2, true);
 
-            //Assert
+            // Assert
             expect(testOutput1).toBe("3:00 PM");
             expect(testOutput2).toBe("3:30 PM");
             expect(testOutput3).toBe("3 PM");
@@ -446,7 +440,7 @@ describe("schedule.vue...", () => {
         });
 
         test("getDisplayTextForMilitaryTime should return the correctly formatted string", () => {
-            //Arrange
+            // Arrange
             const { wrapper } = setupMocks({});
             wrapper.vm.selectableDatesData = {
                 days: [],
@@ -454,10 +448,10 @@ describe("schedule.vue...", () => {
             wrapper.vm.$router.navigateWithoutSaving = jest.fn();
             wrapper.vm.$route = "testRoute";
 
-            //Act
+            // Act
             wrapper.vm.backButtonAction();
 
-            //Assert
+            // Assert
             expect(wrapper.vm.$router.navigateWithoutSaving).toBeCalledWith(
                 "CLICKED_BACK",
                 "testRoute"
@@ -466,7 +460,7 @@ describe("schedule.vue...", () => {
     });
 
     test("forwardButtonAction should call route method navigateWithoutSaving", async () => {
-        //Arrange
+        // Arrange
         const { wrapper } = setupMocks({});
         wrapper.vm.dispatchStoreAction = jest.fn(() => {
             return {
@@ -477,15 +471,15 @@ describe("schedule.vue...", () => {
             return {};
         });
 
-        //Act
+        // Act
         await wrapper.vm.forwardButtonAction();
 
-        //Assert
+        // Assert
         expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalled();
     });
 
     test("for mobile appts, updateSupportingItems should call store action to save supporting items", async () => {
-        //Arrange
+        // Arrange
         store.getters.order.serviceLocation.appointmentType = "Mobile";
         store.getters.lineItems.supportingItems = [
             {
@@ -514,10 +508,10 @@ describe("schedule.vue...", () => {
             },
         });
 
-        //Act
+        // Act
         await wrapper.vm.updateSupportingItems();
 
-        //Assert
+        // Assert
         expect(wrapper.vm.dispatchStoreAction).toBeCalledWith(
             "saveSupportingItemsSuppressingStateResetting",
             expect.arrayContaining([
@@ -530,7 +524,7 @@ describe("schedule.vue...", () => {
     });
 
     test("for Inshop appts, updateSupportingItems should call store action to save supporting items WITHOUT the EARLY BIRD supporting item", async () => {
-        //Arrange
+        // Arrange
         store.getters.order.serviceLocation.appointmentType = "Inshop";
         store.getters.lineItems.supportingItems = [
             {
@@ -559,10 +553,10 @@ describe("schedule.vue...", () => {
             },
         });
 
-        //Act
+        // Act
         await wrapper.vm.updateSupportingItems();
 
-        //Assert
+        // Assert
         expect(wrapper.vm.dispatchStoreAction).toBeCalledWith(
             "saveSupportingItemsSuppressingStateResetting",
             expect.not.arrayContaining([
@@ -575,7 +569,7 @@ describe("schedule.vue...", () => {
     });
 
     test("if no EARLY BIRD supporting item, then updateSupportingItems should NOT call store action", async () => {
-        //Arrange
+        // Arrange
         store.getters.order.serviceLocation.appointmentType = "Mobile";
         store.getters.lineItems.supportingItems = [];
         const { wrapper } = setupMocks({});
@@ -595,10 +589,10 @@ describe("schedule.vue...", () => {
             },
         });
 
-        //Act
+        // Act
         await wrapper.vm.updateSupportingItems();
 
-        //Assert
+        // Assert
         expect(wrapper.vm.dispatchStoreAction).not.toBeCalled();
     });
 });

src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.spec.js

@@ -2,30 +2,76 @@ import { shallowMount, flushPromises } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import timeSlotModalQuestion from "@/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue";
 import store from "@/store";
+
 import {
     RouteCodeFlags,
     PREMIUM_TIME_SLOT_ID_FLAG,
     PREMIUM_FEE_PART_TYPE,
 } from "@/constants/schedule-constants";
 
-describe("time-slot-modal-list-button-question.vue", () => {
+describe("time-slot-modal-question.vue", () => {
+    const timeSlotsForSelectedDate = {
+        date: "2023-09-02",
+        timeSlots: [
+            {
+                id: "03335-01820-S-B*20334*8 AM",
+                startTime: "08:00",
+                endTime: "09:00",
+                offerPremium: false,
+            },
+            {
+                id: "03335-01820-S-B*20334*830 AM",
+                startTime: "08:30",
+                endTime: "09:30",
+                offerPremium: false,
+            },
+            {
+                id: "03335-01820-S-B*20334*9 AM",
+                startTime: "09:00",
+                endTime: "10:00",
+                offerPremium: false,
+            },
+            {
+                id: "03335-01820-S-B*20334*930 AM",
+                startTime: "09:30",
+                endTime: "10:30",
+                offerPremium: false,
+            },
+            {
+                id: "03335-01820-S-B*20334*10 AM",
+                startTime: "10:00",
+                endTime: "11:00",
+                offerPremium: false,
+            },
+            {
+                id: "03335-01820-S-B*20334*1030 AM",
+                startTime: "10:30",
+                endTime: "11:30",
+                offerPremium: false,
+            },
+        ],
+    };
+
     test("When selected time slot is changed, a correctly formatted selectedTimeSlot should be emitted", async () => {
         //Arrange
-        const date = "2023-07-01";
+        const date = "2023-09-02";
-        const timeSlotId = "testRouteCodeId";
+        const routeCode = "03335-01820-S-B*20334*830 AM";
-        const startTime = "8:00 AM";
+        const startTime = "08:30";
-        const endTime = "8:30 AM";
+        const endTime = "09:30";
         const jobMaxMinutes = 100;
         const jobMinMinutes = 50;
         const expectedEmit = [
             [
                 {
-                    date: date,
+                    timeSlot: {
-                    routeCode: timeSlotId,
+                        date: date,
-                    startTime: startTime,
+                        routeCode: routeCode,
-                    endTime: endTime,
+                        startTime: startTime,
-                    jobMaxMinutes: jobMaxMinutes.toString(),
+                        endTime: endTime,
-                    jobMinMinutes: jobMinMinutes.toString(),
+                        jobMaxMinutes: jobMaxMinutes.toString(),
+                        jobMinMinutes: jobMinMinutes.toString(),
+                    },
+                    isPremiumAppointment: false,
                 },
             ],
         ];
@@ -35,22 +81,16 @@ describe("time-slot-modal-list-button-question.vue", () => {
                 propsData: {
                     estimatedServiceMinutesMaximum: jobMaxMinutes,
                     estimatedServiceMinutesMinimum: jobMinMinutes,
-                    dateAndTimeSlotData: {
+                    timeSlotsForSelectedDate: timeSlotsForSelectedDate,
-                        date: date,
-                        timeSlots: [
-                            {
-                                id: timeSlotId,
-                                startTime: startTime,
-                                endTime: endTime,
-                            },
-                        ],
-                    },
                 },
             },
         });
 
         wrapper.vm.$refs.timeSlots.closeModal = jest.fn();
-        wrapper.vm.selectedTimeSlotId = timeSlotId;
+
+        await wrapper.setData({
+            selectedRouteCode: routeCode
+        })
 
         //Act
         wrapper.vm.setSelectedTimeSlot();
@@ -59,7 +99,8 @@ describe("time-slot-modal-list-button-question.vue", () => {
         expect(wrapper.emitted()["update:modelValue"]).toEqual(expectedEmit);
     });
 });
-describe("time-slot-modal-list-button-question.vue Supplemental information", () => {
+
+describe("time-slot-modal-question.vue Supplemental information", () => {
     test("The correct supplemental information should be obtained from CMS - Mobile - Not Premium ", async () => {
         //Arrange
         const mobileCmsWidgetName = "MobileNotPremium";
@@ -72,11 +113,13 @@ describe("time-slot-modal-list-button-question.vue Supplemental information", ()
                 },
             },
         });
+
         //Assert
         expect(wrapper.vm.supplementalInformationBlock).toEqual(
             mockCmsContent[mobileCmsWidgetName]["BodyText"]
         );
     });
+
     test("The correct supplemental information should be obtained from CMS - Mobile - Premium", async () => {
         //Arrange
         const mobileCmsWidgetName = "MobilePremium";
@@ -89,11 +132,13 @@ describe("time-slot-modal-list-button-question.vue Supplemental information", ()
                 },
             },
         });
+
         //Assert
         expect(wrapper.vm.supplementalInformationBlock).toEqual(
             mockCmsContent[mobileCmsWidgetName]["BodyText"]
         );
     });
+
     test("No supplemental information should be obtained from CMS - Inshop", async () => {
         //Arrange
         const inshopWidgetName = "Inshop";
@@ -109,6 +154,7 @@ describe("time-slot-modal-list-button-question.vue Supplemental information", ()
         //Assert
         expect(wrapper.vm.supplementalInformationBlock).toBeNull();
     });
+
     test("No supplemental information should be obtained from CMS - Drop off, nothing selected", async () => {
         //Arrange
         const dropOffWidgetName = "Dropoff";
@@ -124,40 +170,72 @@ describe("time-slot-modal-list-button-question.vue Supplemental information", ()
         //Assert
         expect(wrapper.vm.supplementalInformationBlock).toBeNull();
     });
+
     test("Correct supplemental information should be retrieved, Dropoff regular", async () => {
         //Arrange
         const dropOffWidgetName = "Dropoff";
+        const modelValue = {
+            timeSlot: {
+                routeCode: `test${ RouteCodeFlags.ALL_DAY_DROP_OFF }`,
+                date: null,
+                startTime: null,
+                endTime: null,
+                jobMaxMinutes: null,
+                jobMinMinutes: null,
+            },
+            isPremiumAppointment: null,
+        }
+
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
-                    modelValue: { routeCode: "Test" + RouteCodeFlags.ALL_DAY_DROP_OFF },
+                    modelValue: modelValue,
                     appointmentType: "Dropoff",
                     dropoffCmsWidgetName: dropOffWidgetName,
                 },
             },
         });
+
+
+        console.log(wrapper.vm.selectedRouteCode)
+
         //Assert
         expect(wrapper.vm.supplementalInformationBlock).toEqual(
             mockCmsContent[dropOffWidgetName]["BodyText"]
         );
     });
+
     test("Correct supplemental information should be retrieved, Dropoff Overnight", async () => {
         //Arrange
         const overnightDropOffCmsWidgetName = "Overnight";
+        const modelValue = {
+            timeSlot: {
+                routeCode: `test${ RouteCodeFlags.OVERNIGHT_DROP_OFF }`,
+                date: null,
+                startTime: null,
+                endTime: null,
+                jobMaxMinutes: null,
+                jobMinMinutes: null,
+            },
+            isPremiumAppointment: null,
+        }
+
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
-                    modelValue: { routeCode: "Test" + RouteCodeFlags.OVERNIGHT_DROP_OFF },
+                    modelValue: modelValue,
                     appointmentType: "Dropoff",
                     overnightDropOffCmsWidgetName: overnightDropOffCmsWidgetName,
                 },
             },
         });
+
         //Assert
         expect(wrapper.vm.supplementalInformationBlock).toEqual(
             mockCmsContent[overnightDropOffCmsWidgetName]["BodyText"]
         );
     });
+
     test("Correct supplemental information should be retrieved, Dropoff Sameday", async () => {
         //Arrange
         const sameDayDropOffCmsWidgetName = "Sameday";
@@ -167,13 +245,24 @@ describe("time-slot-modal-list-button-question.vue Supplemental information", ()
         const endTime = "8:30 AM";
         const jobMaxMinutes = 100;
         const jobMinMinutes = 50;
+        const modelValue = {
+            timeSlot: {
+                routeCode: `test${ RouteCodeFlags.ALL_DAY_DROP_OFF }`,
+                date: null,
+                startTime: null,
+                endTime: null,
+                jobMaxMinutes: null,
+                jobMinMinutes: null,
+            },
+            isPremiumAppointment: null,
+        }
 
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
                     estimatedServiceMinutesMaximum: jobMaxMinutes,
                     estimatedServiceMinutesMinimum: jobMinMinutes,
-                    dateAndTimeSlotData: {
+                    timeSlotsForSelectedDate: {
                         date: date,
                         timeSlots: [
                             {
@@ -183,7 +272,7 @@ describe("time-slot-modal-list-button-question.vue Supplemental information", ()
                             },
                         ],
                     },
-                    modelValue: { routeCode: "Test" + RouteCodeFlags.ALL_DAY_DROP_OFF },
+                    modelValue: modelValue,
                     appointmentType: "Dropoff",
                     sameDayDropOffCmsWidgetName: sameDayDropOffCmsWidgetName,
                 },
@@ -208,12 +297,24 @@ describe("time-slot-modal-list-button-question.vue Disclaimer", () => {
         const jobMaxMinutes = 100;
         const jobMinMinutes = 50;
 
+        const modelValue = {
+            timeSlot: {
+                routeCode: `Test${ RouteCodeFlags.ALL_DAY_DROP_OFF }`,
+                date: null,
+                startTime: null,
+                endTime: null,
+                jobMaxMinutes: null,
+                jobMinMinutes: null,
+            },
+            isPremiumAppointment: null,
+        }
+        
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
                     estimatedServiceMinutesMaximum: jobMaxMinutes,
                     estimatedServiceMinutesMinimum: jobMinMinutes,
-                    dateAndTimeSlotData: {
+                    timeSlotsForSelectedDate: {
                         date: date,
                         timeSlots: [
                             {
@@ -223,7 +324,7 @@ describe("time-slot-modal-list-button-question.vue Disclaimer", () => {
                             },
                         ],
                     },
-                    modelValue: { routeCode: "Test" + RouteCodeFlags.ALL_DAY_DROP_OFF },
+                    modelValue: modelValue,
                     appointmentType: "Dropoff",
                     sameDayDropOffCmsWidgetName: sameDayDropOffCmsWidgetName,
                 },
@@ -235,47 +336,88 @@ describe("time-slot-modal-list-button-question.vue Disclaimer", () => {
             mockCmsContent[sameDayDropOffCmsWidgetName]["FooterText"]
         );
     });
+    
     test("Correct disclaimer information should be retrieved, Dropoff regular", async () => {
         //Arrange
         const dropOffWidgetName = "Dropoff";
+        const modelValue = {
+            timeSlot: {
+                routeCode: `Test${ RouteCodeFlags.ALL_DAY_DROP_OFF }`,
+                date: null,
+                startTime: null,
+                endTime: null,
+                jobMaxMinutes: null,
+                jobMinMinutes: null,
+            },
+            isPremiumAppointment: null,
+        }
+
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
-                    modelValue: { routeCode: "Test" + RouteCodeFlags.ALL_DAY_DROP_OFF },
+                    modelValue: modelValue,
                     appointmentType: "Dropoff",
                     dropoffCmsWidgetName: dropOffWidgetName,
                 },
             },
         });
+
         //Assert
         expect(wrapper.vm.disclaimerTextBlockCopy).toEqual(
             mockCmsContent[dropOffWidgetName]["FooterText"]
         );
     });
+    
     test("Correct disclaimer information should be retrieved, Dropoff overnight", async () => {
         //Arrange
         const overnightDropOffCmsWidgetName = "Overnight";
+        const modelValue = {
+            timeSlot: {
+                routeCode: `Test${ RouteCodeFlags.OVERNIGHT_DROP_OFF }`,
+                date: null,
+                startTime: null,
+                endTime: null,
+                jobMaxMinutes: null,
+                jobMinMinutes: null,
+            },
+            isPremiumAppointment: null,
+        }
+
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
-                    modelValue: { routeCode: "Test" + RouteCodeFlags.OVERNIGHT_DROP_OFF },
+                    modelValue: modelValue,
                     appointmentType: "Dropoff",
                     overnightDropOffCmsWidgetName: overnightDropOffCmsWidgetName,
                 },
             },
         });
+
         //Assert
         expect(wrapper.vm.disclaimerTextBlockCopy).toEqual(
             mockCmsContent[overnightDropOffCmsWidgetName]["FooterText"]
         );
     });
+
     test("No disclaimer information should be retrieved, non-dropoff", async () => {
         //Arrange
         const inshopWidgetName = "Inshop";
+        const modelValue = {
+            timeSlot: {
+                routeCode: `test`,
+                date: null,
+                startTime: null,
+                endTime: null,
+                jobMaxMinutes: null,
+                jobMinMinutes: null,
+            },
+            isPremiumAppointment: null,
+        }
+
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
-                    modelValue: { routeCode: "test" },
+                    modelValue: modelValue,
                     appointmentType: "Inshop",
                     cmsWidgetName: inshopWidgetName,
                 },
@@ -286,7 +428,7 @@ describe("time-slot-modal-list-button-question.vue Disclaimer", () => {
     });
 });
 
-describe("time-slot-modal-list-button-question.vue Duration", () => {
+describe("time-slot-modal-question.vue Duration", () => {
     test("The correct duration information should be displayed - Dropoff - Sameday ", async () => {
         //Arrange
         const sameDayDropOffCmsWidgetName = "Sameday";
@@ -297,12 +439,24 @@ describe("time-slot-modal-list-button-question.vue Duration", () => {
         const jobMaxMinutes = 100;
         const jobMinMinutes = 50;
 
+        const modelValue = {
+            timeSlot: {
+                routeCode: `test` + RouteCodeFlags.ALL_DAY_DROP_OFF,
+                date: null,
+                startTime: null,
+                endTime: null,
+                jobMaxMinutes: null,
+                jobMinMinutes: null,
+            },
+            isPremiumAppointment: null,
+        }
+
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
                     estimatedServiceMinutesMaximum: jobMaxMinutes,
                     estimatedServiceMinutesMinimum: jobMinMinutes,
-                    dateAndTimeSlotData: {
+                    timeSlotsForSelectedDate: {
                         date: date,
                         timeSlots: [
                             {
@@ -312,7 +466,7 @@ describe("time-slot-modal-list-button-question.vue Duration", () => {
                             },
                         ],
                     },
-                    modelValue: { routeCode: "Test" + RouteCodeFlags.ALL_DAY_DROP_OFF },
+                    modelValue: modelValue,
                     appointmentType: "Dropoff",
                     sameDayDropOffCmsWidgetName: sameDayDropOffCmsWidgetName,
                 },
@@ -324,30 +478,59 @@ describe("time-slot-modal-list-button-question.vue Duration", () => {
             mockCmsContent[sameDayDropOffCmsWidgetName]["SubheaderText"]
         );
     });
+
     test("Correct duration information should be retrieved, Dropoff overnight", async () => {
         //Arrange
         const overnightDropOffCmsWidgetName = "Overnight";
+
+        const modelValue = {
+            timeSlot: {
+                routeCode: `test` + RouteCodeFlags.OVERNIGHT_DROP_OFF,
+                date: null,
+                startTime: null,
+                endTime: null,
+                jobMaxMinutes: null,
+                jobMinMinutes: null,
+            },
+            isPremiumAppointment: null,
+        }
+
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
-                    modelValue: { routeCode: "Test" + RouteCodeFlags.OVERNIGHT_DROP_OFF },
+                    modelValue: modelValue,
                     appointmentType: "Dropoff",
                     overnightDropOffCmsWidgetName: overnightDropOffCmsWidgetName,
                 },
             },
         });
+
         //Assert
         expect(wrapper.vm.durationTextBlockCopy).toEqual(
             mockCmsContent[overnightDropOffCmsWidgetName]["SubheaderText"]
         );
     });
+
     test("Correct duration information should be retrieved, Dropoff", async () => {
         //Arrange
         const dropoffCmsWidgetName = "Dropoff";
+
+        const modelValue = {
+            timeSlot: {
+                routeCode: `test` + RouteCodeFlags.ALL_DAY_DROP_OFF,
+                date: null,
+                startTime: null,
+                endTime: null,
+                jobMaxMinutes: null,
+                jobMinMinutes: null,
+            },
+            isPremiumAppointment: null,
+        }
+
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
-                    modelValue: { routeCode: "Test" + RouteCodeFlags.ALL_DAY_DROP_OFF },
+                    modelValue: modelValue,
                     appointmentType: "Dropoff",
                     dropoffCmsWidgetName: dropoffCmsWidgetName,
                 },
@@ -358,25 +541,39 @@ describe("time-slot-modal-list-button-question.vue Duration", () => {
             mockCmsContent[dropoffCmsWidgetName]["SubheaderText"]
         );
     });
+
     test("Correct duration information should be retrieved, Inshop - convert to hours", async () => {
         //Arrange
         const cmsWidgetName = "Inshop";
+
+        const modelValue = {
+            timeSlot: {
+                routeCode: `test`,
+                date: null,
+                startTime: null,
+                endTime: null,
+            },
+            isPremiumAppointment: null,
+        }
+
         const { wrapper } = setupMocks({
             customMountOptions: {
                 propsData: {
                     estimatedServiceMinutesMaximum: 180,
                     estimatedServiceMinutesMinimum: 120,
-                    modelValue: { routeCode: "Test" },
+                    modelValue: modelValue,
                     appointmentType: "Inshop",
                     cmsWidgetName: cmsWidgetName,
                 },
             },
         });
+
         //Assert
         expect(wrapper.vm.durationTextBlockCopy).toEqual(
             mockCmsContent[cmsWidgetName]["SubheaderText"] + " 2 - 3 hours"
         );
     });
+
     test("Correct duration information should be retrieved, Inshop - convert to minutes", async () => {
         //Arrange
         const cmsWidgetName = "Inshop";
@@ -396,6 +593,7 @@ describe("time-slot-modal-list-button-question.vue Duration", () => {
             mockCmsContent[cmsWidgetName]["SubheaderText"] + " 60 - 90 minutes"
         );
     });
+
     test("Correct duration information should be retrieved, Inshop - min = maximum time", async () => {
         //Arrange
         const cmsWidgetName = "Inshop";
@@ -415,6 +613,7 @@ describe("time-slot-modal-list-button-question.vue Duration", () => {
             mockCmsContent[cmsWidgetName]["SubheaderText"] + " 4 hours"
         );
     });
+
     test("No duration information should be displayed, Mobile", async () => {
         //Arrange
         const mobileCmsWidgetName = "Mobile";
@@ -450,7 +649,7 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
                 propsData: {
                     estimatedServiceMinutesMaximum: jobMaxMinutes,
                     estimatedServiceMinutesMinimum: jobMinMinutes,
-                    dateAndTimeSlotData: {
+                    timeSlotsForSelectedDate: {
                         date: date,
                         timeSlots: [
                             {
@@ -473,6 +672,7 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
         };
         expect(wrapper.vm.availableTimeSlots[0]).toEqual(expectedTimeSlotObject);
     });
+
     test("Available Timeslots should be formatted correctly - Dropoff - Overnight ", async () => {
         //Arrange
         const overnightDropOffCmsWidgetName = "Overnight";
@@ -488,7 +688,7 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
                 propsData: {
                     estimatedServiceMinutesMaximum: jobMaxMinutes,
                     estimatedServiceMinutesMinimum: jobMinMinutes,
-                    dateAndTimeSlotData: {
+                    timeSlotsForSelectedDate: {
                         date: date,
                         timeSlots: [
                             {
@@ -511,6 +711,7 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
         };
         expect(wrapper.vm.availableTimeSlots[0]).toEqual(expectedTimeSlotObject);
     });
+
     test("Available Timeslots should be formatted correctly - Dropoff", async () => {
         //Arrange
         const dropoffCmsWidgetName = "Dropoff";
@@ -526,7 +727,7 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
                 propsData: {
                     estimatedServiceMinutesMaximum: jobMaxMinutes,
                     estimatedServiceMinutesMinimum: jobMinMinutes,
-                    dateAndTimeSlotData: {
+                    timeSlotsForSelectedDate: {
                         date: date,
                         timeSlots: [
                             {
@@ -549,6 +750,7 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
         };
         expect(wrapper.vm.availableTimeSlots[0]).toEqual(expectedTimeSlotObject);
     });
+
     test("Available Timeslots should be formatted correctly - Mobile not premium", async () => {
         //Arrange
         const mobileCmsWidgetName = "MobileNotPremium";
@@ -564,7 +766,7 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
                 propsData: {
                     estimatedServiceMinutesMaximum: jobMaxMinutes,
                     estimatedServiceMinutesMinimum: jobMinMinutes,
-                    dateAndTimeSlotData: {
+                    timeSlotsForSelectedDate: {
                         date: date,
                         timeSlots: [
                             {
@@ -587,6 +789,7 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
         };
         expect(wrapper.vm.availableTimeSlots[0]).toEqual(expectedTimeSlotObject);
     });
+
     test("Available Timeslots should be formatted correctly - Mobile with premium", async () => {
         //Arrange
         const mobilePremiumCmsWidgetName = "MobilePremium";
@@ -605,7 +808,7 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
                     premiumAppointmentFee: {
                         partType: PREMIUM_FEE_PART_TYPE,
                     },
-                    dateAndTimeSlotData: {
+                    timeSlotsForSelectedDate: {
                         date: date,
                         timeSlots: [
                             {
@@ -631,8 +834,10 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
             buttonLabelSubCopy: "+$15.99",
             value: timeSlotId + PREMIUM_TIME_SLOT_ID_FLAG,
         };
+
         expect(wrapper.vm.availableTimeSlots[0]).toEqual(expectedTimeSlotObject);
     });
+
     test("Available Timeslots should be formatted correctly - Inshop", async () => {
         //Arrange
         const cmsWidgetName = "Inshop";
@@ -648,7 +853,7 @@ describe("time-slot-modal-list-button-question.vue Available Timeslots", () => {
                 propsData: {
                     estimatedServiceMinutesMaximum: jobMaxMinutes,
                     estimatedServiceMinutesMinimum: jobMinMinutes,
-                    dateAndTimeSlotData: {
+                    timeSlotsForSelectedDate: {
                         date: date,
                         timeSlots: [
                             {
@@ -678,7 +883,7 @@ const mockCmsContent = {
         HeaderText: "Mobile, not premium HeaderText",
     },
     MobilePremium: {
-        "BodyText:": "Mobile, with premium BodyText",
+        BodyText: "Mobile, with premium BodyText",
         FooterText: "Mobile, with premium FooterText",
         SubheaderText: "Mobile, with premium SubheaderText",
         HeaderText: "Mobile, with premium HeaderText",

src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue

@@ -157,10 +157,12 @@ export default {
             return this.$refs[this.modalName];
         },
         supplementalInformationBlock() {
+            console.log(this.selectedRouteCode)
             let appointmentTypeCmsWidgetName;
             if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
                 return null;
             } else if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
+
                 appointmentTypeCmsWidgetName = this.selectedRouteCode?.includes(
                     PREMIUM_TIME_SLOT_ID_FLAG
                 )
@@ -177,6 +179,7 @@ export default {
                         );
                 }
             }
+
             return this.getCmsContent(
                 appointmentTypeCmsWidgetName,
                 cmsWidgetFieldMappings.SUPPLEMENTAL_INFORMATION
@@ -433,7 +436,9 @@ export default {
             }
 
             if (this.modelValue?.isPremiumAppointment) {
-                selectedRouteCode = this.addPremiumFlagToInput(this.modelValue?.timeSlot?.routeCode);
+                selectedRouteCode = this.addPremiumFlagToInput(
+                    this.modelValue?.timeSlot?.routeCode
+                );
             } else {
                 selectedRouteCode = this.modelValue?.timeSlot?.routeCode;
             }