diff --git a/src/layouts/vin-lookup/vin-lookup.spec.js b/src/layouts/vin-lookup/vin-lookup.spec.js index 1db5c18a6..3d0843e10 100644 --- a/src/layouts/vin-lookup/vin-lookup.spec.js +++ b/src/layouts/vin-lookup/vin-lookup.spec.js @@ -1,167 +1 @@ -// 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 }; -} +test.todo("some test to be written in the future"); diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index 2bc8a88e8..fc9058abf 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -3,41 +3,15 @@ -
- - - - @@ -50,134 +24,14 @@ import funnelFooter from "@/common-components/funnel-footer/funnel-footer"; import textboxQuestion from "@/common-components/textbox-question/textbox-question"; import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information"; -// Supporting files -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"; -import { errorMessages } from "@/constants/error-messages"; - -// DEFINE VALIDATION RULES -defineRule("replace-options-required", required(errorMessages.REPLACE_OPTIONS_REQUIRED)); - export default { name: "vin-lookup", - async beforeRouteEnter(to, from, next) { - // Call APIs - const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); - const damageOptionsPromise = - baseMixin.methods.dispatchNonBlockingStoreAction( - storeActions.GET_DAMAGE_OPTIONS, - { carId: store.getters.vehicle.carId } - ); - - // Settle promises and get results - const promiseResultMap = [ - { - resultKey: "cmsContent", - promise: cmsContentPromise, - }, - { - resultKey: "damageOptions", - promise: damageOptionsPromise, - }, - ]; - - const resultMap = await settleAllPromises(promiseResultMap); - - // Call the "next" function to complete the transition to this page. - next((vm) => { - vm.$refs.funnelHeader.initializeComponent( - resultMap.cmsContent.FunnelHeaderWidget - ); - vm.$refs.vehicleBanner.initializeComponent( - resultMap.cmsContent.VehicleBannerWidget - ); - vm.$refs.funnelSubHeader.initializeComponent( - resultMap.cmsContent.FunnelSubHeaderWidget - ); - vm.$refs.funnelFooter.initializeComponent( - resultMap.cmsContent.FunnelFooterWidget - ); - }); - }, - methods: { - arePagePrerequisitesValid() { - return true; - }, - resetDependentState() { - store.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES); - }, - backButtonAction() { - // route to move backwards - this.$router.navigate( - this.navigationScenarios.CLICKED_BACK, - this.$route - ); - }, - async forwardButtonAction(zip, plate) { - const zipValidation = await this.validateZip(zip); - const vinLookup = await this.lookupVin(plate); - if (!zipValidation.isServiceable) { - this.newServiceZipRequired = true; - return; - } - if (!vinLookup.vin) { - this.vinNotValid = true; - return; - } - if (vinLookup.vehicle.carId !== store.getters.vehicle.carId) { - this.vinDoesNotMatchCarId = true; - return; - } - const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction( - this.storeActions.GET_PARTS_OR_QUESTIONS, - { - carId: store.getters.vehicle.carId, - glassArray: store.getters.damage.glassToReplace, - zipCode: zip, - vin: vinLookup.vin - }, - false - ); - this.navigateForward(partsData); - }, - navigateForward(partsData){ - if(partsData.data.partsOrQuestions.partQuestions.length){ - this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_PARTS_QUESTION, this.$route, {}, {}, partsData.data); - return; - } else if(!partsData.data.partsOrQuestions.partQuestions.length && partsData.data.partsOrQuestions.parts.length > 1) { - this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_PARTS, this.$route, {}, {}, partsData.data); - return; - } else { - this.$router.navigate(this.navigationScenarios.CONTINUING_WITH_SINGLE_PART, this.$route); - } - }, - validateZip(zip) { - return baseMixin.methods.dispatchNonBlockingStoreAction( - storeActions.VALIDATE_ZIP, - { zip } - ); - }, - lookupVin(plate, state) { - return baseMixin.methods.dispatchNonBlockingStoreAction( - storeActions.LOOKUP_VIN_BY_PLATE, - { plate, state } - ); - }, - }, components: { funnelHeader, vehicleBanner, funnelSubHeader, - textboxQuestion, vinInformation, funnelFooter, - Form, }, };