diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue index 44afa5364..cb83ecae1 100644 --- a/src/common-components/funnel-footer/funnel-footer.vue +++ b/src/common-components/funnel-footer/funnel-footer.vue @@ -14,7 +14,7 @@ -
+
({ - 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 8dbb6cdc9..fc9058abf 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -1,23 +1,17 @@ @@ -27,83 +21,17 @@ import funnelHeader from "@/common-components/funnel-header/funnel-header"; import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner"; import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header"; import funnelFooter from "@/common-components/funnel-footer/funnel-footer"; - -// 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)); +import textboxQuestion from "@/common-components/textbox-question/textbox-question"; +import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information"; 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 - ); - }, - }, components: { funnelHeader, vehicleBanner, funnelSubHeader, + vinInformation, funnelFooter, - Form, }, };