diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue index 10ecb77d4..4d9a47ee6 100644 --- a/src/common-components/funnel-footer/funnel-footer.vue +++ b/src/common-components/funnel-footer/funnel-footer.vue @@ -14,7 +14,7 @@ -
+
{ it("Should return input class active if isActive is true", async () => { diff --git a/src/common-components/vin-information/vin-information.vue b/src/layouts/vin-lookup/vin-information/vin-information.vue similarity index 100% rename from src/common-components/vin-information/vin-information.vue rename to src/layouts/vin-lookup/vin-information/vin-information.vue 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 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, }, }; diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss index 952760caf..323430dfe 100644 --- a/src/styles/common-error-styles.scss +++ b/src/styles/common-error-styles.scss @@ -4,7 +4,7 @@ border: 1px solid $red; color: $red; label { - box-shadow: 0 0 1px $red; + box-shadow: 0 0 1px $red !important; border-radius: .5rem; } input[type=checkbox]:focus + label, @@ -24,7 +24,7 @@ } input[type=checkbox]:focus + label, input[type=radio]:focus + label { - box-shadow: 0 0 0 2.5px $red; + box-shadow: 0 0 1px $red !important; } } &.ui-radio, diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue index 81aa91928..84ed98a1a 100644 --- a/src/ux-components/button-main/button-main.vue +++ b/src/ux-components/button-main/button-main.vue @@ -59,11 +59,7 @@ export default { justify-content: center; font-weight: 500; @media (hover: hover) { - background: linear-gradient( - 270deg, - rgba(6, 87, 124, 1) 0%, - rgba(6, 87, 124, 1) 100% - ); + background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%); } &:focus, // Mouse, touch, stylus focus &:focus-visible {