From 7cb8ef3043640930e601a2e67e11decc5cb0ae85 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Tue, 5 Sep 2023 07:16:57 -0400 Subject: [PATCH] Updated unit tests --- src/layouts/schedule/schedule.spec.js | 138 ++++---- .../time-slot-modal-question.spec.js | 295 +++++++++++++++--- .../time-slot-modal-question.vue | 7 +- 3 files changed, 322 insertions(+), 118 deletions(-) diff --git a/src/layouts/schedule/schedule.spec.js b/src/layouts/schedule/schedule.spec.js index b47036c10..54b86af90 100644 --- a/src/layouts/schedule/schedule.spec.js +++ b/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(); }); }); diff --git a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.spec.js b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.spec.js index 93f8cfe01..775bf3a39 100644 --- a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.spec.js +++ b/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 timeSlotId = "testRouteCodeId"; - const startTime = "8:00 AM"; - const endTime = "8:30 AM"; + const date = "2023-09-02"; + const routeCode = "03335-01820-S-B*20334*830 AM"; + const startTime = "08:30"; + const endTime = "09:30"; const jobMaxMinutes = 100; const jobMinMinutes = 50; const expectedEmit = [ [ { - date: date, - routeCode: timeSlotId, - startTime: startTime, - endTime: endTime, - jobMaxMinutes: jobMaxMinutes.toString(), - jobMinMinutes: jobMinMinutes.toString(), + timeSlot: { + date: date, + 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: { - date: date, - timeSlots: [ - { - id: timeSlotId, - startTime: startTime, - endTime: endTime, - }, - ], - }, + timeSlotsForSelectedDate: timeSlotsForSelectedDate, }, }, }); 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", diff --git a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue index 007987ba8..7d4891594 100644 --- a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue +++ b/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; }