From 23503cd040f42f4f0e851e1bbcff6e25a3fdcca0 Mon Sep 17 00:00:00 2001 From: Josh Dassinger Date: Mon, 22 Apr 2024 08:02:58 -0500 Subject: [PATCH 1/3] SSR-600 Load Session Changes --- .../duplicate-check/duplicate-check.spec.js | 335 +++++++----------- .../duplicate-check/duplicate-check.vue | 25 +- src/store/index.js | 8 +- src/store/store.spec.js | 2 +- 4 files changed, 150 insertions(+), 220 deletions(-) diff --git a/src/layouts/duplicate-check/duplicate-check.spec.js b/src/layouts/duplicate-check/duplicate-check.spec.js index 22c60c38..b18eaca5 100644 --- a/src/layouts/duplicate-check/duplicate-check.spec.js +++ b/src/layouts/duplicate-check/duplicate-check.spec.js @@ -9,6 +9,49 @@ import { getMountOptions } from '@/helpers/unit-test-helper.js'; import navigationScenarios from '@/router/router-constants/navigation-scenarios.js'; import { getRandomString } from '@/helpers/data-generation.js'; import { useMainStore } from '@/store'; +import settleAllPromises from '@/helpers/layout-helper.js'; +import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; + +// Mock fetchCmsContentForPage +jest.mock('@/helpers/cms-content-helper', () => ({ + fetchCmsContentForPage: jest.fn(), + doesCopyContainRouterLink: jest.fn() +})); + +// Mock our module for promises. +jest.mock('@/helpers/layout-helper.js', () => jest.fn()); + +function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRunAfterInitializingStore = () => {}) { + const mountOptions = getMountOptions({ + router: { + navigate: jest.fn() + } + }); + + const testingPinia = createTestingPinia({ + initialState: { + main: mainInitialState + } + }); + useMainStore(testingPinia); + methodToRunAfterInitializingStore(); + + mountOptions.global.plugins = [testingPinia]; + mountOptions.data = () => (initialData); + + const apiResponses = { cmsContent: {} }; + + settleAllPromises.mockImplementation(() => apiResponses); + fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); + + const wrapper = shallowMount(duplicateCheck, mountOptions); + wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {}); + wrapper.vm.setCmsContent = jest.fn(); + wrapper.vm.$router.navigateWithSpinner = jest.fn(); + wrapper.vm.navigateBack = baseMixin.methods.navigateBack; + + return { wrapper }; +} const duplicateOrderText = 'Finish Existing Claim'; @@ -60,56 +103,30 @@ describe('duplicateCheck.vue', () => { describe('duplicateOrders computed', () => { test('duplicateOrders in store undefined => returns empty list', () => { // Arrange - const mountOptions = getMountOptions({ - router: { navigate: jest.fn() } - }); - - const mainInitialState = { + const { wrapper } = getMountedComponent({ applicationUser: { duplicateOrders: undefined } - }; - mountOptions.global.plugins = [createTestingPinia({ - initialState: { - main: mainInitialState - } - })]; - - const wrapper = shallowMount(duplicateCheck, mountOptions); + }); // Assert expect(wrapper.vm.duplicateOrders.length).toBe(0); }); test('duplicateOrders in store empty => returns empty list', () => { // Arrange - const mountOptions = getMountOptions({ - router: { navigate: jest.fn() } - }); - - const mainInitialState = { + const { wrapper } = getMountedComponent({ applicationUser: { duplicateOrders: [] } - }; - mountOptions.global.plugins = [createTestingPinia({ - initialState: { - main: mainInitialState - } - })]; - - const wrapper = shallowMount(duplicateCheck, mountOptions); + }); // Assert expect(wrapper.vm.duplicateOrders.length).toBe(0); }); test('duplicateOrder in store with null vehicle year => returns order with only date in subtext', () => { // Arrange - const mountOptions = getMountOptions({ - router: { navigate: jest.fn() } - }); - const referralNumber = getRandomString(6, 6); - const mainInitialState = { + const { wrapper } = getMountedComponent({ applicationUser: { duplicateOrders: [ { @@ -117,19 +134,14 @@ describe('duplicateCheck.vue', () => { vehicleMake: getRandomString(5, 5), vehicleModel: getRandomString(5, 5), responseDate: '1990-09-23T01:12:34', - referralNumber + referralNumber, + correlationId: getRandomString(5, 5) } ] } - }; - mountOptions.global.plugins = [createTestingPinia({ - initialState: { - main: mainInitialState - } - })]; - const expectedSubtext = '9/23/1990'; + }); - const wrapper = shallowMount(duplicateCheck, mountOptions); + const expectedSubtext = '9/23/1990'; // Assert expect(wrapper.vm.duplicateOrders.length).toBe(1); @@ -137,17 +149,13 @@ describe('duplicateCheck.vue', () => { Text: duplicateOrderText, Name: referralNumber, SubText: expectedSubtext, - value: useMainStore().applicationUser.duplicateOrders[0] + value: useMainStore().applicationUser.duplicateOrders[0].correlationId }); }); test('duplicateOrder in store with null vehicle make => returns order with only date subtext', () => { // Arrange - const mountOptions = getMountOptions({ - router: { navigate: jest.fn() } - }); - const referralNumber = getRandomString(6, 6); - const mainInitialState = { + const { wrapper } = getMountedComponent({ applicationUser: { duplicateOrders: [ { @@ -155,19 +163,14 @@ describe('duplicateCheck.vue', () => { vehicleMake: null, vehicleModel: getRandomString(5, 5), responseDate: '2004-11-01T01:12:34', - referralNumber + referralNumber, + correlationId: getRandomString(6, 6) } ] } - }; - mountOptions.global.plugins = [createTestingPinia({ - initialState: { - main: mainInitialState - } - })]; - const expectedSubtext = '11/1/2004'; + }); - const wrapper = shallowMount(duplicateCheck, mountOptions); + const expectedSubtext = '11/1/2004'; // Assert expect(wrapper.vm.duplicateOrders.length).toBe(1); @@ -175,17 +178,13 @@ describe('duplicateCheck.vue', () => { Text: duplicateOrderText, Name: referralNumber, SubText: expectedSubtext, - value: useMainStore().applicationUser.duplicateOrders[0] + value: useMainStore().applicationUser.duplicateOrders[0].correlationId }); }); test('duplicateOrder in store with null vehicle model => returns order with only date subtext', () => { // Arrange - const mountOptions = getMountOptions({ - router: { navigate: jest.fn() } - }); - const referralNumber = getRandomString(6, 6); - const mainInitialState = { + const { wrapper } = getMountedComponent({ applicationUser: { duplicateOrders: [ { @@ -193,19 +192,14 @@ describe('duplicateCheck.vue', () => { vehicleMake: getRandomString(6, 6), vehicleModel: null, responseDate: '1999-01-15T01:12:34', - referralNumber + referralNumber, + correlationId: getRandomString(6, 6) } ] } - }; - mountOptions.global.plugins = [createTestingPinia({ - initialState: { - main: mainInitialState - } - })]; - const expectedSubtext = '1/15/1999'; + }); - const wrapper = shallowMount(duplicateCheck, mountOptions); + const expectedSubtext = '1/15/1999'; // Assert expect(wrapper.vm.duplicateOrders.length).toBe(1); @@ -213,17 +207,13 @@ describe('duplicateCheck.vue', () => { Text: duplicateOrderText, Name: referralNumber, SubText: expectedSubtext, - value: useMainStore().applicationUser.duplicateOrders[0] + value: useMainStore().applicationUser.duplicateOrders[0].correlationId }); }); test('duplicateOrder in store with all vehicle info => returns order with year, make, model and date in subtext', () => { // Arrange - const mountOptions = getMountOptions({ - router: { navigate: jest.fn() } - }); - const referralNumber = getRandomString(6, 6); - const mainInitialState = { + const { wrapper } = getMountedComponent({ applicationUser: { duplicateOrders: [ { @@ -231,28 +221,23 @@ describe('duplicateCheck.vue', () => { vehicleMake: 'make', vehicleModel: 'MoDel', responseDate: '2018-03-01T01:12:34', - referralNumber + referralNumber, + correlationId: getRandomString(6, 6) } ] } - }; - mountOptions.global.plugins = [createTestingPinia({ - initialState: { - main: mainInitialState - } - })]; + }); + const expectedVehicle = 'Year Make Model'; const expectedDate = '3/1/2018'; - const wrapper = shallowMount(duplicateCheck, mountOptions); - // Assert expect(wrapper.vm.duplicateOrders.length).toBe(1); expect(wrapper.vm.duplicateOrders[0]).toStrictEqual({ Text: duplicateOrderText, Name: referralNumber, SubText: `${expectedVehicle}, ${expectedDate}`, - value: useMainStore().applicationUser.duplicateOrders[0] + value: useMainStore().applicationUser.duplicateOrders[0].correlationId }); }); }); @@ -336,11 +321,8 @@ describe('duplicateCheck.vue', () => { describe('Navigation', () => { test('Back button clicked triggers navigation', () => { // Arrange - const wrapper = shallowMount(duplicateCheck, getMountOptions({ - router: { - navigateWithSpinner: jest.fn() - } - })); + + const { wrapper } = getMountedComponent({}); wrapper.vm.navigateBack = baseMixin.methods.navigateBack; // Act @@ -355,21 +337,22 @@ describe('duplicateCheck.vue', () => { describe('forwardButtonAction', () => { test('Selected duplicate => load session called', async () => { // Arrange - const newOrderSelectionName = getRandomString(6, 6); - const selectedAnswer = {}; - - const mountOptions = getMountOptions({ - router: { navigate: jest.fn() } - }); - mountOptions.mixins = [{ - methods: { - getCmsContent: jest.fn().mockImplementation((_, label) => (label === 'Answers' - ? [{ Name: newOrderSelectionName }] - : '')) + const selectedAnswer = getRandomString(6, 6); + const { wrapper } = getMountedComponent({ + applicationUser: { + duplicateOrders: [ + { + vehicleYear: 'YEAR', + vehicleMake: 'make', + vehicleModel: 'MoDel', + responseDate: '2018-03-01T01:12:34', + referralNumber: getRandomString(6, 6), + correlationId: selectedAnswer + } + ] } - }]; + }); - const wrapper = shallowMount(duplicateCheck, mountOptions); wrapper.setData({ selectedAnswer }); useMainStore().loadSession = jest.fn().mockImplementation(() => Promise.resolve({})); @@ -383,19 +366,21 @@ describe('duplicateCheck.vue', () => { test('Selected new order => load session not called', async () => { // Arrange const newOrderSelectionName = getRandomString(6, 6); - - const mountOptions = getMountOptions({ - router: { navigate: jest.fn() } - }); - mountOptions.mixins = [{ - methods: { - getCmsContent: jest.fn().mockImplementation((_, label) => (label === 'Answers' - ? [{ Name: newOrderSelectionName }] - : '')) + const { wrapper } = getMountedComponent({ + applicationUser: { + duplicateOrders: [ + { + vehicleYear: 'YEAR', + vehicleMake: 'make', + vehicleModel: 'MoDel', + responseDate: '2018-03-01T01:12:34', + referralNumber: getRandomString(6, 6), + correlationId: getRandomString(6, 6) + } + ] } - }]; + }); - const wrapper = shallowMount(duplicateCheck, mountOptions); wrapper.setData({ selectedAnswer: newOrderSelectionName }); useMainStore().loadSession = jest.fn().mockImplementation(() => Promise.resolve({})); @@ -408,21 +393,22 @@ describe('duplicateCheck.vue', () => { }); test('Load session throws error => still navigate forward', async () => { // Arrange - const newOrderSelectionName = getRandomString(6, 6); - const selectedAnswer = {}; - - const mountOptions = getMountOptions({ - router: { navigate: jest.fn() } - }); - mountOptions.mixins = [{ - methods: { - getCmsContent: jest.fn().mockImplementation((_, label) => (label === 'Answers' - ? [{ Name: newOrderSelectionName }] - : '')) + const selectedAnswer = getRandomString(6, 6); + const { wrapper } = getMountedComponent({ + applicationUser: { + duplicateOrders: [ + { + vehicleYear: 'YEAR', + vehicleMake: 'make', + vehicleModel: 'MoDel', + responseDate: '2018-03-01T01:12:34', + referralNumber: getRandomString(6, 6), + correlationId: selectedAnswer + } + ] } - }]; + }); - const wrapper = shallowMount(duplicateCheck, mountOptions); wrapper.setData({ selectedAnswer }); const error = 'load session error'; useMainStore().loadSession = jest.fn().mockImplementation(() => Promise.reject(error)); @@ -436,25 +422,14 @@ describe('duplicateCheck.vue', () => { }); test('policyLookupSuccessful true and policy vehicles returned => CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES', async () => { // Arrange - const mountOptions = getMountOptions({ - router: { navigate: jest.fn() } - }); - - const mainInitialState = { + const { wrapper } = getMountedComponent({ order: { policy: { policyLookupSuccessful: true, vehicles: [{ test: 'a' }] } } - }; - mountOptions.global.plugins = [createTestingPinia({ - initialState: { - main: mainInitialState - } - })]; - - const wrapper = shallowMount(duplicateCheck, mountOptions); + }); // Act await wrapper.vm.forwardButtonAction(); @@ -466,25 +441,14 @@ describe('duplicateCheck.vue', () => { }); test('policyLookupSuccessful true and no policy vehicles returned => CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES', async () => { // Arrange - const mountOptions = getMountOptions({ - router: { navigate: jest.fn() } - }); - - const mainInitialState = { + const { wrapper } = getMountedComponent({ order: { policy: { policyLookupSuccessful: true, vehicles: [] } } - }; - mountOptions.global.plugins = [createTestingPinia({ - initialState: { - main: mainInitialState - } - })]; - - const wrapper = shallowMount(duplicateCheck, mountOptions); + }); // Act await wrapper.vm.forwardButtonAction(); @@ -496,24 +460,13 @@ describe('duplicateCheck.vue', () => { }); test('policyLookupSuccessful false => CLICKED_FORWARD_POLICY_UNVERIFIED', async () => { // Arrange - const mountOptions = getMountOptions({ - router: { navigate: jest.fn() } - }); - - const mainInitialState = { + const { wrapper } = getMountedComponent({ order: { policy: { policyLookupSuccessful: false } } - }; - mountOptions.global.plugins = [createTestingPinia({ - initialState: { - main: mainInitialState - } - })]; - - const wrapper = shallowMount(duplicateCheck, mountOptions); + }); // Act await wrapper.vm.forwardButtonAction(); @@ -523,14 +476,11 @@ describe('duplicateCheck.vue', () => { expect(wrapper.vm.$router.navigate) .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED, undefined); }); + // eslint-disable-next-line max-len test('policyLookupSuccessful true and loaded duplicate with policy vehicle => CLICKED_FORWARD_LOADED_DUPLICATE_WITH_POLICY_VEHICLE', async () => { // Arrange - const mountOptions = getMountOptions({ - router: { navigate: jest.fn() } - }); - const vin = getRandomString(17, 17); - const mainInitialState = { + const { wrapper } = getMountedComponent({ order: { policy: { policyLookupSuccessful: true, @@ -541,14 +491,7 @@ describe('duplicateCheck.vue', () => { }, loadedFromDupeCheck: true } - }; - mountOptions.global.plugins = [createTestingPinia({ - initialState: { - main: mainInitialState - } - })]; - - const wrapper = shallowMount(duplicateCheck, mountOptions); + }); // Act await wrapper.vm.forwardButtonAction(); @@ -558,14 +501,11 @@ describe('duplicateCheck.vue', () => { expect(wrapper.vm.$router.navigate) .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_LOADED_DUPLICATE_WITH_POLICY_VEHICLE, undefined); }); + // eslint-disable-next-line max-len test('policyLookupSuccessful true and loaded duplicate with non policy vehicle => CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NON_POLICY_VEHICLE', async () => { // Arrange - const mountOptions = getMountOptions({ - router: { navigate: jest.fn() } - }); - const vin = getRandomString(17, 17); - const mainInitialState = { + const { wrapper } = getMountedComponent({ order: { policy: { policyLookupSuccessful: true, @@ -576,14 +516,7 @@ describe('duplicateCheck.vue', () => { }, loadedFromDupeCheck: true } - }; - mountOptions.global.plugins = [createTestingPinia({ - initialState: { - main: mainInitialState - } - })]; - - const wrapper = shallowMount(duplicateCheck, mountOptions); + }); // Act await wrapper.vm.forwardButtonAction(); @@ -593,13 +526,10 @@ describe('duplicateCheck.vue', () => { expect(wrapper.vm.$router.navigate) .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NON_POLICY_VEHICLE, undefined); }); + // eslint-disable-next-line max-len test('policyLookupSuccessful true and loaded duplicate with no policy vehicles => CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NO_POLICY_VEHICLES', async () => { // Arrange - const mountOptions = getMountOptions({ - router: { navigate: jest.fn() } - }); - - const mainInitialState = { + const { wrapper } = getMountedComponent({ order: { policy: { policyLookupSuccessful: true, @@ -610,14 +540,7 @@ describe('duplicateCheck.vue', () => { }, loadedFromDupeCheck: true } - }; - mountOptions.global.plugins = [createTestingPinia({ - initialState: { - main: mainInitialState - } - })]; - - const wrapper = shallowMount(duplicateCheck, mountOptions); + }); // Act await wrapper.vm.forwardButtonAction(); diff --git a/src/layouts/duplicate-check/duplicate-check.vue b/src/layouts/duplicate-check/duplicate-check.vue index 4a842ba1..bac463f0 100644 --- a/src/layouts/duplicate-check/duplicate-check.vue +++ b/src/layouts/duplicate-check/duplicate-check.vue @@ -73,6 +73,10 @@ export default { vm.setCmsContent(cmsContent); }); }, + setup() { + const mainStore = useMainStore(); + return { mainStore }; + }, data() { return { selectedAnswer: null, @@ -99,7 +103,7 @@ export default { }, duplicateOrders() { const duplicateOrderText = 'Finish Existing Claim'; - const orders = useMainStore().applicationUser.duplicateOrders; + const orders = this.mainStore.applicationUser.duplicateOrders; return orders?.map((o) => { const vehicle = !!o.vehicleYear && !!o.vehicleMake && !!o.vehicleModel ? `${o.vehicleYear} ${o.vehicleMake} ${o.vehicleModel}` @@ -114,7 +118,7 @@ export default { Text: duplicateOrderText, Name: o.referralNumber, SubText: toTitleCase(subtext), - value: o + value: o.correlationId }; }) ?? []; }, @@ -127,13 +131,16 @@ export default { * @summary Steps to perform when forward button clicked. */ async forwardButtonAction() { - if (this.selectedAnswer !== null && typeof this.selectedAnswer === 'object') { - await useMainStore().loadSession(this.selectedAnswer) - .catch(() => {}) - .finally(() => { - this.navigateForward(); - }); - return; + if (this.selectedAnswer !== null) { + const selectedReferral = this.mainStore.applicationUser.duplicateOrders.find((o) => o.correlationId === this.selectedAnswer); + if (selectedReferral) { + await this.mainStore.loadSession(selectedReferral) + .catch(() => {}) + .finally(() => { + this.navigateForward(); + }); + return; + } } this.navigateForward(); diff --git a/src/store/index.js b/src/store/index.js index def5b0cc..4b7502f8 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1342,7 +1342,7 @@ export const useMainStore = defineStore({ }, async loadSession(duplicate) { - const { applicationUser, order, issConfig } = this; + const { order, issConfig } = this; try { const response = await globalMethods.callHttpClient({ method: endpoints.LoadSession.method, @@ -1351,7 +1351,7 @@ export const useMainStore = defineStore({ referralNumber: duplicate.referralNumber, referralDate: duplicate.responseDate, parentAccountNumber: issConfig.parentAccountNumber, - referralCorrelationId: duplicate.referralCorrelationId + referralCorrelationId: duplicate.correlationId } }); const { data } = response; @@ -1374,8 +1374,8 @@ export const useMainStore = defineStore({ order.contactInfo.firstName = data?.customer?.firstName; order.contactInfo.lastName = data?.customer?.lastName; order.contactInfo.emailAddress = data?.customer?.emailAddress; - order.contactInfo.homePhone = data?.customer?.phoneNumber; - order.contactInfo.servicephone = data?.customer?.phoneNumber; + order.contactInfo.homePhone = data?.customer?.homePhone; + order.contactInfo.servicephone = data?.customer?.homePhone; order.contactInfo.requestTextUpdates = data?.customer?.isSmsOptIn; order.payment.insuranceCoverage.isVerified = data?.payment?.insuranceCoverage?.isVerified; diff --git a/src/store/store.spec.js b/src/store/store.spec.js index c575b1fa..666a924a 100644 --- a/src/store/store.spec.js +++ b/src/store/store.spec.js @@ -1149,7 +1149,7 @@ describe('Store', () => { expect(store.order.customer.firstName).toBe(customer.firstName); expect(store.order.customer.lastName).toBe(customer.lastName); expect(store.order.customer.emailAddress).toBe(customer.emailAddress); - expect(store.order.contactInfo.homePhone).toBe(customer.phoneNumber); + expect(store.order.contactInfo.homePhone).toBe(customer.homePhone); }); it('sets expected remaining order data', async () => { // Arrange From e361fae9efe9715cf8ddac37d4b18d23a5b948b4 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Mon, 22 Apr 2024 09:42:21 -0400 Subject: [PATCH 2/3] styling fixes --- src/layouts/order-confirmation/order-confirmation.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index 79742299..88b85dc8 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -47,6 +47,7 @@ v-html="appointmentWordingText2"> +
+