Text Input
@@ -1134,6 +1144,7 @@
import textLink from "@/ux-components/text-link/text-link";
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
+ import vinInformation from "@/common-components/vin-information/vin-information";
export default {
name: "App",
components: {
@@ -1148,6 +1159,7 @@
textLink,
textboxQuestion,
dropdownQuestion,
+ vinInformation,
},
data() {
return {
diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
index ce12c15ff..20c016a12 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
@@ -18,9 +18,7 @@ describe("damage-location-question.vue", () => {
//Assert
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Backseat"] }]);
});
-});
-describe("damage-location-question.vue", () => {
test("Answers to display filtered by data from api.", async () => {
//Arrange
diff --git a/src/layouts/vehicle-parts/vehicle-parts.spec.js b/src/layouts/vehicle-parts/vehicle-parts.spec.js
index b52be441b..5d22a458c 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.spec.js
+++ b/src/layouts/vehicle-parts/vehicle-parts.spec.js
@@ -66,7 +66,7 @@ const basePartResponse = {
}
-describe("vehicle-damage.vue", () => {
+describe("vehicle-parts.vue", () => {
test("Page header is initialized with api data", async (done) => {
//Arrange
diff --git a/src/router/index.js b/src/router/index.js
index 0d98f6698..be434e9d8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -57,17 +57,20 @@ const routes = [
try {
// If we already have our route, go to it.
if (router.hasRoute(to.query.fmgPage)) {
+
// Since our route is already in scope, we can grab the component from it and call the arePagePrerequisitesValid function.
- const component = router
- .getRoutes()
- .filter((x) => x.name === to.query.fmgPage)[0].components;
+ let component = router.getRoutes().filter((x) => x.name === to.query.fmgPage)[0].components;
+
+ // If the component hasn't been loaded fully, load it before we check prerequisites.
+ if (component.default.methods === undefined) {
+ component = await component.default();
+ }
if (!arePagePrerequisitesValid(component)) {
await GoToFunnelStartOn404(next);
}
-
- return next({ name: to.query.fmgPage, query: to.query, params: to.params });
+ 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.
@@ -82,10 +85,7 @@ const routes = [
// 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();
+ const nextComponent = await router.getRoutes().filter((x) => x.name === routeData[0].name)[0].components.default();
if (!arePagePrerequisitesValid(nextComponent)) {
await GoToFunnelStartOn404(next);
diff --git a/src/ux-components/radio/radio.spec.js b/src/ux-components/radio/radio.spec.js
index a7c3318ed..113d534c6 100644
--- a/src/ux-components/radio/radio.spec.js
+++ b/src/ux-components/radio/radio.spec.js
@@ -60,4 +60,42 @@ describe("radio.vue", () => {
expect(paragraph.text()).toEqual("screenreader text");
});
+
+ it("Should emit button value on click", async () => {
+ // Act
+ const wrapper = shallowMount(radio, {
+ propsData: {
+ buttonLabel: "Windshield",
+ value: "List Card Checkbox",
+ buttonID: "List Card Checkbox",
+ groupID: "radio-demo-1",
+ groupName: "radio 1",
+ isRequired: true,
+ isWide: false,
+ modelValue: ["List Card Checkbox"],
+ },
+ });
+ wrapper.vm.handleCheckChange();
+ // Assert
+ expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{"buttonID": "List Card Checkbox", value: "List Card Checkbox", checkValue: Boolean}]);
+ });
+
+ it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
+ // Act
+ const wrapper = shallowMount(radio, {
+ propsData: {
+ buttonLabel: "Windshield",
+ buttonID: "List Card Checkbox",
+ groupID: "radio-demo-1",
+ groupName: "radio 1",
+ buttonImage: "windshield-damage.svg",
+ isRequired: true,
+ modelValue: ["List Card Checkbox"],
+ value: "Car-Front",
+ selectedValues: ["Car-Front"]
+ },
+ });
+ // Assert
+ expect(wrapper.componentVM.checkValue).toEqual(true);
+ });
});
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 99629a39b..17fb7a880 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -10,7 +10,8 @@
:aria-required="isRequired"
:value="value"
:v-model="checkValue"
- @change="handleCheckChanged()"
+ @change="handleCheckChange()"
+ :checked="checkValue"
/>
{{ buttonLabel }}
@@ -36,6 +37,7 @@ export default {
default: "",
},
screenReaderOnlyText: String,
+ selectedValues: [Array, String],
hasError: Boolean,
},
data() {
@@ -44,15 +46,15 @@ export default {
};
},
created() {
- if (this.selectedButtonIDs) {
- this.checkValue = this.selectedButtonIDs[0];
+ if (this.selectedValues) {
+ this.checkValue = this.selectedValues[0] === this.value;
}
},
methods: {
handleClick(value) {
this.handleChange(value);
},
- handleCheckChanged(newValue, oldValue) {
+ handleCheckChange(newValue, oldValue) {
const isInitialization = typeof oldValue === "function";
if (!isInitialization) {
@@ -68,19 +70,19 @@ export default {
},
},
setup(props) {
- const { groupName, value } = toRefs(props);
- const { checked, handleChange, errorMessage } = useField(
- groupName,
- undefined,
- {
- type: "radio",
- checkedValue: value,
- }
- );
+ const inputType = "radio";
+ const {
+ value: inputValue,
+ handleChange,
+ errors,
+ } = useField(props.groupName, props.validationRules,
+ {
+ type: inputType,
+ checkedValue: props.value,
+ });
return {
- checked,
handleChange,
- errorMessage,
+ errors,
};
},
};