Merge branch 'feature/CSR-231' of https://github.com/Safelite/DigitalConsumer.FixMyGlass into feature/CSR-231
This commit is contained in:
Leah Schumann
commit
77fe4e0188
67 changed files with 3178 additions and 884 deletions
|
|
@ -76,4 +76,5 @@ stages:
|
|||
deployFolder: ''
|
||||
region: us-east-1
|
||||
appDeployVariables:
|
||||
__VUE_APP_CONSUMER_API_GATEWAY__: $(__VUE_APP_CONSUMER_API_GATEWAY__)
|
||||
__VUE_APP_CONSUMER_API_GATEWAY__: $(__VUE_APP_CONSUMER_API_GATEWAY__)
|
||||
cfDistributionId: $(cfDistributionId)
|
||||
|
|
@ -16,7 +16,7 @@ module.exports = {
|
|||
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
|
||||
coverageThreshold: {
|
||||
global: {
|
||||
statements: 70,
|
||||
statements: 85,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
23
src/common-components/button-back/button-back.spec.js
Normal file
23
src/common-components/button-back/button-back.spec.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
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,9 @@
|
|||
<template>
|
||||
<button class="back-button-wrapper d-flex p-0">
|
||||
<button
|
||||
@click="handleClick"
|
||||
class="back-button-wrapper p-3"
|
||||
:aria-label="backButtonAccessibleText"
|
||||
>
|
||||
<div class="button-back">
|
||||
<div class="arrow-left"></div>
|
||||
<div class="box"></div>
|
||||
|
|
@ -9,7 +13,19 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: "buttonBack"
|
||||
name: "buttonBack",
|
||||
props: {
|
||||
backButtonAccessibleText: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: "",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$emit('click-event');
|
||||
}
|
||||
}
|
||||
};
|
||||
</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: -.75rem;
|
||||
margin-top: -.75rem;
|
||||
|
||||
.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;
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import buttonQuestion from "@/common-components/button-question/button-question";
|
||||
|
||||
describe("buttonQuestion.vue", () => {
|
||||
it("Should render the 'questionText' prop value as a span value for the button question and the 'answer' values should render as text values for button components.", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(buttonQuestion);
|
||||
await wrapper.setProps({
|
||||
questionText: "Question Text",
|
||||
answers: ["2023", "2022", "2021"],
|
||||
modelValue: "2020",
|
||||
});
|
||||
wrapper.vm.chooseAnswer("2021");
|
||||
|
||||
// Assert
|
||||
expect(wrapper.find(".text-center").text()).toEqual(
|
||||
"Question Text"
|
||||
);
|
||||
const buttonButtons = wrapper.findAllComponents('[data-test="button"]');
|
||||
expect(buttonButtons.length).toBe(3);
|
||||
expect(wrapper.props().modelValue).toBe("2020");
|
||||
});
|
||||
});
|
||||
62
src/common-components/button-question/button-question.vue
Normal file
62
src/common-components/button-question/button-question.vue
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<div class="button_question">
|
||||
<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="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"
|
||||
@mouseup="chooseAnswer(answer)"
|
||||
@keyup.space="chooseAnswer(answer)"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1.5"
|
||||
data-test="button"
|
||||
:groupName="groupName"
|
||||
textPosition="text-start"
|
||||
:isRequired="true"
|
||||
:value="modelValue"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import listButton from "@/ux-components/list-button/list-button";
|
||||
export default {
|
||||
name: "buttonQuestion",
|
||||
props: {
|
||||
isMultiSelect: Boolean,
|
||||
questionText: String,
|
||||
answers: Array,
|
||||
modelValue: String,
|
||||
groupName: String
|
||||
},
|
||||
methods: {
|
||||
chooseAnswer(answer) {
|
||||
this.$emit("update:modelValue", answer);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
listButton,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.button_question {
|
||||
height: calc(100vh - 280px);
|
||||
|
||||
.overflow-scroll {
|
||||
// Height will be determined by overall height of content above list
|
||||
height: calc(100% - 320px);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
25
src/common-components/funnel-header/funnel-header.spec.js
Normal file
25
src/common-components/funnel-header/funnel-header.spec.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import funnelHeader from "./funnel-header";
|
||||
|
||||
describe("funnelHeader", () => {
|
||||
test("renders the logo image", () => {
|
||||
// Arrange
|
||||
|
||||
// Act
|
||||
const wrapper = shallowMount(funnelHeader, {
|
||||
setData: {
|
||||
imageSrc: "image_url",
|
||||
},
|
||||
});
|
||||
wrapper.vm.initializeComponent(cmsContent);
|
||||
|
||||
// Assert
|
||||
expect(wrapper.find("img")).toBeTruthy();
|
||||
wrapper.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
//Mock CMS content
|
||||
const cmsContent = {
|
||||
imageSrc: 'image_url'
|
||||
};
|
||||
|
|
@ -9,12 +9,16 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: "site-header",
|
||||
props: {
|
||||
imageSrc: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
name: "funnel-header",
|
||||
data() {
|
||||
return {
|
||||
imageSrc: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(cmsContent) {
|
||||
this.imageSrc = cmsContent.LogoImage;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import FunnelSubHeader from "./funnel-sub-header";
|
||||
|
||||
describe("FunnelSubHeader.vue", () => {
|
||||
it("Should render the 'text' data value as a span value for the header span text value.", async () => {
|
||||
// Act
|
||||
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'
|
||||
};
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<div class="current_car_info-text">
|
||||
<div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
|
||||
<h5 class="text-center fw-normal mb-0">
|
||||
<span>
|
||||
{{ text }}
|
||||
</span>
|
||||
<buttonBack
|
||||
v-if="hasBackButton"
|
||||
:backButtonAccessibleText="backButtonAccessibleText"
|
||||
@click-event="clickEvent"
|
||||
/>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonBack from "@/common-components/button-back/button-back";
|
||||
|
||||
export default {
|
||||
name: "FunnelSubHeader",
|
||||
data() {
|
||||
return {
|
||||
text: '',
|
||||
}
|
||||
},
|
||||
props: {
|
||||
hasBackButton: Boolean,
|
||||
backButtonAccessibleText: String,
|
||||
},
|
||||
components: {
|
||||
buttonBack,
|
||||
},
|
||||
methods: {
|
||||
clickEvent() {
|
||||
this.$emit('click-event');
|
||||
},
|
||||
initializeComponent(cmsContent) {
|
||||
this.text = cmsContent.HeaderText;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
h5 {
|
||||
color: $gray-550;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
.back-button-wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import radioQuestion from "@/common-components/radio-question/radio-question";
|
||||
|
||||
describe("radioQuestion.vue", () => {
|
||||
it("Should render the 'questionText' prop value as a span value for the radio question and the 'answer' values should render as text values for radio components.", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(radioQuestion);
|
||||
await wrapper.setProps({
|
||||
questionText: "Question Text",
|
||||
answers: ["2023", "2022", "2021"],
|
||||
modelValue: "2020",
|
||||
});
|
||||
wrapper.vm.chooseAnswer("2021");
|
||||
|
||||
// Assert
|
||||
expect(wrapper.find(".needed_car_info-text").text()).toEqual(
|
||||
"Question Text"
|
||||
);
|
||||
const radioButtons = wrapper.findAllComponents('[data-test="radio"]');
|
||||
expect(radioButtons.length).toBe(3);
|
||||
expect(wrapper.props().modelValue).toBe("2020");
|
||||
});
|
||||
});
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<template>
|
||||
<div class="radio_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">{{
|
||||
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">
|
||||
<legend class="sr-only">{{groupName}}</legend>
|
||||
<radio v-for="answer in answers" :key="answer"
|
||||
:radioID="answer"
|
||||
@click="chooseAnswer(answer)"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1.5"
|
||||
data-test="radio"
|
||||
:groupName="groupName"
|
||||
textPosition="text-start"
|
||||
isRequired=true
|
||||
:value="modelValue"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import radio from "@/ux-components/radio/radio";
|
||||
export default {
|
||||
name: "radio-question",
|
||||
props: {
|
||||
questionText: String,
|
||||
answers: Array,
|
||||
modelValue: String,
|
||||
groupName: String
|
||||
},
|
||||
methods: {
|
||||
chooseAnswer(answer) {
|
||||
this.$emit("update:modelValue", answer);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
radio,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import siteHeader from "./site-header";
|
||||
|
||||
describe("siteHeader", () => {
|
||||
test("renders the logo image", () => {
|
||||
// Arrange
|
||||
|
||||
// Act
|
||||
const wrapper = shallowMount(siteHeader, {
|
||||
propsData: {
|
||||
imageSrc: "image_url",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
expect(wrapper.find("img")).toBeTruthy();
|
||||
wrapper.unmount();
|
||||
});
|
||||
});
|
||||
|
|
@ -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'
|
||||
};
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="vehicle_banner mb-4 text-center">
|
||||
<div class="vehicle_banner mb-3 text-center">
|
||||
<img
|
||||
class="vehicle-image img-fluid blurrycar"
|
||||
:src="vehicleImageSrc"
|
||||
|
|
@ -11,11 +11,15 @@
|
|||
<script>
|
||||
export default {
|
||||
name: "vehicle-banner",
|
||||
props: {
|
||||
vehicleImageSrc: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
vehicleImageSrc: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(cmsContent) {
|
||||
this.vehicleImageSrc = cmsContent.GenericVehicleImage;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
const storeMutations = {
|
||||
UPDATE_YEAR: "updateYear",
|
||||
UPDATE_MAKE: "updateMake",
|
||||
UPDATE_MODEL: "updateModel",
|
||||
UPDATE_STYLE: "updateStyle",
|
||||
};
|
||||
|
||||
export { storeMutations };
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
const widgetNames = {
|
||||
PAGE_HEADER_WIDGET: "PageHeaderWidget",
|
||||
FUNNEL_SUB_HEADER_WIDGET: "FunnelSubHeaderWidget",
|
||||
RADIO_QUESTION_WIDGET: "RadioQuestionWidget",
|
||||
VEHICLE_BANNER_WIDGET: "VehicleBannerWidget",
|
||||
SITE_HEADER_WIDGET: "SiteHeaderWidget",
|
||||
FUNNEL_HEADER_WIDGET: "FunnelHeaderWidget",
|
||||
};
|
||||
|
||||
export { widgetNames };
|
||||
|
|
|
|||
|
|
@ -9,17 +9,101 @@ export function fetchCmsContentForPage(fmgPage) {
|
|||
const pageDataFromCms = {};
|
||||
|
||||
response.data.Result.forEach((widget) => {
|
||||
if (Object.values(widgetNames).includes(widget.Type)) {
|
||||
|
||||
let widgetWithReplacements = findAndReplaceGlobalStateValues(widget.Model, widget.Type);
|
||||
|
||||
if (Object.values(widgetNames).includes(widgetWithReplacements.Type)) {
|
||||
// If we already have this widget, push it on the collection
|
||||
if (widget.Type in pageDataFromCms) {
|
||||
pageDataFromCms[widget.Type].push(widget.Model);
|
||||
if (widgetWithReplacements.Type in pageDataFromCms) {
|
||||
pageDataFromCms[widgetWithReplacements.Type].push(widgetWithReplacements.Model);
|
||||
return;
|
||||
}
|
||||
|
||||
pageDataFromCms[widget.Type] = [widget.Model];
|
||||
pageDataFromCms[widgetWithReplacements.Type] = [widgetWithReplacements.Model];
|
||||
}
|
||||
});
|
||||
|
||||
return pageDataFromCms;
|
||||
});
|
||||
}
|
||||
|
||||
// Function to convert a string, into a matching global state item.
|
||||
function mapStringToState(str) {
|
||||
|
||||
// Pull all matches out of the string.
|
||||
const regexExp = new RegExp('{(.*?):(.*?)}', 'g');
|
||||
const matches = [...str.matchAll(regexExp)];
|
||||
|
||||
// Our final string value that will be built from the matches.
|
||||
let stringBuilder = '';
|
||||
|
||||
for (const match of matches) {
|
||||
|
||||
// Reset store state for each match.
|
||||
let storeState = store.state;
|
||||
|
||||
for (const s of match[2].split('.')) {
|
||||
if (storeState[s] != undefined) {
|
||||
storeState = storeState[s];
|
||||
} else {
|
||||
return ''; // if we can't map our string to state data, return an empty string.
|
||||
}
|
||||
}
|
||||
|
||||
const stringWithReplacement = str.replace(match[0], storeState);
|
||||
|
||||
// If we still have values we need to substitute, call this function again.
|
||||
if(stringWithReplacement.includes('{globalState:')) {
|
||||
return mapStringToState(stringWithReplacement);
|
||||
}
|
||||
|
||||
// Concatenate the string.
|
||||
stringBuilder = `${stringBuilder} ${stringWithReplacement}`;
|
||||
}
|
||||
|
||||
return stringBuilder.trimStart();
|
||||
}
|
||||
|
||||
// Parent function for processWidgetItemForReplacement. This will loop through the parent
|
||||
// object and pass any objects that need additional processing to the processWidgetItemForReplacement function.
|
||||
function findAndReplaceGlobalStateValues(widgetModel, widgetType) {
|
||||
|
||||
const objWithReplacements = {
|
||||
Type: widgetType,
|
||||
Model: {}
|
||||
};
|
||||
|
||||
Object.keys(widgetModel).forEach(key => {
|
||||
|
||||
let modelWithReplacements = processWidgetItemForReplacement(widgetModel, key);
|
||||
|
||||
objWithReplacements.Model[key] = modelWithReplacements;
|
||||
});
|
||||
|
||||
return objWithReplacements;
|
||||
}
|
||||
|
||||
// This function will process the widget item and replace any global state variables with their values.
|
||||
// This is a recursive function, it will call itself until it runs out of items to iterate on given the object.
|
||||
function processWidgetItemForReplacement(widgetModel, key) {
|
||||
// If we have a string, and it needs to be replaced.
|
||||
if (typeof widgetModel[key] === 'string') {
|
||||
if (widgetModel[key].includes('{globalState:')) {
|
||||
widgetModel[key] = mapStringToState(widgetModel[key]);
|
||||
}
|
||||
return widgetModel[key];
|
||||
}
|
||||
|
||||
// If we have an object. array, etc
|
||||
if (typeof widgetModel[key] === 'object' && Object.keys(widgetModel[key]).length) {
|
||||
Object.keys(widgetModel[key]).forEach(item => {
|
||||
processWidgetItemForReplacement(widgetModel[key], item);
|
||||
});
|
||||
|
||||
return widgetModel[key];
|
||||
}
|
||||
|
||||
// If we have something else like a number, boolean, etc. just return it
|
||||
return widgetModel[key];
|
||||
|
||||
}
|
||||
|
|
@ -3,50 +3,138 @@ import { dispatch } from "@/store";
|
|||
|
||||
jest.mock("@/store", () => ({
|
||||
dispatch: jest.fn(),
|
||||
state: {
|
||||
order: { vehicle: { year: "2019", make: "Acura" } }
|
||||
}
|
||||
}));
|
||||
|
||||
it("cms-content-helper: Should return data from CMS", () => {
|
||||
// Arrange
|
||||
const cmsMockData = {
|
||||
Result: [
|
||||
{
|
||||
Type: "VehicleBannerWidget",
|
||||
Model: {
|
||||
ImageId: "28452dcb-7762-4cc9-ab09-7643d0b89203",
|
||||
GenericVehicleImage:
|
||||
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
|
||||
GenericVehicleImageFilePath:
|
||||
"images/default-source/default-album/blurred-image.jpg",
|
||||
},
|
||||
},
|
||||
{
|
||||
Type: "PageHeaderWidget",
|
||||
Model: {
|
||||
HeaderText: "Select a year to get started",
|
||||
},
|
||||
},
|
||||
{
|
||||
Type: "PageHeaderWidget",
|
||||
Model: {
|
||||
HeaderText: "Select a model",
|
||||
},
|
||||
},
|
||||
{
|
||||
Type: "RadioQuestionWidget",
|
||||
Model: {
|
||||
QuestionText: "What year is your vehicle?",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
|
||||
describe("cms-content-helper.js", () => {
|
||||
it("Should return data from CMS", () => {
|
||||
// Arrange
|
||||
const cmsMockData = {
|
||||
Result: [
|
||||
{
|
||||
Type: "FunnelSubHeaderWidget",
|
||||
Model: {
|
||||
HeaderText: "Select a year to get started",
|
||||
},
|
||||
},
|
||||
{
|
||||
Type: "FunnelSubHeaderWidget",
|
||||
Model: {
|
||||
HeaderText: "Select a model",
|
||||
},
|
||||
},
|
||||
{
|
||||
Type: "RadioQuestionWidget",
|
||||
Model: {
|
||||
QuestionText: "What year is your vehicle?",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
|
||||
|
||||
// Act
|
||||
fetchCmsContentForPage("testPage").then((response) => {
|
||||
// Assert
|
||||
expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual(
|
||||
"Select a year to get started"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
// Act
|
||||
fetchCmsContentForPage("testPage").then((response) => {
|
||||
// Assert
|
||||
expect(response.PageHeaderWidget[0].HeaderText).toEqual(
|
||||
"Select a year to get started"
|
||||
);
|
||||
});
|
||||
|
||||
describe("cms-content-helper.js", () => {
|
||||
it("Should replace strings for global state", () => {
|
||||
const cmsMockData = {
|
||||
Result: [
|
||||
{
|
||||
Type: "FunnelSubHeaderWidget",
|
||||
Model: {
|
||||
HeaderText: "{globalState:order.vehicle.year}",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
|
||||
|
||||
fetchCmsContentForPage("testPage").then((response) => {
|
||||
// Assert
|
||||
expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual(
|
||||
"2019"
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("cms-content-helper.js", () => {
|
||||
it("Should replace strings for global state, and leave others the same", () => {
|
||||
|
||||
const cmsMockData = {
|
||||
Result: [
|
||||
{
|
||||
Type: "FunnelSubHeaderWidget",
|
||||
Model: {
|
||||
HeaderText: "{globalState:order.vehicle.year}",
|
||||
},
|
||||
},
|
||||
{
|
||||
Type: "RadioQuestionWidget",
|
||||
Model: {
|
||||
ExampleText: "My widget value!",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
|
||||
|
||||
fetchCmsContentForPage("testPage").then((response) => {
|
||||
// Assert
|
||||
expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual("2019");
|
||||
expect(response.RadioQuestionWidget[0].ExampleText).toEqual("My widget value!");
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("cms-content-helper.js", () => {
|
||||
it("Should replace strings for global state in nested objects", () => {
|
||||
|
||||
const cmsMockData = {
|
||||
Result: [
|
||||
{
|
||||
Type: "FunnelSubHeaderWidget",
|
||||
Model: {
|
||||
HeaderText: "{globalState:order.vehicle.year}",
|
||||
},
|
||||
},
|
||||
{
|
||||
Type: "RadioQuestionWidget",
|
||||
Model: {
|
||||
OtherObjectInside: {
|
||||
ExampleText: "{globalState:order.vehicle.make}",
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
|
||||
|
||||
fetchCmsContentForPage("testPage").then((response) => {
|
||||
// Assert
|
||||
|
||||
expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual("2019");
|
||||
expect(response.RadioQuestionWidget[0].OtherObjectInside.ExampleText).toEqual("Acura");
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test.todo("String cannot be mapped to global state");
|
||||
|
|
@ -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">Radio Card</h4>
|
||||
<h4 class="m-0 p-2 bg-light rounded">Inputs</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-2">
|
||||
<radioCard
|
||||
radioLabel="Windshield"
|
||||
radioImage="windshield-damage.svg"
|
||||
altText="Windshield"
|
||||
groupName="damageKey"
|
||||
radioID="windshield"
|
||||
/>
|
||||
<radioCard
|
||||
radioLabel="Side Window"
|
||||
radioImage="side-window-damage.svg"
|
||||
altText="Side Window"
|
||||
groupName="damageKey"
|
||||
radioID="sidewindow"
|
||||
/>
|
||||
<radioCard
|
||||
radioLabel="Back Glass"
|
||||
radioImage="back-glass-damage.svg"
|
||||
altText="Back Glass"
|
||||
groupName="damageKey"
|
||||
radioID="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,232 +39,527 @@
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<buttonBack/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">List Button</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<listButton
|
||||
buttonText="List Button"
|
||||
errorText="Test error message"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
<buttonBack
|
||||
backButtonAccessibleText="Back button label"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Radio - Single-Line</h4>
|
||||
<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">Functioning as Checkbox</legend>
|
||||
<listCard
|
||||
isMultiSelect
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Checkbox"
|
||||
groupID="checkbox-demo-1"
|
||||
buttonLabelSubCopy="Description"
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-2">
|
||||
<div class="col">
|
||||
<h6 class="mx-2 my-4">Checkbox No Description</h6>
|
||||
<fieldset>
|
||||
<legend class="sr-only">Checkbox no Description</legend>
|
||||
<listCard
|
||||
isMultiSelect
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Checkbox b"
|
||||
groupID="checkbox-demo-1a"
|
||||
buttonLabelSubCopy=""
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-2">
|
||||
<div class="col">
|
||||
<h6 class="mx-2 my-4">Functioning as Radio Button</h6>
|
||||
<fieldset>
|
||||
<legend class="sr-only">Functioning as Radio Button</legend>
|
||||
<listCard
|
||||
isRadio
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Radio Button"
|
||||
groupID="radio-demo-2"
|
||||
buttonLabelSubCopy="Description"
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-2">
|
||||
<div class="col">
|
||||
<h6 class="mx-2 my-4">Radio Button no Description</h6>
|
||||
<fieldset>
|
||||
<legend class="sr-only">Radio Button no Description</legend>
|
||||
<listCard
|
||||
isRadio
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Radio Button b"
|
||||
groupID="radio-demo-2b"
|
||||
buttonLabelSubCopy=""
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-2">
|
||||
<div class="col">
|
||||
<h6 class="mx-2 my-4">Horizontal as Checkbox</h6>
|
||||
<fieldset>
|
||||
<legend class="sr-only">Horizontal Checkbox</legend>
|
||||
<listCard
|
||||
isMultiSelectHorizontal
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Horizontal Checkbox"
|
||||
groupID="checkbox-demo-3"
|
||||
buttonLabelSubCopy="Description"
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-2">
|
||||
<div class="col">
|
||||
<h6 class="mx-2 my-4">Checkbox no Description</h6>
|
||||
<fieldset>
|
||||
<legend class="sr-only">Checkbox no Description</legend>
|
||||
<listCard
|
||||
isMultiSelectHorizontal
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Horizontal Checkbox b"
|
||||
groupID="checkbox-demo-3b"
|
||||
buttonLabelSubCopy=""
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-2">
|
||||
<div class="col">
|
||||
<h6 class="mx-2 my-4">Horizontal as Radio Button</h6>
|
||||
<fieldset>
|
||||
<legend class="sr-only">Horizontal Radio Button</legend>
|
||||
<listCard
|
||||
isRadioHorizontal
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Horizontal Radio Button"
|
||||
groupID="radio-demo-4"
|
||||
buttonLabelSubCopy="Description"
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-2">
|
||||
<div class="col">
|
||||
<h6 class="mx-2 my-4">Radio Button no Description</h6>
|
||||
<fieldset>
|
||||
<legend class="sr-only">Radio Button no Description</legend>
|
||||
<listCard
|
||||
isRadioHorizontal
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Horizontal Radio Button b"
|
||||
groupID="radio-demo-4b"
|
||||
buttonLabelSubCopy=""
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
|
||||
<h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
|
||||
<div
|
||||
role="radiogroup"
|
||||
aria-labelledby="demo-1-radio-group"
|
||||
class="col my-3 d-flex align-items-center flex-column"
|
||||
>
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
|
||||
<div role="radiogroup" aria-labelledby="demo-1-radio-group" class="col my-3 d-flex align-items-center flex-column">
|
||||
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
|
||||
<h3 class="sr-only" id="demo-1-radio-group">
|
||||
Select Vehicle Year
|
||||
</h3>
|
||||
<radio
|
||||
<listButton
|
||||
isMultiSelect
|
||||
groupName="demo-1"
|
||||
ariaLabelBy="vehicle-year"
|
||||
radioID="2021"
|
||||
buttonID="2021"
|
||||
isRequired=true
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
<radio
|
||||
<listButton
|
||||
isMultiSelect
|
||||
groupName="demo-1"
|
||||
ariaLabelBy="vehicle-year"
|
||||
radioID="2020"
|
||||
buttonID="2020"
|
||||
isRequired=true
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
<radio
|
||||
<listButton
|
||||
isMultiSelect
|
||||
groupName="demo-1"
|
||||
ariaLabelBy="vehicle-year"
|
||||
radioID="2019"
|
||||
buttonID="2019"
|
||||
isRequired=true
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Radio - Multi-Line</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
|
||||
<div
|
||||
role="radiogroup"
|
||||
aria-labelledby="demo-2-radio-group"
|
||||
class="col my-3 d-flex align-items-center flex-column"
|
||||
>
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
|
||||
<div role="checkbox" aria-labelledby="demo-1-checkbox-group" class="col my-3 d-flex flex-column">
|
||||
<h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
|
||||
<!-- 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>
|
||||
<radio
|
||||
groupName="demo-2"
|
||||
ariaLabelBy="vehicle-make"
|
||||
radioID="Chevrolet"
|
||||
radioLabelSubCopy="Test sub-headline"
|
||||
<h3 class="sr-only" id="demo-1-checkbox-group">Select Vehicle Year</h3>
|
||||
<listButton
|
||||
groupName="demo-1-checkbox"
|
||||
ariaLabelBy="vehicle-year"
|
||||
buttonID="2018"
|
||||
isRequired=true
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
<radio
|
||||
groupName="demo-2"
|
||||
ariaLabelBy="vehicle-make"
|
||||
radioID="Dodge"
|
||||
radioLabelSubCopy="Test sub-headline"
|
||||
<listButton
|
||||
groupName="demo-1-checkbox"
|
||||
ariaLabelBy="vehicle-year"
|
||||
buttonID="2017"
|
||||
isRequired=true
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
<radio
|
||||
groupName="demo-2"
|
||||
ariaLabelBy="vehicle-make"
|
||||
radioID="Ford"
|
||||
radioLabelSubCopy="Test sub-headline"
|
||||
<listButton
|
||||
groupName="demo-1-checkbox"
|
||||
ariaLabelBy="vehicle-year"
|
||||
buttonID="2016"
|
||||
isRequired=true
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Radio - Multi-Line Centered</h4>
|
||||
<h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line</h4>
|
||||
<h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
|
||||
<div
|
||||
role="radiogroup"
|
||||
aria-labelledby="demo-3-radio-group"
|
||||
class="col my-3 d-flex align-items-center flex-column"
|
||||
>
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
|
||||
<div role="radiogroup" aria-labelledby="demo-2-radio-group" class="col my-3 d-flex align-items-center flex-column">
|
||||
<!-- 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>
|
||||
<radio
|
||||
groupName="demo-3"
|
||||
ariaLabelBy="vehicle-model"
|
||||
radioID="Corvette"
|
||||
radioLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-center"
|
||||
<h3 class="sr-only" id="demo-2-radio-group">Select Vehicle Year</h3>
|
||||
<listButton
|
||||
isMultiSelect
|
||||
groupName="demo-2"
|
||||
ariaLabelBy="vehicle-make"
|
||||
buttonID="Chevrolet"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
<radio
|
||||
groupName="demo-3"
|
||||
ariaLabelBy="vehicle-model"
|
||||
radioID="Testarosa"
|
||||
radioLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-center"
|
||||
<listButton
|
||||
isMultiSelect
|
||||
groupName="demo-2"
|
||||
ariaLabelBy="vehicle-make"
|
||||
buttonID="Dodge"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
<radio
|
||||
groupName="demo-3"
|
||||
ariaLabelBy="vehicle-model"
|
||||
radioID="S600"
|
||||
radioLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-center"
|
||||
<listButton
|
||||
isMultiSelect
|
||||
groupName="demo-2"
|
||||
ariaLabelBy="vehicle-make"
|
||||
buttonID="Ford"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
|
||||
<h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
|
||||
<div role="radiogroup" aria-labelledby="demo-2-checkbox-group" class="col my-3 d-flex align-items-center flex-column">
|
||||
<!-- 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-checkbox-group">Select Vehicle Year</h3>
|
||||
<listButton
|
||||
groupName="demo-2-checkbox"
|
||||
ariaLabelBy="vehicle-make"
|
||||
buttonID="Honda"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
<listButton
|
||||
groupName="demo-2-checkbox"
|
||||
ariaLabelBy="vehicle-make"
|
||||
buttonID="Acura"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
<listButton
|
||||
groupName="demo-2-checkbox"
|
||||
ariaLabelBy="vehicle-make"
|
||||
buttonID="Infiniti"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Radio Horizontal</h4>
|
||||
<h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line Centered</h4>
|
||||
<h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
|
||||
<div role="radiogroup" aria-labelledby="demo-3-radio-group" class="col my-3 d-flex align-items-center flex-column">
|
||||
<!-- 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
|
||||
isMultiSelect
|
||||
groupName="demo-3"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="Corvette"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
<listButton
|
||||
isMultiSelect
|
||||
groupName="demo-3"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="Testarosa"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
<listButton
|
||||
isMultiSelect
|
||||
groupName="demo-3"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="S600"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
|
||||
<h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
|
||||
<div role="radiogroup" aria-labelledby="demo-3-checkbox-group" class="col my-3 d-flex align-items-center flex-column">
|
||||
<!-- 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-checkbox-group">Multi-Line Centered</h3>
|
||||
<listButton
|
||||
groupName="demo-3-checkbox"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="Accord"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
<listButton
|
||||
groupName="demo-3-checkbox"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="Civic"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
<listButton
|
||||
groupName="demo-3-checkbox"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="Ridgeline"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">List Button Horizontal</h4>
|
||||
<h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row px-3">
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
|
||||
<div
|
||||
role="radiogroup"
|
||||
aria-labelledby="demo-4-radio-group"
|
||||
class="d-flex flex-row p-0"
|
||||
>
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
|
||||
<div role="radiogroup" aria-labelledby="demo-4-radio-group" class="d-flex flex-row p-0">
|
||||
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
|
||||
<h3 class="sr-only" id="demo-4-radio-group">
|
||||
Select Vehicle Year
|
||||
</h3>
|
||||
<radioHorizontal
|
||||
<listButtonHorizontal
|
||||
isMultiSelect
|
||||
groupName="demo-4"
|
||||
ariaLabelBy="vehicle-model"
|
||||
radioID="1"
|
||||
radioLabelSubCopy=""
|
||||
buttonID="1"
|
||||
buttonLabelSubCopy=""
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
v-bind:totalInGroup="3"
|
||||
v-bind:positionInGroup="1"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
<radioHorizontal
|
||||
<listButtonHorizontal
|
||||
isMultiSelect
|
||||
groupName="demo-4"
|
||||
ariaLabelBy="vehicle-model"
|
||||
radioID="2"
|
||||
radioLabelSubCopy=""
|
||||
buttonID="2"
|
||||
buttonLabelSubCopy=""
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
v-bind:totalInGroup="3"
|
||||
v-bind:positionInGroup="2"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
<radioHorizontal
|
||||
<listButtonHorizontal
|
||||
isMultiSelect
|
||||
groupName="demo-4"
|
||||
ariaLabelBy="vehicle-model"
|
||||
radioID="3"
|
||||
radioLabelSubCopy=""
|
||||
buttonID="3"
|
||||
buttonLabelSubCopy=""
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
v-bind:totalInGroup="3"
|
||||
v-bind:positionInGroup="3"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row px-3">
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
|
||||
<h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
|
||||
<div role="radiogroup" aria-labelledby="demo-4-checkbox-group" class="d-flex flex-row p-0">
|
||||
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
|
||||
<h3 class="sr-only" id="demo-4-checkbox-group">
|
||||
Select Vehicle Year
|
||||
</h3>
|
||||
<listButtonHorizontal
|
||||
groupName="demo-4-checkbox"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="4"
|
||||
buttonLabelSubCopy=""
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
v-bind:totalInGroup="3"
|
||||
v-bind:positionInGroup="1"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
<listButtonHorizontal
|
||||
groupName="demo-4-checkbox"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="5"
|
||||
buttonLabelSubCopy=""
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
v-bind:totalInGroup="3"
|
||||
v-bind:positionInGroup="2"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
<listButtonHorizontal
|
||||
groupName="demo-4-checkbox"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="6"
|
||||
buttonLabelSubCopy=""
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
v-bind:totalInGroup="3"
|
||||
v-bind:positionInGroup="3"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -414,7 +696,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>
|
||||
|
|
@ -437,27 +719,27 @@
|
|||
<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 radioCard from "@/ux-components/radio-card/radio-card";
|
||||
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 radio from "@/ux-components/radio/radio";
|
||||
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 radioHorizontal from "@/ux-components/radio-horizontal/radio-horizontal";
|
||||
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: {
|
||||
buttonPrimary,
|
||||
buttonSecondary,
|
||||
buttonBack,
|
||||
radioCard,
|
||||
listCard,
|
||||
listButton,
|
||||
radio,
|
||||
alert,
|
||||
vehicleBanner,
|
||||
radioHorizontal,
|
||||
siteHeader,
|
||||
listButtonHorizontal,
|
||||
checkbox,
|
||||
funnelHeader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
<template>
|
||||
<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">Loader</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<loader sizeInRem="10" loaderColor="blue" loaderPosition="center" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import loader from "@/ux-components/loader/loader";
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
loader,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
82
src/layouts/vehicle-make/make-question/make-question.spec.js
Normal file
82
src/layouts/vehicle-make/make-question/make-question.spec.js
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
import makeQuestion from "@/layouts/vehicle-make/make-question/make-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("make-question.vue", () => {
|
||||
test("Selected make is emitted upon selection.", async () => {
|
||||
|
||||
//Arrange
|
||||
const { wrapper } = setupMocks({ modelValueProp: "honda" });
|
||||
const makeToSelect = "ford";
|
||||
|
||||
//Act
|
||||
wrapper.setData({ selectedMake: makeToSelect });
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
//Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["ford"]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("make-question.vue", () => {
|
||||
test("CMS question text is used as radio question text.", async () => {
|
||||
|
||||
//Arrange
|
||||
const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What make is your vehicle?" });
|
||||
|
||||
//Act
|
||||
makeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
|
||||
|
||||
//Assert
|
||||
const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
|
||||
expect(buttonQuestionComponent.attributes("questiontext")).toBe("What make is your vehicle?");
|
||||
});
|
||||
});
|
||||
|
||||
describe("make-question.vue", () => {
|
||||
test("Data from store api are used as radio question answers.", async () => {
|
||||
|
||||
//Arrange
|
||||
const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["honda", "ford", "dodge"] });
|
||||
|
||||
//Act
|
||||
const initialData = makeQuestion.methods.loadInitialData.call(wrapper.vm);
|
||||
makeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
|
||||
|
||||
//Assert
|
||||
const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
|
||||
expect(buttonQuestionComponent.attributes("answers")).toBe("honda,ford,dodge");
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function setupMocks({
|
||||
modelValueProp = "1900",
|
||||
cmsQuestionText = "CMS text goes here",
|
||||
dataFromStoreApi = [],
|
||||
}) {
|
||||
|
||||
//Mock store
|
||||
store.dispatch = jest.fn(() => dataFromStoreApi);
|
||||
store.getters = { vehicle: {year: 2019} };
|
||||
const mountOptions = getMountOptions({
|
||||
store: {
|
||||
dispatch: store.dispatch,
|
||||
getters: store.getters,
|
||||
},
|
||||
});
|
||||
|
||||
//Mock props
|
||||
mountOptions.propsData = {
|
||||
modelValue: modelValueProp,
|
||||
};
|
||||
const wrapper = shallowMount(makeQuestion, mountOptions);
|
||||
|
||||
//Mock CMS content
|
||||
const cmsContent = {
|
||||
QuestionText: cmsQuestionText
|
||||
};
|
||||
return { wrapper, cmsContent };
|
||||
}
|
||||
47
src/layouts/vehicle-make/make-question/make-question.vue
Normal file
47
src/layouts/vehicle-make/make-question/make-question.vue
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<buttonQuestion class="radioQuestion"
|
||||
:questionText="questionText"
|
||||
:answers="makes"
|
||||
groupName="Choose Vehicle Make"
|
||||
v-model="selectedMake"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<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: "make-question",
|
||||
data() {
|
||||
return {
|
||||
questionText: null,
|
||||
selectedMake: null,
|
||||
makes: Array,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
modelValue: String,
|
||||
},
|
||||
components: {
|
||||
buttonQuestion,
|
||||
},
|
||||
methods: {
|
||||
loadInitialData() {
|
||||
return baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_VEHICLE_MAKES, {year: store.getters.vehicle.year});
|
||||
},
|
||||
initializeComponent(cmsContent, initialData) {
|
||||
this.questionText = cmsContent.QuestionText;
|
||||
this.makes = initialData;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedMake(val) {
|
||||
this.$emit("update:modelValue", val);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
180
src/layouts/vehicle-make/vehicle-make.spec.js
Normal file
180
src/layouts/vehicle-make/vehicle-make.spec.js
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
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";
|
||||
|
||||
// Mock our module for promises.
|
||||
jest.mock("@/helpers/layout-helper.js", () => ({
|
||||
settleAllPromises: jest.fn(),
|
||||
}));
|
||||
|
||||
describe("vehicle-make.vue", () => {
|
||||
test("Make question component is initized with api data", async (done) => {
|
||||
|
||||
//Arrange
|
||||
const radioQuestionCmsContent = { QuestionText: "What make is your vehicle?" };
|
||||
const makeQuestionInitialData = ["honda", "ford", "dodge"];
|
||||
const { wrapper, apiPromise } = setupMocks( {
|
||||
radioQuestionCmsContent: radioQuestionCmsContent,
|
||||
makeQuestionInitialData: makeQuestionInitialData,
|
||||
} );
|
||||
|
||||
//Act
|
||||
vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
|
||||
|
||||
//Assert
|
||||
apiPromise.finally(() => {
|
||||
expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, makeQuestionInitialData);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("vehicle-make.vue", () => {
|
||||
test("Page header is initailized with api data", async (done) => {
|
||||
|
||||
//Arrange
|
||||
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
|
||||
apiPromise.finally(() => {
|
||||
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
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
|
||||
const apiResponses = {
|
||||
cmsContent: {
|
||||
FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText],
|
||||
RadioQuestionWidget: [radioQuestionCmsContent],
|
||||
VehicleBannerWidget: [
|
||||
{
|
||||
GenericVehicleImage:
|
||||
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
|
||||
},
|
||||
],
|
||||
FunnelHeaderWidget: [
|
||||
{
|
||||
LogoImage:
|
||||
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
|
||||
},
|
||||
],
|
||||
},
|
||||
makeQuestionInitialData: makeQuestionInitialData,
|
||||
};
|
||||
const apiPromise = Promise.resolve(apiResponses);
|
||||
settleAllPromises.mockImplementation(() => apiPromise);
|
||||
|
||||
//Mock make question methods
|
||||
makeQuestion.methods = {
|
||||
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 };
|
||||
}
|
||||
87
src/layouts/vehicle-make/vehicle-make.vue
Normal file
87
src/layouts/vehicle-make/vehicle-make.vue
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<div class="container-fluid shadow rounded-3 p-0">
|
||||
<funnelHeader ref="funnelHeader" />
|
||||
<div class="select-car">
|
||||
<div class="select-car-form rounded text-center">
|
||||
<vehicleBanner ref="vehicleBanner" />
|
||||
<funnelSubHeader
|
||||
ref="funnelSubHeader"
|
||||
:hasBackButton="true"
|
||||
backButtonAccessibleText="Change Vehicle Year"
|
||||
@click-event="backButtonAction"
|
||||
class="Header"
|
||||
/>
|
||||
<makeQuestion v-model="selectedMake" ref="makeQuestion" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
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";
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
export default {
|
||||
name: "vehicle-make",
|
||||
data() {
|
||||
return {
|
||||
selectedMake: null,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
|
||||
beforeRouteEnter(to, from, next) {
|
||||
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
const makeQuestionInitialDataPromise = makeQuestion.methods.loadInitialData();
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
{
|
||||
resultKey: "makeQuestionInitialData",
|
||||
promise: makeQuestionInitialDataPromise,
|
||||
},
|
||||
];
|
||||
settleAllPromises(promiseResultMap).then((resultMap) => {
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
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() {
|
||||
// route to move backwards
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
selectedMake(make) {
|
||||
this.$store.commit(this.storeMutations.UPDATE_MAKE, make);
|
||||
this.$router.navigate(this.navigationScenarios.SELECTED_MAKE, this.$route);
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
makeQuestion,
|
||||
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 };
|
||||
}
|
||||
47
src/layouts/vehicle-model/model-question/model-question.vue
Normal file
47
src/layouts/vehicle-model/model-question/model-question.vue
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<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";
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
|
||||
export default {
|
||||
name: "model-question",
|
||||
data() {
|
||||
return {
|
||||
questionText: null,
|
||||
selectedModel: null,
|
||||
models: Array,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
modelValue: String,
|
||||
},
|
||||
components: {
|
||||
buttonQuestion,
|
||||
},
|
||||
methods: {
|
||||
loadInitialData() {
|
||||
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;
|
||||
this.models = initialData;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedModel(val) {
|
||||
this.$emit("update:modelValue", val);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
180
src/layouts/vehicle-model/vehicle-model.spec.js
Normal file
180
src/layouts/vehicle-model/vehicle-model.spec.js
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
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";
|
||||
|
||||
// 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 initailized with api data", async (done) => {
|
||||
|
||||
//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
|
||||
apiPromise.finally(() => {
|
||||
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function setupMocks({
|
||||
radioQuestionCmsContent = {},
|
||||
modelQuestionInitialData = {},
|
||||
pageHeaderWidgetHeaderText = {},
|
||||
mountOptionsMockData = {},
|
||||
}) {
|
||||
|
||||
//Mock api responses
|
||||
const apiResponses = {
|
||||
cmsContent: {
|
||||
FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText],
|
||||
RadioQuestionWidget: [radioQuestionCmsContent],
|
||||
VehicleBannerWidget: [
|
||||
{
|
||||
GenericVehicleImage:
|
||||
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
|
||||
},
|
||||
],
|
||||
FunnelHeaderWidget: [
|
||||
{
|
||||
LogoImage:
|
||||
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
|
||||
},
|
||||
],
|
||||
},
|
||||
modelQuestionInitialData: modelQuestionInitialData,
|
||||
};
|
||||
const apiPromise = Promise.resolve(apiResponses);
|
||||
settleAllPromises.mockImplementation(() => apiPromise);
|
||||
|
||||
//Mock model question methods
|
||||
modelQuestion.methods = {
|
||||
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(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 };
|
||||
}
|
||||
87
src/layouts/vehicle-model/vehicle-model.vue
Normal file
87
src/layouts/vehicle-model/vehicle-model.vue
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<div class="container-fluid shadow rounded-3 p-0">
|
||||
<funnelHeader ref="funnelHeader" />
|
||||
<div class="select-car">
|
||||
<div class="select-car-form rounded text-center">
|
||||
<vehicleBanner ref="vehicleBanner" />
|
||||
<funnelSubHeader
|
||||
ref="funnelSubHeader"
|
||||
:hasBackButton="true"
|
||||
backButtonAccessibleText="Change Vehicle Make"
|
||||
@click-event="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 {
|
||||
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.$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() {
|
||||
// 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 };
|
||||
}
|
||||
47
src/layouts/vehicle-style/style-question/style-question.vue
Normal file
47
src/layouts/vehicle-style/style-question/style-question.vue
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<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";
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
|
||||
export default {
|
||||
name: "style-question",
|
||||
data() {
|
||||
return {
|
||||
questionText: null,
|
||||
selectedStyle: null,
|
||||
styles: Array,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
modelValue: String,
|
||||
},
|
||||
components: {
|
||||
buttonQuestion,
|
||||
},
|
||||
methods: {
|
||||
loadInitialData() {
|
||||
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;
|
||||
this.styles = initialData;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedStyle(val) {
|
||||
this.$emit("update:modelValue", val);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
180
src/layouts/vehicle-style/vehicle-style.spec.js
Normal file
180
src/layouts/vehicle-style/vehicle-style.spec.js
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
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";
|
||||
|
||||
// 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 initailized with api data", async (done) => {
|
||||
|
||||
//Arrange
|
||||
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
|
||||
apiPromise.finally(() => {
|
||||
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
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: {
|
||||
FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText],
|
||||
RadioQuestionWidget: [radioQuestionCmsContent],
|
||||
VehicleBannerWidget: [
|
||||
{
|
||||
GenericVehicleImage:
|
||||
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
|
||||
},
|
||||
],
|
||||
FunnelHeaderWidget: [
|
||||
{
|
||||
LogoImage:
|
||||
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
|
||||
},
|
||||
],
|
||||
},
|
||||
styleQuestionInitialData: styleQuestionInitialData,
|
||||
};
|
||||
const apiPromise = Promise.resolve(apiResponses);
|
||||
settleAllPromises.mockImplementation(() => apiPromise);
|
||||
|
||||
//Mock style question methods
|
||||
styleQuestion.methods = {
|
||||
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 };
|
||||
}
|
||||
87
src/layouts/vehicle-style/vehicle-style.vue
Normal file
87
src/layouts/vehicle-style/vehicle-style.vue
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<div class="container-fluid shadow rounded-3 p-0">
|
||||
<funnelHeader ref="funnelHeader" />
|
||||
<div class="select-car">
|
||||
<div class="select-car-form rounded text-center">
|
||||
<vehicleBanner ref="vehicleBanner" />
|
||||
<funnelSubHeader
|
||||
ref="funnelSubHeader"
|
||||
:hasBackButton="true"
|
||||
backButtonAccessibleText="Change Vehicle Model"
|
||||
@click-event="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 {
|
||||
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.$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() {
|
||||
// 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>
|
||||
|
|
@ -1,6 +1,10 @@
|
|||
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";
|
||||
|
||||
|
|
@ -10,72 +14,123 @@ jest.mock("@/helpers/layout-helper.js", () => ({
|
|||
}));
|
||||
|
||||
describe("vehicle-year.vue", () => {
|
||||
test("vehicle-year.vue should render data from CMS", async () => {
|
||||
// Arrange
|
||||
test("Year question component is initized with api data", async (done) => {
|
||||
|
||||
// Our mock data for our call to settleAllPromises
|
||||
const mockData = {
|
||||
getPageContent: {
|
||||
PageHeaderWidget: [{ HeaderText: "Select a year to get started" }],
|
||||
RadioQuestionWidget: [{ QuestionText: "What year is your vehicle?" }],
|
||||
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",
|
||||
},
|
||||
],
|
||||
isCmsContentReady: true,
|
||||
},
|
||||
getVehicleYear: [2023, 2022, 2021],
|
||||
store: {
|
||||
commit: jest.fn(),
|
||||
year: null,
|
||||
},
|
||||
router: {
|
||||
push: jest.fn(),
|
||||
},
|
||||
};
|
||||
//Arrange
|
||||
const radioQuestionCmsContent = { QuestionText: "What year is your vehicle?" };
|
||||
const yearQuestionInitialData = ["2023", "2022", "2021"];
|
||||
const { wrapper, apiPromise } = setupMocks( {
|
||||
radioQuestionCmsContent: radioQuestionCmsContent,
|
||||
yearQuestionInitialData: yearQuestionInitialData,
|
||||
} );
|
||||
|
||||
// our router information needed.
|
||||
const to = {
|
||||
query: {
|
||||
fmgPage: "vehicle-year",
|
||||
},
|
||||
};
|
||||
//Act
|
||||
vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm));
|
||||
|
||||
const mountOptions = getMountOptions(mockData);
|
||||
|
||||
// our mock implementation of settleAllPromises
|
||||
settleAllPromises.mockImplementation(() => {
|
||||
return Promise.resolve(mockData);
|
||||
//Assert
|
||||
apiPromise.finally(() => {
|
||||
expect(yearQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, yearQuestionInitialData);
|
||||
done();
|
||||
});
|
||||
|
||||
// Act
|
||||
const wrapper = shallowMount(vehicleYear, mountOptions);
|
||||
wrapper.vm.$options.watch.selectedYear.call(wrapper.vm);
|
||||
|
||||
// Call our beforeRouteEnter on the component.
|
||||
// This passes (c) => c(wrapper.vm) so that next can be called and our
|
||||
// data can be set.
|
||||
vehicleYear.beforeRouteEnter.call(wrapper.vm, to, undefined, (c) =>
|
||||
c(wrapper.vm)
|
||||
);
|
||||
|
||||
await nextTick(); // Wait for the DOM to update.
|
||||
|
||||
// Assert
|
||||
const header = await wrapper.find(".Header");
|
||||
expect(header.attributes("text")).toEqual("Select a year to get started");
|
||||
|
||||
const yearQuestion = wrapper.findComponent({ name: "year-question" });
|
||||
expect(yearQuestion.attributes("questiontext")).toEqual(
|
||||
"What year is your vehicle?"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("vehicle-year.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
|
||||
vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm));
|
||||
|
||||
//Assert
|
||||
apiPromise.finally(() => {
|
||||
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function setupMocks({
|
||||
radioQuestionCmsContent = {},
|
||||
yearQuestionInitialData = {},
|
||||
pageHeaderWidgetHeaderText = {},
|
||||
mountOptionsMockData = {},
|
||||
}) {
|
||||
|
||||
//Mock api responses
|
||||
const apiResponses = {
|
||||
cmsContent: {
|
||||
FunnelSubHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }],
|
||||
RadioQuestionWidget: [radioQuestionCmsContent],
|
||||
VehicleBannerWidget: [
|
||||
{
|
||||
GenericVehicleImage:
|
||||
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
|
||||
},
|
||||
],
|
||||
FunnelHeaderWidget: [
|
||||
{
|
||||
LogoImage:
|
||||
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
|
||||
},
|
||||
],
|
||||
},
|
||||
yearQuestionInitialData: yearQuestionInitialData,
|
||||
};
|
||||
const apiPromise = Promise.resolve(apiResponses);
|
||||
settleAllPromises.mockImplementation(() => apiPromise);
|
||||
|
||||
//Mock year question methods
|
||||
yearQuestion.methods = {
|
||||
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 };
|
||||
}
|
||||
|
|
@ -1,11 +1,14 @@
|
|||
<template v-if="isCmsContentReady">
|
||||
<template>
|
||||
<div class="container-fluid shadow rounded-3 p-0">
|
||||
<siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
|
||||
<funnelHeader ref="funnelHeader" />
|
||||
<div class="select-car">
|
||||
<div class="select-car-form rounded text-center">
|
||||
<vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
|
||||
<pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
|
||||
<yearQuestion :questionText="radioQuestionWidgets.QuestionText" :years="vehicleYears" v-model="selectedYear" />
|
||||
<vehicleBanner ref="vehicleBanner" />
|
||||
<funnelSubHeader
|
||||
class="Header"
|
||||
ref="funnelSubHeader"
|
||||
/>
|
||||
<yearQuestion v-model="selectedYear" ref="yearQuestion" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -14,57 +17,46 @@
|
|||
<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 store from "@/store";
|
||||
import { storeActions } from "@/constants/store-actions.js";
|
||||
|
||||
export default {
|
||||
name: "vehicle-year",
|
||||
data() {
|
||||
return {
|
||||
pageHeaderWidgets: {},
|
||||
radioQuestionWidgets: {},
|
||||
vehicleYears: [],
|
||||
siteHeaderWidget: {},
|
||||
vehicleBannerWidget: {},
|
||||
selectedYear: null,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
|
||||
beforeRouteEnter(to, from, next) {
|
||||
|
||||
// Call APIs
|
||||
const contentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
const getVehicleYearPromise = store.dispatch(
|
||||
storeActions.GET_VEHICLE_YEARS,
|
||||
{}
|
||||
);
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "getPageContent",
|
||||
promise: contentPromise,
|
||||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
{
|
||||
resultKey: "getVehicleYear",
|
||||
promise: getVehicleYearPromise,
|
||||
resultKey: "yearQuestionInitialData",
|
||||
promise: yearQuestionInitialDataPromise,
|
||||
},
|
||||
];
|
||||
settleAllPromises(promiseResultMap).then((resultMap) => {
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.pageHeaderWidgets = resultMap.getPageContent.PageHeaderWidget[0];
|
||||
vm.siteHeaderWidget = resultMap.getPageContent.SiteHeaderWidget[0];
|
||||
vm.radioQuestionWidgets =
|
||||
resultMap.getPageContent.RadioQuestionWidget[0];
|
||||
vm.vehicleBannerWidget =
|
||||
resultMap.getPageContent.VehicleBannerWidget[0];
|
||||
vm.vehicleYears = resultMap.getVehicleYear;
|
||||
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);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
|
@ -72,27 +64,15 @@ export default {
|
|||
watch: {
|
||||
selectedYear(year) {
|
||||
this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
|
||||
this.$router.push('?fmgPage=vehicle-make');
|
||||
this.$router.navigate(this.navigationScenarios.SELECTED_YEAR, this.$route);
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
yearQuestion,
|
||||
pageHeader,
|
||||
siteHeader,
|
||||
funnelHeader,
|
||||
vehicleBanner,
|
||||
funnelSubHeader,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.select-car {
|
||||
height: calc(100vh - 56px);
|
||||
|
||||
.car_list {
|
||||
// Height will be determined by overall height of content above list
|
||||
height: calc(100% - 300px);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,80 @@
|
|||
import yearQuestion from "@/layouts/vehicle-year/year-question/year-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("year-question.vue", () => {
|
||||
test("year-question should take a prop for years and questionText, and trigger a selectYear function when an option is clicked.", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(yearQuestion);
|
||||
await wrapper.setProps({
|
||||
questionText: "What year is your vehicle?",
|
||||
years: ["2023", "2022", "2021"],
|
||||
modelValue: "2020",
|
||||
});
|
||||
wrapper.vm.$options.watch.selectedYear.call(wrapper.vm);
|
||||
test("Selected year is emitted upon selection.", async () => {
|
||||
|
||||
// Assert
|
||||
const radioQuestion = await wrapper.findComponent({
|
||||
name: "radioQuestion",
|
||||
});
|
||||
expect(radioQuestion.attributes("questiontext")).toBe(
|
||||
"What year is your vehicle?"
|
||||
);
|
||||
expect(radioQuestion.attributes("answers")).toBe("2023,2022,2021");
|
||||
expect(wrapper.componentVM.modelValue).toBe("2020");
|
||||
//Arrange
|
||||
const { wrapper } = setupMocks({ modelValueProp: "2020" });
|
||||
const yearToSelect = "2021";
|
||||
|
||||
//Act
|
||||
wrapper.setData({ selectedYear: yearToSelect });
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
//Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["2021"]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("year-question.vue", () => {
|
||||
test("CMS question text is used as radio question text.", async () => {
|
||||
|
||||
//Arrange
|
||||
const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What year is your vehicle?" });
|
||||
|
||||
//Act
|
||||
yearQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
|
||||
|
||||
//Assert
|
||||
const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
|
||||
expect(buttonQuestionComponent.attributes("questiontext")).toBe("What year is your vehicle?");
|
||||
});
|
||||
});
|
||||
|
||||
describe("year-question.vue", () => {
|
||||
test("Data from store api are used as radio question answers.", async () => {
|
||||
|
||||
//Arrange
|
||||
const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["2023", "2022", "2021"] });
|
||||
|
||||
//Act
|
||||
const initialData = yearQuestion.methods.loadInitialData.call(wrapper.vm);
|
||||
yearQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
|
||||
|
||||
//Assert
|
||||
const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
|
||||
expect(buttonQuestionComponent.attributes("answers")).toBe("2023,2022,2021");
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function setupMocks({
|
||||
modelValueProp = "1900",
|
||||
cmsQuestionText = "CMS text goes here",
|
||||
dataFromStoreApi = [],
|
||||
}) {
|
||||
|
||||
//Mock store
|
||||
store.dispatch = jest.fn(() => dataFromStoreApi);
|
||||
const mountOptions = getMountOptions({
|
||||
store: {
|
||||
dispatch: store.dispatch,
|
||||
},
|
||||
});
|
||||
|
||||
//Mock props
|
||||
mountOptions.propsData = {
|
||||
modelValue: modelValueProp,
|
||||
};
|
||||
const wrapper = shallowMount(yearQuestion, mountOptions);
|
||||
|
||||
//Mock CMS content
|
||||
const cmsContent = {
|
||||
QuestionText: cmsQuestionText
|
||||
};
|
||||
return { wrapper, cmsContent };
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<radioQuestion class="radioQuestion"
|
||||
<buttonQuestion class="radioQuestion"
|
||||
:questionText="questionText"
|
||||
:answers="years"
|
||||
groupName="Choose Vehicle Year"
|
||||
|
|
@ -8,22 +8,34 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import radioQuestion from "@/common-components/radio-question/radio-question";
|
||||
import buttonQuestion from "@/common-components/button-question/button-question";
|
||||
// Supporting files
|
||||
import { storeActions } from "@/constants/store-actions.js";
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
|
||||
export default {
|
||||
name: "year-question",
|
||||
data() {
|
||||
return {
|
||||
questionText: null,
|
||||
selectedYear: null,
|
||||
};
|
||||
years: Array,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
questionText: String,
|
||||
years: Array,
|
||||
modelValue: String,
|
||||
},
|
||||
components: {
|
||||
radioQuestion,
|
||||
buttonQuestion,
|
||||
},
|
||||
methods: {
|
||||
loadInitialData() {
|
||||
return baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_VEHICLE_YEARS, {});
|
||||
},
|
||||
initializeComponent(cmsContent, initialData) {
|
||||
this.questionText = cmsContent.QuestionText;
|
||||
this.years = initialData;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedYear(val) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
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";
|
||||
import { widgetNames } from "@/constants/widget-names.js";
|
||||
|
||||
export default {
|
||||
|
|
@ -8,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: {
|
||||
|
|
@ -31,6 +26,9 @@ export default {
|
|||
storeMutations() {
|
||||
return storeMutations;
|
||||
},
|
||||
navigationScenarios() {
|
||||
return navigationScenarios;
|
||||
},
|
||||
widgetNames() {
|
||||
return widgetNames;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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,8 +3,10 @@ import { storeActions } from "@/constants/store-actions.js";
|
|||
import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
|
||||
import { routingTable } from "@/router/router-constants/routing-table.js";
|
||||
import ComponentTest from "@/layouts/component-test/component-test.vue";
|
||||
|
||||
import LoaderDemo from "@/layouts/loader-demo/loader-demo.vue";
|
||||
import AddressPOC from "@/layouts/address-poc/address-poc.vue";
|
||||
|
||||
import NotFound from "@/layouts/not-found/not-found.vue";
|
||||
import store from "@/store";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
const fmgPageValues = {
|
||||
VEHICLE_YEAR: "vehicle-year",
|
||||
VEHICLE_MAKE: "vehicle-make",
|
||||
VEHICLE_MODEL: "vehicle-model",
|
||||
VEHICLE_STYLE: "vehicle-style",
|
||||
};
|
||||
|
||||
export { fmgPageValues };
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
const navigationScenarios = {
|
||||
SELECTED_YEAR: "SELECTED_YEAR",
|
||||
SELECTED_MODEL: "SELECTED_MODEL",
|
||||
SELECTED_MAKE: "SELECTED_MAKE",
|
||||
SELECTED_STYLE: "SELECTED_STYLE",
|
||||
CLICKED_BACK: "CLICKED_BACK",
|
||||
};
|
||||
|
||||
export { navigationScenarios };
|
||||
|
|
|
|||
|
|
@ -11,6 +11,45 @@ const routingTable = [
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.VEHICLE_MAKE,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_MAKE,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_YEAR,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.VEHICLE_MODEL,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_MODEL,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.VEHICLE_STYLE,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_STYLE,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
|
||||
}
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export { routingTable };
|
||||
export { routingTable };
|
||||
|
|
@ -64,6 +64,18 @@ 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
|
||||
},
|
||||
actions: {
|
||||
// Vehicle API Actions
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -53,33 +53,4 @@
|
|||
border-radius: $border-radius-lg;
|
||||
}
|
||||
}
|
||||
&.list-button {
|
||||
position: relative;
|
||||
background: $white;
|
||||
transition: all 150ms linear;
|
||||
border-radius: $border-radius-lg;
|
||||
border: 1px solid $gray-500;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 4px $blue-100;
|
||||
}
|
||||
&:focus, // Mouse, touch, stylus focus
|
||||
&:focus-visible { // Keyboard focus for accessibility
|
||||
box-shadow: 0 0 0 2px $blue;
|
||||
}
|
||||
&:active {
|
||||
background: $blue-100;
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
+ label {
|
||||
display: none;
|
||||
}
|
||||
&.error {
|
||||
border: 1px solid $danger;
|
||||
~ label {
|
||||
display: flex;
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.radiogroup {
|
||||
&.radio-list-button {
|
||||
input[type="radio"] {
|
||||
.list-group {
|
||||
&.list-button {
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
width: 0;
|
||||
|
|
@ -32,13 +33,6 @@
|
|||
+ p {
|
||||
display: none;
|
||||
}
|
||||
&.error {
|
||||
border: 1px solid $danger;
|
||||
+ p {
|
||||
display: flex;
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -115,6 +115,12 @@ $font-family-base: $font-family-sans-serif;
|
|||
$font-family-code: $font-family-monospace;
|
||||
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
|
||||
|
||||
//Custom Font size (extra small)
|
||||
$font-size-xsm: $font-size-base * .75;
|
||||
$font-sizes: (
|
||||
7: $font-size-xsm
|
||||
);
|
||||
|
||||
//Font weight
|
||||
$font-weight-lighter: lighter;
|
||||
$font-weight-light: 300;
|
||||
|
|
|
|||
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,17 +1,17 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import radioHorizontal from "./radio-horizontal";
|
||||
import listButtonHorizontal from "./list-button-horizontal";
|
||||
|
||||
describe("radio.vue", () => {
|
||||
it("Should render the 'radioID' prop value as the label and id value as well as the radio button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
|
||||
describe("list-button.vue", () => {
|
||||
it("Should render the 'buttonID' prop value as the label and id value as well as the button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(radioHorizontal, {
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
propsData: {
|
||||
radioID: "2023",
|
||||
buttonID: "2023",
|
||||
groupName: "TestGroup",
|
||||
loaderColor: "blue",
|
||||
loaderPosition: "right",
|
||||
loaderEnabled: "true",
|
||||
sizeInRem: "1.5",
|
||||
errorMessage: "null",
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -20,7 +20,7 @@ describe("radio.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",
|
||||
|
|
@ -31,9 +31,9 @@ describe("radio.vue", () => {
|
|||
});
|
||||
|
||||
expect(label.attributes()).toEqual({
|
||||
role: "radio",
|
||||
tabindex: "-1",
|
||||
for: "2023",
|
||||
"aria-labelledby": "2023",
|
||||
class: "d-flex flex-column justify-content-center py-3 px-4 last-item",
|
||||
"aria-checked": "false",
|
||||
});
|
||||
|
|
@ -42,6 +42,6 @@ describe("radio.vue", () => {
|
|||
|
||||
expect(paragraph.text()).toEqual("2023");
|
||||
|
||||
expect(wrapper.vm.display).toBe(true);
|
||||
expect(wrapper.vm.isLoaderDisplayed).toBe(true);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<!-- 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="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" :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>
|
||||
</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="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>
|
||||
<loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import loader from "@/ux-components/loader/loader";
|
||||
|
||||
export default {
|
||||
name: "listButtonHorizontal",
|
||||
props: {
|
||||
isMultiSelect: Boolean, /* Defines use as checkbox */
|
||||
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 */
|
||||
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, /* Required, position of button in group. Example, 1,2,3 */
|
||||
isRequired: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoaderDisplayed: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
displayLoader() {
|
||||
this.isLoaderDisplayed = true;
|
||||
},
|
||||
handleClick() {
|
||||
this.loaderEnabled && this.displayLoader();
|
||||
}
|
||||
},
|
||||
components: {
|
||||
loader,
|
||||
},
|
||||
computed: {
|
||||
isFirstOrLastButton() {
|
||||
let className = "";
|
||||
if (this.positionInGroup == this.totalInGroup) {
|
||||
className = "last-item";
|
||||
} else if (this.positionInGroup == 1) {
|
||||
className = "first-item";
|
||||
}
|
||||
return className;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.list-button-horizontal {
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
width: 0;
|
||||
&:focus-visible + label {
|
||||
box-shadow: 0 0 0 2px $blue;
|
||||
}
|
||||
&:focus + label {
|
||||
box-shadow: 0 0 0 2px $blue;
|
||||
}
|
||||
&:checked + label {
|
||||
background: $blue-100;
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
}
|
||||
&:checked + label p:first-child {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
label {
|
||||
position: relative;
|
||||
background: $white;
|
||||
transition: all 150ms linear;
|
||||
border: 1px solid $gray-500;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 4px $blue-100;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
}
|
||||
+ p {
|
||||
display: none;
|
||||
}
|
||||
&.first-item {
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
border-top-left-radius: 0.5rem;
|
||||
}
|
||||
&.last-item {
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
border-top-right-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1 +1,46 @@
|
|||
test.todo("some test to be written in the future");
|
||||
import { shallowMount } from "@vue/test-utils";
|
||||
import listButton from "./list-button";
|
||||
|
||||
describe("list-button.vue", () => {
|
||||
it("Should render the 'buttonID' prop value as the label and id value as well as the button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
propsData: {
|
||||
buttonID: "2023",
|
||||
groupName: "TestGroup",
|
||||
loaderColor: "blue",
|
||||
loaderPosition: "right",
|
||||
sizeInRem: "1.5",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
const label = wrapper.find("label");
|
||||
const paragraph = wrapper.find("span");
|
||||
|
||||
await label.trigger("click");
|
||||
|
||||
expect(input.attributes()).toEqual({
|
||||
id: "2023",
|
||||
type: "radio",
|
||||
value: "2023",
|
||||
name: "TestGroup",
|
||||
"aria-required": "false",
|
||||
});
|
||||
|
||||
expect(label.attributes()).toEqual({
|
||||
tabindex: "-1",
|
||||
for: "2023",
|
||||
"aria-labelledby": "2023",
|
||||
class: "d-flex flex-column justify-content-center py-3 px-4",
|
||||
"aria-checked": "false",
|
||||
});
|
||||
|
||||
expect(label.text()).toEqual("2023");
|
||||
|
||||
expect(paragraph.text()).toEqual("2023");
|
||||
|
||||
expect(wrapper.vm.isLoaderDisplayed).toBe(true);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,27 +1,22 @@
|
|||
<template>
|
||||
<div class="d-flex flex-column w-100">
|
||||
<button
|
||||
class="
|
||||
btn
|
||||
list-button
|
||||
d-flex
|
||||
align-items-center
|
||||
justify-content-between
|
||||
py-3
|
||||
px-4
|
||||
"
|
||||
@click="displayComponent"
|
||||
v-bind:class="[this.isError ? 'error' : '']"
|
||||
>
|
||||
<span class="m-0">{{ this.buttonText }}</span>
|
||||
<loader
|
||||
v-if="display"
|
||||
v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
|
||||
v-bind:class="[this.loaderColor, this.loaderPosition]"
|
||||
/>
|
||||
</button>
|
||||
<label class="small mt-1">{{ this.errorText }}</label>
|
||||
<!-- See the component-test.vue page for example implementation -->
|
||||
<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" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
|
||||
<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>
|
||||
</label>
|
||||
</div>
|
||||
<div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
|
||||
<input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @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" @click="displayLoader()">
|
||||
<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>
|
||||
<loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -29,25 +24,29 @@ import loader from "@/ux-components/loader/loader";
|
|||
export default {
|
||||
name: "listButton",
|
||||
props: {
|
||||
buttonText: String,
|
||||
errorText: String,
|
||||
loaderColor: String,
|
||||
loaderPosition: String,
|
||||
sizeInRem: [Number, String],
|
||||
isMultiSelect: Boolean, /* Defines use as checkbox */
|
||||
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 */
|
||||
screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
|
||||
buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */
|
||||
textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
|
||||
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)) */
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
display: false,
|
||||
isError: false,
|
||||
isLoaderDisplayed: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
displayComponent() {
|
||||
this.display = true;
|
||||
displayLoader() {
|
||||
this.isLoaderDisplayed = true;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
loader,
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
188
src/ux-components/list-card/list-card.spec.js
Normal file
188
src/ux-components/list-card/list-card.spec.js
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import listCard from "./list-card";
|
||||
|
||||
describe("list-card.vue", () => {
|
||||
|
||||
it("Should return input type checkbox if isMultiSelect is true", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isMultiSelect: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "checkbox-demo-1",
|
||||
groupName: "Checkbox 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
|
||||
expect(input.attributes().type).toEqual("checkbox");
|
||||
});
|
||||
|
||||
it("Should return input type radio if isRadio is true", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isRadio: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
|
||||
expect(input.attributes().type).toEqual("radio");
|
||||
});
|
||||
|
||||
it("Should return input type checkbox if isMultiSelectHorizontal is true", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isMultiSelectHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg"
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
|
||||
expect(input.attributes().type).toEqual("checkbox");
|
||||
|
||||
});
|
||||
|
||||
it("Should return input type radio if isRadioHorizontal is true", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg"
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
|
||||
expect(input.attributes().type).toEqual("radio");
|
||||
|
||||
});
|
||||
|
||||
it("Should return primary label text", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg"
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const paragraph = wrapper.find("p");
|
||||
|
||||
expect(paragraph.text()).toEqual("Windshield");
|
||||
|
||||
});
|
||||
|
||||
it("Should return secondary (sub) label text", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
buttonLabelSubCopy: "Test"
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const paragraph = wrapper.find("p:nth-of-type(2)");
|
||||
|
||||
expect(paragraph.text()).toEqual("Test");
|
||||
|
||||
});
|
||||
|
||||
it("Should return value used for various text settings including the label 'for' and input id", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
buttonLabelSubCopy: "Test"
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const label = wrapper.find("label");
|
||||
|
||||
expect(label.attributes().for).toEqual("List Card Checkbox");
|
||||
|
||||
});
|
||||
|
||||
it("Should return input group name used for radio or checkbox", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
buttonLabelSubCopy: "Test"
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
|
||||
expect(input.attributes().name).toEqual("radio 1");
|
||||
|
||||
});
|
||||
|
||||
it("Should return aria-required state", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
isRequired: true
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
|
||||
expect(input.attributes()["aria-required"]).toEqual("true");
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
171
src/ux-components/list-card/list-card.vue
Normal file
171
src/ux-components/list-card/list-card.vue
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
<template>
|
||||
<!-- Heavily documented below -->
|
||||
<div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center">
|
||||
<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 class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
|
||||
<p class="small m-0 order-3">{{buttonLabel}}</p>
|
||||
<p v-if="buttonLabelSubCopy" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
|
||||
</label>
|
||||
</div>
|
||||
<div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center">
|
||||
<input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" />
|
||||
<label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
|
||||
<img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
|
||||
<p class="small mt-2 mb-0 order-2">{{buttonLabel}}</p>
|
||||
<p v-if="buttonLabelSubCopy" class="fs-7 m-0 order-3">{{buttonLabelSubCopy}}</p>
|
||||
</label>
|
||||
</div>
|
||||
<div v-else-if="isMultiSelectHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center">
|
||||
<input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
|
||||
<label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
|
||||
<img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
|
||||
<div class="order-2">
|
||||
<p class="m-0 small">{{buttonLabel}}</p>
|
||||
<p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div v-else-if="isRadioHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center">
|
||||
<input type="radio" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
|
||||
<label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
|
||||
<img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
|
||||
<div class="order-2">
|
||||
<p class="m-0 small">{{buttonLabel}}</p>
|
||||
<p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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
|
||||
//end must choose
|
||||
buttonImage: String,//Required: File name of image
|
||||
buttonLabel: String,//Required: Label text
|
||||
isRequired: Boolean, //Required: is aria-required required or not?
|
||||
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 tex
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.list-card {
|
||||
border: 1px solid $gray-500;
|
||||
&.invalid { //Red border if invalid
|
||||
border: 1px solid $red;
|
||||
}
|
||||
img {
|
||||
height: auto;
|
||||
width: 2.875rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 0px 6px $blue-100;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
input[type='checkbox'],
|
||||
input[type="radio"] {
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
width: 0;
|
||||
+ 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: 3rem 0 0 0;
|
||||
background: white;
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: 2px;
|
||||
order: 2;
|
||||
}
|
||||
+ label.checkboxTop::before {
|
||||
margin: -1.25rem 0.5rem 0 0 !important;
|
||||
}
|
||||
+ label.checkboxTop::after {
|
||||
margin: -1.5rem 0.5rem 0 0 !important;
|
||||
}
|
||||
&:checked + label::before {
|
||||
background: $blue;
|
||||
}
|
||||
&:checked + label::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
margin: 3.2rem 0 0 0;
|
||||
border-left: 2px solid $white;
|
||||
border-bottom: 2px solid $white;
|
||||
height: 6px;
|
||||
width: 11px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
input[type="radio"] {
|
||||
+ label::before {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
+ label::after {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
+ label {
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.horizontal {
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
input[type='checkbox'],
|
||||
input[type="radio"] {
|
||||
+ label::before {
|
||||
content: "";
|
||||
position: relative;
|
||||
margin: 0 .5rem 0 0;
|
||||
order: 1;
|
||||
}
|
||||
&:checked + label::after {
|
||||
content: '';
|
||||
margin: -0.25rem 0 0 0;
|
||||
left: .875rem;
|
||||
}
|
||||
+ label {
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -62,6 +62,7 @@ export default {
|
|||
&.center {
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
&.right {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
test.todo("some test to be written in the future");
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<template>
|
||||
<div class="col mb-3 d-flex radio-card">
|
||||
<input
|
||||
type="radio"
|
||||
class="position-absolute opacity-0"
|
||||
:class="className"
|
||||
:id="radioID"
|
||||
:name="groupName"
|
||||
:value="radioLabel"
|
||||
v-model="picked"
|
||||
:tabindex="tabIndex"
|
||||
/>
|
||||
<label
|
||||
v-bind:for="radioID"
|
||||
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/${radioImage}`)"
|
||||
v-bind:alt="altText"
|
||||
/>
|
||||
<span class="mt-auto mb-2 text-center lh-1">{{ radioLabel }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- tabIndex="x" is available on this component if needed -->
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "radioCard",
|
||||
props: [
|
||||
"groupName",
|
||||
"radioLabel",
|
||||
"radioImage",
|
||||
"altText",
|
||||
"radioID",
|
||||
"tabIndex",
|
||||
"className",
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
picked: "picked",
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.radio-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;
|
||||
}
|
||||
}
|
||||
label {
|
||||
background: $white;
|
||||
border: 1px solid $gray;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 0px 0px 6px $blue-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
<!-- See the component-test.vue page for example implementation -->
|
||||
<template>
|
||||
<!-- IMPORTANT: Refrain from using more than 4 horizontal radio buttons on desktop, 3 on mobile. -->
|
||||
<div class="col radiogroup radio-horizontal d-flex flex-column mb-2">
|
||||
<input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true" @keyup.space="displayComponent"/>
|
||||
<label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click='displayComponent'>
|
||||
<span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
|
||||
<span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
|
||||
<loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
|
||||
</label>
|
||||
<p class="small">{{ errorMessage }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import loader from "@/ux-components/loader/loader";
|
||||
export default {
|
||||
name: "radioHorizontal",
|
||||
props: {
|
||||
groupName: String, /* Required, unique for each radio button GROUP */
|
||||
radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
|
||||
radioLabelSubCopy: String, /* Optional, used for multi-line radio 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 */
|
||||
errorMessage: String, /* Optional, if there is an error message to be displayed */
|
||||
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 radio buttons in group. Used to tell first and last in group to apply border radius. */
|
||||
positionInGroup: Number /* Rquired, position of radio button in group. Example, 1,2,3 */
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isError: false,
|
||||
display: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
displayComponent() {
|
||||
this.display = true;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
loader,
|
||||
},
|
||||
computed: {
|
||||
isFirstOrLastButton() {
|
||||
let className = "";
|
||||
if (this.positionInGroup == this.totalInGroup) {
|
||||
className = "last-item";
|
||||
} else if (this.positionInGroup == 1) {
|
||||
className = "first-item";
|
||||
}
|
||||
return className;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.radio-horizontal {
|
||||
input[type="radio"] {
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
width: 0;
|
||||
&:focus-visible + label {
|
||||
box-shadow: 0 0 0 2px $blue;
|
||||
}
|
||||
&:focus + label {
|
||||
box-shadow: 0 0 0 2px $blue;
|
||||
}
|
||||
&:checked + label {
|
||||
background: $blue-100;
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
}
|
||||
&:checked + label p:first-child {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
label {
|
||||
position: relative;
|
||||
background: $white;
|
||||
transition: all 150ms linear;
|
||||
border: 1px solid $gray-500;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 4px $blue-100;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
}
|
||||
+ p {
|
||||
display: none;
|
||||
}
|
||||
&.error {
|
||||
border: 1px solid $danger;
|
||||
+ p {
|
||||
display: flex;
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
&.first-item {
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
border-top-left-radius: 0.5rem;
|
||||
}
|
||||
&.last-item {
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
border-top-right-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import radio from "./radio";
|
||||
|
||||
describe("radio.vue", () => {
|
||||
it("Should render the 'radioID' prop value as the label and id value as well as the radio button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(radio, {
|
||||
propsData: {
|
||||
radioID: "2023",
|
||||
groupName: "TestGroup",
|
||||
loaderColor: "blue",
|
||||
loaderPosition: "right",
|
||||
sizeInRem: "1.5",
|
||||
errorMessage: "null",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
const label = wrapper.find("label");
|
||||
const paragraph = wrapper.find("span");
|
||||
|
||||
await label.trigger("click");
|
||||
|
||||
expect(input.attributes()).toEqual({
|
||||
id: "2023",
|
||||
type: "radio",
|
||||
value: "2023",
|
||||
name: "TestGroup",
|
||||
"aria-required": "false",
|
||||
});
|
||||
|
||||
expect(label.attributes()).toEqual({
|
||||
role: "radio",
|
||||
tabindex: "-1",
|
||||
for: "2023",
|
||||
class: "d-flex flex-column justify-content-center py-3 px-4",
|
||||
"aria-checked": "false",
|
||||
});
|
||||
|
||||
expect(label.text()).toEqual("2023");
|
||||
|
||||
expect(paragraph.text()).toEqual("2023");
|
||||
|
||||
expect(wrapper.vm.display).toBe(true);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<template>
|
||||
<!-- See the component-test.vue page for example implementation -->
|
||||
<div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
|
||||
<input type="radio" :id="radioID" :name="groupName" :value="radioID" :aria-required="isRequired" @keyup.space="displayComponent()">
|
||||
<label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent()'>
|
||||
<span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
|
||||
<span v-if="radioLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
|
||||
<loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
|
||||
</label>
|
||||
<p class="small">{{errorMessage}}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import loader from "@/ux-components/loader/loader";
|
||||
export default {
|
||||
name: "radioList",
|
||||
props: {
|
||||
groupName: String, /* Required, unique for each radio button GROUP */
|
||||
radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
|
||||
isRequired: Boolean, /* Optional, default is false */
|
||||
screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
|
||||
radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
|
||||
textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
|
||||
errorMessage: String, /* Optional, if there is an error message to be displayed */
|
||||
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)) */
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isError: false,
|
||||
display: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
displayComponent() {
|
||||
this.display = true;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
loader,
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -17,7 +17,7 @@ module.exports = {
|
|||
@import "./node_modules/bootstrap/scss/bootstrap";
|
||||
@import "@/styles/common-styles.scss";
|
||||
@import "@/styles/common-button-styles.scss";
|
||||
@import "@/styles/common-radio-styles.scss";
|
||||
@import "@/styles/common-list-styles.scss";
|
||||
@import "@/styles/common-typography-styles.scss";
|
||||
`,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ module.exports = {
|
|||
@import "./node_modules/bootstrap/scss/bootstrap";
|
||||
@import "@/styles/common-styles.scss";
|
||||
@import "@/styles/common-button-styles.scss";
|
||||
@import "@/styles/common-radio-styles.scss";
|
||||
@import "@/styles/common-list-styles.scss";
|
||||
@import "@/styles/common-typography-styles.scss";
|
||||
`,
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue