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
@@ -141,6 +140,7 @@ describe("schedule.vue...", () => {
             // Assert
             expect(arePagePrerequisitesValid).toBe(true);
         });
+
         test("should pass arePagePrerequisitesValid with a inshop order and providerNumber", () => {
             // Arrange
             const { wrapper } = setupMocks({});
@@ -151,6 +151,7 @@ describe("schedule.vue...", () => {
             // Assert
             expect(arePagePrerequisitesValid).toBe(true);
         });
+
         test("should fail arePagePrerequisitesValid with a replace with no glass parts", async () => {
             // Arrange
             const { wrapper } = setupMocks({});
@@ -162,6 +163,7 @@ describe("schedule.vue...", () => {
             // Assert
             expect(arePagePrerequisitesValid2).toBe(false);
         });
+
         test("should fail arePagePrerequisitesValid without isInsurance", () => {
             // Arrange
             const { wrapper } = setupMocks({});
@@ -383,37 +385,29 @@ describe("schedule.vue...", () => {
             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
             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

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

@@ -2,31 +2,77 @@ 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 = [
             [
                 {
+                    timeSlot: {
                         date: date,
-                    routeCode: timeSlotId,
+                        routeCode: routeCode,
                         startTime: startTime,
                         endTime: endTime,
                         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;
             }