diff --git a/src/layouts/vin-lookup/vin-lookup.spec.js b/src/layouts/vin-lookup/vin-lookup.spec.js new file mode 100644 index 000000000..1db5c18a6 --- /dev/null +++ b/src/layouts/vin-lookup/vin-lookup.spec.js @@ -0,0 +1,167 @@ +// 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 new file mode 100644 index 000000000..8dbb6cdc9 --- /dev/null +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -0,0 +1,113 @@ + + + + + diff --git a/src/router/router-constants/fmgPage-values.js b/src/router/router-constants/fmgPage-values.js index 770c1f7b6..b648ae047 100644 --- a/src/router/router-constants/fmgPage-values.js +++ b/src/router/router-constants/fmgPage-values.js @@ -4,9 +4,10 @@ const fmgPageValues = { VEHICLE_MODEL: "vehicle-model", VEHICLE_STYLE: "vehicle-style", VEHICLE_DAMAGE: "vehicle-damage", + VIN_LOOKUP: "vin-lookup", VEHICLE_PARTS: "vehicle-parts", PART_QUESTIONS: "part-questions", REVEAL : "reveal", }; -export { fmgPageValues }; \ No newline at end of file +export { fmgPageValues }; diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index c9dc7ba4d..584796a61 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -84,6 +84,32 @@ const routingTable = [ }, ], }, + { + fmgPageValue: fmgPageValues.REVEAL, + maps: [ + { + scenario: navigationScenarios.CLICKED_BACK, + destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE, + }, + { + scenario: navigationScenarios.SELECTED_PARTS, + destinationFmgPageValue: fmgPageValues.VIN_LOOKUP, + }, + ], + }, + { + 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..53e977114 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -19,6 +19,21 @@ export const state = { imageUrl: null, imageVifNumber: null, imageColor: null, + registration: { + licensePlate: null, + address: null, + city: null, + state: null, + zipCode: null, + firstName: null, + lastName: null, + }, + }, + serviceLocation: { + zip: null, + }, + customer: { + emailAddress: null, }, damage: { isRepair: null, @@ -81,6 +96,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) { @@ -115,7 +157,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; @@ -288,4 +336,4 @@ export default createStore({ mutations, getters, actions, -}); \ No newline at end of file +}); diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss index 561b05b76..8425a3021 100644 --- a/src/styles/common-styles.scss +++ b/src/styles/common-styles.scss @@ -35,4 +35,3 @@ body { overflow: hidden; } } -// Hide horizontal scrollbar