-
+
@@ -80,6 +80,11 @@ export default {
);
},
},
+ methods: {
+ arePagePrerequisitesValid() {
+ return true;
+ },
+ },
components: {
yearQuestion,
funnelHeader,
diff --git a/src/layouts/vehicle-year/year-question/year-question.spec.js b/src/layouts/vehicle-year/year-question/year-question.spec.js
index 4d1a32a34..fe0852533 100644
--- a/src/layouts/vehicle-year/year-question/year-question.spec.js
+++ b/src/layouts/vehicle-year/year-question/year-question.spec.js
@@ -2,11 +2,16 @@ 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});
+jest.mock(
+ "@/store",
+ () => {
+ return {};
+ },
+ { virtual: true }
+);
describe("year-question.vue", () => {
test("Selected year is emitted upon selection.", async () => {
-
//Arrange
const { wrapper } = setupMocks({ modelValueProp: "2020" });
const yearToSelect = "2021";
@@ -16,48 +21,62 @@ describe("year-question.vue", () => {
await wrapper.vm.$nextTick();
//Assert
- expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: "2021"}]);
+ expect(wrapper.emitted()["update:modelValue"][0]).toEqual([
+ { modelValue: "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?" });
+ 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?");
+ 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"] });
+ 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);
+ yearQuestion.methods.initializeComponent.call(
+ wrapper.vm,
+ cmsContent,
+ initialData
+ );
//Assert
- const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
- expect(buttonQuestionComponent.attributes("answers")).toBe("2023,2022,2021");
+ 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({
@@ -74,7 +93,7 @@ function setupMocks({
//Mock CMS content
const cmsContent = {
- QuestionText: cmsQuestionText
- };
+ QuestionText: cmsQuestionText,
+ };
return { wrapper, cmsContent };
-}
\ No newline at end of file
+}
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index d189bb54a..7ee281c06 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -1,5 +1,6 @@
-
@@ -21,7 +23,7 @@ export default {
return {
questionText: null,
years: Array,
- }
+ };
},
props: {
modelValue: String,
@@ -31,17 +33,20 @@ export default {
},
methods: {
loadInitialData() {
- return baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_VEHICLE_YEARS, {});
+ return baseMixin.methods.dispatchNonBlockingStoreAction(
+ storeActions.GET_VEHICLE_YEARS,
+ {}
+ );
},
initializeComponent(cmsContent, initialData) {
this.questionText = cmsContent.QuestionText;
this.years = initialData;
- }
+ },
},
watch: {
modelValue(val) {
this.$emit("update:modelValue", val);
- }
+ },
},
};
-
\ No newline at end of file
+
diff --git a/src/main.js b/src/main.js
index 322374cfd..c78696333 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,5 +14,4 @@ vueApp.use(store);
vueApp.use(LoadScript);
vueApp.mixin(baseMixin);
-
vueApp.mount("#app");
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index bfa9a5d7e..d37ba38d7 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -3,11 +3,11 @@ 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";
+import { vehicleCategories } from "@/constants/vehicle-categories.js";
export default {
data() {
- return {
- };
+ return {};
},
methods: {
dispatchNonBlockingStoreAction(type, payload, encodePayload = true) {
@@ -32,6 +32,9 @@ export default {
widgetNames() {
return widgetNames;
},
+ vehicleCategories() {
+ return vehicleCategories;
+ },
},
};
diff --git a/src/mixins/base-mixin.spec.js b/src/mixins/base-mixin.spec.js
index e9ccbdc5b..bdc083399 100644
--- a/src/mixins/base-mixin.spec.js
+++ b/src/mixins/base-mixin.spec.js
@@ -1,12 +1,14 @@
import baseMixin from "@/mixins/base-mixin";
import { storeActions } from "@/constants/store-actions.js";
import { widgetNames } from "@/constants/widget-names.js";
+import { storeMutations } from "@/constants/store-mutations.js";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
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);
@@ -16,14 +18,59 @@ describe("baseMixin.js", () => {
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(store.dispatch).toBeCalledWith(type, payload);
});
+
+ test("computed: storeActions should be equal to import object", () => {
+ // Arrange
+ const mixIn = getMixInInstance({});
+
+ // Act
+ let storeActionsForTest = mixIn.computed.storeActions();
+
+ // Assert
+ expect(storeActionsForTest).toEqual(storeActions);
+ });
+
+ test("computed: storeMutations should be equal to import object", () => {
+ // Arrange
+ const mixIn = getMixInInstance({});
+
+ // Act
+ let storeMutationsForTest = mixIn.computed.storeMutations();
+
+ // Assert
+ expect(storeMutationsForTest).toEqual(storeMutations);
+ });
+
+ test("computed: navigationScenarios should be equal to import object", () => {
+ // Arrange
+ const mixIn = getMixInInstance({});
+
+ // Act
+ let navigationScenariosForTest = mixIn.computed.navigationScenarios();
+
+ // Assert
+ expect(navigationScenariosForTest).toEqual(navigationScenarios);
+ });
+
+ test("computed: widgetNames should be equal to import object", () => {
+ // Arrange
+ const mixIn = getMixInInstance({});
+
+ // Act
+ let widgetNamesForTest = mixIn.computed.widgetNames();
+
+ // Assert
+ expect(widgetNamesForTest).toEqual(widgetNames);
+ });
});
+
function getMixInInstance({ isDispatchSuccess = true }) {
// Mock Store
const storeDispatch = jest.fn();
diff --git a/src/router/index.js b/src/router/index.js
index 2a80032f6..eb4942d6a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -35,16 +35,26 @@ const routes = [
},
{
path: "/",
+ name: "root",
async beforeEnter(to, from, next) {
// If we have no query string, or we don't have the FmgPage query string.
if (to.query.fmgPage === undefined) {
await GoToFunnelStartOn404(next);
} else {
-
try {
// If we already have our route, go to it.
if (router.hasRoute(to.query.fmgPage)) {
- return next({ name: to.query.fmgPage, query: to.query });
+ // Since our route is already in scope, we can grab the component from it and call the arePagePrerequisitesValid function.
+ const arePagePrerequisitesValid = router
+ .getRoutes()
+ .filter((x) => x.name === to.query.fmgPage)[0]
+ .components.default.methods.arePagePrerequisitesValid();
+
+ if (!arePagePrerequisitesValid) {
+ await GoToFunnelStartOn404(next);
+ }
+
+ return next({ name: to.query.fmgPage, query: to.query, params: to.params });
}
// Get route info for the given url. Names will have a 1:1 relationship with names in the Cms.
@@ -57,16 +67,29 @@ const routes = [
component: routeData[0].component,
});
- // Assign current query string parameters, as well as our fmgPage one.
- next({ name: routeData[0].name, query: Object.assign(to.query, { fmgPage: routeData[0].name }) });
+ // Call the next components arePagePrerequisitesValid method before load.
+ // If it returns false, use the 404 logic.
+ const nextComponent = await router
+ .getRoutes()
+ .filter((x) => x.name === routeData[0].name)[0]
+ .components.default();
+ if (!nextComponent.default.methods.arePagePrerequisitesValid()) {
+ await GoToFunnelStartOn404(next);
+ }
+
+ // Assign current query string parameters, as well as our fmgPage one.
+ next({
+ name: routeData[0].name,
+ query: Object.assign(to.query, { fmgPage: routeData[0].name }),
+ params: to.params
+ });
} catch (error) {
console.log(error);
// If we don't have a route, go to our 404 page.
await GoToFunnelStartOn404(next);
}
-
}
},
},
@@ -97,7 +120,7 @@ router.navigate = (
if (matchingScenarioMap.destinationFmgPageValue !== undefined) {
// We're always pushing the same path, just changing query strings. Make sure our optional query strings get combined with our fmgPage one.
router.push({
- path: "/",
+ name: "root",
query: Object.assign(optionalQuery, {
fmgPage: matchingScenarioMap.destinationFmgPageValue,
}),
@@ -133,7 +156,9 @@ function navigateToUrl(url) {
// Get route information by page name.
// This will reach out to the Cms and there is a 1:1 relationship between page names and route names.
async function GetRouteInfoFromPageName(pageName) {
- const response = await store.dispatch(storeActions.GET_ROUTE_INFO_ACTION, { pageName: pageName });
+ const response = await store.dispatch(storeActions.GET_ROUTE_INFO_ACTION, {
+ pageName: pageName,
+ });
const jsonFromResponse = JSON.parse(response.data.Result);
let routeData = [];
@@ -151,7 +176,6 @@ async function GetRouteInfoFromPageName(pageName) {
// Go to our start page on a 404.
async function GoToFunnelStartOn404(next) {
-
const apiResponse = await store.dispatch(storeActions.GET_HOMEPAGE_NAME);
const homepageName = apiResponse.data.Result;
@@ -161,14 +185,14 @@ async function GoToFunnelStartOn404(next) {
globalEvents.SubCategories.PAGE_NOT_FOUND,
{
isDismissible: true,
- messageCopy: 'You can get a quote by starting on this page.',
- messageHeadline: 'We\'re sorry, something went wrong.',
- type: globalEventTypes.Danger
+ messageCopy: "You can get a quote by starting on this page.",
+ messageHeadline: "We're sorry, something went wrong.",
+ type: globalEventTypes.Danger,
}
);
next({
- path: '/',
+ path: "/",
query: { fmgPage: homepageName },
});
}
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index dc467edc2..17f05b304 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -21,7 +21,7 @@ const routingTable = [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationFmgPageValue: fmgPageValues.VEHICLE_YEAR,
- }
+ },
],
},
{
@@ -34,7 +34,7 @@ const routingTable = [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE,
- }
+ },
],
},
{
@@ -47,9 +47,9 @@ const routingTable = [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
- }
+ },
],
},
];
-export { routingTable };
\ No newline at end of file
+export { routingTable };
diff --git a/src/store/index.js b/src/store/index.js
index ad4a9f388..64a06758f 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,6 +1,6 @@
import { createStore } from "vuex";
import { endpoints } from "@/constants/endpoints.js";
-import { storeMutations } from "@/constants/store-mutations"
+import { storeMutations } from "@/constants/store-mutations";
import createPersistedState from "vuex-persistedstate";
import globalMethods from "@/global-methods";
import eventBus from "../helpers/event-bus/event-bus";
@@ -21,6 +21,9 @@ export default createStore({
style: null,
carId: null,
category: null,
+ imageUrl: null,
+ imageVifNumber: null,
+ imageColor: null,
damage: {
isRepair: null,
numberOfChips: null,
@@ -29,7 +32,7 @@ export default createStore({
},
},
applicationUser: {
- eventBus: []
+ eventBus: [],
},
},
// See IMPORTANT note at top of "state" declaration.
@@ -50,28 +53,38 @@ export default createStore({
updateVehicle(state, data) {
state.order.vehicle.carId = data.carId;
state.order.vehicle.category = data.category;
+ state.order.vehicle.imageUrl = data.imageUrl;
+ state.order.vehicle.imageVifNumber = data.imageVifNumber;
+ state.order.vehicle.imageColor = data.imageVifColor;
},
addEventToBus(state, event) {
state.applicationUser.eventBus.push(event);
},
removeEventFromBus(state, eventData) {
- const matchedEvent = state.applicationUser.eventBus.find(({ category, subCategory }) => category === eventData.category && subCategory === eventData.subCategory);
+ const matchedEvent = state.applicationUser.eventBus.find(
+ ({ category, subCategory }) =>
+ category === eventData.category &&
+ subCategory === eventData.subCategory
+ );
const itemIndex = state.applicationUser.eventBus.indexOf(matchedEvent);
// If the item exists, remove it.
if (itemIndex > -1) {
state.applicationUser.eventBus.splice(itemIndex, 1);
}
- }
+ },
},
getters: {
- vehicle: state => state.order.vehicle,
+ vehicle: (state) => state.order.vehicle,
eventBusItem: (state) => (eventCategory, eventSubCategory) => {
- const matchedEvent = state.applicationUser.eventBus.find(({ category, subCategory }) => category === eventCategory && subCategory === eventSubCategory);
+ const matchedEvent = state.applicationUser.eventBus.find(
+ ({ category, subCategory }) =>
+ category === eventCategory && subCategory === eventSubCategory
+ );
return matchedEvent !== undefined ? matchedEvent.eventValue : undefined;
},
- eventBus: state => state.applicationUser.eventBus
+ eventBus: (state) => state.applicationUser.eventBus,
},
actions: {
// Vehicle API Actions
@@ -119,22 +132,24 @@ export default createStore({
payload: {},
});
},
- setVehicle(context, {year, make, model, style}) {
- return globalMethods.callHttpClient({
- methods: endpoints.GetVehicle.method,
- endpoint: `${endpoints.GetVehicle.url}/${year}/${make}/${model}/${style}`,
- payload: {},
- }).then(response => {
- context.commit(storeMutations.UPDATE_VEHICLE, response.data);
- return response;
- });
+ setVehicle(context, { year, make, model, style }) {
+ return globalMethods
+ .callHttpClient({
+ methods: endpoints.GetVehicle.method,
+ endpoint: `${endpoints.GetVehicle.url}/${year}/${make}/${model}/${style}`,
+ payload: {},
+ })
+ .then((response) => {
+ context.commit(storeMutations.UPDATE_VEHICLE, response.data);
+ return response;
+ });
},
- getDamageOptions(context, {carId}){
+ getDamageOptions(context, { carId }) {
return globalMethods.callHttpClient({
methods: endpoints.GetDamageOptions.method,
endpoint: `${endpoints.GetDamageOptions.url}/${carId}`,
payload: {},
- })
+ });
},
// Content API Actions
@@ -151,8 +166,8 @@ export default createStore({
return globalMethods.callHttpClient({
method: endpoints.GetHomepageInfo.method,
endpoint: endpoints.GetHomepageInfo.url,
- });
- },
+ });
+ },
getPageData(context, { pageName }) {
return globalMethods.callHttpClient({
method: endpoints.GetPageData.method,
diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index 0702f625d..e71f07909 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -152,7 +152,12 @@ describe("Actions", () => {
});
});
await store
- .dispatch("lookupVehicleByYmms", { year: "2018", make: "Honda", model: "Civic", style: "2 Door"})
+ .dispatch("lookupVehicleByYmms", {
+ year: "2018",
+ make: "Honda",
+ model: "Civic",
+ style: "2 Door",
+ })
.then((response) => {
returnData = response.data.Result;
});
@@ -174,7 +179,7 @@ describe("Actions", () => {
});
});
await store
- .dispatch("lookupVehicleByVin", { vin: "12345678"})
+ .dispatch("lookupVehicleByVin", { vin: "12345678" })
.then((response) => {
returnData = response.data.Result;
});
@@ -197,7 +202,7 @@ describe("Actions", () => {
});
});
await store
- .dispatch("getEvoxImage", { relativeUrl: "evox_image.com"})
+ .dispatch("getEvoxImage", { relativeUrl: "evox_image.com" })
.then((response) => {
returnData = response.data.Result;
});
@@ -244,8 +249,8 @@ describe("Mutations", () => {
// Arrange
const carData = {
carId: "123abc",
- category: "car"
- }
+ category: "car",
+ };
// Act
store.commit("updateVehicle", carData);
@@ -256,48 +261,68 @@ describe("Mutations", () => {
it("Should add event onto bus and update state", () => {
// Arrange
- const event = {category: 'TestCategoryOne', subCategory: 'TestSubCategoryOne', eventValue: 'TestEventValueOne'};
+ const event = {
+ category: "TestCategoryOne",
+ subCategory: "TestSubCategoryOne",
+ eventValue: "TestEventValueOne",
+ };
// Act
store.commit("addEventToBus", event);
//Assert
- expect(store.state.applicationUser.eventBus[0].category).toBe('TestCategoryOne');
- expect(store.state.applicationUser.eventBus[0].subCategory).toBe('TestSubCategoryOne');
- expect(store.state.applicationUser.eventBus[0].eventValue).toBe('TestEventValueOne');
+ expect(store.state.applicationUser.eventBus[0].category).toBe(
+ "TestCategoryOne"
+ );
+ expect(store.state.applicationUser.eventBus[0].subCategory).toBe(
+ "TestSubCategoryOne"
+ );
+ expect(store.state.applicationUser.eventBus[0].eventValue).toBe(
+ "TestEventValueOne"
+ );
});
});
describe("Getters", () => {
-
it("Should validate vehicle getter", () => {
// Arrange
const vehicle = store.getters.vehicle;
// Assert
- expect(typeof vehicle).toBe('object');
+ expect(typeof vehicle).toBe("object");
});
it("Should get item from bus via getter", () => {
// Arrange
- const event = {category: 'TestCategoryOne', subCategory: 'TestSubCategoryOne', eventValue: 'TestEventValueOne'};
+ const event = {
+ category: "TestCategoryOne",
+ subCategory: "TestSubCategoryOne",
+ eventValue: "TestEventValueOne",
+ };
// Act
- store.commit("addEventToBus", event)
+ store.commit("addEventToBus", event);
// Assert
- const returnedEventValue = store.getters.eventBusItem(event.category, event.subCategory);
- expect(returnedEventValue).toBe('TestEventValueOne');
+ const returnedEventValue = store.getters.eventBusItem(
+ event.category,
+ event.subCategory
+ );
+ expect(returnedEventValue).toBe("TestEventValueOne");
});
it("Should get eventbus from getter, should have length > 0", () => {
- // Arrange
- const event = {category: 'TestCategoryOne', subCategory: 'TestSubCategoryOne', eventValue: 'TestEventValueOne'};
+ // Arrange
+ const event = {
+ category: "TestCategoryOne",
+ subCategory: "TestSubCategoryOne",
+ eventValue: "TestEventValueOne",
+ };
- // Act
- store.commit("addEventToBus", event);
+ // Act
+ store.commit("addEventToBus", event);
- //Assert
- expect(store.getters.eventBus.length).toBeGreaterThan(0);
+ //Assert
+ expect(store.getters.eventBus.length).toBeGreaterThan(0);
});
});
diff --git a/src/styles/error-styles.scss b/src/styles/common-error-styles.scss
similarity index 100%
rename from src/styles/error-styles.scss
rename to src/styles/common-error-styles.scss
diff --git a/src/styles/common-list-styles.scss b/src/styles/common-list-styles.scss
deleted file mode 100644
index 9e232f54d..000000000
--- a/src/styles/common-list-styles.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.list-group {
- &.list-button {
- input[type="radio"],
- input[type="checkbox"] {
- opacity: 0;
- position: fixed;
- width: 0;
- &:focus-visible + label {
- box-shadow: 0 0 0 2.5px $blue inset;
- }
- &:focus + label {
- box-shadow: 0 0 0 2.5px $blue inset;
- }
- &:checked + label {
- color: $black;
- font-weight: 500;
- background: $blue-100;
- box-shadow: 0 0 0 1px $blue;
- }
- &:checked + label p:first-child {
- font-weight: 500;
- }
- }
- label {
- color: $gray-600;
- position: relative;
- background: $white;
- transition: all 150ms linear;
- border-radius: $border-radius-lg;
- border: 1px solid $gray-500;
- width: 100%;
-
- &:hover {
- @include media-breakpoint-up(sm) {
- box-shadow: 0 0 0 4px $blue-100;
- }
- cursor: pointer;
- }
- + p {
- display: none;
- }
- }
- }
-}
diff --git a/src/ux-components/button-main/button-main.spec.js b/src/ux-components/button-main/button-main.spec.js
index 7d8234714..bbdbbe134 100644
--- a/src/ux-components/button-main/button-main.spec.js
+++ b/src/ux-components/button-main/button-main.spec.js
@@ -3,12 +3,11 @@ import buttonMain from "./button-main";
import { nextTick } from "vue";
describe("buttonMain.vue", () => {
-
it("Should return btn-primary class", async () => {
// Act
const wrapper = shallowMount(buttonMain, {
propsData: {
- isPrimary: true
+ isPrimary: true,
},
});
@@ -16,15 +15,14 @@ describe("buttonMain.vue", () => {
const button = wrapper.find("button");
// Expect
- expect(button.attributes('class')).toContain("btn-primary");
-
+ expect(button.attributes("class")).toContain("btn-primary");
});
it("Should return aria-disabled state", async () => {
// Act
const wrapper = shallowMount(buttonMain, {
propsData: {
- isDisabled: true
+ isDisabled: true,
},
});
@@ -33,7 +31,6 @@ describe("buttonMain.vue", () => {
// Expect
expect(button.attributes()["aria-disabled"]).toEqual("true");
-
});
it("Should return loader color", async () => {
@@ -41,7 +38,7 @@ describe("buttonMain.vue", () => {
const wrapper = shallowMount(buttonMain, {
propsData: {
loaderColor: "blue",
- loaderEnabled: true
+ loaderEnabled: true,
},
});
@@ -55,8 +52,7 @@ describe("buttonMain.vue", () => {
const loader = wrapper.find("loader-stub");
- expect(loader.attributes('class')).toContain("blue");
-
+ expect(loader.attributes("class")).toContain("blue");
});
it("Should return loader position", async () => {
@@ -64,7 +60,7 @@ describe("buttonMain.vue", () => {
const wrapper = shallowMount(buttonMain, {
propsData: {
loaderPosition: "right",
- loaderEnabled: true
+ loaderEnabled: true,
},
});
@@ -78,8 +74,7 @@ describe("buttonMain.vue", () => {
const loader = wrapper.find("loader-stub");
- expect(loader.attributes('class')).toContain("right");
-
+ expect(loader.attributes("class")).toContain("right");
});
it("Should return loader size in rem", async () => {
@@ -87,7 +82,7 @@ describe("buttonMain.vue", () => {
const wrapper = shallowMount(buttonMain, {
propsData: {
sizeInRem: 1,
- loaderEnabled: true
+ loaderEnabled: true,
},
});
@@ -101,8 +96,6 @@ describe("buttonMain.vue", () => {
const loader = wrapper.find("loader-stub");
- expect(loader.attributes('style')).toContain("1rem");
-
+ expect(loader.attributes("style")).toContain("1rem");
});
-
});
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 5d89e9afa..ff2a5f83a 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -1,7 +1,18 @@
-
@@ -25,8 +36,8 @@ export default {
methods: {
clicked() {
this.isLoaderDisplayed = true;
- this.$emit('click-event');
- }
+ this.$emit("click-event");
+ },
},
components: {
loader,
@@ -45,10 +56,15 @@ export default {
color: $white;
transition: all 150ms linear;
&:hover {
- background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%);
+ background: linear-gradient(
+ 270deg,
+ rgba(6, 87, 124, 1) 0%,
+ rgba(6, 87, 124, 1) 100%
+ );
}
&:focus, // Mouse, touch, stylus focus
- &:focus-visible { // Keyboard focus for accessibility
+ &:focus-visible {
+ // Keyboard focus for accessibility
outline: none;
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
color: $white;
@@ -56,7 +72,11 @@ export default {
}
&:disabled {
background: $gray-100 !important;
- background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%) !important;
+ background: linear-gradient(
+ 270deg,
+ $gray-100 0%,
+ $gray-100 100%
+ ) !important;
color: $gray !important;
height: 48px;
border: none;
@@ -75,7 +95,8 @@ export default {
@include blue-gradient;
}
&:focus, // Mouse, touch, stylus focus
- &:focus-visible { // Keyboard focus for accessibility
+ &:focus-visible {
+ // Keyboard focus for accessibility
outline: none;
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
color: $white;
@@ -90,5 +111,4 @@ export default {
}
}
}
-
diff --git a/src/ux-components/checkbox/checkbox.spec.js b/src/ux-components/checkbox/checkbox.spec.js
index e5536f97c..ab3c29e41 100644
--- a/src/ux-components/checkbox/checkbox.spec.js
+++ b/src/ux-components/checkbox/checkbox.spec.js
@@ -3,12 +3,11 @@ import checkbox from "./checkbox";
import { nextTick } from "vue";
describe("checkbox.vue", () => {
-
it("Should return checkbox name", async () => {
// Act
const wrapper = shallowMount(checkbox, {
propsData: {
- checkboxName: "Checkbox"
+ checkboxName: "Checkbox",
},
});
@@ -17,14 +16,13 @@ describe("checkbox.vue", () => {
// Expect
expect(input.attributes().name).toEqual("Checkbox");
-
});
it("Should return checkbox id", async () => {
// Act
const wrapper = shallowMount(checkbox, {
propsData: {
- buttonID: "Checkbox ID"
+ buttonID: "Checkbox ID",
},
});
@@ -33,14 +31,13 @@ describe("checkbox.vue", () => {
// Expect
expect(input.attributes().id).toEqual("Checkbox ID");
-
});
it("Should return tabindex value", async () => {
// Act
const wrapper = shallowMount(checkbox, {
propsData: {
- tabIndex: "1"
+ tabIndex: "1",
},
});
@@ -49,14 +46,13 @@ describe("checkbox.vue", () => {
// Expect
expect(input.attributes().tabindex).toEqual("1");
-
});
it("Should return label text", async () => {
// Act
const wrapper = shallowMount(checkbox, {
propsData: {
- checkboxLabel: "label text"
+ checkboxLabel: "label text",
},
});
@@ -64,14 +60,13 @@ describe("checkbox.vue", () => {
const paragraph = wrapper.find("p");
expect(paragraph.text()).toEqual("label text");
-
});
it("Should return label text", async () => {
// Act
const wrapper = shallowMount(checkbox, {
propsData: {
- screenReaderOnlyText: "screenreader text"
+ screenReaderOnlyText: "screenreader text",
},
});
@@ -79,7 +74,5 @@ describe("checkbox.vue", () => {
const paragraph = wrapper.find("span");
expect(paragraph.text()).toEqual("screenreader text");
-
});
-
});
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index 1b6254d29..dca64e689 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -1,10 +1,19 @@
@@ -18,15 +27,15 @@ export default {
tabIndex: Number,
checkboxLabel: String,
screenReaderOnlyText: String,
- isRequired: Boolean
- }
+ isRequired: Boolean,
+ },
};
diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index 3bb6af61c..b02ef6785 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -2,7 +2,6 @@ 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, {
@@ -31,7 +30,7 @@ describe("list-card.vue", () => {
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
- buttonImage: "windshield-damage.svg"
+ buttonImage: "windshield-damage.svg",
},
});
@@ -39,7 +38,6 @@ describe("list-card.vue", () => {
const paragraph = wrapper.find("p");
expect(paragraph.text()).toEqual("Windshield");
-
});
it("Should return secondary (sub) label text", async () => {
@@ -52,7 +50,7 @@ describe("list-card.vue", () => {
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
- buttonLabelSubCopy: "Test"
+ buttonLabelSubCopy: "Test",
},
});
@@ -60,7 +58,6 @@ describe("list-card.vue", () => {
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 () => {
@@ -73,7 +70,7 @@ describe("list-card.vue", () => {
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
- buttonLabelSubCopy: "Test"
+ buttonLabelSubCopy: "Test",
},
});
@@ -81,7 +78,6 @@ describe("list-card.vue", () => {
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 () => {
@@ -94,7 +90,7 @@ describe("list-card.vue", () => {
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
- buttonLabelSubCopy: "Test"
+ buttonLabelSubCopy: "Test",
},
});
@@ -102,7 +98,6 @@ describe("list-card.vue", () => {
const input = wrapper.find("input");
expect(input.attributes().name).toEqual("radio 1");
-
});
it("Should return aria-required state", async () => {
@@ -115,7 +110,7 @@ describe("list-card.vue", () => {
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
- isRequired: true
+ isRequired: true,
},
});
@@ -123,7 +118,5 @@ describe("list-card.vue", () => {
const input = wrapper.find("input");
expect(input.attributes()["aria-required"]).toEqual("true");
-
});
-
});
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 17c8193f0..c5c9f0603 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,15 +1,47 @@
-
-
-