jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into CSR-241-add-prop

Browse source
This commit is contained in:
bmauger 2022-01-06 14:54:32 -05:00 committed by GitHub
commit c099e6c08d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 423 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
src/ux-components/button-back/button-back.spec.js → src/common-components/button-back/button-back.spec.js
View file

12
src/ux-components/button-back/button-back.vue → src/common-components/button-back/button-back.vue
View file

@ -1,7 +1,6 @@
<template>
<button
v-if="backButtonAction"
@click="backButtonAction"
@click="handleClick"
class="back-button-wrapper p-3"
:aria-label="backButtonAccessibleText"
>
@ -20,12 +19,13 @@ export default {
type: String,
required: true,
default: "",
},
backButtonAction: {
type: Function,
default: null,
}
},
methods: {
handleClick() {
this.$emit('click-event');
}
}
};
</script>

2
src/common-components/button-question/button-question.spec.js
View file

@ -13,7 +13,7 @@ describe("buttonQuestion.vue", () => {
wrapper.vm.chooseAnswer("2021");
// Assert
expect(wrapper.find(".needed_car_info-text").text()).toEqual(
expect(wrapper.find(".text-center").text()).toEqual(
"Question Text"
);
const buttonButtons = wrapper.findAllComponents('[data-test="button"]');

10
src/common-components/button-question/button-question.vue
View file

@ -1,12 +1,12 @@
<template>
<div class="button_question">
<div class="needed_car_info mt-6 mb-4 d-flex">
<span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
<div class="mt-6 mb-4 d-flex">
<span class="text-center fs-6 fw-bold w-100">{{
questionText
}}</span>
</div>
<div class="w-100 d-flex justify-content-center">
<fieldset class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
<fieldset class="overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
<legend class="sr-only">{{groupName}}</legend>
<listButton v-for="answer in answers" :key="answer"
:buttonID="answer"
@ -20,7 +20,7 @@
textPosition="text-start"
:isRequired="true"
:value="modelValue"
screenReaderOnlyText=" opens new window"
screenReaderOnlyText="(opens new window)"
/>
</fieldset>
</div>
@ -53,7 +53,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;

8
src/common-components/funnel-header/funnel-header.spec.js
View file

@ -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'
};

15
src/common-components/funnel-header/funnel-header.vue
View file

@ -10,12 +10,15 @@
<script>
export default {
name: "funnel-header",
props: {
imageSrc: {
type: String,
required: true,
default: "",
},
data() {
return {
imageSrc: '',
}
},
methods: {
initializeComponent(cmsContent) {
this.imageSrc = cmsContent.LogoImage;
}
},
};
</script>

15
src/common-components/funnel-sub-header/funnel-sub-header.spec.js
View file

@ -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'
};

28
src/common-components/funnel-sub-header/funnel-sub-header.vue
View file

@ -6,29 +6,41 @@
{{ text }}
</span>
<buttonBack
v-if="hasBackButton"
:backButtonAction="backButtonAction"
:backButtonAccessibleText="backButtonAccessibleText"
/>
v-if="hasBackButton"
:backButtonAccessibleText="backButtonAccessibleText"
@click-event="clickEvent"
/>
</h5>
</div>
</div>
</template>
<script>
import buttonBack from "@/ux-components/button-back/button-back";
import buttonBack from "@/common-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: {
clickEvent() {
this.$emit('click-event');
},
initializeComponent(cmsContent) {
this.text = cmsContent.HeaderText;
}
},
};
</script>

15
src/common-components/vehicle-banner/vehicle-banner.spec.js
View file

@ -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'
};

15
src/common-components/vehicle-banner/vehicle-banner.vue
View file

@ -11,12 +11,15 @@
<script>
export default {
name: "vehicle-banner",
props: {
vehicleImageSrc: {
type: String,
required: true,
default: "",
},
data() {
return {
vehicleImageSrc: '',
}
},
methods: {
initializeComponent(cmsContent) {
this.vehicleImageSrc = cmsContent.GenericVehicleImage;
}
},
};
</script>

2
src/layouts/component-test/component-test.vue
View file

@ -719,7 +719,7 @@
<script>
import buttonPrimary from "@/ux-components/button-primary/button-primary";
import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
import buttonBack from "@/ux-components/button-back/button-back";
import buttonBack from "@/common-components/button-back/button-back";
import listCard from "@/ux-components/list-card/list-card";
import listButton from "@/ux-components/list-button/list-button";
import alert from "@/ux-components/alert/alert";

3
src/layouts/vehicle-make/make-question/make-question.vue
View file

@ -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;

74
src/layouts/vehicle-make/vehicle-make.spec.js
View file

@ -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 };
}

21
src/layouts/vehicle-make/vehicle-make.vue
View file

@ -1,15 +1,15 @@
<template>
<div class="container-fluid shadow rounded-3 p-0">
<funnelHeader :imageSrc="funnelHeaderWidget.LogoImage" />
<funnelHeader ref="funnelHeader" />
<div class="select-car">
<div class="select-car-form rounded text-center">
<vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
<vehicleBanner ref="vehicleBanner" />
<funnelSubHeader
:text="funnelSubHeaderWidget.HeaderText"
ref="funnelSubHeader"
:hasBackButton="true"
backButtonAccessibleText="Change Vehicle Year"
:backButtonAction="backButtonAction"
class="Header"
@click-event="backButtonAction"
class="Header"
/>
<makeQuestion v-model="selectedMake" ref="makeQuestion" />
</div>
@ -30,9 +30,6 @@ export default {
name: "vehicle-make",
data() {
return {
funnelSubHeaderWidget: {},
funnelHeaderWidget: {},
vehicleBannerWidget: {},
selectedMake: null,
};
},
@ -58,16 +55,16 @@ export default {
settleAllPromises(promiseResultMap).then((resultMap) => {
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.funnelSubHeaderWidget = resultMap.cmsContent.FunnelSubHeaderWidget[0];
vm.funnelHeaderWidget = resultMap.cmsContent.FunnelHeaderWidget[0];
vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]);
vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]);
vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]);
vm.$refs.makeQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.makeQuestionInitialData);
});
});
},
methods: {
backButtonAction: function () {
backButtonAction() {
// route to move backwards
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
}

3
src/layouts/vehicle-model/model-question/model-question.vue
View file

@ -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: "model-question",
@ -30,7 +31,7 @@ export default {
},
methods: {
loadInitialData() {
return store.dispatch(storeActions.GET_VEHICLE_MODELS, {year: store.getters.vehicle.year, make: encodeURIComponent(store.getters.vehicle.make)});
return baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_VEHICLE_MODELS, {year: store.getters.vehicle.year, make: store.getters.vehicle.make});
},
initializeComponent(cmsContent, initialData) {
this.questionText = cmsContent.QuestionText;

103
src/layouts/vehicle-model/vehicle-model.spec.js
View file

@ -2,6 +2,9 @@ import { shallowMount, flushPromises } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import vehicleModel from "@/layouts/vehicle-model/vehicle-model.vue";
import modelQuestion from "@/layouts/vehicle-model/model-question/model-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,86 @@ describe("vehicle-model.vue", () => {
});
describe("vehicle-model.vue", () => {
test("Page header is passed data from CMS", async (done) => {
test("Page header is initailized with api data", async (done) => {
//Arange
const { wrapper, apiPromise } = setupMocks( { funnelSubHeaderWidgetHeaderText: "Select a model to get started" });
//Arrange
const pageHeaderWidgetHeaderText = "Select a model to get started";
const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });
//Act
vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
//Assert
const header = await wrapper.find(".Header");
apiPromise.finally(() => {
expect(header.attributes("text")).toEqual("Select a model to get started");
expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText);
done();
});
});
});
describe("vehicle-model.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
vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
//Assert
apiPromise.finally(() => {
expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
done();
});
});
});
describe("vehicle-model.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
vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
//Assert
apiPromise.finally(() => {
expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
done();
});
});
});
describe("vehicle-model.vue", () => {
test("BackButtonAction triggers a router.navigate change", async (done) => {
//Arrange
const { wrapper, apiPromise } = setupMocks( {
pageHeaderWidgetHeaderText: "Select a model to get started",
mountOptionsMockData: {
router: {
navigate: jest.fn()
},
},
});
//Act
vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
wrapper.vm.backButtonAction();
await nextTick();
//Assert
apiPromise.finally(() => {
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
done();
});
});
@ -53,13 +124,14 @@ describe("vehicle-model.vue", () => {
function setupMocks({
radioQuestionCmsContent = {},
modelQuestionInitialData = {},
funnelSubHeaderWidgetHeaderText = {},
pageHeaderWidgetHeaderText = {},
mountOptionsMockData = {},
}) {
//Mock api responses
const apiResponses = {
cmsContent: {
FunnelSubHeaderWidget: [{ HeaderText: funnelSubHeaderWidgetHeaderText }],
FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText],
RadioQuestionWidget: [radioQuestionCmsContent],
VehicleBannerWidget: [
{
@ -84,10 +156,25 @@ function setupMocks({
loadInitialData: jest.fn(),
initializeComponent: jest.fn(),
};
const mountOptions = getMountOptions({ });
funnelHeader.methods = {
initializeComponent: jest.fn(),
};
vehicleBanner.methods = {
initializeComponent: jest.fn(),
};
funnelSubHeader.methods = {
initializeComponent: jest.fn(),
};
const mountOptions = getMountOptions(mountOptionsMockData);
const wrapper = shallowMount(vehicleModel, mountOptions);
const modelQuestionWrapper = wrapper.findComponent({ name: "modelQuestion" });
modelQuestionWrapper.vm.initializeComponent = modelQuestion.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 };
}

19
src/layouts/vehicle-model/vehicle-model.vue
View file

@ -1,14 +1,14 @@
<template>
<div class="container-fluid shadow rounded-3 p-0">
<funnelHeader :imageSrc="funnelHeaderWidget.LogoImage" />
<funnelHeader ref="funnelHeader" />
<div class="select-car">
<div class="select-car-form rounded text-center">
<vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
<vehicleBanner ref="vehicleBanner" />
<funnelSubHeader
:text="funnelSubHeaderWidget.HeaderText"
ref="funnelSubHeader"
:hasBackButton="true"
backButtonAccessibleText="Change Vehicle Make"
:backButtonAction="backButtonAction"
@click-event="backButtonAction"
class="Header"
/>
<modelQuestion v-model="selectedModel" ref="modelQuestion" />
@ -30,9 +30,6 @@ export default {
name: "vehicle-model",
data() {
return {
funnelSubHeaderWidget: {},
funnelHeaderWidget: {},
vehicleBannerWidget: {},
selectedModel: null,
};
},
@ -58,16 +55,16 @@ export default {
settleAllPromises(promiseResultMap).then((resultMap) => {
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.funnelSubHeaderWidget = resultMap.cmsContent.FunnelSubHeaderWidget[0];
vm.funnelHeaderWidget = resultMap.cmsContent.FunnelHeaderWidget[0];
vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]);
vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]);
vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]);
vm.$refs.modelQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.modelQuestionInitialData);
});
});
},
methods: {
backButtonAction: function () {
backButtonAction() {
// route to move backwards
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
}

3
src/layouts/vehicle-style/style-question/style-question.vue
View file

@ -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: "style-question",
@ -30,7 +31,7 @@ export default {
},
methods: {
loadInitialData() {
return store.dispatch(storeActions.GET_VEHICLE_STYLES, {year: store.getters.vehicle.year, make: encodeURIComponent(store.getters.vehicle.make), model: encodeURIComponent(store.getters.vehicle.model)});
return baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_VEHICLE_STYLES, {year: store.getters.vehicle.year, make: store.getters.vehicle.make, model: store.getters.vehicle.model});
},
initializeComponent(cmsContent, initialData) {
this.questionText = cmsContent.QuestionText;

74
src/layouts/vehicle-style/vehicle-style.spec.js
View file

@ -1,6 +1,9 @@
import { shallowMount, flushPromises } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import vehicleStyle from "@/layouts/vehicle-style/vehicle-style.vue";
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 styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
import { settleAllPromises } from "@/helpers/layout-helper.js";
import { nextTick } from "vue";
@ -33,18 +36,60 @@ describe("vehicle-style.vue", () => {
});
describe("vehicle-style.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 style to get started" });
const pageHeaderWidgetHeaderText = "Select a style to get started";
const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });
//Act
vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
//Assert
const header = await wrapper.find(".Header");
apiPromise.finally(() => {
expect(header.attributes("text")).toEqual("Select a style to get started");
expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText);
done();
});
});
});
describe("vehicle-style.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
vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
//Assert
apiPromise.finally(() => {
expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
done();
});
});
});
describe("vehicle-style.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
vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
//Assert
apiPromise.finally(() => {
expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
done();
});
});
@ -55,7 +100,7 @@ describe("vehicle-style.vue", () => {
//Arrange
const { wrapper, apiPromise } = setupMocks( {
funnelSubHeaderWidgetHeaderText: "Select a style to get started",
pageHeaderWidgetHeaderText: "Select a style to get started",
mountOptionsMockData: {
router: {
navigate: jest.fn()
@ -79,14 +124,14 @@ describe("vehicle-style.vue", () => {
function setupMocks({
radioQuestionCmsContent = {},
styleQuestionInitialData = {},
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(vehicleStyle, mountOptions);
const styleQuestionWrapper = wrapper.findComponent({ name: "styleQuestion" });
styleQuestionWrapper.vm.initializeComponent = styleQuestion.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 };
}

19
src/layouts/vehicle-style/vehicle-style.vue
View file

@ -1,14 +1,14 @@
<template>
<div class="container-fluid shadow rounded-3 p-0">
<funnelHeader :imageSrc="funnelHeaderWidget.LogoImage" />
<funnelHeader ref="funnelHeader" />
<div class="select-car">
<div class="select-car-form rounded text-center">
<vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
<vehicleBanner ref="vehicleBanner" />
<funnelSubHeader
:text="funnelSubHeaderWidget.HeaderText"
ref="funnelSubHeader"
:hasBackButton="true"
backButtonAccessibleText="Change Vehicle Model"
:backButtonAction="backButtonAction"
@click-event="backButtonAction"
class="Header"
/>
<styleQuestion v-model="selectedStyle" ref="styleQuestion" />
@ -30,9 +30,6 @@ export default {
name: "vehicle-style",
data() {
return {
funnelSubHeaderWidget: {},
funnelHeaderWidget: {},
vehicleBannerWidget: {},
selectedStyle: null,
};
},
@ -58,16 +55,16 @@ export default {
settleAllPromises(promiseResultMap).then((resultMap) => {
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.funnelSubHeaderWidget = resultMap.cmsContent.FunnelSubHeaderWidget[0];
vm.funnelHeaderWidget = resultMap.cmsContent.FunnelHeaderWidget[0];
vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]);
vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]);
vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]);
vm.$refs.styleQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.styleQuestionInitialData);
});
});
},
methods: {
backButtonAction: function () {
backButtonAction() {
// route to move backwards
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
}

54
src/layouts/vehicle-year/vehicle-year.spec.js
View file

@ -2,6 +2,9 @@ import { shallowMount, flushPromises } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import vehicleYear from "@/layouts/vehicle-year/vehicle-year.vue";
import yearQuestion from "@/layouts/vehicle-year/year-question/year-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,42 @@ describe("vehicle-year.vue", () => {
});
describe("vehicle-year.vue", () => {
test("Page header is passed data from CMS", async (done) => {
test("Page logo image is initailized with api data", async (done) => {
//Arrange
const { wrapper, apiPromise } = setupMocks( { funnelSubHeaderWidgetHeaderText: "Select a year to get started" });
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
vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm));
//Assert
const header = await wrapper.find(".Header");
apiPromise.finally(() => {
expect(header.attributes("text")).toEqual("Select a year to get started");
expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
done();
});
});
});
describe("vehicle-year.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
vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm));
//Assert
apiPromise.finally(() => {
expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
done();
});
});
@ -53,14 +80,14 @@ describe("vehicle-year.vue", () => {
function setupMocks({
radioQuestionCmsContent = {},
yearQuestionInitialData = {},
funnelSubHeaderWidgetHeaderText = {},
pageHeaderWidgetHeaderText = {},
mountOptionsMockData = {},
}) {
//Mock api responses
const apiResponses = {
cmsContent: {
FunnelSubHeaderWidget: [{ HeaderText: funnelSubHeaderWidgetHeaderText }],
FunnelSubHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }],
RadioQuestionWidget: [radioQuestionCmsContent],
VehicleBannerWidget: [
{
@ -85,10 +112,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(vehicleYear, mountOptions);
const yearQuestionWrapper = wrapper.findComponent({ name: "yearQuestion" });
yearQuestionWrapper.vm.initializeComponent = yearQuestion.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 };
}

16
src/layouts/vehicle-year/vehicle-year.vue
View file

@ -1,12 +1,12 @@
<template>
<div class="container-fluid shadow rounded-3 p-0">
<funnelHeader :imageSrc="funnelHeaderWidget.LogoImage" />
<funnelHeader ref="funnelHeader" />
<div class="select-car">
<div class="select-car-form rounded text-center">
<vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
<vehicleBanner ref="vehicleBanner" />
<funnelSubHeader
:text="funnelSubHeaderWidget.HeaderText"
class="Header"
ref="funnelSubHeader"
/>
<yearQuestion v-model="selectedYear" ref="yearQuestion" />
</div>
@ -28,9 +28,6 @@ export default {
name: "vehicle-year",
data() {
return {
funnelSubHeaderWidget: {},
funnelHeaderWidget: {},
vehicleBannerWidget: {},
selectedYear: null,
};
},
@ -54,12 +51,11 @@ export default {
},
];
settleAllPromises(promiseResultMap).then((resultMap) => {
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.funnelSubHeaderWidget = resultMap.cmsContent.FunnelSubHeaderWidget[0];
vm.funnelHeaderWidget = resultMap.cmsContent.FunnelHeaderWidget[0];
vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]);
vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]);
vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]);
vm.$refs.yearQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.yearQuestionInitialData);
});
});

4
src/layouts/vehicle-year/year-question/year-question.vue
View file

@ -10,8 +10,8 @@
<script>
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: "year-question",
@ -30,7 +30,7 @@ export default {
},
methods: {
loadInitialData() {
return store.dispatch(storeActions.GET_VEHICLE_YEARS, {});
return baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_VEHICLE_YEARS, {});
},
initializeComponent(cmsContent, initialData) {
this.questionText = cmsContent.QuestionText;

12
src/mixins/base-mixin.js
View file

@ -1,3 +1,4 @@
import store from "@/store";
import { storeActions } from "@/constants/store-actions.js";
import { storeMutations } from "@/constants/store-mutations.js";
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
@ -9,20 +10,13 @@ export default {
};
},
methods: {
// dispatchBlockingStoreAction(type, payload) {
// // globalMethods.showWaitingModal(true);
// return this.dispatchNonBlockingStoreAction(type, payload).finally(() => {
// // globalMethods.showWaitingModal(false);
// });
// },
dispatchNonBlockingStoreAction(type, payload, encodePayload = false) {
dispatchNonBlockingStoreAction(type, payload, encodePayload = true) {
// Encode the payload if required
if (encodePayload) {
encodeUriData(payload);
}
return this.$store.dispatch(type, payload);
return store.dispatch(type, payload);
},
},
computed: {

19
src/mixins/base-mixin.spec.js
View file

@ -1,38 +1,37 @@
import baseMixin from "@/mixins/base-mixin";
import { storeActions } from "@/constants/store-actions.js";
import { widgetNames } from "@/constants/widget-names.js";
import store from "@/store";
describe("baseMixin.js", () => {
test("dispatchNonblockingStoreAction: calls dispatch with type and payload", () => {
const mixIn = getMixInInstance({});
const type = {};
const type = '';
const payload = {};
mixIn.methods.dispatchNonBlockingStoreAction(type, payload);
expect(mixIn.methods.$store.dispatch).toBeCalledWith(type, payload);
expect(store.dispatch).toBeCalledWith(type, payload);
});
test("dispatchNonblockingStoreAction: calls dispatch with type and payload, handles Uri encode", () => {
const mixIn = getMixInInstance({});
const type = {};
const type = '';
const payload = { make: "Alfa Romeo/Chrysler" };
mixIn.methods.dispatchNonBlockingStoreAction(type, payload, true);
expect(mixIn.methods.$store.dispatch).toBeCalledWith(type, payload);
expect(store.dispatch).toBeCalledWith(type, payload);
});
});
function getMixInInstance({ isDispatchSuccess = true }) {
// Mock Store
const store = {
dispatch: jest.fn(),
};
const storeDispatch = jest.fn();
if (isDispatchSuccess) {
store.dispatch.mockReturnValue(Promise.resolve());
storeDispatch.mockReturnValue(Promise.resolve());
} else {
store.dispatch.mockReturnValue(Promise.reject());
storeDispatch.mockReturnValue(Promise.reject());
}
// Mock Route
@ -45,7 +44,7 @@ function getMixInInstance({ isDispatchSuccess = true }) {
// Attach mocks to mixin
const baseMixIn = baseMixin;
baseMixIn.methods.$route = route;
baseMixIn.methods.$store = store;
store.dispatch = storeDispatch;
baseMixIn.methods.storeActions = storeActions;
baseMixIn.methods.widgetNames = widgetNames;

3
src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
View file

@ -10,6 +10,7 @@ describe("list-button.vue", () => {
groupName: "TestGroup",
loaderColor: "blue",
loaderPosition: "right",
loaderEnabled: "true",
sizeInRem: "1.5",
},
});
@ -19,7 +20,7 @@ describe("list-button.vue", () => {
const label = wrapper.find("label");
const paragraph = wrapper.find("span");
await label.trigger("click");
await input.trigger("click");
expect(input.attributes()).toEqual({
id: "2023",

13
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -10,8 +10,8 @@
</label>
</div>
<div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2">
<input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayLoader()"/>
<label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click="displayLoader()">
<input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="handleClick()" @click="handleClick()" />
<label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
<span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
@ -22,6 +22,7 @@
<script>
import loader from "@/ux-components/loader/loader";
export default {
name: "listButtonHorizontal",
props: {
@ -31,11 +32,13 @@ export default {
buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */
screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
loaderEnabled: Boolean, /* Optional, need to include this for loader to be used at all */
loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
totalInGroup: Number, /* Required, total number of buttons in group. Used to tell first and last in group to apply border radius. */
positionInGroup: Number /* Rquired, position of button in group. Example, 1,2,3 */
positionInGroup: Number, /* Required, position of button in group. Example, 1,2,3 */
isRequired: Boolean,
},
data() {
return {
@ -46,6 +49,9 @@ export default {
displayLoader() {
this.isLoaderDisplayed = true;
},
handleClick() {
this.loaderEnabled && this.displayLoader();
}
},
components: {
loader,
@ -63,6 +69,7 @@ export default {
},
};
</script>
<style lang="scss">
.list-button-horizontal {
input[type="radio"],

10
src/ux-components/list-card/list-card.vue
View file

@ -43,10 +43,10 @@ export default {
name: "listCard",
props: {
//Must choose one of the following four options
isMultiSelect: Boolean,//Defines use as checkbox
isRadio: Boolean,//Defines use as radio button
isMultiSelectHorizontal: Boolean,//Defines use as horizontal checkbox
isRadioHorizontal: Boolean,//Defines use as horizontal radio button
isMultiSelect: Boolean, //Defines use as checkbox
isRadio: Boolean, //Defines use as radio button
isMultiSelectHorizontal: Boolean, //Defines use as horizontal checkbox
isRadioHorizontal: Boolean, //Defines use as horizontal radio button
//end must choose
buttonImage: String,//Required: File name of image
buttonLabel: String,//Required: Label text
@ -54,7 +54,7 @@ export default {
altText: String,//Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
buttonID: String,//Required: Unique
groupName: String,//Required: Unique
buttonLabelSubCopy: String,//Optional: sub text
buttonLabelSubCopy: String,//Optional: sub tex
}
};
</script>