Merge branch 'develop' into feature/CSR-335

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

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);
+  });
 });

src/ux-components/radio/radio.vue

@@ -10,7 +10,8 @@
     :aria-required="isRequired"
     :value="value"
     :v-model="checkValue"
-    @change="handleCheckChanged()"
+    @change="handleCheckChange()"
+    :checked="checkValue"
     />
     <label class="d-flex align-items-start form-check-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
@@ -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,
     };
   },
 };