From 2ffc311f22d01bf3b1cb3b36aa041d1b402901c3 Mon Sep 17 00:00:00 2001 From: bmauger Date: Fri, 11 Mar 2022 16:03:38 -0500 Subject: [PATCH 1/3] Update vin-lookup page. --- src/layouts/vin-lookup/vin-lookup.vue | 17 +++++++++ src/router/router-constants/routing-table.js | 13 +++++++ src/store/index.js | 38 +++++++++++++++++++- 3 files changed, 67 insertions(+), 1 deletion(-) diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index aa179439a..635f0aef5 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -33,6 +33,7 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { settleAllPromises } from "@/helpers/layout-helper"; import { storeActions } from "@/constants/store-actions"; import store from "@/store"; +import { storeMutations } from "@/constants/store-mutations"; import baseMixin from "@/mixins/base-mixin"; import { Form, defineRule } from "vee-validate"; import { required } from "@/helpers/validation-rules"; @@ -86,6 +87,22 @@ export default { arePagePrerequisitesValid() { return true; }, + resetDependentState() { + store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, null); + store.commit(storeMutations.UPDATE_REGISTRATION_CITY, null); + store.commit(storeMutations.UPDATE_REGISTRATION_STATE, null); + store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, null); + store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, null); + store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, null); + store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, null); + }, + backButtonAction() { + // route to move backwards + this.$router.navigate( + this.navigationScenarios.CLICKED_BACK, + this.$route + ); + }, }, components: { funnelHeader, diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index 3bd937c41..584796a61 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -97,6 +97,19 @@ const routingTable = [ }, ], }, + { + fmgPageValue: fmgPageValues.VIN_LOOKUP, + maps: [ + { + scenario: navigationScenarios.CLICKED_BACK, + destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE, + }, + { + scenario: navigationScenarios.VIN_LOOKUP, + destinationFmgPageValue: fmgPageValues.PART_QUESTIONS, + }, + ], + }, ]; export { routingTable }; diff --git a/src/store/index.js b/src/store/index.js index a00f550be..5ffdc168a 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -19,6 +19,15 @@ export const state = { imageUrl: null, imageVifNumber: null, imageColor: null, + registration: { + licensePlate: null, + address: null, + city: null, + state: null, + zipCode: null, + firstName: null, + lastName: null, + }, }, damage: { isRepair: null, @@ -81,6 +90,33 @@ export const mutations = { updatePageData(state, pageData){ state.applicationUser.pageData[pageData.page] = pageData.data; }, + updateRegistrationAddress(state, registrationAddress){ + state.order.vehicle.registration.address = registrationAddress; + }, + updateRegistrationCity(state, registrationCity){ + state.order.vehicle.registration.city = registrationCity; + }, + updateRegistrationState(state, registrationState){ + state.order.vehicle.registration.state = registrationState; + }, + updateRegistrationZipCode(state, registrationZipCode){ + state.order.vehicle.registration.zipCode = registrationZipCode; + }, + updateRegistrationFirstName(state, registrationFirstName){ + state.order.vehicle.registration.firstName = registrationFirstName; + }, + updateRegistrationLastName(state, registrationLastName){ + state.order.vehicle.registration.lastName = registrationLastName; + }, + updateRegistrationLicensePlate(state, registrationLicensePlate){ + state.order.vehicle.registration.licensePlate = registrationLicensePlate; + }, + updateServiceLocationZip(state, ServiceLocationZip){ + state.order.vehicle.serviceLocation.zip = ServiceLocationZip; + }, + updateCustomerEmailAddress(state, CustomerEmailAddress){ + state.order.vehicle.customer.emailAddress = CustomerEmailAddress; + }, // EVENT BUS MUTATIONS addEventToBus(state, event) { @@ -288,4 +324,4 @@ export default createStore({ mutations, getters, actions, -}); \ No newline at end of file +}); From 21597f3f750114806856fe23afa32fffa34cb4e7 Mon Sep 17 00:00:00 2001 From: bmauger Date: Fri, 11 Mar 2022 16:12:21 -0500 Subject: [PATCH 2/3] Change to camelCase. --- src/store/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/store/index.js b/src/store/index.js index 5ffdc168a..2eead09e1 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -112,10 +112,10 @@ export const mutations = { state.order.vehicle.registration.licensePlate = registrationLicensePlate; }, updateServiceLocationZip(state, ServiceLocationZip){ - state.order.vehicle.serviceLocation.zip = ServiceLocationZip; + state.order.vehicle.serviceLocation.zip = serviceLocationZip; }, updateCustomerEmailAddress(state, CustomerEmailAddress){ - state.order.vehicle.customer.emailAddress = CustomerEmailAddress; + state.order.vehicle.customer.emailAddress = customerEmailAddress; }, // EVENT BUS MUTATIONS From 4a32ca1f981ffb14af7f4cf128348cc51e0ff5d8 Mon Sep 17 00:00:00 2001 From: bmauger Date: Mon, 14 Mar 2022 13:55:46 -0400 Subject: [PATCH 3/3] Update unit test. --- src/layouts/vin-lookup/vin-lookup.spec.js | 168 +++++++++++++++++++++- src/layouts/vin-lookup/vin-lookup.vue | 26 ++-- src/store/index.js | 8 +- 3 files changed, 184 insertions(+), 18 deletions(-) diff --git a/src/layouts/vin-lookup/vin-lookup.spec.js b/src/layouts/vin-lookup/vin-lookup.spec.js index 3d0843e10..1db5c18a6 100644 --- a/src/layouts/vin-lookup/vin-lookup.spec.js +++ b/src/layouts/vin-lookup/vin-lookup.spec.js @@ -1 +1,167 @@ -test.todo("some test to be written in the future"); +// Components +import vinLookup from "@/layouts/vin-lookup/vin-lookup.vue"; +import vehicleDamage from "@/layouts/vehicle-damage/vehicle-damage.vue"; +import funnelHeader from "@/common-components/funnel-header/funnel-header"; +import funnelFooter from "@/common-components/funnel-footer/funnel-footer"; +import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner"; +import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header"; +import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options"; +import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question"; +import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options"; +import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question"; + +// Supporting Files +import { settleAllPromises } from "@/helpers/layout-helper.js"; +import baseMixin from "@/mixins/base-mixin"; +import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; +import { mount, flushPromises } from "@vue/test-utils"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import { nextTick } from "vue"; +import { storeActions } from "@/constants/store-actions"; +import { storeMutations } from "@/constants/store-mutations"; +import store from "@/store"; +import { validate } from "vee-validate"; +import { damageLocationsSelected } from "@/constants/damage-locations-selected.js"; + +// Mock our module for promises. +jest.mock("@/helpers/layout-helper.js", () => ({ + settleAllPromises: jest.fn(), +})); + +// Mock fetchCmsContentForPage +jest.mock("@/helpers/cms-content-helper", () => ({ + fetchCmsContentForPage: jest.fn(), +})); + +// Mock Store +jest.mock("@/store", () => ({ + commit: jest.fn(), + dispatch: jest.fn(), + getters: { + vehicle: { + carId: "C00000000", + image: "test.jpg", + }, + eventBusItem: jest.fn(), + damage: { + glassToReplace: [] + }, + }, +})); + +describe("vin-lookup.vue", () => { + + test("Call resetDependentState", async() => { + const {wrapper} = setupMocks({}); + wrapper.vm.resetDependentState(); + expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES); + }); + +}); + +// TEMP +function setupMocks({ + pageHeaderWidgetHeaderText = {}, + mountOptionsMockData = { + router: { + navigate: jest.fn(), + }, + store: { + getters: { + vehicle: {}, + }, + }, + }, +}) { + //Mock api responses + baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn(); + const apiResponses = { + cmsContent: { + FunnelSubHeaderWidget: pageHeaderWidgetHeaderText, + VehicleBannerWidget: { + GenericVehicleImage: + "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", + }, + FunnelHeaderWidget: { + LogoImage: + "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", + }, + }, + damageOptions: { + driverSideOptions: { + availableReplacementOptions: ["Front", "Back", "Side"], + }, + passengerSideOptions: { + availableReplacementOptions: ["Front", "Back", "Side"], + }, + windshieldOptions: { + availableReplacementOptions: ["Single", "Driver", "Passenger"], + }, + backGlassOptions: { + availableReplacementOptions: ["Front", "Back", "Side"], + }, + }, + }; + + const apiPromise = Promise.resolve(apiResponses); + + settleAllPromises.mockImplementation(() => apiPromise); + fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); + + //Mock damage initialize methods + funnelHeader.methods = { + initializeComponent: jest.fn(), + }; + + vehicleBanner.methods = { + initializeComponent: jest.fn(), + }; + + funnelSubHeader.methods = { + initializeComponent: jest.fn(), + }; + + damageLocationQuestion.methods = { + initializeComponent: jest.fn(), + }; + + sideDoorOptions.methods = { + initializeComponent: jest.fn(), + }; + + windshieldOptions.methods = { + initializeComponent: jest.fn(), + }; + + replaceOptionsQuestion.methods = { + initializeComponent: jest.fn(), + updateSelectedValues: jest.fn(), + }; + + funnelFooter.methods = { + initializeComponent: jest.fn(), + } + + const mountOptions = getMountOptions(mountOptionsMockData); + mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods + + const wrapper = mount(vinLookup, mountOptions); + + const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" }); + funnelHeaderWrapper.vm.initializeComponent = + funnelHeader.methods.initializeComponent; + + const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" }); + vehicleBannerWrapper.vm.initializeComponent = + vehicleBanner.methods.initializeComponent; + + const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" }); + funnelSubHeaderWrapper.vm.initializeComponent = + funnelSubHeader.methods.initializeComponent; + + const funnelFooterWrapper = wrapper.findComponent({ name: "funnelFooter" }); + funnelFooterWrapper.vm.initializeComponent = + funnelFooter.methods.initializeComponent; + + return { wrapper, apiPromise }; +} diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index 635f0aef5..8dbb6cdc9 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -5,17 +5,17 @@

VIN Lookup Placeholder Page

@@ -88,13 +88,7 @@ export default { return true; }, resetDependentState() { - store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, null); - store.commit(storeMutations.UPDATE_REGISTRATION_CITY, null); - store.commit(storeMutations.UPDATE_REGISTRATION_STATE, null); - store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, null); - store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, null); - store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, null); - store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, null); + store.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES); }, backButtonAction() { // route to move backwards diff --git a/src/store/index.js b/src/store/index.js index 2eead09e1..65e5a06c7 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -151,7 +151,13 @@ export const mutations = { state.order.damage.glassToReplace = null; }, resetRegistrationState(state) { - + state.order.vehicle.registration.licensePlate = null; + state.order.vehicle.registration.address = null; + state.order.vehicle.registration.city = null; + state.order.vehicle.registration.state = null; + state.order.vehicle.registration.zipCode = null; + state.order.vehicle.registration.firstName = null; + state.order.vehicle.registration.lastName = null; }, resetPartsState(state) { state.order.lineItems.glassParts = null;