Merge branch 'develop' into feature/CSR-242
This commit is contained in:
Frank
commit
cfa666cf9c
35 changed files with 1176 additions and 171 deletions
|
|
@ -16,7 +16,7 @@ module.exports = {
|
|||
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
|
||||
coverageThreshold: {
|
||||
global: {
|
||||
statements: 80,
|
||||
statements: 85,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@
|
|||
<legend class="sr-only">{{groupName}}</legend>
|
||||
<listButton v-for="answer in answers" :key="answer"
|
||||
:buttonID="answer"
|
||||
@click="chooseAnswer(answer)"
|
||||
@mouseup="chooseAnswer(answer)"
|
||||
@keyup.space="chooseAnswer(answer)"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1.5"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import siteHeader from "./site-header";
|
||||
import funnelHeader from "./funnel-header";
|
||||
|
||||
describe("siteHeader", () => {
|
||||
describe("funnelHeader", () => {
|
||||
test("renders the logo image", () => {
|
||||
// Arrange
|
||||
|
||||
// Act
|
||||
const wrapper = shallowMount(siteHeader, {
|
||||
const wrapper = shallowMount(funnelHeader, {
|
||||
propsData: {
|
||||
imageSrc: "image_url",
|
||||
},
|
||||
|
|
@ -9,11 +9,12 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: "site-header",
|
||||
name: "funnel-header",
|
||||
props: {
|
||||
imageSrc: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
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.", () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(FunnelSubHeader, {
|
||||
propsData: {
|
||||
text: "FunnelSubHeader Content",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
expect(wrapper.find("h2").text()).toContain("FunnelSubHeader Content");
|
||||
wrapper.unmount();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<div class="current_car_info-text">
|
||||
<div class="d-flex align-items-center justify-content-center container-fluid">
|
||||
<h2 class="text-center fs-5 d-block fw-normal mb-0">
|
||||
<span>
|
||||
{{ text }}
|
||||
</span>
|
||||
<buttonBack
|
||||
v-if="hasBackButton"
|
||||
:backButtonAction="backButtonAction"
|
||||
/>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonBack from "@/ux-components/button-back/button-back";
|
||||
|
||||
export default {
|
||||
name: "FunnelSubHeader",
|
||||
props: {
|
||||
text: String,
|
||||
hasBackButton: Boolean,
|
||||
backButtonUrl: String,
|
||||
backButtonAccessibleText: String,
|
||||
backButtonAction: Function,
|
||||
},
|
||||
components: {
|
||||
buttonBack,
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
h2 {
|
||||
color: $gray-550;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
.back-button-wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -15,6 +15,7 @@ export default {
|
|||
vehicleImageSrc: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
const storeMutations = {
|
||||
UPDATE_YEAR: "updateYear",
|
||||
UPDATE_MAKE: "updateMake",
|
||||
UPDATE_MODEL: "updateModel",
|
||||
UPDATE_STYLE: "updateStyle",
|
||||
};
|
||||
|
||||
export { storeMutations };
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { storeActions } from "@/constants/store-actions";
|
||||
import { storeMutations } from "@/constants/store-mutations.js";
|
||||
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios.js";
|
||||
|
||||
export function getMountOptions(mockData) {
|
||||
// Define our mocks to attached to the 'global' object for Vue/Jest.
|
||||
|
|
@ -21,6 +22,7 @@ export function getMountOptions(mockData) {
|
|||
// Mock const files
|
||||
mocks.storeActions = storeActions;
|
||||
mocks.storeMutations = storeMutations;
|
||||
mocks.navigationScenarios = navigationScenarios;
|
||||
|
||||
// Mock $store and $router when accessing this.$store/$router
|
||||
mocks.$store = mockData.store;
|
||||
|
|
|
|||
|
|
@ -2,31 +2,18 @@
|
|||
<div class="container-fluid container-shadow p-2 rounded-3">
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">List Card</h4>
|
||||
<h4 class="m-0 p-2 bg-light rounded">Inputs</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-2">
|
||||
<listCard
|
||||
buttonLabel="Windshield"
|
||||
buttonImage="windshield-damage.svg"
|
||||
altText="Windshield"
|
||||
groupName="damageKey"
|
||||
buttonID="windshield"
|
||||
/>
|
||||
<listCard
|
||||
buttonLabel="Side Window"
|
||||
buttonImage="side-window-damage.svg"
|
||||
altText="Side Window"
|
||||
groupName="damageKey"
|
||||
buttonID="sidewindow"
|
||||
/>
|
||||
<listCard
|
||||
buttonLabel="Back Glass"
|
||||
buttonImage="back-glass-damage.svg"
|
||||
altText="Back Glass"
|
||||
groupName="damageKey"
|
||||
buttonID="backglass"
|
||||
/>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<checkbox
|
||||
checkboxName="demo checkbox"
|
||||
buttonID="checkbox-1"
|
||||
tabIndex="1"
|
||||
checkboxLabel="I'm a checkbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
|
|
@ -52,7 +39,30 @@
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<buttonBack/>
|
||||
<buttonBack
|
||||
backButtonUrl="#"
|
||||
backButtonAccessibleText="Back button label"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">List Card</h4>
|
||||
<h6 class="mx-2 my-0">Functioning as Checkbox</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-2">
|
||||
<div class="col">
|
||||
<fieldset>
|
||||
<legend class="sr-only">List Card Demo</legend>
|
||||
<listCard
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText="Windshield"
|
||||
buttonID="Damage Location"
|
||||
groupID="checkbox-demo-1"
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
|
|
@ -69,7 +79,7 @@
|
|||
Select Vehicle Year
|
||||
</h3>
|
||||
<listButton
|
||||
isCheckbox
|
||||
isMultiSelect
|
||||
groupName="demo-1"
|
||||
ariaLabelBy="vehicle-year"
|
||||
buttonID="2021"
|
||||
|
|
@ -81,7 +91,7 @@
|
|||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButton
|
||||
isCheckbox
|
||||
isMultiSelect
|
||||
groupName="demo-1"
|
||||
ariaLabelBy="vehicle-year"
|
||||
buttonID="2020"
|
||||
|
|
@ -93,7 +103,7 @@
|
|||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButton
|
||||
isCheckbox
|
||||
isMultiSelect
|
||||
groupName="demo-1"
|
||||
ariaLabelBy="vehicle-year"
|
||||
buttonID="2019"
|
||||
|
|
@ -159,7 +169,7 @@
|
|||
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
|
||||
<h3 class="sr-only" id="demo-2-radio-group">Select Vehicle Year</h3>
|
||||
<listButton
|
||||
isCheckbox
|
||||
isMultiSelect
|
||||
groupName="demo-2"
|
||||
ariaLabelBy="vehicle-make"
|
||||
buttonID="Chevrolet"
|
||||
|
|
@ -171,7 +181,7 @@
|
|||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButton
|
||||
isCheckbox
|
||||
isMultiSelect
|
||||
groupName="demo-2"
|
||||
ariaLabelBy="vehicle-make"
|
||||
buttonID="Dodge"
|
||||
|
|
@ -183,7 +193,7 @@
|
|||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButton
|
||||
isCheckbox
|
||||
isMultiSelect
|
||||
groupName="demo-2"
|
||||
ariaLabelBy="vehicle-make"
|
||||
buttonID="Ford"
|
||||
|
|
@ -249,7 +259,7 @@
|
|||
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
|
||||
<h3 class="sr-only" id="demo-3-radio-group">Multi-Line Centered</h3>
|
||||
<listButton
|
||||
isCheckbox
|
||||
isMultiSelect
|
||||
groupName="demo-3"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="Corvette"
|
||||
|
|
@ -261,7 +271,7 @@
|
|||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButton
|
||||
isCheckbox
|
||||
isMultiSelect
|
||||
groupName="demo-3"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="Testarosa"
|
||||
|
|
@ -273,7 +283,7 @@
|
|||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButton
|
||||
isCheckbox
|
||||
isMultiSelect
|
||||
groupName="demo-3"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="S600"
|
||||
|
|
@ -341,7 +351,7 @@
|
|||
Select Vehicle Year
|
||||
</h3>
|
||||
<listButtonHorizontal
|
||||
isCheckbox
|
||||
isMultiSelect
|
||||
groupName="demo-4"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="1"
|
||||
|
|
@ -355,7 +365,7 @@
|
|||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButtonHorizontal
|
||||
isCheckbox
|
||||
isMultiSelect
|
||||
groupName="demo-4"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="2"
|
||||
|
|
@ -369,7 +379,7 @@
|
|||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButtonHorizontal
|
||||
isCheckbox
|
||||
isMultiSelect
|
||||
groupName="demo-4"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="3"
|
||||
|
|
@ -566,7 +576,7 @@
|
|||
</div>
|
||||
<div class="row my-3">
|
||||
<div class="col">
|
||||
<siteHeader
|
||||
<funnelHeader
|
||||
imageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -594,8 +604,9 @@ 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";
|
||||
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
|
||||
import siteHeader from "@/common-components/site-header/site-header";
|
||||
import funnelHeader from "@/common-components/funnel-header/funnel-header";
|
||||
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
|
||||
import checkbox from "@/ux-components/checkbox/checkbox";
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
|
|
@ -607,7 +618,8 @@ export default {
|
|||
alert,
|
||||
vehicleBanner,
|
||||
listButtonHorizontal,
|
||||
siteHeader,
|
||||
checkbox,
|
||||
funnelHeader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ jest.mock("@/helpers/layout-helper.js", () => ({
|
|||
describe("vehicle-make.vue", () => {
|
||||
test("Make question component is initized with api data", async (done) => {
|
||||
|
||||
//Arange
|
||||
//Arrange
|
||||
const radioQuestionCmsContent = { QuestionText: "What make is your vehicle?" };
|
||||
const makeQuestionInitialData = ["honda", "ford", "dodge"];
|
||||
const { wrapper, apiPromise } = setupMocks( {
|
||||
|
|
@ -35,7 +35,7 @@ describe("vehicle-make.vue", () => {
|
|||
describe("vehicle-make.vue", () => {
|
||||
test("Page header is passed data from CMS", async (done) => {
|
||||
|
||||
//Arange
|
||||
//Arrange
|
||||
const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a make to get started" });
|
||||
|
||||
//Act
|
||||
|
|
@ -50,10 +50,37 @@ describe("vehicle-make.vue", () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe("vehicle-make.vue", () => {
|
||||
test("BackButtonAction triggers a router.navigate change", async (done) => {
|
||||
|
||||
//Arrange
|
||||
const { wrapper, apiPromise } = setupMocks( {
|
||||
pageHeaderWidgetHeaderText: "Select a make to get started",
|
||||
mountOptionsMockData: {
|
||||
router: {
|
||||
navigate: jest.fn()
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
//Act
|
||||
vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
|
||||
wrapper.vm.backButtonAction();
|
||||
await nextTick();
|
||||
|
||||
//Assert
|
||||
apiPromise.finally(() => {
|
||||
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function setupMocks({
|
||||
radioQuestionCmsContent = {},
|
||||
makeQuestionInitialData = {},
|
||||
pageHeaderWidgetHeaderText = {},
|
||||
mountOptionsMockData = {},
|
||||
}) {
|
||||
|
||||
//Mock api responses
|
||||
|
|
@ -84,7 +111,7 @@ function setupMocks({
|
|||
loadInitialData: jest.fn(),
|
||||
initializeComponent: jest.fn(),
|
||||
};
|
||||
const mountOptions = getMountOptions({ });
|
||||
const mountOptions = getMountOptions(mountOptionsMockData);
|
||||
const wrapper = shallowMount(vehicleMake, mountOptions);
|
||||
const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" });
|
||||
makeQuestionWrapper.vm.initializeComponent = makeQuestion.methods.initializeComponent;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,16 @@
|
|||
<template>
|
||||
<div class="container-fluid shadow rounded-3 p-0">
|
||||
<siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
|
||||
<funnelHeader :imageSrc="siteHeaderWidget.LogoImage" />
|
||||
<div class="select-car">
|
||||
<div class="select-car-form rounded text-center">
|
||||
<vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
|
||||
<pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
|
||||
<funnelSubHeader
|
||||
:text="pageHeaderWidgets.HeaderText"
|
||||
:hasBackButton="true"
|
||||
backButtonAccessibleText="Change Vehicle Year"
|
||||
:backButtonAction="backButtonAction"
|
||||
class="Header"
|
||||
/>
|
||||
<makeQuestion v-model="selectedMake" ref="makeQuestion" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -14,9 +20,9 @@
|
|||
<script>
|
||||
// Components
|
||||
import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
|
||||
import pageHeader from "@/ux-components/header/header";
|
||||
import siteHeader from "@/common-components/site-header/site-header";
|
||||
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";
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
|
|
@ -60,6 +66,13 @@ export default {
|
|||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
backButtonAction: function () {
|
||||
// route to move backwards
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
selectedMake(make) {
|
||||
this.$store.commit(this.storeMutations.UPDATE_MAKE, make);
|
||||
|
|
@ -69,9 +82,9 @@ export default {
|
|||
|
||||
components: {
|
||||
makeQuestion,
|
||||
pageHeader,
|
||||
siteHeader,
|
||||
funnelHeader,
|
||||
vehicleBanner,
|
||||
funnelSubHeader,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,82 @@
|
|||
import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
|
||||
import { shallowMount } from "@vue/test-utils";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
import store from "@/store";
|
||||
jest.mock("@/store", () => { return {}; }, {virtual: true});
|
||||
|
||||
describe("model-question.vue", () => {
|
||||
test("Selected model is emitted upon selection.", async () => {
|
||||
|
||||
//Arrange
|
||||
const { wrapper } = setupMocks({ modelValueProp: "Accord" });
|
||||
const modelToSelect = "Civic";
|
||||
|
||||
//Act
|
||||
wrapper.setData({ selectedModel: modelToSelect });
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
//Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["Civic"]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("model-question.vue", () => {
|
||||
test("CMS question text is used as radio question text.", async () => {
|
||||
|
||||
//Arrange
|
||||
const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What model is your vehicle?" });
|
||||
|
||||
//Act
|
||||
modelQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
|
||||
|
||||
//Assert
|
||||
const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
|
||||
expect(buttonQuestionComponent.attributes("questiontext")).toBe("What model is your vehicle?");
|
||||
});
|
||||
});
|
||||
|
||||
describe("model-question.vue", () => {
|
||||
test("Data from store api are used as radio question answers.", async () => {
|
||||
|
||||
//Arrange
|
||||
const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["accord", "civic", "insight"] });
|
||||
|
||||
//Act
|
||||
const initialData = modelQuestion.methods.loadInitialData.call(wrapper.vm);
|
||||
modelQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
|
||||
|
||||
//Assert
|
||||
const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
|
||||
expect(buttonQuestionComponent.attributes("answers")).toBe("accord,civic,insight");
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function setupMocks({
|
||||
modelValueProp = "1900",
|
||||
cmsQuestionText = "CMS text goes here",
|
||||
dataFromStoreApi = [],
|
||||
}) {
|
||||
|
||||
//Mock store
|
||||
store.dispatch = jest.fn(() => dataFromStoreApi);
|
||||
store.getters = { vehicle: {year: 2019, make: 'honda'} };
|
||||
const mountOptions = getMountOptions({
|
||||
store: {
|
||||
dispatch: store.dispatch,
|
||||
getters: store.getters,
|
||||
},
|
||||
});
|
||||
|
||||
//Mock props
|
||||
mountOptions.propsData = {
|
||||
modelValue: modelValueProp,
|
||||
};
|
||||
const wrapper = shallowMount(modelQuestion, mountOptions);
|
||||
|
||||
//Mock CMS content
|
||||
const cmsContent = {
|
||||
QuestionText: cmsQuestionText
|
||||
};
|
||||
return { wrapper, cmsContent };
|
||||
}
|
||||
46
src/layouts/vehicle-model/model-question/model-question.vue
Normal file
46
src/layouts/vehicle-model/model-question/model-question.vue
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<buttonQuestion class="radioQuestion"
|
||||
:questionText="questionText"
|
||||
:answers="models"
|
||||
groupName="Choose Vehicle Model"
|
||||
v-model="selectedModel"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonQuestion from "@/common-components/button-question/button-question";
|
||||
// Supporting files
|
||||
import store from "@/store";
|
||||
import { storeActions } from "@/constants/store-actions.js";
|
||||
|
||||
export default {
|
||||
name: "model-question",
|
||||
data() {
|
||||
return {
|
||||
questionText: null,
|
||||
selectedModel: null,
|
||||
models: Array,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
modelValue: String,
|
||||
},
|
||||
components: {
|
||||
buttonQuestion,
|
||||
},
|
||||
methods: {
|
||||
loadInitialData() {
|
||||
return store.dispatch(storeActions.GET_VEHICLE_MODELS, {year: store.getters.vehicle.year, make: encodeURIComponent(store.getters.vehicle.make)});
|
||||
},
|
||||
initializeComponent(cmsContent, initialData) {
|
||||
this.questionText = cmsContent.QuestionText;
|
||||
this.models = initialData;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedModel(val) {
|
||||
this.$emit("update:modelValue", val);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
93
src/layouts/vehicle-model/vehicle-model.spec.js
Normal file
93
src/layouts/vehicle-model/vehicle-model.spec.js
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
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 { settleAllPromises } from "@/helpers/layout-helper.js";
|
||||
import { nextTick } from "vue";
|
||||
|
||||
// Mock our module for promises.
|
||||
jest.mock("@/helpers/layout-helper.js", () => ({
|
||||
settleAllPromises: jest.fn(),
|
||||
}));
|
||||
|
||||
describe("vehicle-model.vue", () => {
|
||||
test("Model question component is initized with api data", async (done) => {
|
||||
|
||||
//Arange
|
||||
const radioQuestionCmsContent = { QuestionText: "What model is your vehicle?" };
|
||||
const modelQuestionInitialData = ["accord", "civic", "insight"];
|
||||
const { wrapper, apiPromise } = setupMocks( {
|
||||
radioQuestionCmsContent: radioQuestionCmsContent,
|
||||
modelQuestionInitialData: modelQuestionInitialData,
|
||||
} );
|
||||
|
||||
//Act
|
||||
vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
|
||||
|
||||
//Assert
|
||||
apiPromise.finally(() => {
|
||||
expect(modelQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, modelQuestionInitialData);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("vehicle-model.vue", () => {
|
||||
test("Page header is passed data from CMS", async (done) => {
|
||||
|
||||
//Arange
|
||||
const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a model to get started" });
|
||||
|
||||
//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");
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function setupMocks({
|
||||
radioQuestionCmsContent = {},
|
||||
modelQuestionInitialData = {},
|
||||
pageHeaderWidgetHeaderText = {},
|
||||
}) {
|
||||
|
||||
//Mock api responses
|
||||
const apiResponses = {
|
||||
cmsContent: {
|
||||
PageHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }],
|
||||
RadioQuestionWidget: [radioQuestionCmsContent],
|
||||
VehicleBannerWidget: [
|
||||
{
|
||||
GenericVehicleImage:
|
||||
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
|
||||
},
|
||||
],
|
||||
SiteHeaderWidget: [
|
||||
{
|
||||
LogoImage:
|
||||
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
|
||||
},
|
||||
],
|
||||
},
|
||||
modelQuestionInitialData: modelQuestionInitialData,
|
||||
};
|
||||
const apiPromise = Promise.resolve(apiResponses);
|
||||
settleAllPromises.mockImplementation(() => apiPromise);
|
||||
|
||||
//Mock model question methods
|
||||
modelQuestion.methods = {
|
||||
loadInitialData: jest.fn(),
|
||||
initializeComponent: jest.fn(),
|
||||
};
|
||||
const mountOptions = getMountOptions({ });
|
||||
const wrapper = shallowMount(vehicleModel, mountOptions);
|
||||
const modelQuestionWrapper = wrapper.findComponent({ name: "modelQuestion" });
|
||||
modelQuestionWrapper.vm.initializeComponent = modelQuestion.methods.initializeComponent;
|
||||
|
||||
return { wrapper, apiPromise };
|
||||
}
|
||||
90
src/layouts/vehicle-model/vehicle-model.vue
Normal file
90
src/layouts/vehicle-model/vehicle-model.vue
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<div class="container-fluid shadow rounded-3 p-0">
|
||||
<funnelHeader :imageSrc="siteHeaderWidget.LogoImage" />
|
||||
<div class="select-car">
|
||||
<div class="select-car-form rounded text-center">
|
||||
<vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
|
||||
<funnelSubHeader
|
||||
:text="pageHeaderWidgets.HeaderText"
|
||||
:hasBackButton="true"
|
||||
backButtonAccessibleText="Change Vehicle Make"
|
||||
:backButtonAction="backButtonAction"
|
||||
class="Header"
|
||||
/>
|
||||
<modelQuestion v-model="selectedModel" ref="modelQuestion" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
|
||||
import funnelHeader from "@/common-components/funnel-header/funnel-header";
|
||||
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
|
||||
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
export default {
|
||||
name: "vehicle-model",
|
||||
data() {
|
||||
return {
|
||||
pageHeaderWidgets: {},
|
||||
siteHeaderWidget: {},
|
||||
vehicleBannerWidget: {},
|
||||
selectedModel: null,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
|
||||
beforeRouteEnter(to, from, next) {
|
||||
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
const modelQuestionInitialDataPromise = modelQuestion.methods.loadInitialData();
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
{
|
||||
resultKey: "modelQuestionInitialData",
|
||||
promise: modelQuestionInitialDataPromise,
|
||||
},
|
||||
];
|
||||
settleAllPromises(promiseResultMap).then((resultMap) => {
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.pageHeaderWidgets = resultMap.cmsContent.PageHeaderWidget[0];
|
||||
vm.siteHeaderWidget = resultMap.cmsContent.SiteHeaderWidget[0];
|
||||
vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
|
||||
vm.$refs.modelQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.modelQuestionInitialData);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
backButtonAction: function () {
|
||||
// route to move backwards
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
selectedModel(model) {
|
||||
this.$store.commit(this.storeMutations.UPDATE_MODEL, model);
|
||||
this.$router.navigate(this.navigationScenarios.SELECTED_MODEL, this.$route);
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
modelQuestion,
|
||||
funnelHeader,
|
||||
funnelSubHeader,
|
||||
vehicleBanner,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
|
||||
import { shallowMount } from "@vue/test-utils";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
import store from "@/store";
|
||||
jest.mock("@/store", () => { return {}; }, {virtual: true});
|
||||
|
||||
describe("style-question.vue", () => {
|
||||
test("Selected style is emitted upon selection.", async () => {
|
||||
|
||||
//Arrange
|
||||
const { wrapper } = setupMocks({ modelValueProp: "2 Door" });
|
||||
const styleToSelect = "4 Door";
|
||||
|
||||
//Act
|
||||
wrapper.setData({ selectedStyle: styleToSelect });
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
//Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["4 Door"]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("style-question.vue", () => {
|
||||
test("CMS question text is used as radio question text.", async () => {
|
||||
|
||||
//Arrange
|
||||
const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What style is your vehicle?" });
|
||||
|
||||
//Act
|
||||
styleQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
|
||||
|
||||
//Assert
|
||||
const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
|
||||
expect(buttonQuestionComponent.attributes("questiontext")).toBe("What style is your vehicle?");
|
||||
});
|
||||
});
|
||||
|
||||
describe("style-question.vue", () => {
|
||||
test("Data from store api are used as radio question answers.", async () => {
|
||||
|
||||
//Arrange
|
||||
const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["2 Door", "4 Door"] });
|
||||
|
||||
//Act
|
||||
const initialData = styleQuestion.methods.loadInitialData.call(wrapper.vm);
|
||||
styleQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
|
||||
|
||||
//Assert
|
||||
const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
|
||||
expect(buttonQuestionComponent.attributes("answers")).toBe("2 Door,4 Door");
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function setupMocks({
|
||||
modelValueProp = "1900",
|
||||
cmsQuestionText = "CMS text goes here",
|
||||
dataFromStoreApi = [],
|
||||
}) {
|
||||
|
||||
//Mock store
|
||||
store.dispatch = jest.fn(() => dataFromStoreApi);
|
||||
store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc'} };
|
||||
const mountOptions = getMountOptions({
|
||||
store: {
|
||||
dispatch: store.dispatch,
|
||||
getters: store.getters,
|
||||
},
|
||||
});
|
||||
|
||||
//Mock props
|
||||
mountOptions.propsData = {
|
||||
modelValue: modelValueProp,
|
||||
};
|
||||
const wrapper = shallowMount(styleQuestion, mountOptions);
|
||||
|
||||
//Mock CMS content
|
||||
const cmsContent = {
|
||||
QuestionText: cmsQuestionText
|
||||
};
|
||||
return { wrapper, cmsContent };
|
||||
}
|
||||
46
src/layouts/vehicle-style/style-question/style-question.vue
Normal file
46
src/layouts/vehicle-style/style-question/style-question.vue
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<buttonQuestion class="radioQuestion"
|
||||
:questionText="questionText"
|
||||
:answers="styles"
|
||||
groupName="Choose Vehicle Style"
|
||||
v-model="selectedStyle"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonQuestion from "@/common-components/button-question/button-question";
|
||||
// Supporting files
|
||||
import store from "@/store";
|
||||
import { storeActions } from "@/constants/store-actions.js";
|
||||
|
||||
export default {
|
||||
name: "style-question",
|
||||
data() {
|
||||
return {
|
||||
questionText: null,
|
||||
selectedStyle: null,
|
||||
styles: Array,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
modelValue: String,
|
||||
},
|
||||
components: {
|
||||
buttonQuestion,
|
||||
},
|
||||
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)});
|
||||
},
|
||||
initializeComponent(cmsContent, initialData) {
|
||||
this.questionText = cmsContent.QuestionText;
|
||||
this.styles = initialData;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedStyle(val) {
|
||||
this.$emit("update:modelValue", val);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
120
src/layouts/vehicle-style/vehicle-style.spec.js
Normal file
120
src/layouts/vehicle-style/vehicle-style.spec.js
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
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 styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper.js";
|
||||
import { nextTick } from "vue";
|
||||
|
||||
// Mock our module for promises.
|
||||
jest.mock("@/helpers/layout-helper.js", () => ({
|
||||
settleAllPromises: jest.fn(),
|
||||
}));
|
||||
|
||||
describe("vehicle-style.vue", () => {
|
||||
test("Style question component is initized with api data", async (done) => {
|
||||
|
||||
//Arrange
|
||||
const radioQuestionCmsContent = { QuestionText: "What style is your vehicle?" };
|
||||
const styleQuestionInitialData = ["2 Door", "4 Door"];
|
||||
const { wrapper, apiPromise } = setupMocks( {
|
||||
radioQuestionCmsContent: radioQuestionCmsContent,
|
||||
styleQuestionInitialData: styleQuestionInitialData,
|
||||
} );
|
||||
|
||||
//Act
|
||||
vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
|
||||
|
||||
//Assert
|
||||
apiPromise.finally(() => {
|
||||
expect(styleQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, styleQuestionInitialData);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("vehicle-style.vue", () => {
|
||||
test("Page header is passed data from CMS", async (done) => {
|
||||
|
||||
//Arrange
|
||||
const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a style to get started" });
|
||||
|
||||
//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");
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("vehicle-style.vue", () => {
|
||||
test("BackButtonAction triggers a router.navigate change", async (done) => {
|
||||
|
||||
//Arrange
|
||||
const { wrapper, apiPromise } = setupMocks( {
|
||||
pageHeaderWidgetHeaderText: "Select a style to get started",
|
||||
mountOptionsMockData: {
|
||||
router: {
|
||||
navigate: jest.fn()
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
//Act
|
||||
vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
|
||||
wrapper.vm.backButtonAction();
|
||||
await nextTick();
|
||||
|
||||
//Assert
|
||||
apiPromise.finally(() => {
|
||||
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function setupMocks({
|
||||
radioQuestionCmsContent = {},
|
||||
styleQuestionInitialData = {},
|
||||
pageHeaderWidgetHeaderText = {},
|
||||
mountOptionsMockData = {},
|
||||
}) {
|
||||
|
||||
//Mock api responses
|
||||
const apiResponses = {
|
||||
cmsContent: {
|
||||
PageHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }],
|
||||
RadioQuestionWidget: [radioQuestionCmsContent],
|
||||
VehicleBannerWidget: [
|
||||
{
|
||||
GenericVehicleImage:
|
||||
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
|
||||
},
|
||||
],
|
||||
SiteHeaderWidget: [
|
||||
{
|
||||
LogoImage:
|
||||
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
|
||||
},
|
||||
],
|
||||
},
|
||||
styleQuestionInitialData: styleQuestionInitialData,
|
||||
};
|
||||
const apiPromise = Promise.resolve(apiResponses);
|
||||
settleAllPromises.mockImplementation(() => apiPromise);
|
||||
|
||||
//Mock style question methods
|
||||
styleQuestion.methods = {
|
||||
loadInitialData: jest.fn(),
|
||||
initializeComponent: jest.fn(),
|
||||
};
|
||||
const mountOptions = getMountOptions(mountOptionsMockData);
|
||||
const wrapper = shallowMount(vehicleStyle, mountOptions);
|
||||
const styleQuestionWrapper = wrapper.findComponent({ name: "styleQuestion" });
|
||||
styleQuestionWrapper.vm.initializeComponent = styleQuestion.methods.initializeComponent;
|
||||
|
||||
return { wrapper, apiPromise };
|
||||
}
|
||||
90
src/layouts/vehicle-style/vehicle-style.vue
Normal file
90
src/layouts/vehicle-style/vehicle-style.vue
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<div class="container-fluid shadow rounded-3 p-0">
|
||||
<funnelHeader :imageSrc="siteHeaderWidget.LogoImage" />
|
||||
<div class="select-car">
|
||||
<div class="select-car-form rounded text-center">
|
||||
<vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
|
||||
<funnelSubHeader
|
||||
:text="pageHeaderWidgets.HeaderText"
|
||||
:hasBackButton="true"
|
||||
backButtonAccessibleText="Change Vehicle Model"
|
||||
:backButtonAction="backButtonAction"
|
||||
class="Header"
|
||||
/>
|
||||
<styleQuestion v-model="selectedStyle" ref="styleQuestion" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
|
||||
import funnelHeader from "@/common-components/funnel-header/funnel-header";
|
||||
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
|
||||
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
export default {
|
||||
name: "vehicle-style",
|
||||
data() {
|
||||
return {
|
||||
pageHeaderWidgets: {},
|
||||
siteHeaderWidget: {},
|
||||
vehicleBannerWidget: {},
|
||||
selectedStyle: null,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
|
||||
beforeRouteEnter(to, from, next) {
|
||||
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
const styleQuestionInitialDataPromise = styleQuestion.methods.loadInitialData();
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
{
|
||||
resultKey: "styleQuestionInitialData",
|
||||
promise: styleQuestionInitialDataPromise,
|
||||
},
|
||||
];
|
||||
settleAllPromises(promiseResultMap).then((resultMap) => {
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.pageHeaderWidgets = resultMap.cmsContent.PageHeaderWidget[0];
|
||||
vm.siteHeaderWidget = resultMap.cmsContent.SiteHeaderWidget[0];
|
||||
vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
|
||||
vm.$refs.styleQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.styleQuestionInitialData);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
backButtonAction: function () {
|
||||
// route to move backwards
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
selectedStyle(style) {
|
||||
this.$store.commit(this.storeMutations.UPDATE_STYLE, style);
|
||||
this.$router.navigate(this.navigationScenarios.SELECTED_STYLE, this.$route);
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
styleQuestion,
|
||||
funnelHeader,
|
||||
funnelSubHeader,
|
||||
vehicleBanner,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -13,7 +13,7 @@ jest.mock("@/helpers/layout-helper.js", () => ({
|
|||
describe("vehicle-year.vue", () => {
|
||||
test("Year question component is initized with api data", async (done) => {
|
||||
|
||||
//Arange
|
||||
//Arrange
|
||||
const radioQuestionCmsContent = { QuestionText: "What year is your vehicle?" };
|
||||
const yearQuestionInitialData = ["2023", "2022", "2021"];
|
||||
const { wrapper, apiPromise } = setupMocks( {
|
||||
|
|
@ -35,7 +35,7 @@ describe("vehicle-year.vue", () => {
|
|||
describe("vehicle-year.vue", () => {
|
||||
test("Page header is passed data from CMS", async (done) => {
|
||||
|
||||
//Arange
|
||||
//Arrange
|
||||
const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a year to get started" });
|
||||
|
||||
//Act
|
||||
|
|
@ -54,6 +54,7 @@ function setupMocks({
|
|||
radioQuestionCmsContent = {},
|
||||
yearQuestionInitialData = {},
|
||||
pageHeaderWidgetHeaderText = {},
|
||||
mountOptionsMockData = {},
|
||||
}) {
|
||||
|
||||
//Mock api responses
|
||||
|
|
@ -84,7 +85,7 @@ function setupMocks({
|
|||
loadInitialData: jest.fn(),
|
||||
initializeComponent: jest.fn(),
|
||||
};
|
||||
const mountOptions = getMountOptions({ });
|
||||
const mountOptions = getMountOptions(mountOptionsMockData);
|
||||
const wrapper = shallowMount(vehicleYear, mountOptions);
|
||||
const yearQuestionWrapper = wrapper.findComponent({ name: "yearQuestion" });
|
||||
yearQuestionWrapper.vm.initializeComponent = yearQuestion.methods.initializeComponent;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
<template>
|
||||
<div class="container-fluid shadow rounded-3 p-0">
|
||||
<siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
|
||||
<funnelHeader :imageSrc="siteHeaderWidget.LogoImage" />
|
||||
<div class="select-car">
|
||||
<div class="select-car-form rounded text-center">
|
||||
<vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
|
||||
<pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
|
||||
<funnelSubHeader
|
||||
:text="pageHeaderWidgets.HeaderText"
|
||||
class="Header"
|
||||
/>
|
||||
<yearQuestion v-model="selectedYear" ref="yearQuestion" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -14,14 +17,12 @@
|
|||
<script>
|
||||
// Components
|
||||
import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
|
||||
import pageHeader from "@/ux-components/header/header";
|
||||
import siteHeader from "@/common-components/site-header/site-header";
|
||||
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";
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
|
||||
|
||||
export default {
|
||||
name: "vehicle-year",
|
||||
|
|
@ -73,9 +74,9 @@ export default {
|
|||
|
||||
components: {
|
||||
yearQuestion,
|
||||
pageHeader,
|
||||
siteHeader,
|
||||
funnelHeader,
|
||||
vehicleBanner,
|
||||
funnelSubHeader,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ const navigationScenarios = {
|
|||
SELECTED_YEAR: "SELECTED_YEAR",
|
||||
SELECTED_MODEL: "SELECTED_MODEL",
|
||||
SELECTED_MAKE: "SELECTED_MAKE",
|
||||
SELECTED_STYLE: "SELECTED_STYLE",
|
||||
CLICKED_BACK: "CLICKED_BACK",
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -37,6 +37,19 @@ const routingTable = [
|
|||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.VEHICLE_STYLE,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_STYLE,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
|
||||
}
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export { routingTable };
|
||||
|
|
@ -64,6 +64,15 @@ export default createStore({
|
|||
updateYear(state, year) {
|
||||
state.order.vehicle.year = year;
|
||||
},
|
||||
updateMake(state, make) {
|
||||
state.order.vehicle.make = make;
|
||||
},
|
||||
updateModel(state, model) {
|
||||
state.order.vehicle.model = model;
|
||||
},
|
||||
updateStyle(state, style) {
|
||||
state.order.vehicle.style = style;
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
vehicle: state => state.order.vehicle
|
||||
|
|
|
|||
|
|
@ -118,6 +118,73 @@ describe("Actions", () => {
|
|||
// Assert
|
||||
expect(pageData).toBe("Page Info Data");
|
||||
});
|
||||
|
||||
it("Should return data from url retrieved", async () => {
|
||||
// Arrange
|
||||
let returnData = [];
|
||||
|
||||
// Act
|
||||
globalMethods.callHttpClient.mockImplementation(() => {
|
||||
return Promise.resolve({
|
||||
data: {
|
||||
Result: "2018 Honda Civic",
|
||||
},
|
||||
});
|
||||
});
|
||||
await store
|
||||
.dispatch("lookupVehicleByYmms", { year: "2018", make: "Honda", model: "Civic", style: "2 Door"})
|
||||
.then((response) => {
|
||||
returnData = response.data.Result;
|
||||
});
|
||||
|
||||
// Assert
|
||||
expect(returnData).toBe("2018 Honda Civic");
|
||||
});
|
||||
|
||||
it("Should return vehicle data from url retrieved", async () => {
|
||||
// Arrange
|
||||
let returnData = [];
|
||||
|
||||
// Act
|
||||
globalMethods.callHttpClient.mockImplementation(() => {
|
||||
return Promise.resolve({
|
||||
data: {
|
||||
Result: "2021 Honda Civic",
|
||||
},
|
||||
});
|
||||
});
|
||||
await store
|
||||
.dispatch("lookupVehicleByVin", { vin: "12345678"})
|
||||
.then((response) => {
|
||||
returnData = response.data.Result;
|
||||
});
|
||||
|
||||
// Assert
|
||||
expect(returnData).toBe("2021 Honda Civic");
|
||||
});
|
||||
|
||||
it("Should return vehicle image data from url retrieved", async () => {
|
||||
// Arrange
|
||||
let returnData = [];
|
||||
|
||||
// Act
|
||||
globalMethods.callMockHttpClient = jest.fn();
|
||||
globalMethods.callMockHttpClient.mockImplementation(() => {
|
||||
return Promise.resolve({
|
||||
data: {
|
||||
Result: "2008_honda_civic.jpg",
|
||||
},
|
||||
});
|
||||
});
|
||||
await store
|
||||
.dispatch("getEvoxImage", { relativeUrl: "evox_image.com"})
|
||||
.then((response) => {
|
||||
returnData = response.data.Result;
|
||||
});
|
||||
|
||||
// Assert
|
||||
expect(returnData).toBe("2008_honda_civic.jpg");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Mutations", () => {
|
||||
|
|
@ -128,4 +195,34 @@ describe("Mutations", () => {
|
|||
// Assert
|
||||
expect(store.state.order.vehicle.year).toBe(2020);
|
||||
});
|
||||
|
||||
it("Should update the make property in the store", () => {
|
||||
// Act
|
||||
store.commit("updateMake", "Honda");
|
||||
|
||||
// Assert
|
||||
expect(store.state.order.vehicle.make).toBe("Honda");
|
||||
});
|
||||
|
||||
it("Should update the model property in the store", () => {
|
||||
// Act
|
||||
store.commit("updateModel", "Civic");
|
||||
|
||||
// Assert
|
||||
expect(store.state.order.vehicle.model).toBe("Civic");
|
||||
});
|
||||
|
||||
it("Should update the style property in the store", () => {
|
||||
// Act
|
||||
store.commit("updateStyle", "2 Door");
|
||||
|
||||
// Assert
|
||||
expect(store.state.order.vehicle.style).toBe("2 Door");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Getters", () => {
|
||||
const vehicle = store.getters.vehicle;
|
||||
|
||||
expect(typeof vehicle).toBe('object');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1 +1,23 @@
|
|||
test.todo("some test to be written in the future");
|
||||
import { shallowMount } from "@vue/test-utils";
|
||||
import buttonBack from "./button-back";
|
||||
|
||||
describe("back button", () => {
|
||||
|
||||
test("renders a button", () => {
|
||||
// Arrange
|
||||
const myFunction = () => {};
|
||||
|
||||
// Act
|
||||
const wrapper = shallowMount(buttonBack, {
|
||||
propsData: {
|
||||
backButtonAction: myFunction,
|
||||
backButtonAccessibleText: "something",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
expect(wrapper.find("button").exists()).toBe(true);
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
<template>
|
||||
<button class="back-button-wrapper d-flex p-0">
|
||||
<button
|
||||
v-if="backButtonAction"
|
||||
@click="backButtonAction"
|
||||
class="back-button-wrapper p-3"
|
||||
:aria-label="backButtonAccessibleText"
|
||||
>
|
||||
<div class="button-back">
|
||||
<div class="arrow-left"></div>
|
||||
<div class="box"></div>
|
||||
|
|
@ -9,7 +14,18 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: "buttonBack"
|
||||
name: "buttonBack",
|
||||
props: {
|
||||
backButtonAccessibleText: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: "",
|
||||
},
|
||||
backButtonAction: {
|
||||
type: Function,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -17,12 +33,20 @@ export default {
|
|||
.back-button-wrapper {
|
||||
border: none;
|
||||
background: transparent;
|
||||
text-decoration: none;
|
||||
border-bottom: none;
|
||||
// Account for padding while still being inline with heading text (for cases where text wraps to 2 lines)
|
||||
margin-bottom: -6px;
|
||||
margin-top: -6px;
|
||||
|
||||
.button-back {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
height: 18px;
|
||||
width: 23px;
|
||||
overflow: hidden;
|
||||
// Account for padding while still being inline with heading text (for cases where text wraps to 2 lines)
|
||||
margin-bottom: -2px;
|
||||
.arrow-left {
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
|
|
|
|||
1
src/ux-components/checkbox/checkbox.spec.js
Normal file
1
src/ux-components/checkbox/checkbox.spec.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
test.todo("some test to be written in the future");
|
||||
81
src/ux-components/checkbox/checkbox.vue
Normal file
81
src/ux-components/checkbox/checkbox.vue
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
|
||||
<div class="ui-checkbox d-flex">
|
||||
<input type="checkbox" aria-checked="false" :name="checkboxName" :id="buttonID" :tabindex="tabIndex" :aria-required="isRequired" />
|
||||
<label class="d-flex align-items-center" :for="buttonID">
|
||||
<p v-if="checkboxLabel" class="m-0">{{checkboxLabel}}</p>
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "checkbox",
|
||||
props: {
|
||||
checkboxName: String,
|
||||
buttonID: String,
|
||||
tabIndex: Number,
|
||||
checkboxLabel: String,
|
||||
screenReaderOnlyText: String,
|
||||
isRequired: Boolean
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.ui-checkbox {
|
||||
position: relative;
|
||||
input[type='checkbox'] {
|
||||
position: absolute !important;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
+ label {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
+ label::before {
|
||||
content: '';
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: white;
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: 2px;
|
||||
}
|
||||
&:checked + label::before {
|
||||
background: $blue;
|
||||
}
|
||||
&:checked + label::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
border-left: 2px solid $white;
|
||||
border-bottom: 2px solid $white;
|
||||
height: 6px;
|
||||
width: 12px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
&:hover + label::before {
|
||||
box-shadow: 0 0 0 4px $blue-100;
|
||||
}
|
||||
&:focus + label::before {
|
||||
box-shadow: 0 0 0 2px $blue;
|
||||
}
|
||||
&:focus:checked + label::before {
|
||||
box-shadow: 0 0 0 2px transparent;
|
||||
}
|
||||
&:disabled + label {
|
||||
color: $gray-200;
|
||||
}
|
||||
&:disabled + label::before {
|
||||
background: $gray-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import Header from "./header";
|
||||
|
||||
describe("Header.vue", () => {
|
||||
it("Should render the 'text' prop value as a span value for the header span text value.", () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(Header, {
|
||||
propsData: {
|
||||
text: "Header Content",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
expect(wrapper.find("h2").text()).toContain("Header Content");
|
||||
});
|
||||
});
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<template>
|
||||
<div class="current_car_info-text">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<h2 class="text-center fs-5 d-block fw-normal mb-0">{{ text }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Header",
|
||||
props: {
|
||||
text: String,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
h2 {
|
||||
color: $gray-550;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!-- See the component-test.vue page for example implementation -->
|
||||
<template>
|
||||
<!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
|
||||
<div v-if="isCheckbox" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
|
||||
<div v-if="isMultiSelect" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
|
||||
<input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
|
||||
<label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
|
||||
<span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
|
||||
|
|
@ -27,7 +27,7 @@ import loader from "@/ux-components/loader/loader";
|
|||
export default {
|
||||
name: "listButtonHorizontal",
|
||||
props: {
|
||||
isCheckbox: Boolean,
|
||||
isMultiSelect: Boolean,
|
||||
groupName: String, /* Required, unique for each button GROUP */
|
||||
buttonID: String, /* Required, unique for each button. Used for button id, label and <label for> */
|
||||
buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<!-- See the component-test.vue page for example implementation -->
|
||||
<div v-if="isCheckbox" class="list-group list-button d-flex flex-column w-100 mb-2">
|
||||
<div v-if="isMultiSelect" class="list-group list-button d-flex flex-column w-100 mb-2">
|
||||
<input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
|
||||
<label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
|
||||
<span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
|
||||
|
|
@ -26,7 +26,7 @@ import loader from "@/ux-components/loader/loader";
|
|||
export default {
|
||||
name: "listButton",
|
||||
props: {
|
||||
isCheckbox: Boolean,
|
||||
isMultiSelect: Boolean,
|
||||
groupName: String, /* Required, unique for each button GROUP */
|
||||
buttonID: [Number,String], /* Required, unique for each button. Used for button id, label and <label for> */
|
||||
isRequired: Boolean, /* Optional, default is false */
|
||||
|
|
|
|||
|
|
@ -1,77 +1,96 @@
|
|||
<template>
|
||||
<div class="col mb-3 d-flex list-card">
|
||||
<input
|
||||
type="radio"
|
||||
class="position-absolute opacity-0"
|
||||
:class="className"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:value="buttonLabel"
|
||||
v-model="picked"
|
||||
:tabindex="tabIndex"
|
||||
/>
|
||||
<label
|
||||
v-bind:for="buttonID"
|
||||
class="rounded-3 d-flex flex-column align-items-center w-100"
|
||||
>
|
||||
<img
|
||||
class="px-3 pt-3 pb-2 mt-auto"
|
||||
v-bind:src="require(`@/assets/img/icons/${buttonImage}`)"
|
||||
v-bind:alt="altText"
|
||||
/>
|
||||
<span class="mt-auto mb-2 text-center lh-1">{{ buttonLabel }}</span>
|
||||
<div class="list-card w-100 rounded-3 d-flex align-items-center" :class="[this.invalid]">
|
||||
<input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
|
||||
<label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
|
||||
<img v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
|
||||
<p class="m-0 order-3">{{buttonLabel}}</p>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- tabIndex="x" is available on this component if needed -->
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "listCard",
|
||||
props: [
|
||||
"groupName",
|
||||
"buttonLabel",
|
||||
"buttonImage",
|
||||
"altText",
|
||||
"buttonID",
|
||||
"tabIndex",
|
||||
"className",
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
picked: "picked",
|
||||
};
|
||||
},
|
||||
props: {
|
||||
buttonImage: String,
|
||||
buttonLabel: String,
|
||||
altText: String,
|
||||
buttonID: String,
|
||||
groupName: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.list-card {
|
||||
input[type="radio"] {
|
||||
&:focus + label {
|
||||
background-color: $white;
|
||||
box-shadow: 0px 0px 0px 4px $blue;
|
||||
}
|
||||
&:focus-visible + label {
|
||||
background-color: $white;
|
||||
box-shadow: 0px 0px 0px 4px $blue;
|
||||
}
|
||||
&:checked + label {
|
||||
background-color: $blue-100;
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
&.invalid + label {
|
||||
background-color: $white;
|
||||
border: 1px solid $red;
|
||||
}
|
||||
border: 1px solid $gray-500;
|
||||
&.invalid { //Red border if invalid
|
||||
border: 1px solid $red;
|
||||
}
|
||||
label {
|
||||
background: $white;
|
||||
border: 1px solid $gray;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 0px 0px 6px $blue-100;
|
||||
}
|
||||
img {
|
||||
height: 46px;
|
||||
width: auto;
|
||||
order: 1;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 0px 6px $blue-100;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
input[type='checkbox'] {
|
||||
position: absolute !important;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
+ label {
|
||||
display: block;
|
||||
position: relative;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&:focus + label {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
&:checked + label {
|
||||
background: $blue-100;
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
+ label::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 4rem 0 0 0;
|
||||
background: white;
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: 2px;
|
||||
order: 2;
|
||||
}
|
||||
&:checked + label::before {
|
||||
background: $blue;
|
||||
}
|
||||
&:checked + label::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
margin: 4.2rem 0 0 0;
|
||||
border-left: 2px solid $white;
|
||||
border-bottom: 2px solid $white;
|
||||
height: 6px;
|
||||
width: 11px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
&:disabled + label {
|
||||
color: #575757;
|
||||
}
|
||||
&:disabled + label::before {
|
||||
background: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue