diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 9afd36c1f..ac96683f1 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -6,7 +6,7 @@ }}
-
+
{{groupName}}
@@ -52,7 +52,7 @@ export default { .button_question { height: calc(100vh - 280px); - .car_list { + .overflow-scroll { // Height will be determined by overall height of content above list height: calc(100% - 320px); -webkit-overflow-scrolling: touch; diff --git a/src/common-components/funnel-header/funnel-header.spec.js b/src/common-components/funnel-header/funnel-header.spec.js index cae21a179..ebb4a549c 100644 --- a/src/common-components/funnel-header/funnel-header.spec.js +++ b/src/common-components/funnel-header/funnel-header.spec.js @@ -7,13 +7,19 @@ describe("funnelHeader", () => { // Act const wrapper = shallowMount(funnelHeader, { - propsData: { + setData: { imageSrc: "image_url", }, }); + wrapper.vm.initializeComponent(cmsContent); // Assert expect(wrapper.find("img")).toBeTruthy(); wrapper.unmount(); }); }); + +//Mock CMS content +const cmsContent = { + imageSrc: 'image_url' +}; diff --git a/src/common-components/funnel-header/funnel-header.vue b/src/common-components/funnel-header/funnel-header.vue index 7b6c6efc6..f2934cb37 100644 --- a/src/common-components/funnel-header/funnel-header.vue +++ b/src/common-components/funnel-header/funnel-header.vue @@ -10,12 +10,15 @@ diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js index 40b50186b..c6d30a71b 100644 --- a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js +++ b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js @@ -2,16 +2,21 @@ import { shallowMount } from "@vue/test-utils"; import FunnelSubHeader from "./funnel-sub-header"; describe("FunnelSubHeader.vue", () => { - it("Should render the 'text' prop value as a span value for the header span text value.", () => { + it("Should render the 'text' data value as a span value for the header span text value.", async () => { // Act - const wrapper = shallowMount(FunnelSubHeader, { - propsData: { - text: "FunnelSubHeader Content", - }, + const wrapper = shallowMount(FunnelSubHeader); + await wrapper.setData ({ + text: "FunnelSubHeader Content", }); + wrapper.vm.initializeComponent(cmsContent); // Assert expect(wrapper.find("h5").text()).toContain("FunnelSubHeader Content"); wrapper.unmount(); }); }); + +//Mock CMS content +const cmsContent = { + HeaderText: 'FunnelSubHeader Content' +}; diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue index 3fd7ebc15..89e3f14a0 100644 --- a/src/common-components/funnel-sub-header/funnel-sub-header.vue +++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue @@ -8,9 +8,8 @@ - + @@ -20,15 +19,25 @@ import buttonBack from "@/ux-components/button-back/button-back"; export default { name: "FunnelSubHeader", + data() { + return { + text: '', + } + }, props: { - text: String, hasBackButton: Boolean, + backButtonUrl: String, backButtonAccessibleText: String, backButtonAction: Function, }, components: { buttonBack, - } + }, + methods: { + initializeComponent(cmsContent) { + this.text = cmsContent.HeaderText; + } + }, }; diff --git a/src/common-components/vehicle-banner/vehicle-banner.spec.js b/src/common-components/vehicle-banner/vehicle-banner.spec.js index 98bf90a5a..df471038e 100644 --- a/src/common-components/vehicle-banner/vehicle-banner.spec.js +++ b/src/common-components/vehicle-banner/vehicle-banner.spec.js @@ -2,18 +2,23 @@ import { shallowMount } from "@vue/test-utils"; import vehicleBanner from "./vehicle-banner"; describe("vehicleBanner", () => { - test("renders the blurrycar image", () => { + test("renders the blurrycar image", async () => { // Arrange // Act - const wrapper = shallowMount(vehicleBanner, { - propsData: { - vehicleImageSrc: "image_url", - }, + const wrapper = shallowMount(vehicleBanner); + await wrapper.setData ({ + vehicleImageSrc: "image_url", }); + wrapper.vm.initializeComponent(cmsContent); // Assert expect(wrapper.find("img").attributes("class")).toContain("blurrycar"); wrapper.unmount(); }); }); + +//Mock CMS content +const cmsContent = { + GenericVehicleImage: 'image_url' +}; \ No newline at end of file diff --git a/src/common-components/vehicle-banner/vehicle-banner.vue b/src/common-components/vehicle-banner/vehicle-banner.vue index 984657a47..652fbdae7 100644 --- a/src/common-components/vehicle-banner/vehicle-banner.vue +++ b/src/common-components/vehicle-banner/vehicle-banner.vue @@ -11,12 +11,15 @@ diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue index 765c7a542..1e5ac38c7 100644 --- a/src/layouts/vehicle-make/make-question/make-question.vue +++ b/src/layouts/vehicle-make/make-question/make-question.vue @@ -12,6 +12,7 @@ import buttonQuestion from "@/common-components/button-question/button-question" // Supporting files import store from "@/store"; import { storeActions } from "@/constants/store-actions.js"; +import baseMixin from "@/mixins/base-mixin.js"; export default { name: "make-question", @@ -30,7 +31,7 @@ export default { }, methods: { loadInitialData() { - return store.dispatch(storeActions.GET_VEHICLE_MAKES, {year: store.getters.vehicle.year}); + return baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_VEHICLE_MAKES, {year: store.getters.vehicle.year}); }, initializeComponent(cmsContent, initialData) { this.questionText = cmsContent.QuestionText; diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js index f8d841bea..f1625dd6e 100644 --- a/src/layouts/vehicle-make/vehicle-make.spec.js +++ b/src/layouts/vehicle-make/vehicle-make.spec.js @@ -2,6 +2,9 @@ import { shallowMount, flushPromises } from "@vue/test-utils"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue"; import makeQuestion from "@/layouts/vehicle-make/make-question/make-question"; +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 { settleAllPromises } from "@/helpers/layout-helper.js"; import { nextTick } from "vue"; @@ -33,18 +36,60 @@ describe("vehicle-make.vue", () => { }); describe("vehicle-make.vue", () => { - test("Page header is passed data from CMS", async (done) => { + test("Page header is initailized with api data", async (done) => { //Arrange - const { wrapper, apiPromise } = setupMocks( { funnelSubHeaderWidgetHeaderText: "Select a make to get started" }); + const pageHeaderWidgetHeaderText = "Select a make to get started"; + const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText }); //Act vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm)); //Assert - const header = await wrapper.find(".Header"); apiPromise.finally(() => { - expect(header.attributes("text")).toEqual("Select a make to get started"); + expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText); + done(); + }); + }); +}); + +describe("vehicle-make.vue", () => { + test("Page logo image is initailized with api data", async (done) => { + + //Arrange + const SiteHeaderWidget = { + LogoImage: + "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", + } + const { wrapper, apiPromise } = setupMocks( { SiteHeaderWidget: SiteHeaderWidget}); + + //Act + vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm)); + + //Assert + apiPromise.finally(() => { + expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget); + done(); + }); + }); +}); + +describe("vehicle-make.vue", () => { + test("Vehicle image is initailized with api data", async (done) => { + + //Arrange + const VehicleBannerWidget = { + GenericVehicleImage: + "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", + } + const { wrapper, apiPromise } = setupMocks( { VehicleBannerWidget: VehicleBannerWidget}); + + //Act + vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm)); + + //Assert + apiPromise.finally(() => { + expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget); done(); }); }); @@ -55,7 +100,7 @@ describe("vehicle-make.vue", () => { //Arrange const { wrapper, apiPromise } = setupMocks( { - funnelSubHeaderWidgetHeaderText: "Select a make to get started", + pageHeaderWidgetHeaderText: "Select a make to get started", mountOptionsMockData: { router: { navigate: jest.fn() @@ -79,14 +124,14 @@ describe("vehicle-make.vue", () => { function setupMocks({ radioQuestionCmsContent = {}, makeQuestionInitialData = {}, - funnelSubHeaderWidgetHeaderText = {}, + pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}, }) { //Mock api responses const apiResponses = { cmsContent: { - FunnelSubHeaderWidget: [{ HeaderText: funnelSubHeaderWidgetHeaderText }], + FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText], RadioQuestionWidget: [radioQuestionCmsContent], VehicleBannerWidget: [ { @@ -111,10 +156,25 @@ function setupMocks({ loadInitialData: jest.fn(), initializeComponent: jest.fn(), }; + funnelHeader.methods = { + initializeComponent: jest.fn(), + }; + vehicleBanner.methods = { + initializeComponent: jest.fn(), + }; + funnelSubHeader.methods = { + initializeComponent: jest.fn(), + }; const mountOptions = getMountOptions(mountOptionsMockData); const wrapper = shallowMount(vehicleMake, mountOptions); const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" }); makeQuestionWrapper.vm.initializeComponent = makeQuestion.methods.initializeComponent; + 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; return { wrapper, apiPromise }; } \ No newline at end of file diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue index f158b754a..10e6ff953 100644 --- a/src/layouts/vehicle-make/vehicle-make.vue +++ b/src/layouts/vehicle-make/vehicle-make.vue @@ -1,11 +1,11 @@