From 1e3ead2470858a975feb049c3392922820c4e00c Mon Sep 17 00:00:00 2001 From: Michaela Brydon Date: Thu, 1 Aug 2024 13:53:35 -0400 Subject: [PATCH 01/13] Fixing submittedOrder DNE --- .../vehicle-banner/vehicle-banner.vue | 4 +- .../add-to-calendar/add-to-calendar.vue | 2 +- .../order-confirmation/order-confirmation.vue | 2 +- src/layouts/payment-method/payment-method.vue | 37 ++++++++++++------- .../tpa-confirmation/tpa-confirmation.vue | 2 +- src/router/index.js | 2 +- src/store/index.js | 10 +++-- 7 files changed, 37 insertions(+), 22 deletions(-) diff --git a/src/iss-components/vehicle-banner/vehicle-banner.vue b/src/iss-components/vehicle-banner/vehicle-banner.vue index 64a1ffaa..6a17a3b7 100644 --- a/src/iss-components/vehicle-banner/vehicle-banner.vue +++ b/src/iss-components/vehicle-banner/vehicle-banner.vue @@ -24,7 +24,7 @@ export default { } const imageUrl = (this.mainStore.hasSubmittedOrder()) - ? this.mainStore.submittedOrder.vehicle.imageUrl + ? this.mainStore.getSubmittedOrder().vehicle.imageUrl : this.mainStore.order.vehicle.imageUrl; if (!imageUrl || imageUrl === 'NULL') { @@ -54,7 +54,7 @@ export default { }, methods: { getUnmatchedVehicleIcon() { - const category = this.mainStore.submittedOrder?.vehicle.category ?? this.mainStore.order.vehicle.category; + const category = this.mainStore.getSubmittedOrder()?.vehicle.category ?? this.mainStore.order.vehicle.category; switch (category) { case this.vehicleCategories.CAR: return this.carUnmatchedVehicleIcon; diff --git a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue index ebd7eb47..a469db25 100644 --- a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue +++ b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue @@ -57,7 +57,7 @@ export default { }, setup() { const mainStore = useMainStore(); - const { submittedOrder } = mainStore; + const submittedOrder = mainStore.getSubmittedOrder(); return { mainStore, submittedOrder }; }, data() { diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index de1c896e..22e1cf6a 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -139,7 +139,7 @@ export default { }, setup() { const mainStore = useMainStore(); - const { submittedOrder } = mainStore; + const submittedOrder = mainStore.getSubmittedOrder(); return { mainStore, submittedOrder }; }, computed: { diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 8f69cab3..33ebfbba 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -301,20 +301,31 @@ export default { if (this.paymentMethod === paymentMethods.PAY_AT_TIME_OF_SERVICE) { try { - await submitWorkOrder({ submitType: submitType.SAFELITE }).then(() => { - this.$router.navigate( - this.navigationScenarios.CLICKED_FORWARD, - this.$route - ); - }).catch((submitError) => { - useMainStore().setBailout(bailoutMessage.saveSessionError(submitError.data)); - this.$router.navigate( - this.navigationScenarios.SAVE_SESSION_FAILED, - this.$route, - { query: { issPage: issPageValues.PAYMENT_METHOD } } - ); - }); + await submitWorkOrder({ submitType: submitType.SAFELITE }); + this.$router.navigate( + this.navigationScenarios.CLICKED_FORWARD, + this.$route + ); + // await submitWorkOrder({ submitType: submitType.SAFELITE }).then(() => { + // this.$router.navigate( + // this.navigationScenarios.CLICKED_FORWARD, + // this.$route + // ); + // }).catch((submitError) => { + // useMainStore().setBailout(bailoutMessage.saveSessionError(submitError.data)); + // this.$router.navigate( + // this.navigationScenarios.SAVE_SESSION_FAILED, + // this.$route, + // { query: { issPage: issPageValues.PAYMENT_METHOD } } + // ); + // }); } catch (error) { + useMainStore().setBailout(bailoutMessage.saveSessionError(submitError.data)); + this.$router.navigate( + this.navigationScenarios.SAVE_SESSION_FAILED, + this.$route, + { query: { issPage: issPageValues.PAYMENT_METHOD } } + ); console.error(`error: response from submit work order:${error.message}`); } } else { diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue index 1e817d6b..6c52383c 100644 --- a/src/layouts/tpa-confirmation/tpa-confirmation.vue +++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue @@ -127,7 +127,7 @@ export default { }, setup() { const mainStore = useMainStore(); - const { submittedOrder } = mainStore; + const submittedOrder = mainStore.getSubmittedOrder(); return { mainStore, submittedOrder }; }, computed: { diff --git a/src/router/index.js b/src/router/index.js index 53dfb91f..7c1f702c 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -50,7 +50,7 @@ const routes = [ // Intercept all navigation if a submitted order exists in storage if (useMainStore().hasSubmittedOrder()) { if (to.query.issPage !== issPageValues.ENTRY_PAGE) { - return await GoToConfirmationPage(next, useMainStore().submittedOrder); + return await GoToConfirmationPage(next, useMainStore().getSubmittedOrder()); } } diff --git a/src/store/index.js b/src/store/index.js index 4a911552..1325e971 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -419,8 +419,7 @@ export const useMainStore = defineStore({ experimentSettings: (state) => state.applicationUser.experiments .filter((x) => !!x.isActive) .map((x) => x.settings) - .reduce((r, c) => Object.assign(r, c), {}) ?? {}, - submittedOrder: () => JSON.parse(window.sessionStorage.getItem(webStorageConstants.SUBMITTED_ORDER)) + .reduce((r, c) => Object.assign(r, c), {}) ?? {} }, actions: { @@ -1559,7 +1558,8 @@ export const useMainStore = defineStore({ }, resetState() { - Object.assign(this, getDefaultState()); + //Object.assign(this, getDefaultState()); + this.$reset(); }, resetRegistrationState() { @@ -2529,6 +2529,10 @@ export const useMainStore = defineStore({ return window.sessionStorage.getItem(webStorageConstants.SUBMITTED_ORDER) !== null; }, + getSubmittedOrder() { + return JSON.parse(window.sessionStorage.getItem(webStorageConstants.SUBMITTED_ORDER)); + }, + createSubmittedOrder(submitType) { if (this.hasSubmittedOrder()) { return; From f68eefcff23c6cbfd01c4224a147a3b56ddf52d9 Mon Sep 17 00:00:00 2001 From: Michaela Brydon Date: Wed, 7 Aug 2024 17:23:20 -0400 Subject: [PATCH 02/13] Fixed problem --- src/helpers/cms-content-helper.js | 16 +++++++++------- .../order-confirmation/order-confirmation.vue | 3 +-- src/store/index.js | 3 ++- 3 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js index 4b44e722..455aee81 100644 --- a/src/helpers/cms-content-helper.js +++ b/src/helpers/cms-content-helper.js @@ -97,7 +97,7 @@ function findAndReplaceGlobalStateValues(widgetModel, widgetName) { * @param baseResponse * @param clientResponse */ -function processPageData(baseResponse, clientResponse) { +async function processPageData(baseResponse, clientResponse) { const pageDataFromCms = {}; let widgets = []; @@ -140,6 +140,7 @@ function processPageData(baseResponse, clientResponse) { widgets.forEach((widget) => { // Global state value replacement. + console.log(widget); const widgetWithReplacements = findAndReplaceGlobalStateValues(widget.Model, widget.Name); // If we already have this widget, push it on the collection @@ -164,20 +165,20 @@ function processPageData(baseResponse, clientResponse) { * * @param issPage */ -export function fetchCmsContentForPage(issPage) { +export async function fetchCmsContentForPage(issPage) { const store = useMainStore(); const { clientName } = store.issConfig; const { parentAccountNumber } = store.issConfig; const clientOverride = clientName.length > 0 && parentAccountNumber > 0; - return ( + return await ( store .getPageData(issPage) // Get the base/default page first. - .then((baseResponse) => { + .then(async (baseResponse) => { if (!clientOverride) { // Return the base page if there are no client override. - return processPageData(baseResponse, null); + return await processPageData(baseResponse, null); } // Else get the client override page. const pageName = `${issPage}_${clientName.toLowerCase().replace(/ /g, '')}`; @@ -186,10 +187,11 @@ export function fetchCmsContentForPage(issPage) { (clientResponse) => // Process the client override if it exists. processPageData(baseResponse, clientResponse), - (error) => { + async (error) => { console.error(error); // Process the just the base if no client override exists. - return processPageData(baseResponse, null); + var x = await processPageData(baseResponse, null); + return x; } ); }) diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index 22e1cf6a..9fb9279f 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -105,7 +105,6 @@ import { import { toTitleCase } from '@/helpers/text-helper.js'; import { AppointmentTypeStrings } from '@/constants/schedule-constants'; import applicationConfig from '@/constants/application-config'; -import submitType from '@/constants/submit-type'; export default { name: 'order-confirmation', @@ -121,7 +120,7 @@ export default { mixins: [BaseFormMixin], async beforeRouteEnter(to, from, next) { // Call APIs - const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); + const cmsContent = fetchCmsContentForPage(to.query.issPage); // Settle promises and get results const promiseResultMap = [ diff --git a/src/store/index.js b/src/store/index.js index f5523394..b1284ab1 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -419,7 +419,8 @@ export const useMainStore = defineStore({ experimentSettings: (state) => state.applicationUser.experiments .filter((x) => !!x.isActive) .map((x) => x.settings) - .reduce((r, c) => Object.assign(r, c), {}) ?? {} + .reduce((r, c) => Object.assign(r, c), {}) ?? {}, + submittedOrder: () => JSON.parse(window.sessionStorage.getItem(webStorageConstants.SUBMITTED_ORDER)) }, actions: { From 037fedaadc00cadfa7195480f83a449c58c7cab4 Mon Sep 17 00:00:00 2001 From: Michaela Brydon Date: Wed, 7 Aug 2024 17:25:34 -0400 Subject: [PATCH 03/13] Removing unnecessary await stuff --- src/helpers/cms-content-helper.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js index 455aee81..c5b462eb 100644 --- a/src/helpers/cms-content-helper.js +++ b/src/helpers/cms-content-helper.js @@ -97,7 +97,7 @@ function findAndReplaceGlobalStateValues(widgetModel, widgetName) { * @param baseResponse * @param clientResponse */ -async function processPageData(baseResponse, clientResponse) { +function processPageData(baseResponse, clientResponse) { const pageDataFromCms = {}; let widgets = []; @@ -165,20 +165,20 @@ async function processPageData(baseResponse, clientResponse) { * * @param issPage */ -export async function fetchCmsContentForPage(issPage) { +export function fetchCmsContentForPage(issPage) { const store = useMainStore(); const { clientName } = store.issConfig; const { parentAccountNumber } = store.issConfig; const clientOverride = clientName.length > 0 && parentAccountNumber > 0; - return await ( + return ( store .getPageData(issPage) // Get the base/default page first. - .then(async (baseResponse) => { + .then((baseResponse) => { if (!clientOverride) { // Return the base page if there are no client override. - return await processPageData(baseResponse, null); + return processPageData(baseResponse, null); } // Else get the client override page. const pageName = `${issPage}_${clientName.toLowerCase().replace(/ /g, '')}`; @@ -187,11 +187,10 @@ export async function fetchCmsContentForPage(issPage) { (clientResponse) => // Process the client override if it exists. processPageData(baseResponse, clientResponse), - async (error) => { + (error) => { console.error(error); // Process the just the base if no client override exists. - var x = await processPageData(baseResponse, null); - return x; + return processPageData(baseResponse, null); } ); }) From 6ffe81133600d0965755e84f85a356918f142a2d Mon Sep 17 00:00:00 2001 From: Michaela Brydon Date: Thu, 8 Aug 2024 10:19:44 -0400 Subject: [PATCH 04/13] Tweaks --- src/helpers/cms-content-helper.js | 1 - .../order-confirmation/order-confirmation.vue | 2 +- src/layouts/payment-method/payment-method.vue | 13 ------------- 3 files changed, 1 insertion(+), 15 deletions(-) diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js index c5b462eb..4b44e722 100644 --- a/src/helpers/cms-content-helper.js +++ b/src/helpers/cms-content-helper.js @@ -140,7 +140,6 @@ function processPageData(baseResponse, clientResponse) { widgets.forEach((widget) => { // Global state value replacement. - console.log(widget); const widgetWithReplacements = findAndReplaceGlobalStateValues(widget.Model, widget.Name); // If we already have this widget, push it on the collection diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index 9fb9279f..356bd643 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -120,7 +120,7 @@ export default { mixins: [BaseFormMixin], async beforeRouteEnter(to, from, next) { // Call APIs - const cmsContent = fetchCmsContentForPage(to.query.issPage); + const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); // Settle promises and get results const promiseResultMap = [ diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 7915c06e..8c84b991 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -306,19 +306,6 @@ export default { this.navigationScenarios.CLICKED_FORWARD, this.$route ); - // await submitWorkOrder({ submitType: submitType.SAFELITE }).then(() => { - // this.$router.navigate( - // this.navigationScenarios.CLICKED_FORWARD, - // this.$route - // ); - // }).catch((submitError) => { - // useMainStore().setBailout(bailoutMessage.saveSessionError(submitError.data)); - // this.$router.navigate( - // this.navigationScenarios.SAVE_SESSION_FAILED, - // this.$route, - // { query: { issPage: issPageValues.PAYMENT_METHOD } } - // ); - // }); } catch (error) { useMainStore().setBailout(bailoutMessage.saveSessionError(submitError.data)); this.$router.navigate( From fd633102cc0e0399a91656870f884306805812f8 Mon Sep 17 00:00:00 2001 From: Michaela Brydon Date: Mon, 12 Aug 2024 10:50:24 -0400 Subject: [PATCH 05/13] In progress --- .../order-confirmation/order-confirmation.vue | 159 +++++++++--------- src/store/index.js | 4 +- 2 files changed, 86 insertions(+), 77 deletions(-) diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index 356bd643..9ca4f5ea 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -90,7 +90,8 @@ import cartDropdown from '@/iss-components/cart-dropdown/cart-dropdown.vue'; // Supporting files import { fetchCmsContentForPage, - processIfStatements + processIfStatements, + getStringWithCustomValues } from '@/helpers/cms-content-helper'; import settleAllPromises from '@/helpers/layout-helper'; import { Form } from 'vee-validate'; @@ -141,6 +142,31 @@ export default { const submittedOrder = mainStore.getSubmittedOrder(); return { mainStore, submittedOrder }; }, + data() { + var { vehicle, serviceLocation } = this.submittedOrder; + return{ + appointmentType: serviceLocation.appointmentType, + serviceLocationAddress: serviceLocation.address, + serviceLocationAddress2: serviceLocation.address2, + serviceLocationCity: serviceLocation.city, + serviceLocationState: serviceLocation.state, + serviceLocationZipCode: serviceLocation.zipCode, + widgets: { + emailConfirmation: 'EmailConfirmationWordingWidget', + orderConfirmation: 'OrderConfirmationContent', + mobile: 'MobileWordingWidget' + }, + customValueMap: { + inShopAppointment: (serviceLocation.appointmentType === AppointmentTypeStrings.IN_SHOP), + dropOffAppointment: false, + vehicleYear: vehicle.year, + vehicleMake: vehicle.make, + vehicleModel: vehicle.model, + address: '100 Pine Tract Rd.', // TODO fix + inShopDuration: '12 minutes' //TODO + } + } + }, computed: { carrierName() { return this.mainStore.issConfig.clientName; @@ -149,18 +175,8 @@ export default { return this.mainStore.issConfig.successReturnURL; }, confirmationEmailText() { - return this.getCmsContent( - 'EmailConfirmationWordingWidget', - 'BodyText' - ) - ?.replaceAll( - '{custom:CUSTOMER_PORTAL_URL}', - applicationConfig.CUSTOMER_PORTAL_URL - ) - ?.replaceAll( - '{custom:CUSTOMER_PORTAL_LOGIN_TOKEN}', - this.submittedOrder.customerPortalLoginToken - ) + var content = this.getCmsContent('EmailConfirmationWordingWidget','BodyText') + return getStringWithCustomValues(content, this.customValueMap) ?.replaceAll('<', '<') ?.replaceAll('>', '>'); }, @@ -193,38 +209,29 @@ export default { }); }, appointmentTimeFormatted() { - const formattedTime = this.formatAppointmentTime(this.appointmentType); - return formattedTime; + return this.formatAppointmentTime(this.appointmentType); }, mobileWordingText() { - return this.getCmsContent('MobileWordingWidget', 'BodyText'); + //return this.getCmsContent('MobileWordingWidget', 'BodyText'); + var content = this.getCmsContent('MobileWordingWidget','BodyText'); + return getStringWithCustomValues(content, this.customValueMap); }, mobileWordingText2() { return this.getCmsContent('MobileWordingWidget', 'BodyText2'); }, dropOffAndInShopWordingText() { - return this.getCmsContent( - 'DropOffAndInShopWordingWidget', - 'BodyText' - ); + // return this.getCmsContent( + // 'DropOffAndInShopWordingWidget', + // 'BodyText' + // ); + var content = this.getCmsContent('DropOffAndInShopWordingWidget','BodyText'); + return getStringWithCustomValues(content, this.customValueMap); }, dropOffAndInShopWordingText2() { - return this.getBodyText2FromCms('DropOffAndInShopWordingWidget'); - }, - serviceLocationAddress() { - return this.submittedOrder.serviceLocation.address; - }, - serviceLocationAddress2() { - return this.submittedOrder.serviceLocation.address2; - }, - serviceLocationCity() { - return this.submittedOrder.serviceLocation.city; - }, - serviceLocationState() { - return this.submittedOrder.serviceLocation.state; - }, - serviceLocationZipCode() { - return this.submittedOrder.serviceLocation.zipCode; + // var content = this.getCmsContent('DropOffAndInShopWordingWidget','BodyText2'); + // return getStringWithCustomValues(content, this.customValueMap); + //return this.getBodyText2FromCms('DropOffAndInShopWordingWidget'); + return this.getTextFromCmsWithCustomValues('DropOffAndInShopWordingWidget', 'BodyText2'); }, serviceLocationFullAddress() { // eslint-disable-next-line max-len @@ -256,42 +263,24 @@ export default { : ''; }, appointmentWordingText() { - switch (this.appointmentType) { - case AppointmentTypeStrings.MOBILE: - case AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP: - return this.mobileWordingText?.replaceAll( - '{custom:address}', - this.serviceLocationFullAddress - ); - case AppointmentTypeStrings.DROP_OFF: - return this.dropOffAndInShopWordingText?.replaceAll( - '{custom:address}', - this.providerFullAddress - ); - case AppointmentTypeStrings.IN_SHOP: - return this.dropOffAndInShopWordingText?.replaceAll( - '{custom:address}', - this.providerFullAddress - ); - default: - return null; - } + const wordingMap = { + [AppointmentTypeStrings.MOBILE]: this.mobileWordingText, + [AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP]: this.mobileWordingText, + [AppointmentTypeStrings.DROP_OFF]: this.dropOffAndInShopWordingText, + [AppointmentTypeStrings.IN_SHOP]: this.dropOffAndInShopWordingText + }; + + return wordingMap[this.appointmentType] || null; }, appointmentWordingText2() { - switch (this.appointmentType) { - case AppointmentTypeStrings.MOBILE: - case AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP: - return this.mobileWordingText2; - case AppointmentTypeStrings.DROP_OFF: - return this.dropOffAndInShopWordingText2; - case AppointmentTypeStrings.IN_SHOP: - return this.dropOffAndInShopWordingText2?.replaceAll( - '{custom:inShopDuration}', - this.inShopAppointmentDuration - ); - default: - return null; - } + const wordingMap = { + [AppointmentTypeStrings.MOBILE]: this.mobileWordingText2, + [AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP]: this.mobileWordingText2, + [AppointmentTypeStrings.DROP_OFF]: this.dropOffAndInShopWordingText2, + [AppointmentTypeStrings.IN_SHOP]: this.dropOffAndInShopWordingText2 + }; + + return wordingMap[this.appointmentType] || null; }, mobileAppointment() { return ( @@ -418,12 +407,16 @@ export default { } }, processIfStatements, - getBodyText2FromCms(cmsWidgetName) { - const body2Text = this.getCmsContent(cmsWidgetName, 'BodyText2'); - return this.processIfStatements( - body2Text, + getTextFromCmsWithCustomValues(widgetName, widgetField) { + const rawText = this.getCmsContent(widgetName, widgetField); + return processIfStatements( + rawText, 'custom', - this.getCustomValueFromString + //this.getCustomValueFromString + (v) => { + console.log(v); + return this.customValueMap[v]; + } ); }, getCustomValueFromString(str) { @@ -432,6 +425,22 @@ export default { return this.inShopAppointment; case 'dropOffAppointment': return this.dropOffAppointment; + case 'vehicleMake': + return 'Test Make'; //this.submittedOrder.vehicle.make; + case 'vehicleModel': + return 'Test model';//this.submittedOrder.vehicle.model; + case 'vehicleYear': + return '1000';//this.submittedOrder.vehicle.year; + case 'email': + return 'test@email.com';//this.submittedOrder.customer.emailAddress; + case 'address': + return 'a'; + case 'inShopDuration': + return this.inShopAppointmentDuration; + case 'CUSTOMER_PORTAL_URL': + return applicationConfig.CUSTOMER_PORTAL_URL; + case 'CUSTOMER_PORTAL_LOGIN_TOKEN': + return this.submittedOrder.customerPortalLoginToken; default: return null; } diff --git a/src/store/index.js b/src/store/index.js index b1284ab1..a1d45069 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -419,8 +419,8 @@ export const useMainStore = defineStore({ experimentSettings: (state) => state.applicationUser.experiments .filter((x) => !!x.isActive) .map((x) => x.settings) - .reduce((r, c) => Object.assign(r, c), {}) ?? {}, - submittedOrder: () => JSON.parse(window.sessionStorage.getItem(webStorageConstants.SUBMITTED_ORDER)) + .reduce((r, c) => Object.assign(r, c), {}) ?? {}//, + //submittedOrder: () => JSON.parse(window.sessionStorage.getItem(webStorageConstants.SUBMITTED_ORDER)) }, actions: { From af9a98b11d65341bc90581e54865447a9c33c230 Mon Sep 17 00:00:00 2001 From: Michaela Brydon Date: Mon, 12 Aug 2024 14:51:27 -0400 Subject: [PATCH 06/13] Still in progress --- .../order-confirmation/order-confirmation.vue | 310 ++++++++---------- 1 file changed, 133 insertions(+), 177 deletions(-) diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index 9ca4f5ea..464d0b24 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -26,7 +26,7 @@
-

{{ appointmentDateFormatted }}

+

{{ formatDate(schedule.date) }}

{{ appointmentTimeFormatted }}

+ :scheduleDate="schedule.date" + :scheduleStartTime="schedule.startTime" + :scheduleEndTime="schedule.endTime" />
@@ -54,7 +54,7 @@
'); }, orderConfirmationHeaderText() { - return this.getCmsContent('OrderConfirmationContent', 'HeaderText'); + return this.getCmsContent( + this.widgets.orderConfirmation, + widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT); }, orderConfirmationImage() { - return this.getCmsContent('OrderConfirmationContent', 'Image'); - }, - appointmentType() { - return this.submittedOrder.serviceLocation.appointmentType; - }, - appointmentDate() { - return this.submittedOrder.schedule.date; - }, - appointmentStartTime() { - return this.submittedOrder.schedule.startTime; - }, - appointmentEndTime() { - return this.submittedOrder.schedule.endTime; - }, - appointmentDateFormatted() { - // This conversion ensures we don't get get GMT induced date changes - const dateObject = convertDateStringToDate(this.appointmentDate); - // Ex: Tuesday, April 22 - return dateObject.toLocaleDateString('en-us', { - weekday: 'long', - month: 'long', - day: 'numeric' - }); + return this.getCmsContent( + this.widgets.orderConfirmation, + widgetFields.CONTENT_GROUP_WIDGET.IMAGE); }, appointmentTimeFormatted() { - return this.formatAppointmentTime(this.appointmentType); + const { startTime, endTime } = this.schedule; + var appointmentTime = null; + if (this.isDropOffAppointment){ + appointmentTime = 'Drop off before 9:30 AM'; + } + if (this.isInShopAppointment){ + const formattedStartTime = get12HourTimeFormat(startTime); + appointmentTime = `at ${formattedStartTime}` + } + if (this.isMobileAppointment) { + const mobileStartTime = get12HourTimeMobileFormat(startTime); + const mobileEndTime = get12HourTimeMobileFormat(endTime); + appointmentTime = `Between ${mobileStartTime} - ${mobileEndTime}`; + } + return appointmentTime; }, mobileWordingText() { - //return this.getCmsContent('MobileWordingWidget', 'BodyText'); - var content = this.getCmsContent('MobileWordingWidget','BodyText'); - return getStringWithCustomValues(content, this.customValueMap); + return this.getCmsContentWithCustomValues( + this.widgets.mobile, + widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT); }, mobileWordingText2() { - return this.getCmsContent('MobileWordingWidget', 'BodyText2'); + return this.getCmsContent( + this.widgets.mobile, + widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2); }, dropOffAndInShopWordingText() { - // return this.getCmsContent( - // 'DropOffAndInShopWordingWidget', - // 'BodyText' - // ); - var content = this.getCmsContent('DropOffAndInShopWordingWidget','BodyText'); - return getStringWithCustomValues(content, this.customValueMap); + return this.getCmsContentWithCustomValues( + this.widgets.dropOffAndInShop, + widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT); }, dropOffAndInShopWordingText2() { - // var content = this.getCmsContent('DropOffAndInShopWordingWidget','BodyText2'); - // return getStringWithCustomValues(content, this.customValueMap); - //return this.getBodyText2FromCms('DropOffAndInShopWordingWidget'); - return this.getTextFromCmsWithCustomValues('DropOffAndInShopWordingWidget', 'BodyText2'); + return this.getCmsContentWithCustomValues( + this.widgets.dropOffAndInShop, + widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2); }, serviceLocationFullAddress() { - // eslint-disable-next-line max-len - return `${this.serviceLocationAddress}, ${ - this.serviceLocationAddress2 - ? `${this.serviceLocationAddress2},` + // var { address, address2, city, state, zipCode } = this.serviceLocation; + // console.log(JSON.stringify(this.serviceLocation)); + // return `${address}, ${address2 ? `${address2},` : ''}
${city}, ${state} ${zipCode}`; + + return `${this.serviceLocation.address}, ${ + this.serviceLocation.address2 + ? `${this.serviceLocation.address2},` : '' - }
${this.serviceLocationCity}, ${this.serviceLocationState} ${ - this.serviceLocationZipCode + }
${this.serviceLocation.city}, ${this.serviceLocation.state} ${ + this.serviceLocation.zipCode }`; }, providerAddress() { - return toTitleCase(this.submittedOrder.serviceLocation.provider.address - .streetAddress); + return toTitleCase(this.providerAddress?.streetAddress); }, providerCity() { - return toTitleCase(this.submittedOrder.serviceLocation.provider.address.city); - }, - providerState() { - return this.submittedOrder.serviceLocation.provider.address.state; - }, - providerZipCode() { - return this.submittedOrder.serviceLocation.provider.address.zipCode; + return toTitleCase(this.providerAddress?.city); }, providerFullAddress() { - // eslint-disable-next-line max-len - return this.submittedOrder.serviceLocation?.provider?.address - ? `${this.providerAddress},
${this.providerCity}, ${this.providerState} ${this.providerZipCode}` + var { state, zipCode } = this.providerAddress; + return this.providerAddress + ? `${this.providerAddress},
${this.providerCity}, ${state} ${zipCode}` : ''; }, appointmentWordingText() { - const wordingMap = { - [AppointmentTypeStrings.MOBILE]: this.mobileWordingText, - [AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP]: this.mobileWordingText, - [AppointmentTypeStrings.DROP_OFF]: this.dropOffAndInShopWordingText, - [AppointmentTypeStrings.IN_SHOP]: this.dropOffAndInShopWordingText - }; - - return wordingMap[this.appointmentType] || null; + var wording = null; + if (this.isMobileAppointment){ + wording = this.mobileWordingText; + } + if (this.isInShopAppointment || this.isDropOffAppointment){ + wording = this.dropOffAndInShopWordingText; + } + return wording; }, appointmentWordingText2() { - const wordingMap = { - [AppointmentTypeStrings.MOBILE]: this.mobileWordingText2, - [AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP]: this.mobileWordingText2, - [AppointmentTypeStrings.DROP_OFF]: this.dropOffAndInShopWordingText2, - [AppointmentTypeStrings.IN_SHOP]: this.dropOffAndInShopWordingText2 - }; - - return wordingMap[this.appointmentType] || null; + var wording = null; + if (this.isMobileAppointment){ + wording = this.mobileWordingText2; + } + if (this.isInShopAppointment || this.isDropOffAppointment){ + wording = this.dropOffAndInShopWordingText2; + } + return wording; }, - mobileAppointment() { - return ( - this.submittedOrder.serviceLocation.appointmentType - === AppointmentTypeStrings.MOBILE - || this.submittedOrder.serviceLocation.appointmentType - === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP - ); + isMobileAppointment() { + const mobileAppointmentTypes = [ + AppointmentTypeStrings.MOBILE, + AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP + ] + return mobileAppointmentTypes.includes(this.appointmentType); }, - inShopAppointment() { - return ( - this.submittedOrder.serviceLocation.appointmentType - === AppointmentTypeStrings.IN_SHOP - ); + isInShopAppointment() { + return this.appointmentType === AppointmentTypeStrings.IN_SHOP; }, - dropOffAppointment() { - return ( - this.submittedOrder.serviceLocation.appointmentType - === AppointmentTypeStrings.DROP_OFF - ); + isDropOffAppointment() { + return this.appointmentType === AppointmentTypeStrings.DROP_OFF; }, inShopAppointmentDuration() { - const inshopDurationTime = getDisplayTextForDurationLength( - this.submittedOrder.schedule.jobMinMinutes, - this.submittedOrder.schedule.jobMaxMinutes + return getDisplayTextForDurationLength( + this.schedule.jobMinMinutes, + this.schedule.jobMaxMinutes ); - return inshopDurationTime; - }, - isPayInAdvance() { - return this.submittedOrder.payment.isPayInAdvance; - }, - selectedVaps() { - return this.submittedOrder.lineItems.vaps; } }, mounted() { @@ -392,58 +382,24 @@ export default { forwardButtonAction() { this.$router.navigateToExternalUrl(this.carrierUrl); }, - formatAppointmentTime(appointmentType) { - switch (appointmentType) { - case AppointmentTypeStrings.MOBILE: - case AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP: - // eslint-disable-next-line max-len - return `Between ${get12HourTimeMobileFormat(this.appointmentStartTime)} - ${get12HourTimeMobileFormat(this.appointmentEndTime)}`; - case AppointmentTypeStrings.DROP_OFF: - return 'Drop off before 9:30 AM'; - case AppointmentTypeStrings.IN_SHOP: - return `at ${get12HourTimeFormat(this.appointmentStartTime)}`; - default: - return null; - } - }, - processIfStatements, - getTextFromCmsWithCustomValues(widgetName, widgetField) { + getCmsContentWithCustomValues(widgetName, widgetField) { const rawText = this.getCmsContent(widgetName, widgetField); - return processIfStatements( + const processedIfStatements = processIfStatements( rawText, 'custom', - //this.getCustomValueFromString - (v) => { - console.log(v); - return this.customValueMap[v]; - } - ); + (v) => { return this.customValueMap[v] } + ) + return getStringWithCustomValues(processedIfStatements, this.customValueMap); }, - getCustomValueFromString(str) { - switch (str) { - case 'inShopAppointment': - return this.inShopAppointment; - case 'dropOffAppointment': - return this.dropOffAppointment; - case 'vehicleMake': - return 'Test Make'; //this.submittedOrder.vehicle.make; - case 'vehicleModel': - return 'Test model';//this.submittedOrder.vehicle.model; - case 'vehicleYear': - return '1000';//this.submittedOrder.vehicle.year; - case 'email': - return 'test@email.com';//this.submittedOrder.customer.emailAddress; - case 'address': - return 'a'; - case 'inShopDuration': - return this.inShopAppointmentDuration; - case 'CUSTOMER_PORTAL_URL': - return applicationConfig.CUSTOMER_PORTAL_URL; - case 'CUSTOMER_PORTAL_LOGIN_TOKEN': - return this.submittedOrder.customerPortalLoginToken; - default: - return null; - } + formatDate(date) { + // This conversion ensures we don't get get GMT induced date changes + const dateObject = convertDateStringToDate(date); + // Ex: Tuesday, April 22 + return dateObject.toLocaleDateString('en-us', { + weekday: 'long', + month: 'long', + day: 'numeric' + }); } } }; From 23de2db48e7fa333424895fb72812af33c02046b Mon Sep 17 00:00:00 2001 From: Michaela Brydon Date: Mon, 12 Aug 2024 15:00:19 -0400 Subject: [PATCH 07/13] Almost clean --- .../order-confirmation/order-confirmation.vue | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index 464d0b24..2374e995 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -154,7 +154,7 @@ export default { var { issConfig } = this.mainStore; return { vehicle, - customerEmail: customer.email, + customerEmail: customer.emailAddress, payment, schedule, serviceLocation, @@ -179,7 +179,7 @@ export default { vehicleYear: this.vehicle.year, vehicleMake: this.vehicle.make, vehicleModel: this.vehicle.model, - address: this.serviceLocationFullAddress, + address: this.appointmentAddress, inShopDuration: this.inShopAppointmentDuration, email: this.customerEmail, CUSTOMER_PORTAL_URL: applicationConfig.CUSTOMER_PORTAL_URL, @@ -254,16 +254,25 @@ export default { this.serviceLocation.zipCode }`; }, - providerAddress() { + titleCaseProviderAddress() { return toTitleCase(this.providerAddress?.streetAddress); }, - providerCity() { + titleCaseProviderCity() { return toTitleCase(this.providerAddress?.city); }, + appointmentAddress() { + if (this.isMobileAppointment){ + return this.serviceLocationFullAddress; + } + if (this.isDropOffAppointment || this.isInShopAppointment){ + return this.providerFullAddress; + } + return null + }, providerFullAddress() { var { state, zipCode } = this.providerAddress; - return this.providerAddress - ? `${this.providerAddress},
${this.providerCity}, ${state} ${zipCode}` + return this.titleCaseProviderAddress + ? `${this.titleCaseProviderAddress},
${this.titleCaseProviderCity}, ${state} ${zipCode}` : ''; }, appointmentWordingText() { From 93ed73da317360e8a04bc33bcf5edd86c9931777 Mon Sep 17 00:00:00 2001 From: Michaela Brydon Date: Thu, 15 Aug 2024 10:43:06 -0400 Subject: [PATCH 08/13] In progress --- .../order-confirmation.spec.js | 1000 ++++++++++------- .../order-confirmation/order-confirmation.vue | 111 +- 2 files changed, 640 insertions(+), 471 deletions(-) diff --git a/src/layouts/order-confirmation/order-confirmation.spec.js b/src/layouts/order-confirmation/order-confirmation.spec.js index 80cead3a..acf25001 100644 --- a/src/layouts/order-confirmation/order-confirmation.spec.js +++ b/src/layouts/order-confirmation/order-confirmation.spec.js @@ -5,19 +5,22 @@ import orderConfirmation from '@/layouts/order-confirmation/order-confirmation.v import { getMountOptions } from '@/helpers/unit-test-helper.js'; import { useMainStore } from '@/store/index.js'; import settleAllPromises from '@/helpers/layout-helper.js'; -import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; +import { fetchCmsContentForPage, getStringWithCustomValues } from '@/helpers/cms-content-helper'; import { mount } from '@vue/test-utils'; import { createTestingPinia } from '@pinia/testing'; import { nextTick } from 'vue'; import coverageStatuses from '@/constants/coverage-statuses'; import coverageType from '@/constants/coverage-type'; +import { deepClone } from '@/helpers/object-helper'; +import { AppointmentTypeStrings } from '@/constants/schedule-constants'; jest.mock('@/helpers/layout-helper.js', () => jest.fn()); jest.mock('@/helpers/cms-content-helper', () => ({ fetchCmsContentForPage: jest.fn(), processIfStatements: jest.fn(), - splitCopyOnCMSPlaceHolder: jest.fn() + splitCopyOnCMSPlaceHolder: jest.fn(), + getStringWithCustomValues: jest.fn() })); const wordingText = 'wording text {custom:address}'; @@ -124,7 +127,14 @@ const sessionStorage = { vaps: [] }, policy: {}, - damage: {} + damage: {}, + vehicle: { + year: 2000, + make: 'Honda', + model: 'Civic' + }, + customer: {}, + customerPortalLoginToken: 'token' }; const sessionStorageMock = (() => { @@ -199,10 +209,13 @@ describe('OrderConfirmation.vue', () => { window.sessionStorage.removeItem('submittedOrder'); }); describe('Page pre-requisites', () => { - test('If submitted order saved to store, page pre-reqs return true', async () => { + // TODO fix + test.skip('If submitted order saved to store, page pre-reqs return true', async () => { // Arrange - window.sessionStorage.setItem('submittedOrder', JSON.stringify(sessionStorage)); - const { wrapper } = getMountedComponent(initialStore); + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => sessionStorage); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); // Act const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); @@ -301,422 +314,593 @@ describe('OrderConfirmation.vue', () => { }); }); describe('Computed properties', () => { - test('appointmentDateFormatted should return date in expected format', () => { - // Arrange - window.sessionStorage.setItem('submittedOrder', JSON.stringify(sessionStorage)); - const { wrapper } = getMountedComponent(initialStore); + describe.skip('customValueMap', () =>{ + test.each([ + 'inShopAppointment', + 'dropOffAppointment', + 'vehicleYear', + 'vehicleMake', + 'vehicleModel', + 'address', + 'inShopDuration', + 'email', + 'CUSTOMER_PORTAL_URL', + 'CUSTOMER_PORTAL_LOGIN_TOKEN' + ])('contains key %p', (key) => { + // Arrange + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => sessionStorage); + }; + const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions); - // Act - const testValue = wrapper.vm.appointmentDateFormatted; + // Act + const keyExists = key in wrapper.vm.customValueMap; - // Assert - expect(testValue).toEqual('Friday, March 1'); + // Assert + expect(keyExists).toBeTruthy(); + }); + test('returns expected vehicle info', () => { + // Arrange + var order = deepClone(sessionStorage); + const year = 1998; + const make = 'Toyota'; + const model = 'Cruse'; + order.vehicle = { + year, make, model + }; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions); + + // Act + const actualYear = wrapper.vm.customValueMap['vehicleYear']; + const actualMake = wrapper.vm.customValueMap['vehicleMake']; + const actualModel = wrapper.vm.customValueMap['vehicleModel']; + + // Assert + expect(actualYear).toBe(year); + expect(actualMake).toBe(make); + expect(actualModel).toBe(model); + }); + test('returns expected customer email', () => { + // Arrange + var order = deepClone(sessionStorage); + const emailAddress = 'email@google.com'; + order.customer.emailAddress = emailAddress; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions); + + // Act + const actualEmail = wrapper.vm.customValueMap['email']; + + // Assert + expect(actualEmail).toBe(emailAddress); + }); + }) + describe.only('confirmationEmailText', () => { + const greaterId = ">"; + const lessId = "<"; + test.each([ + ['test', 'test'], + // [`te${greaterId}st`, 'te>st'], + // [`${greaterId}test${greaterId}`, '>test>'], + // [`te${greaterId}st ${greaterId}`, 'te>st >'], + // [`${lessId} test`, '< test'], + // [`t${lessId}e${lessId}st`, 'tt<'] + ])('given %p returned from cms, returns %p', (rawCms, expected) => { + // Arrange + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => sessionStorage); + }; + const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions); + + // TODO mock return of cms + getStringWithCustomValues.mockImplementationOnce(() => "test 1"); + + // Act + const text = wrapper.vm.confirmationEmailText; + + // Assert + expect(text).toBe(expected); + }); + test('replaces all ">" with >', () => {}); }); - test('appointmentTimeFormatted should return Mobile time in expected format', () => { - // Arrange - const testSessionStorage = { - schedule: { - date: '2019-01-01', - startTime: '09:00', - endTime: '10:00' - }, - serviceLocation: { - appointmentType: 'Mobile' - }, - insuranceCoverage: { - coverageStatus: coverageStatuses.VERIFIED, - coverageType: coverageType.Deductible - }, - payment: { - isPayInAdvance: false - }, - lineItems: { - vaps: [] - }, - policy: {}, - damage: {} - }; - window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); - const { wrapper } = getMountedComponent(); + describe.skip('appointmentTimeText', () => { + test.each([ + ['Between 9 AM - 10 AM', '09:00', '10:00'], + ['Between 1 PM - 5 PM', '13:00', '17:00'], + ['Between 8:30 AM - 3 PM', '08:30', '15:00'], + ['Between 1 AM - 2 AM', '01:00', '02:00'], + ['Between 12 AM - 2 AM', '00:00', '02:00'], + ['Between 12 PM - 2 AM', '12:00', '02:00'], + ['Between 11 PM - 12 AM', '23:00', '00:00'] + ])('should return Mobile time in expected format "%p" when start time "%p" and end time "%p"', (expected, startTime, endTime) => { + // Arrange + var order = deepClone(sessionStorage); + order.schedule.startTime = startTime; + order.schedule.endTime = endTime; + order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); - // Act - const testValue = wrapper.vm.appointmentTimeFormatted; + // Act + const testValue = wrapper.vm.appointmentTimeText; - // Assert - expect(testValue).toEqual('Between 9 AM - 10 AM'); + // Assert + expect(testValue).toEqual(expected); + }); + test.each([ + ['09:00', '10:00'], + ['13:00', '17:00'], + ['08:30', '15:00'], + ['01:00', '02:00'] + ])('should return Drop off time in same format regardless of start/end time', (startTime, endTime) => { + // Arrange + var order = deepClone(sessionStorage); + order.schedule.startTime = startTime; + order.schedule.endTime = endTime; + order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + + // Act + const testValue = wrapper.vm.appointmentTimeText; + + // Assert + expect(testValue).toEqual('Drop off before 9:30 AM'); + }); + test.each([ + ['at 9:00 AM', '09:00', '10:00'], + ['at 1:00 PM', '13:00', '17:00'], + ['at 8:30 AM', '08:30', '15:00'], + ['at 1:00 AM', '01:00', '02:00'], + ['at 12:00 AM', '00:00', '02:00'], + ['at 12:00 PM', '12:00', '02:00'] + ])('should return In Shop time in expected format "%p" when start time "%p"', (expected, startTime, endTime) => { + // Arrange + var order = deepClone(sessionStorage); + order.schedule.startTime = startTime; + order.schedule.endTime = endTime; + order.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + + // Act + const testValue = wrapper.vm.appointmentTimeText; + + // Assert + expect(testValue).toEqual(expected); + }); }); - test('appointmentTimeFormatted should return Drop Off time in expected format', () => { - // Arrange - const testSessionStorage = { - schedule: { - date: '2019-01-01', - startTime: '09:00', - endTime: '10:00' - }, - serviceLocation: { - appointmentType: 'Dropoff', - provider: { - address: { - streetAddress: '123 Safelite Street', - city: 'Mesa', - state: 'AZ', - zipCode: '12345' - } - } - }, - insuranceCoverage: { - coverageStatus: coverageStatuses.VERIFIED, - coverageType: coverageType.Deductible - }, - payment: { - isPayInAdvance: false - }, - lineItems: { - vaps: [] - }, - policy: {}, - damage: {} - }; - window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); - const { wrapper } = getMountedComponent(); - - // Act - const testValue = wrapper.vm.appointmentTimeFormatted; - - // Assert - expect(testValue).toEqual('Drop off before 9:30 AM'); + describe('appointmentLocation', () => { + test('mobile location returns service location', () => {}); + test('in shop appointment location returns shop location', () => {}); + test('drop off appointment location returns shop location', () => {}); + test('unknown appointment type returns null', () => {}); }); - test('appointmentTimeFormatted should return In Shop time in expected format', () => { - // Arrange - window.sessionStorage.setItem('submittedOrder', JSON.stringify(sessionStorage)); - const { wrapper } = getMountedComponent(initialStore); - - // Act - const testValue = wrapper.vm.appointmentTimeFormatted; - - // Assert - expect(testValue).toEqual('at 9:00 AM'); - }); - test('appointmentWordingText should return Mobile text in expected format', () => { - // Arrange - const testSessionStorage = { - schedule: { - date: '2019-01-01', - startTime: '09:00', - endTime: '10:00' - }, - serviceLocation: { - address: '123 Test Way', - address2: '#1', - city: 'Mesa', - state: 'AZ', - zipCode: '12345', - appointmentType: 'Mobile' - }, - insuranceCoverage: { - coverageStatus: coverageStatuses.VERIFIED, - coverageType: coverageType.Deductible - }, - payment: { - isPayInAdvance: false - }, - lineItems: { - vaps: [] - }, - policy: {}, - damage: {} - }; - window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); - const { wrapper } = getMountedComponent(); - - // Act - const testValue = wrapper.vm.appointmentWordingText; - - // Assert - expect(testValue).toEqual('wording text 123 Test Way, #1,
Mesa, AZ 12345'); - }); - test('appointmentWordingText should return Drop Off text in expected format', () => { - // Arrange - const testSessionStorage = { - schedule: { - date: '2019-01-01', - startTime: '09:00', - endTime: '10:00' - }, - serviceLocation: { - provider: { - address: { - streetAddress: '123 Safelite Street', - city: 'Mesa', - state: 'AZ', - zipCode: '12345' - } + describe('serviceLocationFullAddress', () => { + // TODO + test('serviceLocationFullAddress should return text in expected format', () => { + // Arrange + const testSessionStorage = { + schedule: { + date: '2019-01-01', + startTime: '09:00', + endTime: '10:00' }, - appointmentType: 'Dropoff' - }, - insuranceCoverage: { - coverageStatus: coverageStatuses.VERIFIED, - coverageType: coverageType.Deductible - }, - payment: { - isPayInAdvance: false - }, - lineItems: { - vaps: [] - }, - policy: {}, - damage: {} - }; - window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); - const { wrapper } = getMountedComponent(); - - // Act - const testValue = wrapper.vm.appointmentWordingText; - - // Assert - expect(testValue).toEqual('wording text 123 Safelite Street,
Mesa, AZ 12345'); - }); - test('appointmentWordingText should return In Shop text in expected format', () => { - // Arrange - const testSessionStorage = { - schedule: { - date: '2019-01-01', - startTime: '09:00', - endTime: '10:00' - }, - serviceLocation: { - provider: { - address: { - streetAddress: '123 Safelite Street', - city: 'Mesa', - state: 'AZ', - zipCode: '12345' - } + serviceLocation: { + address: '123 Test Way', + address2: '#1', + city: 'Mesa', + state: 'AZ', + zipCode: '12345', + appointmentType: 'Mobile' }, - appointmentType: 'Inshop' - }, - insuranceCoverage: { - coverageStatus: coverageStatuses.VERIFIED, - coverageType: coverageType.Deductible - }, - payment: { - isPayInAdvance: false - }, - lineItems: { - vaps: [] - }, - policy: {}, - damage: {} - }; - window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); - const { wrapper } = getMountedComponent(); - - // Act - const testValue = wrapper.vm.appointmentWordingText; - - // Assert - expect(testValue).toEqual('wording text 123 Safelite Street,
Mesa, AZ 12345'); - }); - test('serviceLocationFullAddress should return text in expected format', () => { - // Arrange - const testSessionStorage = { - schedule: { - date: '2019-01-01', - startTime: '09:00', - endTime: '10:00' - }, - serviceLocation: { - address: '123 Test Way', - address2: '#1', - city: 'Mesa', - state: 'AZ', - zipCode: '12345', - appointmentType: 'Mobile' - }, - insuranceCoverage: { - coverageStatus: coverageStatuses.VERIFIED, - coverageType: coverageType.Deductible - }, - payment: { - isPayInAdvance: false - }, - lineItems: { - vaps: [] - }, - policy: {}, - damage: {} - }; - window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); - const { wrapper } = getMountedComponent(); - - // Act - const testValue = wrapper.vm.serviceLocationFullAddress; - - // Assert - expect(testValue).toEqual('123 Test Way, #1,
Mesa, AZ 12345'); - }); - test('providerFullAddress should return text in expected format', () => { - // Arrange - const testSessionStorage = { - schedule: { - date: '2019-01-01', - startTime: '09:00', - endTime: '10:00' - }, - serviceLocation: { - provider: { - address: { - streetAddress: '123 Safelite Street', - city: 'Mesa', - state: 'AZ', - zipCode: '12345' - } + insuranceCoverage: { + coverageStatus: coverageStatuses.VERIFIED, + coverageType: coverageType.Deductible }, - appointmentType: 'Inshop' - }, - insuranceCoverage: { - coverageStatus: coverageStatuses.VERIFIED, - coverageType: coverageType.Deductible - }, - payment: { - isPayInAdvance: false - }, - lineItems: { - vaps: [] - }, - policy: {}, - damage: {} - }; - window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); - const { wrapper } = getMountedComponent(); - - // Act - const testValue = wrapper.vm.providerFullAddress; - - // Assert - expect(testValue).toEqual('123 Safelite Street,
Mesa, AZ 12345'); - }); - test('appointmentWordingText2 should return Mobile text in expected format', () => { - // Arrange - const testSessionStorage = { - schedule: { - date: '2019-01-01', - startTime: '09:00', - endTime: '10:00' - }, - serviceLocation: { - address: '123 Test Way', - address2: '#1', - city: 'Mesa', - state: 'AZ', - zipCode: '12345', - appointmentType: 'Mobile' - }, - insuranceCoverage: { - coverageStatus: coverageStatuses.VERIFIED, - coverageType: coverageType.Deductible - }, - payment: { - isPayInAdvance: false - }, - lineItems: { - vaps: [] - }, - policy: {}, - damage: {} - }; - window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); - const { wrapper } = getMountedComponent(); - - // Act - const testValue = wrapper.vm.appointmentWordingText2; - - // Assert - expect(testValue).toEqual(wordingText); - }); - test('appointmentWordingText2 should return Drop Off and text in expected format', () => { - // Arrange - const testSessionStorage = { - schedule: { - date: '2019-01-01', - startTime: '09:00', - endTime: '10:00' - }, - serviceLocation: { - provider: { - address: { - streetAddress: '123 Safelite Street', - city: 'Mesa', - state: 'AZ', - zipCode: '12345' - } + payment: { + isPayInAdvance: false }, - appointmentType: 'Dropoff' - }, - insuranceCoverage: { - coverageStatus: coverageStatuses.VERIFIED, - coverageType: coverageType.Deductible - }, - payment: { - isPayInAdvance: false - }, - lineItems: { - vaps: [] - }, - policy: {}, - damage: {} - }; - window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); - const { wrapper } = getMountedComponent(); - - // Act - const testValue = wrapper.vm.appointmentWordingText2; - const expected = wrapper.vm.getBodyText2FromCms('Test Widget'); - - // Assert - expect(testValue).toEqual(expected); - }); - test('appointmentWordingText2 should return In Shop text in expected format', () => { - // Arrange - const testSessionStorage = { - schedule: { - date: '2019-01-01', - startTime: '09:00', - endTime: '10:00' - }, - serviceLocation: { - provider: { - address: { - streetAddress: '123 Safelite Street', - city: 'Mesa', - state: 'AZ', - zipCode: '12345' - } + lineItems: { + vaps: [] }, - appointmentType: 'Inshop' - }, - insuranceCoverage: { - coverageStatus: coverageStatuses.VERIFIED, - coverageType: coverageType.Deductible - }, - payment: { - isPayInAdvance: false - }, - lineItems: { - vaps: [] - }, - policy: {}, - damage: {} - }; - window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); - const { wrapper } = getMountedComponent(); + policy: {}, + damage: {} + }; + window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); + const { wrapper } = getMountedComponent(); - // Act - const testValue = wrapper.vm.appointmentWordingText2; - const expected = wrapper.vm.getBodyText2FromCms('Test Widget'); + // Act + const testValue = wrapper.vm.serviceLocationFullAddress; - // Assert - expect(testValue).toEqual(expected); + // Assert + expect(testValue).toEqual('123 Test Way, #1,
Mesa, AZ 12345'); + }); + }); + describe('providerFullAddress', () => { + // TODO + test('providerFullAddress should return text in expected format', () => { + // Arrange + const testSessionStorage = { + schedule: { + date: '2019-01-01', + startTime: '09:00', + endTime: '10:00' + }, + serviceLocation: { + provider: { + address: { + streetAddress: '123 Safelite Street', + city: 'Mesa', + state: 'AZ', + zipCode: '12345' + } + }, + appointmentType: 'Inshop' + }, + insuranceCoverage: { + coverageStatus: coverageStatuses.VERIFIED, + coverageType: coverageType.Deductible + }, + payment: { + isPayInAdvance: false + }, + lineItems: { + vaps: [] + }, + policy: {}, + damage: {} + }; + window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); + const { wrapper } = getMountedComponent(); + + // Act + const testValue = wrapper.vm.providerFullAddress; + + // Assert + expect(testValue).toEqual('123 Safelite Street,
Mesa, AZ 12345'); + }); + }); + describe('appointmentWordingText', () => { + test('mobile location returns mobile wording', () => {}); + test('in shop appointment location returns non mobile wording', () => {}); + test('drop off appointment location returns non mobile wording', () => {}); + test('unknown appointment type returns null', () => {}); + }); + describe('appointmentWordingText2', () => { + test('mobile location returns mobile wording 2', () => {}); + test('in shop appointment location returns non mobile wording 2', () => {}); + test('drop off appointment location returns non mobile wording 2', () => {}); + test('unknown appointment type returns null', () => {}); + }); + describe('isMobileAppointment', () => { + test.each([ + AppointmentTypeStrings.MOBILE, + AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP + ])('mobile appointment type %p returns true', (type) => { + + }); + test.each([ + AppointmentTypeStrings.IN_SHOP, + AppointmentTypeStrings.DROP_OFF, + 'invalid type', + null, + undefined + ])('non mobile appointment type %p returns false', (type) => { + + }); + }); + describe('isInShopAppointment', () => { + test('in shop appointment type returns true', () => { + + }); + test.each([ + AppointmentTypeStrings.MOBILE, + AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP, + AppointmentTypeStrings.DROP_OFF, + 'invalid type', + null, + undefined + ])('non in shop appointment type %p returns false', (type) => { + + }); + }); + describe('isDropOffAppointment', () => { + test('drop off appointment type returns true', () => { + + }); + test.each([ + AppointmentTypeStrings.MOBILE, + AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP, + AppointmentTypeStrings.IN_SHOP, + 'invalid type', + null, + undefined + ])('non drop off appointment type %p returns false', (type) => { + + }); + }); + describe('uncategorized', () => { + // TODO make format date test + test('appointmentDateFormatted should return date in expected format', () => { + // Arrange + window.sessionStorage.setItem('submittedOrder', JSON.stringify(sessionStorage)); + const { wrapper } = getMountedComponent(initialStore); + + // Act + const testValue = wrapper.vm.appointmentDateFormatted; + + // Assert + expect(testValue).toEqual('Friday, March 1'); + }); + + test('appointmentWordingText should return Mobile text in expected format', () => { + // Arrange + const testSessionStorage = { + schedule: { + date: '2019-01-01', + startTime: '09:00', + endTime: '10:00' + }, + serviceLocation: { + address: '123 Test Way', + address2: '#1', + city: 'Mesa', + state: 'AZ', + zipCode: '12345', + appointmentType: 'Mobile' + }, + insuranceCoverage: { + coverageStatus: coverageStatuses.VERIFIED, + coverageType: coverageType.Deductible + }, + payment: { + isPayInAdvance: false + }, + lineItems: { + vaps: [] + }, + policy: {}, + damage: {} + }; + window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); + const { wrapper } = getMountedComponent(); + + // Act + const testValue = wrapper.vm.appointmentWordingText; + + // Assert + expect(testValue).toEqual('wording text 123 Test Way, #1,
Mesa, AZ 12345'); + }); + test('appointmentWordingText should return Drop Off text in expected format', () => { + // Arrange + const testSessionStorage = { + schedule: { + date: '2019-01-01', + startTime: '09:00', + endTime: '10:00' + }, + serviceLocation: { + provider: { + address: { + streetAddress: '123 Safelite Street', + city: 'Mesa', + state: 'AZ', + zipCode: '12345' + } + }, + appointmentType: 'Dropoff' + }, + insuranceCoverage: { + coverageStatus: coverageStatuses.VERIFIED, + coverageType: coverageType.Deductible + }, + payment: { + isPayInAdvance: false + }, + lineItems: { + vaps: [] + }, + policy: {}, + damage: {} + }; + window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); + const { wrapper } = getMountedComponent(); + + // Act + const testValue = wrapper.vm.appointmentWordingText; + + // Assert + expect(testValue).toEqual('wording text 123 Safelite Street,
Mesa, AZ 12345'); + }); + test('appointmentWordingText should return In Shop text in expected format', () => { + // Arrange + const testSessionStorage = { + schedule: { + date: '2019-01-01', + startTime: '09:00', + endTime: '10:00' + }, + serviceLocation: { + provider: { + address: { + streetAddress: '123 Safelite Street', + city: 'Mesa', + state: 'AZ', + zipCode: '12345' + } + }, + appointmentType: 'Inshop' + }, + insuranceCoverage: { + coverageStatus: coverageStatuses.VERIFIED, + coverageType: coverageType.Deductible + }, + payment: { + isPayInAdvance: false + }, + lineItems: { + vaps: [] + }, + policy: {}, + damage: {} + }; + window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); + const { wrapper } = getMountedComponent(); + + // Act + const testValue = wrapper.vm.appointmentWordingText; + + // Assert + expect(testValue).toEqual('wording text 123 Safelite Street,
Mesa, AZ 12345'); + }); + + test('appointmentWordingText2 should return Mobile text in expected format', () => { + // Arrange + const testSessionStorage = { + schedule: { + date: '2019-01-01', + startTime: '09:00', + endTime: '10:00' + }, + serviceLocation: { + address: '123 Test Way', + address2: '#1', + city: 'Mesa', + state: 'AZ', + zipCode: '12345', + appointmentType: 'Mobile' + }, + insuranceCoverage: { + coverageStatus: coverageStatuses.VERIFIED, + coverageType: coverageType.Deductible + }, + payment: { + isPayInAdvance: false + }, + lineItems: { + vaps: [] + }, + policy: {}, + damage: {} + }; + window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); + const { wrapper } = getMountedComponent(); + + // Act + const testValue = wrapper.vm.appointmentWordingText2; + + // Assert + expect(testValue).toEqual(wordingText); + }); + test('appointmentWordingText2 should return Drop Off and text in expected format', () => { + // Arrange + const testSessionStorage = { + schedule: { + date: '2019-01-01', + startTime: '09:00', + endTime: '10:00' + }, + serviceLocation: { + provider: { + address: { + streetAddress: '123 Safelite Street', + city: 'Mesa', + state: 'AZ', + zipCode: '12345' + } + }, + appointmentType: 'Dropoff' + }, + insuranceCoverage: { + coverageStatus: coverageStatuses.VERIFIED, + coverageType: coverageType.Deductible + }, + payment: { + isPayInAdvance: false + }, + lineItems: { + vaps: [] + }, + policy: {}, + damage: {} + }; + window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); + const { wrapper } = getMountedComponent(); + + // Act + const testValue = wrapper.vm.appointmentWordingText2; + const expected = wrapper.vm.getBodyText2FromCms('Test Widget'); + + // Assert + expect(testValue).toEqual(expected); + }); + test('appointmentWordingText2 should return In Shop text in expected format', () => { + // Arrange + const testSessionStorage = { + schedule: { + date: '2019-01-01', + startTime: '09:00', + endTime: '10:00' + }, + serviceLocation: { + provider: { + address: { + streetAddress: '123 Safelite Street', + city: 'Mesa', + state: 'AZ', + zipCode: '12345' + } + }, + appointmentType: 'Inshop' + }, + insuranceCoverage: { + coverageStatus: coverageStatuses.VERIFIED, + coverageType: coverageType.Deductible + }, + payment: { + isPayInAdvance: false + }, + lineItems: { + vaps: [] + }, + policy: {}, + damage: {} + }; + window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); + const { wrapper } = getMountedComponent(); + + // Act + const testValue = wrapper.vm.appointmentWordingText2; + const expected = wrapper.vm.getBodyText2FromCms('Test Widget'); + + // Assert + expect(testValue).toEqual(expected); + }); }); }); + describe('Methods', () => { + describe('formatDate', () => { + // TODO test cases confirm day of week + test.each([ + ['', '2020-04-22'], // Monday, April 22 + ['', '2018-02-01'], // Tuesday, February 1 + ['', '2026-12-30'] // Wednesday, December 30 + ])('returns "%p" given "%p"', (expected, date) => { + + }); + }); + }) }); diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index 2374e995..bdd1d5ea 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -7,7 +7,7 @@
- +
@@ -21,13 +21,13 @@

{{ formatDate(schedule.date) }}

-

{{ appointmentTimeFormatted }}

+

{{ appointmentTimeText }}

${city}, ${state} ${zipCode}`; - - return `${this.serviceLocation.address}, ${ - this.serviceLocation.address2 - ? `${this.serviceLocation.address2},` - : '' - }
${this.serviceLocation.city}, ${this.serviceLocation.state} ${ - this.serviceLocation.zipCode - }`; + appointmentTimeText() { + const { startTime, endTime } = this.schedule; + if (this.isDropOffAppointment){ + return 'Drop off before 9:30 AM'; + } + if (this.isInShopAppointment){ + const formattedStartTime = get12HourTimeFormat(startTime); + return `at ${formattedStartTime}` + } + if (this.isMobileAppointment) { + const mobileStartTime = get12HourTimeMobileFormat(startTime); + const mobileEndTime = get12HourTimeMobileFormat(endTime); + return `Between ${mobileStartTime} - ${mobileEndTime}`; + } + return null; }, - titleCaseProviderAddress() { - return toTitleCase(this.providerAddress?.streetAddress); - }, - titleCaseProviderCity() { - return toTitleCase(this.providerAddress?.city); - }, - appointmentAddress() { + appointmentLocation() { if (this.isMobileAppointment){ return this.serviceLocationFullAddress; } @@ -269,31 +250,33 @@ export default { } return null }, + serviceLocationFullAddress() { + var { address, address2, city, state, zipCode } = this.serviceLocation; + return `${address}, ${address2 ? `${address2},` : ''}
${city}, ${state} ${zipCode}`; + }, providerFullAddress() { - var { state, zipCode } = this.providerAddress; - return this.titleCaseProviderAddress - ? `${this.titleCaseProviderAddress},
${this.titleCaseProviderCity}, ${state} ${zipCode}` + var { streetAddress, city, state, zipCode } = this.providerAddress; + return streetAddress + ? `${toTitleCase(streetAddress)},
${toTitleCase(city)}, ${state} ${zipCode}` : ''; }, appointmentWordingText() { - var wording = null; if (this.isMobileAppointment){ - wording = this.mobileWordingText; + return this.mobileWordingText; } if (this.isInShopAppointment || this.isDropOffAppointment){ - wording = this.dropOffAndInShopWordingText; + return this.nonMobileWordingText; } - return wording; + return null; }, appointmentWordingText2() { - var wording = null; if (this.isMobileAppointment){ - wording = this.mobileWordingText2; + return this.mobileWordingText2; } if (this.isInShopAppointment || this.isDropOffAppointment){ - wording = this.dropOffAndInShopWordingText2; + return this.nonMobileWordingText2; } - return wording; + return null; }, isMobileAppointment() { const mobileAppointmentTypes = [ @@ -398,7 +381,9 @@ export default { 'custom', (v) => { return this.customValueMap[v] } ) - return getStringWithCustomValues(processedIfStatements, this.customValueMap); + const x = getStringWithCustomValues(processedIfStatements, this.customValueMap); + console.log(JSON.stringify(x)); + return x; }, formatDate(date) { // This conversion ensures we don't get get GMT induced date changes From ba988473a1f208e381ec8366631e0e7a7748582b Mon Sep 17 00:00:00 2001 From: Michaela Brydon Date: Thu, 15 Aug 2024 14:51:39 -0400 Subject: [PATCH 09/13] Almost done updating tests --- .../order-confirmation.spec.js | 941 +++++++++--------- .../order-confirmation/order-confirmation.vue | 8 +- 2 files changed, 489 insertions(+), 460 deletions(-) diff --git a/src/layouts/order-confirmation/order-confirmation.spec.js b/src/layouts/order-confirmation/order-confirmation.spec.js index acf25001..504beb2d 100644 --- a/src/layouts/order-confirmation/order-confirmation.spec.js +++ b/src/layouts/order-confirmation/order-confirmation.spec.js @@ -5,7 +5,7 @@ import orderConfirmation from '@/layouts/order-confirmation/order-confirmation.v import { getMountOptions } from '@/helpers/unit-test-helper.js'; import { useMainStore } from '@/store/index.js'; import settleAllPromises from '@/helpers/layout-helper.js'; -import { fetchCmsContentForPage, getStringWithCustomValues } from '@/helpers/cms-content-helper'; +import { fetchCmsContentForPage, getStringWithCustomValues, processIfStatements } from '@/helpers/cms-content-helper'; import { mount } from '@vue/test-utils'; import { createTestingPinia } from '@pinia/testing'; import { nextTick } from 'vue'; @@ -22,11 +22,10 @@ jest.mock('@/helpers/cms-content-helper', () => ({ splitCopyOnCMSPlaceHolder: jest.fn(), getStringWithCustomValues: jest.fn() })); -const wordingText = 'wording text {custom:address}'; const mockMixin = { methods: { - getCmsContent: jest.fn().mockImplementation(() => wordingText), + getCmsContent: jest.fn(),//.mockImplementation(() => wordingText), setCmsContent: jest.fn() } }; @@ -137,30 +136,7 @@ const sessionStorage = { customerPortalLoginToken: 'token' }; -const sessionStorageMock = (() => { - let sessionStore = {}; - - return { - getItem(key) { - return sessionStore[key] || null; - }, - setItem(key, value) { - sessionStore[key] = value.toString(); - }, - removeItem(key) { - delete sessionStore[key]; - }, - clear() { - sessionStore = {}; - } - }; -})(); - -Object.defineProperty(window, 'sessionStorage', { - value: sessionStorageMock -}); - -function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRun = () => {}) { +function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRun = () => {}, mixin = mockMixin) { const mountOptions = getMountOptions({ router: { navigate: jest.fn(), @@ -185,7 +161,7 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu mountOptions.global.mixins[0].methods.getSettingValue = jest.fn(() => 'false'); mountOptions.global.plugins = [testingPinia]; - mountOptions.mixins = [mockMixin]; + mountOptions.mixins = [mixin]; mountOptions.data = () => ( initialData ); @@ -202,20 +178,13 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu } describe('OrderConfirmation.vue', () => { - beforeEach(() => { - window.sessionStorage.clear(); - }); - afterEach(() => { - window.sessionStorage.removeItem('submittedOrder'); - }); describe('Page pre-requisites', () => { - // TODO fix - test.skip('If submitted order saved to store, page pre-reqs return true', async () => { + test('If submitted order saved to store, page pre-reqs return true', async () => { // Arrange const mockStoreActions = () => { useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => sessionStorage); }; - const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions); // Act const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); @@ -226,11 +195,14 @@ describe('OrderConfirmation.vue', () => { }); }); describe('Rendering', () => { + let wrapper; + beforeEach(() => { + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => sessionStorage); + }; + wrapper = getMountedComponent({}, {}, mockStoreActions).wrapper; + }); test('Should render Site Header', () => { - // Arrange - window.sessionStorage.setItem('submittedOrder', JSON.stringify(sessionStorage)); - const { wrapper } = getMountedComponent(initialStore); - // Act const siteHeader = wrapper.findComponent(headerStub); @@ -238,10 +210,6 @@ describe('OrderConfirmation.vue', () => { expect(siteHeader.exists()).toBe(true); }); test('Should render Vehicle Banner', () => { - // Arrange - window.sessionStorage.setItem('submittedOrder', JSON.stringify(sessionStorage)); - const { wrapper } = getMountedComponent(initialStore); - // Act const vehicleBanner = wrapper.findComponent(vehicleBannerStub); @@ -250,7 +218,9 @@ describe('OrderConfirmation.vue', () => { }); test('If Advanced flow, should display Site Footer', () => { // Arrange - window.sessionStorage.setItem('submittedOrder', JSON.stringify(sessionStorage)); + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => sessionStorage); + }; const testStore = { order: { schedule: { @@ -265,7 +235,7 @@ describe('OrderConfirmation.vue', () => { successReturnURL: 'testURL' } }; - const { wrapper } = getMountedComponent(testStore); + wrapper = getMountedComponent(testStore, {}, mockStoreActions).wrapper; // Act const siteFooter = wrapper.findComponent({ ref: 'siteFooter' }); @@ -274,10 +244,6 @@ describe('OrderConfirmation.vue', () => { expect(siteFooter.exists()).toBe(true); }); test('If Essential flow, should not display Site Footer', () => { - // Arrange - window.sessionStorage.setItem('submittedOrder', JSON.stringify(sessionStorage)); - const { wrapper } = getMountedComponent(initialStore); - // Act const siteFooter = wrapper.findComponent({ ref: 'siteFooter' }); @@ -289,6 +255,9 @@ describe('OrderConfirmation.vue', () => { test('If Advanced flow, forward button action navigates to carrier URL', () => { // Arrange window.sessionStorage.setItem('submittedOrder', JSON.stringify(sessionStorage)); + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => sessionStorage); + }; const carrierReturnUrl = 'testURL'; const testStore = { order: { @@ -304,7 +273,7 @@ describe('OrderConfirmation.vue', () => { successReturnURL: carrierReturnUrl } }; - const { wrapper } = getMountedComponent(testStore); + const { wrapper } = getMountedComponent(testStore, {}, mockStoreActions); // Act wrapper.vm.forwardButtonAction(); @@ -313,8 +282,8 @@ describe('OrderConfirmation.vue', () => { expect(wrapper.vm.$router.navigateToExternalUrl).toHaveBeenCalledWith(carrierReturnUrl); }); }); - describe('Computed properties', () => { - describe.skip('customValueMap', () =>{ + describe.only('Computed properties', () => { + describe('customValueMap', () =>{ test.each([ 'inShopAppointment', 'dropOffAppointment', @@ -380,36 +349,33 @@ describe('OrderConfirmation.vue', () => { expect(actualEmail).toBe(emailAddress); }); }) - describe.only('confirmationEmailText', () => { + describe('confirmationEmailText', () => { const greaterId = ">"; const lessId = "<"; test.each([ ['test', 'test'], - // [`te${greaterId}st`, 'te>st'], - // [`${greaterId}test${greaterId}`, '>test>'], - // [`te${greaterId}st ${greaterId}`, 'te>st >'], - // [`${lessId} test`, '< test'], - // [`t${lessId}e${lessId}st`, 'tt<'] + [`te${greaterId}st`, 'te>st'], + [`${greaterId}test${greaterId}`, '>test>'], + [`te${greaterId}st ${greaterId}`, 'te>st >'], + [`${lessId} test`, '< test'], + [`t${lessId}e${lessId}st`, 'tt<'] ])('given %p returned from cms, returns %p', (rawCms, expected) => { // Arrange const mockStoreActions = () => { useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => sessionStorage); }; + getStringWithCustomValues.mockImplementation(() => rawCms); const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions); - // TODO mock return of cms - getStringWithCustomValues.mockImplementationOnce(() => "test 1"); - // Act const text = wrapper.vm.confirmationEmailText; // Assert expect(text).toBe(expected); }); - test('replaces all ">" with >', () => {}); }); - describe.skip('appointmentTimeText', () => { + describe('appointmentTimeText', () => { test.each([ ['Between 9 AM - 10 AM', '09:00', '10:00'], ['Between 1 PM - 5 PM', '13:00', '17:00'], @@ -483,423 +449,488 @@ describe('OrderConfirmation.vue', () => { }); }); describe('appointmentLocation', () => { - test('mobile location returns service location', () => {}); - test('in shop appointment location returns shop location', () => {}); - test('drop off appointment location returns shop location', () => {}); - test('unknown appointment type returns null', () => {}); - }); - describe('serviceLocationFullAddress', () => { - // TODO - test('serviceLocationFullAddress should return text in expected format', () => { - // Arrange - const testSessionStorage = { - schedule: { - date: '2019-01-01', - startTime: '09:00', - endTime: '10:00' - }, - serviceLocation: { - address: '123 Test Way', - address2: '#1', - city: 'Mesa', - state: 'AZ', - zipCode: '12345', - appointmentType: 'Mobile' - }, - insuranceCoverage: { - coverageStatus: coverageStatuses.VERIFIED, - coverageType: coverageType.Deductible - }, - payment: { - isPayInAdvance: false - }, - lineItems: { - vaps: [] - }, - policy: {}, - damage: {} - }; - window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); - const { wrapper } = getMountedComponent(); - - // Act - const testValue = wrapper.vm.serviceLocationFullAddress; - - // Assert - expect(testValue).toEqual('123 Test Way, #1,
Mesa, AZ 12345'); - }); - }); - describe('providerFullAddress', () => { - // TODO - test('providerFullAddress should return text in expected format', () => { - // Arrange - const testSessionStorage = { - schedule: { - date: '2019-01-01', - startTime: '09:00', - endTime: '10:00' - }, - serviceLocation: { - provider: { - address: { - streetAddress: '123 Safelite Street', - city: 'Mesa', - state: 'AZ', - zipCode: '12345' - } - }, - appointmentType: 'Inshop' - }, - insuranceCoverage: { - coverageStatus: coverageStatuses.VERIFIED, - coverageType: coverageType.Deductible - }, - payment: { - isPayInAdvance: false - }, - lineItems: { - vaps: [] - }, - policy: {}, - damage: {} - }; - window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); - const { wrapper } = getMountedComponent(); - - // Act - const testValue = wrapper.vm.providerFullAddress; - - // Assert - expect(testValue).toEqual('123 Safelite Street,
Mesa, AZ 12345'); - }); - }); - describe('appointmentWordingText', () => { - test('mobile location returns mobile wording', () => {}); - test('in shop appointment location returns non mobile wording', () => {}); - test('drop off appointment location returns non mobile wording', () => {}); - test('unknown appointment type returns null', () => {}); - }); - describe('appointmentWordingText2', () => { - test('mobile location returns mobile wording 2', () => {}); - test('in shop appointment location returns non mobile wording 2', () => {}); - test('drop off appointment location returns non mobile wording 2', () => {}); - test('unknown appointment type returns null', () => {}); - }); - describe('isMobileAppointment', () => { + var order = deepClone(sessionStorage); + order.serviceLocation = { + address: "123 Service Rd.", + address2: "Box 4", + city: "Columbus", + state: "OH", + zipCode: "12345", + provider: { + address: { + streetAddress: "304 provider Ln.", + city: "pittsburg", + state: "PA", + zipCode: "16001" + } + } + }; + const expectedServiceLocation = '123 Service Rd., Box 4,
Columbus, OH 12345'; + const expectedShopLocation = '304 Provider Ln.,
Pittsburg, PA 16001'; test.each([ AppointmentTypeStrings.MOBILE, AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP - ])('mobile appointment type %p returns true', (type) => { - + ])('mobile location %p returns service location', (type) => { + // Arrange + order.serviceLocation.appointmentType = type; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + + // Act + const text = wrapper.vm.appointmentLocation; + + // Assert + expect(text).toBe(expectedServiceLocation); }); test.each([ AppointmentTypeStrings.IN_SHOP, - AppointmentTypeStrings.DROP_OFF, - 'invalid type', - null, - undefined - ])('non mobile appointment type %p returns false', (type) => { + AppointmentTypeStrings.DROP_OFF + ])('%p appointment location returns shop location', (type) => { + // Arrange + order.serviceLocation.appointmentType = type; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + + // Act + const text = wrapper.vm.appointmentLocation; + + // Assert + expect(text).toBe(expectedShopLocation); + }); + test.each( + ['turtle', undefined, null] + )('unknown appointment type %p returns null', (type) => { + // Arrange + order.serviceLocation.appointmentType = type; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + + // Act + const text = wrapper.vm.appointmentLocation; + + // Assert + expect(text).toBeNull(); + }); + }); + describe('serviceLocationFullAddress', () => { + var order = deepClone(sessionStorage); + beforeEach(() => { + order.serviceLocation = { + address: "123 Service Rd.", + address2: "Box 4", + city: "Columbus", + state: "OH", + zipCode: "12345", + provider: { + address: { + streetAddress: "304 provider Ln.", + city: "pittsburg", + state: "PA", + zipCode: "16001" + } + } + }; + }); + test('returns expected when all defined', () => { + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + const expected = "123 Service Rd., Box 4,
Columbus, OH 12345"; + + // Act + const text = wrapper.vm.serviceLocationFullAddress; + + // Assert + expect(text).toBe(expected); + }); + test('returns expected when address null', () => { + order.serviceLocation.address = null; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + const expected = ", Box 4,
Columbus, OH 12345"; + + // Act + const text = wrapper.vm.serviceLocationFullAddress; + + // Assert + expect(text).toBe(expected); + }); + test('returns expected when address2 null', () => { + order.serviceLocation.address2 = null; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + const expected = "123 Service Rd.,
Columbus, OH 12345"; + + // Act + const text = wrapper.vm.serviceLocationFullAddress; + + // Assert + expect(text).toBe(expected); + }); + test('returns expected when city null', () => { + order.serviceLocation.city = null; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + const expected = "123 Service Rd., Box 4,
, OH 12345"; + + // Act + const text = wrapper.vm.serviceLocationFullAddress; + + // Assert + expect(text).toBe(expected); + }); + test('returns expected when state null', () => { + order.serviceLocation.state = null; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + const expected = "123 Service Rd., Box 4,
Columbus, 12345"; + + // Act + const text = wrapper.vm.serviceLocationFullAddress; + + // Assert + expect(text).toBe(expected); + }); + test('returns expected when zipCode null', () => { + order.serviceLocation.zipCode = null; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + const expected = "123 Service Rd., Box 4,
Columbus, OH "; + + // Act + const text = wrapper.vm.serviceLocationFullAddress; + + // Assert + expect(text).toBe(expected); + }); + test('returns expected when all null', () => { + order.serviceLocation.address = null; + order.serviceLocation.address2 = null; + order.serviceLocation.city = null; + order.serviceLocation.state = null; + order.serviceLocation.zipCode = null; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + const expected = ",
, "; + + // Act + const text = wrapper.vm.serviceLocationFullAddress; + + // Assert + expect(text).toBe(expected); + }); + }); + describe('providerFullAddress', () => { + var order = deepClone(sessionStorage); + beforeEach(() => { + order.serviceLocation = { + address: "123 Service Rd.", + address2: "Box 4", + city: "Columbus", + state: "OH", + zipCode: "12345", + provider: { + address: { + streetAddress: "304 provider Ln.", + city: "pittsburg", + state: "PA", + zipCode: "16001" + } + } + }; + }); + test('returns expected when all properties defined', () => { + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + const expected = "304 Provider Ln.,
Pittsburg, PA 16001"; + + // Act + const text = wrapper.vm.providerFullAddress; + + // Assert + expect(text).toBe(expected); + }); + test('returns expected when streetAddress null', () => { + order.serviceLocation.provider.address.streetAddress = null; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + const expected = ""; + + // Act + const text = wrapper.vm.providerFullAddress; + + // Assert + expect(text).toBe(expected); + }); + test('returns expected when city null', () => { + order.serviceLocation.provider.address.city = null; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + const expected = "304 Provider Ln.,
, PA 16001"; + + // Act + const text = wrapper.vm.providerFullAddress; + + // Assert + expect(text).toBe(expected); + }); + test('returns expected when state null', () => { + order.serviceLocation.provider.address.state = null; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + const expected = "304 Provider Ln.,
Pittsburg, 16001"; + + // Act + const text = wrapper.vm.providerFullAddress; + + // Assert + expect(text).toBe(expected); + }); + test('returns expected when zipCode null', () => { + order.serviceLocation.provider.address.zipCode = null; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + const expected = "304 Provider Ln.,
Pittsburg, PA "; + + // Act + const text = wrapper.vm.providerFullAddress; + + // Assert + expect(text).toBe(expected); + }); + test('returns expected when all null', () => { + order.serviceLocation.provider.address.streetAddress = null; + order.serviceLocation.provider.address.city = null; + order.serviceLocation.provider.address.state = null; + order.serviceLocation.provider.address.zipCode = null; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + const expected = ""; + + // Act + const text = wrapper.vm.providerFullAddress; + + // Assert + expect(text).toBe(expected); + }); + }); + describe('appointmentWordingText', () => { + const mobileWording = "Mobile wording"; + const nonMobileWording = "Non mobile wording"; + const mobileWidget = "MobileWordingWidget"; + const dropOffAndInShopWidget = "DropOffAndInShopWordingWidget" + const mixin = { + methods: { + getCmsContent: jest.fn().mockImplementation((widget, _) => { + if (widget == mobileWidget){ + return mobileWording; + } + if (widget == dropOffAndInShopWidget){ + return nonMobileWording; + } + return ""; + }), + setCmsContent: jest.fn() + } + }; + processIfStatements.mockImplementation((content) => content); + getStringWithCustomValues.mockImplementation((content, _) => content); + test.each([ + [AppointmentTypeStrings.MOBILE, mobileWording], + [AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP, mobileWording], + [AppointmentTypeStrings.DROP_OFF, nonMobileWording], + [AppointmentTypeStrings.IN_SHOP, nonMobileWording], + ['unknown', null], + [null, null], + [undefined, null], + ])('appointment type %p returns wording %p', (type, wording) => { + // Arrange + var order = deepClone(sessionStorage); + order.serviceLocation.appointmentType = type; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions, mixin); + + // Act + const testValue = wrapper.vm.appointmentWordingText; + + // Assert + expect(testValue).toEqual(wording); + }); + }); + describe('appointmentWordingText2', () => { + const mobileWording = "Mobile wording"; + const nonMobileWording = "Non mobile wording"; + const mobileWidget = "MobileWordingWidget"; + const dropOffAndInShopWidget = "DropOffAndInShopWordingWidget" + const mixin = { + methods: { + getCmsContent: jest.fn().mockImplementation((widget, _) => { + if (widget == mobileWidget){ + return mobileWording; + } + if (widget == dropOffAndInShopWidget){ + return nonMobileWording; + } + return ""; + }), + setCmsContent: jest.fn() + } + }; + processIfStatements.mockImplementation((content) => content); + getStringWithCustomValues.mockImplementation((content, _) => content); + test.each([ + [AppointmentTypeStrings.MOBILE, mobileWording], + [AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP, mobileWording], + [AppointmentTypeStrings.DROP_OFF, nonMobileWording], + [AppointmentTypeStrings.IN_SHOP, nonMobileWording], + ['unknown', null], + [null, null], + [undefined, null], + ])('appointment type %p returns wording "%p"', (type, wording) => { + // Arrange + var order = deepClone(sessionStorage); + order.serviceLocation.appointmentType = type; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions, mixin); + + // Act + const testValue = wrapper.vm.appointmentWordingText2; + + // Assert + expect(testValue).toEqual(wording); + }); + }); + describe('isMobileAppointment', () => { + test.each([ + [AppointmentTypeStrings.MOBILE, true], + [AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP, true], + [AppointmentTypeStrings.IN_SHOP, false], + [AppointmentTypeStrings.DROP_OFF, false], + ['other', false], + [null, false], + [undefined, false] + ])('appointment type %p returns %p', (type, expected) => { + // Arrange + var order = deepClone(sessionStorage); + order.serviceLocation.appointmentType = type; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + + // Act + const testValue = wrapper.vm.isMobileAppointment; + + // Assert + expect(testValue).toBe(expected); }); }); describe('isInShopAppointment', () => { - test('in shop appointment type returns true', () => { - - }); test.each([ - AppointmentTypeStrings.MOBILE, - AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP, - AppointmentTypeStrings.DROP_OFF, - 'invalid type', - null, - undefined - ])('non in shop appointment type %p returns false', (type) => { - + [AppointmentTypeStrings.MOBILE, false], + [AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP, false], + [AppointmentTypeStrings.IN_SHOP, true], + [AppointmentTypeStrings.DROP_OFF, false], + ['other', false], + [null, false], + [undefined, false] + ])('appointment type %p returns %p', (type, expected) => { + // Arrange + var order = deepClone(sessionStorage); + order.serviceLocation.appointmentType = type; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + + // Act + const testValue = wrapper.vm.isInShopAppointment; + + // Assert + expect(testValue).toBe(expected); }); }); describe('isDropOffAppointment', () => { - test('drop off appointment type returns true', () => { - - }); test.each([ - AppointmentTypeStrings.MOBILE, - AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP, - AppointmentTypeStrings.IN_SHOP, - 'invalid type', - null, - undefined - ])('non drop off appointment type %p returns false', (type) => { - - }); - }); - describe('uncategorized', () => { - // TODO make format date test - test('appointmentDateFormatted should return date in expected format', () => { + [AppointmentTypeStrings.MOBILE, false], + [AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP, false], + [AppointmentTypeStrings.IN_SHOP, false], + [AppointmentTypeStrings.DROP_OFF, true], + ['other', false], + [null, false], + [undefined, false] + ])('appointment type %p returns %p', (type, expected) => { // Arrange - window.sessionStorage.setItem('submittedOrder', JSON.stringify(sessionStorage)); - const { wrapper } = getMountedComponent(initialStore); - - // Act - const testValue = wrapper.vm.appointmentDateFormatted; - - // Assert - expect(testValue).toEqual('Friday, March 1'); - }); - - test('appointmentWordingText should return Mobile text in expected format', () => { - // Arrange - const testSessionStorage = { - schedule: { - date: '2019-01-01', - startTime: '09:00', - endTime: '10:00' - }, - serviceLocation: { - address: '123 Test Way', - address2: '#1', - city: 'Mesa', - state: 'AZ', - zipCode: '12345', - appointmentType: 'Mobile' - }, - insuranceCoverage: { - coverageStatus: coverageStatuses.VERIFIED, - coverageType: coverageType.Deductible - }, - payment: { - isPayInAdvance: false - }, - lineItems: { - vaps: [] - }, - policy: {}, - damage: {} + var order = deepClone(sessionStorage); + order.serviceLocation.appointmentType = type; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); }; - window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); - const { wrapper } = getMountedComponent(); + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); // Act - const testValue = wrapper.vm.appointmentWordingText; + const testValue = wrapper.vm.isDropOffAppointment; // Assert - expect(testValue).toEqual('wording text 123 Test Way, #1,
Mesa, AZ 12345'); - }); - test('appointmentWordingText should return Drop Off text in expected format', () => { - // Arrange - const testSessionStorage = { - schedule: { - date: '2019-01-01', - startTime: '09:00', - endTime: '10:00' - }, - serviceLocation: { - provider: { - address: { - streetAddress: '123 Safelite Street', - city: 'Mesa', - state: 'AZ', - zipCode: '12345' - } - }, - appointmentType: 'Dropoff' - }, - insuranceCoverage: { - coverageStatus: coverageStatuses.VERIFIED, - coverageType: coverageType.Deductible - }, - payment: { - isPayInAdvance: false - }, - lineItems: { - vaps: [] - }, - policy: {}, - damage: {} - }; - window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); - const { wrapper } = getMountedComponent(); - - // Act - const testValue = wrapper.vm.appointmentWordingText; - - // Assert - expect(testValue).toEqual('wording text 123 Safelite Street,
Mesa, AZ 12345'); - }); - test('appointmentWordingText should return In Shop text in expected format', () => { - // Arrange - const testSessionStorage = { - schedule: { - date: '2019-01-01', - startTime: '09:00', - endTime: '10:00' - }, - serviceLocation: { - provider: { - address: { - streetAddress: '123 Safelite Street', - city: 'Mesa', - state: 'AZ', - zipCode: '12345' - } - }, - appointmentType: 'Inshop' - }, - insuranceCoverage: { - coverageStatus: coverageStatuses.VERIFIED, - coverageType: coverageType.Deductible - }, - payment: { - isPayInAdvance: false - }, - lineItems: { - vaps: [] - }, - policy: {}, - damage: {} - }; - window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); - const { wrapper } = getMountedComponent(); - - // Act - const testValue = wrapper.vm.appointmentWordingText; - - // Assert - expect(testValue).toEqual('wording text 123 Safelite Street,
Mesa, AZ 12345'); - }); - - test('appointmentWordingText2 should return Mobile text in expected format', () => { - // Arrange - const testSessionStorage = { - schedule: { - date: '2019-01-01', - startTime: '09:00', - endTime: '10:00' - }, - serviceLocation: { - address: '123 Test Way', - address2: '#1', - city: 'Mesa', - state: 'AZ', - zipCode: '12345', - appointmentType: 'Mobile' - }, - insuranceCoverage: { - coverageStatus: coverageStatuses.VERIFIED, - coverageType: coverageType.Deductible - }, - payment: { - isPayInAdvance: false - }, - lineItems: { - vaps: [] - }, - policy: {}, - damage: {} - }; - window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); - const { wrapper } = getMountedComponent(); - - // Act - const testValue = wrapper.vm.appointmentWordingText2; - - // Assert - expect(testValue).toEqual(wordingText); - }); - test('appointmentWordingText2 should return Drop Off and text in expected format', () => { - // Arrange - const testSessionStorage = { - schedule: { - date: '2019-01-01', - startTime: '09:00', - endTime: '10:00' - }, - serviceLocation: { - provider: { - address: { - streetAddress: '123 Safelite Street', - city: 'Mesa', - state: 'AZ', - zipCode: '12345' - } - }, - appointmentType: 'Dropoff' - }, - insuranceCoverage: { - coverageStatus: coverageStatuses.VERIFIED, - coverageType: coverageType.Deductible - }, - payment: { - isPayInAdvance: false - }, - lineItems: { - vaps: [] - }, - policy: {}, - damage: {} - }; - window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); - const { wrapper } = getMountedComponent(); - - // Act - const testValue = wrapper.vm.appointmentWordingText2; - const expected = wrapper.vm.getBodyText2FromCms('Test Widget'); - - // Assert - expect(testValue).toEqual(expected); - }); - test('appointmentWordingText2 should return In Shop text in expected format', () => { - // Arrange - const testSessionStorage = { - schedule: { - date: '2019-01-01', - startTime: '09:00', - endTime: '10:00' - }, - serviceLocation: { - provider: { - address: { - streetAddress: '123 Safelite Street', - city: 'Mesa', - state: 'AZ', - zipCode: '12345' - } - }, - appointmentType: 'Inshop' - }, - insuranceCoverage: { - coverageStatus: coverageStatuses.VERIFIED, - coverageType: coverageType.Deductible - }, - payment: { - isPayInAdvance: false - }, - lineItems: { - vaps: [] - }, - policy: {}, - damage: {} - }; - window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); - const { wrapper } = getMountedComponent(); - - // Act - const testValue = wrapper.vm.appointmentWordingText2; - const expected = wrapper.vm.getBodyText2FromCms('Test Widget'); - - // Assert - expect(testValue).toEqual(expected); + expect(testValue).toBe(expected); }); }); }); describe('Methods', () => { describe('formatDate', () => { - // TODO test cases confirm day of week test.each([ - ['', '2020-04-22'], // Monday, April 22 - ['', '2018-02-01'], // Tuesday, February 1 - ['', '2026-12-30'] // Wednesday, December 30 - ])('returns "%p" given "%p"', (expected, date) => { + ['Wednesday, April 22', '2020-04-22'], + ['Thursday, February 1', '2018-02-01'], + ['Wednesday, December 30', '2026-12-30'] + ])('returns %p given %p', (expected, date) => { + // Arrange + var order = deepClone(sessionStorage); + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); + // Act + const result = wrapper.vm.formatDate(date); + + // Assert + expect(result).toBe(expected); }); }); }) diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index bdd1d5ea..60182e7a 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -252,7 +252,7 @@ export default { }, serviceLocationFullAddress() { var { address, address2, city, state, zipCode } = this.serviceLocation; - return `${address}, ${address2 ? `${address2},` : ''}
${city}, ${state} ${zipCode}`; + return `${address ?? ''}, ${address2 ? `${address2},` : ''}
${city ?? ''}, ${state ?? ''} ${zipCode ?? ''}`; }, providerFullAddress() { var { streetAddress, city, state, zipCode } = this.providerAddress; @@ -380,10 +380,8 @@ export default { rawText, 'custom', (v) => { return this.customValueMap[v] } - ) - const x = getStringWithCustomValues(processedIfStatements, this.customValueMap); - console.log(JSON.stringify(x)); - return x; + ); + return getStringWithCustomValues(processedIfStatements, this.customValueMap); }, formatDate(date) { // This conversion ensures we don't get get GMT induced date changes From c249e4b8339d5f9d14d35d46f0f3d459b500c538 Mon Sep 17 00:00:00 2001 From: Michaela Brydon Date: Thu, 15 Aug 2024 15:28:38 -0400 Subject: [PATCH 10/13] Actually done --- .../order-confirmation.spec.js | 83 +++++++++++-------- .../order-confirmation/order-confirmation.vue | 2 +- 2 files changed, 49 insertions(+), 36 deletions(-) diff --git a/src/layouts/order-confirmation/order-confirmation.spec.js b/src/layouts/order-confirmation/order-confirmation.spec.js index 504beb2d..e0f651c6 100644 --- a/src/layouts/order-confirmation/order-confirmation.spec.js +++ b/src/layouts/order-confirmation/order-confirmation.spec.js @@ -25,7 +25,7 @@ jest.mock('@/helpers/cms-content-helper', () => ({ const mockMixin = { methods: { - getCmsContent: jest.fn(),//.mockImplementation(() => wordingText), + getCmsContent: jest.fn(), setCmsContent: jest.fn() } }; @@ -178,6 +178,9 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu } describe('OrderConfirmation.vue', () => { + afterEach(() => { + jest.resetAllMocks(); + }) describe('Page pre-requisites', () => { test('If submitted order saved to store, page pre-reqs return true', async () => { // Arrange @@ -282,7 +285,7 @@ describe('OrderConfirmation.vue', () => { expect(wrapper.vm.$router.navigateToExternalUrl).toHaveBeenCalledWith(carrierReturnUrl); }); }); - describe.only('Computed properties', () => { + describe('Computed properties', () => { describe('customValueMap', () =>{ test.each([ 'inShopAppointment', @@ -352,6 +355,10 @@ describe('OrderConfirmation.vue', () => { describe('confirmationEmailText', () => { const greaterId = ">"; const lessId = "<"; + const mobileWording = "Mobile wording"; + const nonMobileWording = "Non mobile wording"; + const mobileWidget = "MobileWordingWidget"; + const dropOffAndInShopWidget = "DropOffAndInShopWordingWidget" test.each([ ['test', 'test'], [`te${greaterId}st`, 'te>st'], @@ -365,7 +372,7 @@ describe('OrderConfirmation.vue', () => { const mockStoreActions = () => { useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => sessionStorage); }; - getStringWithCustomValues.mockImplementation(() => rawCms); + getStringWithCustomValues.mockReturnValue(rawCms); const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions); // Act @@ -750,22 +757,25 @@ describe('OrderConfirmation.vue', () => { const nonMobileWording = "Non mobile wording"; const mobileWidget = "MobileWordingWidget"; const dropOffAndInShopWidget = "DropOffAndInShopWordingWidget" - const mixin = { - methods: { - getCmsContent: jest.fn().mockImplementation((widget, _) => { - if (widget == mobileWidget){ - return mobileWording; - } - if (widget == dropOffAndInShopWidget){ - return nonMobileWording; - } - return ""; - }), - setCmsContent: jest.fn() - } - }; - processIfStatements.mockImplementation((content) => content); - getStringWithCustomValues.mockImplementation((content, _) => content); + let mixin; + beforeEach(() => { + processIfStatements.mockImplementation((content) => content); + getStringWithCustomValues.mockImplementation((content, _) => content); + mixin = { + methods: { + getCmsContent: jest.fn().mockImplementation((widget, _) => { + if (widget == mobileWidget){ + return mobileWording; + } + if (widget == dropOffAndInShopWidget){ + return nonMobileWording; + } + return ""; + }), + setCmsContent: jest.fn() + } + }; + }); test.each([ [AppointmentTypeStrings.MOBILE, mobileWording], [AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP, mobileWording], @@ -796,22 +806,25 @@ describe('OrderConfirmation.vue', () => { const nonMobileWording = "Non mobile wording"; const mobileWidget = "MobileWordingWidget"; const dropOffAndInShopWidget = "DropOffAndInShopWordingWidget" - const mixin = { - methods: { - getCmsContent: jest.fn().mockImplementation((widget, _) => { - if (widget == mobileWidget){ - return mobileWording; - } - if (widget == dropOffAndInShopWidget){ - return nonMobileWording; - } - return ""; - }), - setCmsContent: jest.fn() - } - }; - processIfStatements.mockImplementation((content) => content); - getStringWithCustomValues.mockImplementation((content, _) => content); + let mixin; + beforeEach(() => { + processIfStatements.mockImplementation((content) => content); + getStringWithCustomValues.mockImplementation((content, _) => content); + mixin = { + methods: { + getCmsContent: jest.fn().mockImplementation((widget, _) => { + if (widget == mobileWidget){ + return mobileWording; + } + if (widget == dropOffAndInShopWidget){ + return nonMobileWording; + } + return ""; + }), + setCmsContent: jest.fn() + } + }; + }); test.each([ [AppointmentTypeStrings.MOBILE, mobileWording], [AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP, mobileWording], diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index 60182e7a..b824e266 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -257,7 +257,7 @@ export default { providerFullAddress() { var { streetAddress, city, state, zipCode } = this.providerAddress; return streetAddress - ? `${toTitleCase(streetAddress)},
${toTitleCase(city)}, ${state} ${zipCode}` + ? `${toTitleCase(streetAddress)},
${toTitleCase(city)}, ${state ?? ''} ${zipCode ?? ''}` : ''; }, appointmentWordingText() { From 299ae0d81315127ccbe673cf9c2292c91871477a Mon Sep 17 00:00:00 2001 From: Michaela Brydon Date: Thu, 15 Aug 2024 15:31:18 -0400 Subject: [PATCH 11/13] Final touches --- src/store/index.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/store/index.js b/src/store/index.js index a1d45069..96d4460a 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -419,8 +419,7 @@ export const useMainStore = defineStore({ experimentSettings: (state) => state.applicationUser.experiments .filter((x) => !!x.isActive) .map((x) => x.settings) - .reduce((r, c) => Object.assign(r, c), {}) ?? {}//, - //submittedOrder: () => JSON.parse(window.sessionStorage.getItem(webStorageConstants.SUBMITTED_ORDER)) + .reduce((r, c) => Object.assign(r, c), {}) ?? {} }, actions: { @@ -1547,8 +1546,7 @@ export const useMainStore = defineStore({ }, resetState() { - //Object.assign(this, getDefaultState()); - this.$reset(); + Object.assign(this, getDefaultState()); }, resetRegistrationState() { From 0bf470a1bfa45629efe84628b436f684ed00b6f0 Mon Sep 17 00:00:00 2001 From: Michaela Brydon Date: Fri, 16 Aug 2024 10:26:35 -0400 Subject: [PATCH 12/13] Reverting bug --- src/layouts/payment-method/payment-method.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 8c84b991..36eabb76 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -311,7 +311,7 @@ export default { this.$router.navigate( this.navigationScenarios.SAVE_SESSION_FAILED, this.$route, - { query: { issPage: issPageValues.PAYMENT_METHOD } } + { issPage: issPageValues.PAYMENT_METHOD } ); console.error(`error: response from submit work order:${error.message}`); } From 63f8eea308b19253e12ff807c102b69aa89a5940 Mon Sep 17 00:00:00 2001 From: Michaela Brydon Date: Fri, 16 Aug 2024 16:55:42 -0400 Subject: [PATCH 13/13] Fixing tests --- .../add-to-calendar/add-to-calendar.spec.js | 100 +++++++++++- .../add-to-calendar/add-to-calendar.vue | 35 ++-- .../order-confirmation/order-confirmation.vue | 15 +- .../payment-method/payment-method.spec.js | 6 +- src/layouts/payment-method/payment-method.vue | 2 +- .../tpa-confirmation/tpa-confirmation.spec.js | 149 +++++++++--------- 6 files changed, 198 insertions(+), 109 deletions(-) diff --git a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.spec.js b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.spec.js index 7efff67b..d45ddf9c 100644 --- a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.spec.js +++ b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.spec.js @@ -2,10 +2,11 @@ import calendarOptions from '@/constants/calendar-options'; // Supporting Files -import { shallowMount } from '@vue/test-utils'; +import { shallowMount, mount } from '@vue/test-utils'; import { getMountOptions } from '@/helpers/unit-test-helper.js'; import { useMainStore } from '@/store'; import addToCalendar from '@/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue'; +import { createTestingPinia } from '@pinia/testing'; const appointmentText = 'Appointment content'; function setupMocks({ customMountOptions }) { @@ -24,6 +25,59 @@ function setupMocks({ customMountOptions }) { return { wrapper }; } +const calendarModalQuestionStub = { + render: () => {} +}; + +const mockMixin = { + methods: { + getCmsContent: jest.fn().mockImplementation(() => appointmentText) + } +}; + +function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRun = () => {}, mixin = mockMixin) { + const mountOptions = getMountOptions({ + router: { + navigate: jest.fn(), + navigateToExternalUrl: jest.fn() + } + }); + + mountOptions.global.stubs = { + // siteFooter: footerStub, + // siteHeader: headerStub, + // vehicleBanner: vehicleBannerStub, + // addToCalendar: addToCalendarStub + calendarModalQuestion: calendarModalQuestionStub + }; + + const testingPinia = createTestingPinia({ + initialState: { + main: mainInitialState + } + }); + useMainStore(testingPinia); + methodToRun(); + + mountOptions.global.mixins[0].methods.getSettingValue = jest.fn(() => 'false'); + mountOptions.global.plugins = [testingPinia]; + mountOptions.mixins = [mixin]; + mountOptions.data = () => ( + initialData + ); + + // const apiResponses = { + // supportingItems: [] + // }; + //const apiPromise = Promise.resolve(apiResponses); + // settleAllPromises.mockImplementation(() => apiPromise); + //fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); + + const wrapper = shallowMount(addToCalendar, mountOptions); + wrapper.vm.$refs.calendarModalQuestion.openModal = jest.fn(); + return { wrapper }; +} + beforeEach(() => { jest.restoreAllMocks(); jest.clearAllMocks(); @@ -76,10 +130,52 @@ afterEach(() => { jest.clearAllMocks(); }); +const sessionStorage = { + schedule: { + date: '2019-01-01', + startTime: '09:00', + endTime: '10:00', + routeCode: '000' + }, + lineItems: { + glassParts: [ + { + partNumber: 'ABC123' + } + ], + supportingItems: [] + }, + serviceLocation: { + address: '', + address2: null, + city: '', + state: 'AZ', + appointmentType: 'Inshop', + zipCode: '12345', + zipCodeCtu: '01234', + provider: { + providerNumber: '123', + address: { + streetAddress: 'test1', + city: 'test', + state: 'AZ', + zipCode: '12345', + zipCodeCtu: '01234' + } + } + }, + damage: { + isRepair: false + }, + referralNumber: '1234567', + payment: { + isInsurance: true + } +}; + describe('Add-to-calendar methods...', () => { test('Add-to-calendar should trigger openModal method', () => { // Arrange - const { wrapper } = setupMocks({ customMountOptions: { propsData: { diff --git a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue index a469db25..7dea78e0 100644 --- a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue +++ b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue @@ -30,8 +30,6 @@ import { getDateFormat, addMinutes } from '@/helpers/date-helper'; import { AppointmentTypeStrings, RouteCodeFlags } from '@/constants/schedule-constants'; import { getCalendarFile, download } from '@/helpers/add-to-calendar-helper'; - -import { useMainStore } from '@/store'; import serviceType from '@/constants/service-type'; import applicationConfig from '@/constants/application-config.js'; import calendarModalQuestion from '@/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue'; @@ -53,12 +51,11 @@ export default { appointmentType: String, scheduleDate: String, scheduleStartTime: String, - scheduleEndTime: String - }, - setup() { - const mainStore = useMainStore(); - const submittedOrder = mainStore.getSubmittedOrder(); - return { mainStore, submittedOrder }; + scheduleEndTime: String, + hasRecalibrationPart: Boolean, + uniqueId: String, + isRepair: Boolean, + routeCode: String }, data() { return { @@ -116,23 +113,15 @@ export default { AddToCalendar_SameDayDropOff_Body() { return this.getCmsContent(this.sameDayDropOffWidgetName, 'BodyText'); }, - UniqueId() { - return this.submittedOrder.referralNumber?.toString(); - }, ServiceType() { - const { isRepair } = this.submittedOrder.damage; - const { hasRecalibrationPart } = this.mainStore; - if (!isRepair) { - if (hasRecalibrationPart) { + if (!this.isRepair) { + if (this.hasRecalibrationPart) { return serviceType.REPLACEMENT_AND_RECALIBRATION; } return serviceType.REPLACEMENT; } return serviceType.REPAIR; }, - RouteCode() { - return this.submittedOrder.schedule.routeCode; - }, Appointment() { let subject = ''; let location = ''; @@ -153,10 +142,10 @@ export default { } else { location = this.providerFullAddress?.replace('
', ''); if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) { - if (this.RouteCode.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) { + if (this.routeCode.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) { subject = this.AddToCalendar_OvernightDropOff_Subject; body = this.AddToCalendar_OvernightDropOff_Body; - } else if (this.RouteCode.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) { + } else if (this.routeCode.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) { if (this.IsSameDayDropOff) { subject = this.AddToCalendar_SameDayDropOff_Subject; endDateTime = addMinutes(startDateTime, 120); @@ -196,7 +185,7 @@ export default { Location: location, StartDate: startDateTime, EndDate: endDateTime, - RefrrlSeqNum: this.UniqueId, + RefrrlSeqNum: this.uniqueId, Body: body, IsHTML: isHTML, Duration: duration @@ -287,10 +276,6 @@ export default { const calBody = getCalendarFile(calFile); download('SafeliteAppointment.ics', calBody); } - // getInShopAppointmentText() { - // const test = this.getCmsContent('AddToCalendar_InShop_TEST', 'Text'); - // return test; - // } } }; diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index b824e266..e33a5e08 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -41,7 +41,11 @@ :appointmentType="appointmentType" :scheduleDate="schedule.date" :scheduleStartTime="schedule.startTime" - :scheduleEndTime="schedule.endTime" /> + :scheduleEndTime="schedule.endTime" + :routeCode="schedule.routeCode" + :hasRecalibrationPart="hasRecalibrationPart" + :uniqueId="referralNumber" + :isRepair="isRepair" />
@@ -148,8 +152,10 @@ export default { schedule, customer, payment, - customerPortalLoginToken } = this.submittedOrder; - var { issConfig } = this.mainStore; + customerPortalLoginToken, + damage, + referralNumber } = this.submittedOrder; + var { issConfig, hasRecalibrationPart } = this.mainStore; return { vehicle, customerEmail: customer?.emailAddress, @@ -161,6 +167,9 @@ export default { customerPortalLoginToken, carrierName: issConfig.clientName, carrierUrl: issConfig.successReturnURL, + isRepair: damage.isRepair, + hasRecalibrationPart, + referralNumber: referralNumber?.toString(), widgets: { siteHeader: 'SiteHeaderWidget', vehicleBanner: 'VehicleBannerWidget', diff --git a/src/layouts/payment-method/payment-method.spec.js b/src/layouts/payment-method/payment-method.spec.js index acfaeafe..b255afab 100644 --- a/src/layouts/payment-method/payment-method.spec.js +++ b/src/layouts/payment-method/payment-method.spec.js @@ -22,7 +22,11 @@ jest.mock('@/helpers/order-helper.js', () => ({ function setupMocks({ customMountOptions = {}, queryString }, mainInitialState = {}, customMixin = null) { const mountOptions = getMountOptions({ ...customMountOptions, - route: { query: { issPage: issPageValues.PAYMENT_METHOD, ...queryString }, params: {} } + route: { query: { issPage: issPageValues.PAYMENT_METHOD, ...queryString }, params: {} }, + router: { + navigate: jest.fn(), + navigateToExternalUrl: jest.fn() + } }); const testingPinia = createTestingPinia({ diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 36eabb76..09a6dad6 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -307,7 +307,7 @@ export default { this.$route ); } catch (error) { - useMainStore().setBailout(bailoutMessage.saveSessionError(submitError.data)); + useMainStore().setBailout(bailoutMessage.saveSessionError(error.data)); this.$router.navigate( this.navigationScenarios.SAVE_SESSION_FAILED, this.$route, diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.spec.js b/src/layouts/tpa-confirmation/tpa-confirmation.spec.js index 5cc2eb2a..11f9e60b 100644 --- a/src/layouts/tpa-confirmation/tpa-confirmation.spec.js +++ b/src/layouts/tpa-confirmation/tpa-confirmation.spec.js @@ -8,8 +8,8 @@ import settleAllPromises from '@/helpers/layout-helper.js'; import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; import { mount } from '@vue/test-utils'; import { createTestingPinia } from '@pinia/testing'; -import bailoutMessage from '@/constants/bailoutMessage'; import coverageStatuses from '@/constants/coverage-statuses'; +import { deepClone } from '@/helpers/object-helper'; jest.mock('@/helpers/layout-helper.js', () => jest.fn()); @@ -54,11 +54,6 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu } }); const store = useMainStore(testingPinia); - store.submittedOrder = { - ...JSON.parse(JSON.stringify(store.order)), - isVerified: store.isVerified, - isUnverified: store.isUnverified - }; store.order = getDefaultState().order; store.hasSubmittedOrder = jest.fn().mockReturnValue(true); methodToRun(); @@ -80,12 +75,33 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu return { wrapper }; } +const defaultOrder = { + serviceLocation: { + provider: { + companyName: "Hershey", + phoneNumber: "726-117-0377" + } + }, + currentDeductible: 479, + isVerified: false, + carrierPhoneNumber: "757-277-0388", + vehicle: { + imageUrl: 'url for image', + category: 'car' + } +} + describe('TPAConfirmation.vue', () => { describe('Rendering', () => { + let wrapper; + let mockStoreActions; + beforeEach(() => { + mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => defaultOrder); + }; + wrapper = getMountedComponent({}, {}, mockStoreActions).wrapper; + }); test('Should render Site Header', () => { - // Arrange - const { wrapper } = getMountedComponent({}); - // Act const siteHeader = wrapper.findComponent({ ref: 'siteHeader' }); @@ -93,9 +109,6 @@ describe('TPAConfirmation.vue', () => { expect(siteHeader.exists()).toBe(true); }); test('Should render Vehicle Banner', () => { - // Arrange - const { wrapper } = getMountedComponent({}); - // Act const vehicleBanner = wrapper.findComponent({ ref: 'vehicleBanner' }); @@ -103,9 +116,6 @@ describe('TPAConfirmation.vue', () => { expect(vehicleBanner.exists()).toBe(true); }); test('Should render Confirmation Body One', () => { - // Arrange - const { wrapper } = getMountedComponent({}); - // Act const bodyOne = wrapper.findComponent({ ref: 'tpaConfirmationBodyOne' }); @@ -113,9 +123,6 @@ describe('TPAConfirmation.vue', () => { expect(bodyOne.exists()).toBe(true); }); test('Should render Confirmation Body Two', () => { - // Arrange - const { wrapper } = getMountedComponent({}); - // Act const bodyTwo = wrapper.findComponent({ ref: 'tpaConfirmationBodyTwo' }); @@ -123,9 +130,6 @@ describe('TPAConfirmation.vue', () => { expect(bodyTwo.exists()).toBe(true); }); test('Should render Order Details title', () => { - // Arrange - const { wrapper } = getMountedComponent({}); - // Act const orderDetailsTitle = wrapper.findComponent({ ref: 'tpaConfirmationOrderDetailsTitle' }); @@ -133,9 +137,6 @@ describe('TPAConfirmation.vue', () => { expect(orderDetailsTitle.exists()).toBe(true); }); test('Should render Order Details body', () => { - // Arrange - const { wrapper } = getMountedComponent({}); - // Act const orderDetailsBody = wrapper.findComponent({ ref: 'tpaConfirmationOrderDetailsBody' }); @@ -143,9 +144,6 @@ describe('TPAConfirmation.vue', () => { expect(orderDetailsBody.exists()).toBe(true); }); test('Should render Deductible Box', () => { - // Arrange - const { wrapper } = getMountedComponent({}); - // Act const deductibleBox = wrapper.findComponent({ ref: 'deductibleBox' }); @@ -160,7 +158,7 @@ describe('TPAConfirmation.vue', () => { successReturnURL: carrierReturnUrl } }; - const { wrapper } = getMountedComponent(initialStore); + wrapper = getMountedComponent(initialStore, {}, mockStoreActions).wrapper; // Act const siteFooter = wrapper.findComponent({ ref: 'siteFooter' }); @@ -169,9 +167,6 @@ describe('TPAConfirmation.vue', () => { expect(siteFooter.exists()).toBe(true); }); test('If Essential flow, should not display Site Footer', () => { - // Arrange - const { wrapper } = getMountedComponent(); - // Act const siteFooter = wrapper.findComponent({ ref: 'siteFooter' }); @@ -190,7 +185,10 @@ describe('TPAConfirmation.vue', () => { } } }; - const { wrapper } = getMountedComponent(initialStore); + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => defaultOrder); + }; + const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions); const expected = 'Verifying coverage'; // Assert @@ -207,7 +205,12 @@ describe('TPAConfirmation.vue', () => { currentDeductible } }; - const { wrapper } = getMountedComponent(initialStore); + const order = deepClone(defaultOrder); + order.isVerified = true; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); + }; + const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions); const notExpected = 'Verifying coverage'; // Assert @@ -216,26 +219,22 @@ describe('TPAConfirmation.vue', () => { }); }); describe('Methods', () => { - describe('getCustomValueFromString', () => { + describe.only('getCustomValueFromString', () => { describe.each([ - [false, coverageStatuses.PENDING, 0], - [false, coverageStatuses.PENDING, 500], - [false, coverageStatuses.NO_COVERAGE, 0], - [false, coverageStatuses.NO_COVERAGE, 500], - [false, coverageStatuses.VERIFIED, 0], - [true, coverageStatuses.VERIFIED, 500] - ])('with argument deductibleAboveZero', (expected, status, deductible) => { + [false, false, 0], + [false, false, 500], + [false, true, 0], + [true, true, 500] + ])('with argument deductibleAboveZero', (expected, isVerified, deductible) => { test(`returns ${expected} when coverageStatus is ${getEnumName(coverageStatuses, status)} and currentDeductible is ${deductible}`, () => { // Arrange - const initialStore = { - order: { - insuranceCoverage: { - coverageStatus: status - }, - currentDeductible: deductible - } + const order = deepClone(defaultOrder); + order.isVerified = isVerified; + order.currentDeductible = deductible; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); }; - const { wrapper } = getMountedComponent(initialStore); + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); const argument = 'deductibleAboveZero'; // Act @@ -247,24 +246,20 @@ describe('TPAConfirmation.vue', () => { }); describe('with argument zeroDeductible', () => { describe.each([ - [false, coverageStatuses.PENDING, 0], - [false, coverageStatuses.PENDING, 500], - [false, coverageStatuses.NO_COVERAGE, 0], - [false, coverageStatuses.NO_COVERAGE, 500], - [true, coverageStatuses.VERIFIED, 0], - [false, coverageStatuses.VERIFIED, 500] - ])('with argument zeroDeductible', (expected, status, deductible) => { + [false, false, 0], + [false, false, 500], + [true, true, 0], + [false, true, 500] + ])('with argument zeroDeductible', (expected, isVerified, deductible) => { test(`returns ${expected} when coverageStatus is ${getEnumName(coverageStatuses, status)} and currentDeductible is ${deductible}`, () => { // Arrange - const initialStore = { - order: { - insuranceCoverage: { - coverageStatus: status - }, - currentDeductible: deductible - } + const order = deepClone(defaultOrder); + order.isVerified = isVerified; + order.currentDeductible = deductible; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); }; - const { wrapper } = getMountedComponent(initialStore); + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); const argument = 'zeroDeductible'; // Act @@ -277,21 +272,18 @@ describe('TPAConfirmation.vue', () => { }); describe('with argument verifyingCoverage', () => { describe.each([ - [true, coverageStatuses.PENDING], - [true, coverageStatuses.NO_COVERAGE], - [false, coverageStatuses.VERIFIED] - ])('with argument zeroDeductible', (expected, status) => { + [true, false], + [false, true] + ])('with argument zeroDeductible', (expected, isVerified) => { test(`returns ${expected} when coverageStatus is ${getEnumName(coverageStatuses, status)}`, () => { // Arrange - const initialStore = { - order: { - insuranceCoverage: { - coverageStatus: status - }, - currentDeductible: 123 - } + const order = deepClone(defaultOrder); + order.isVerified = isVerified; + order.currentDeductible = 123; + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); }; - const { wrapper } = getMountedComponent(initialStore); + const { wrapper } = getMountedComponent({}, {}, mockStoreActions); const argument = 'verifyingCoverage'; // Act @@ -304,6 +296,9 @@ describe('TPAConfirmation.vue', () => { }); }); describe('Navigation', () => { + const mockStoreActions = () => { + useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => defaultOrder); + }; test('If Advanced flow, forward button action navigates to carrier URL', () => { // Arrange const carrierReturnUrl = 'testURL'; @@ -312,7 +307,7 @@ describe('TPAConfirmation.vue', () => { successReturnURL: carrierReturnUrl } }; - const { wrapper } = getMountedComponent(initialStore); + const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions); // Act wrapper.vm.forwardButtonAction();