Merge pull request #77 from Safelite/feature/SSR-169

Feature/ssr 169

src/common-components/button-question-modal/button-question-modal.spec.js

@@ -0,0 +1,52 @@
+import { shallowMount } from "@vue/test-utils";
+import ButtonQuestionModal from "./button-question-modal";
+
+describe("button-question-modal.vue", () => {
+    it("Should display header text when QuestionText is defined in the CMS", async () => {
+        // Act
+        const wrapper = shallowMount(ButtonQuestionModal, {
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["QuestionText"]));
+    });
+
+    it("Should display subheader text when ButtonText is defined in the CMS", async () => {
+        // Act
+        const wrapper = shallowMount(ButtonQuestionModal, {
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["ButtonText"]));
+    });
+
+});
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+            return mockCmsContent[cmsFieldName];
+        }),
+    },
+};
+
+const mockCmsContent = {
+    QuestionText: "What caused damage.",
+    ButtonText: "Select an option.",
+    Answers: [
+        {
+            Name: "Rock from road",
+            Text: "Rock from road"
+        },
+        {
+            Name: "Vandalism",
+            Text: "Vandalism"
+        },
+    ],
+};

src/common-components/button-question-modal/button-question-modal.vue

@@ -28,6 +28,7 @@
                 :answers="ModalSelectOptionAnswers"
                 groupName="ChooseVehicleYear"
                 v-model="selectedValue"
+                :validationRules="validationRules"
                 isRequired />
                 <div class="modal-footer px-5 py-4">
                     <buttonMain
@@ -47,20 +48,12 @@
 <script>
 import buttonMain from "@/ux-components/button-main/button-main";
 import buttonQuestion from "@/common-components/button-question/button-question";
-import { defineRule } from "vee-validate";
-import { required } from "@/helpers/validation-rules";
-import { errorMessages } from "@/constants/error-messages";
 
 export default {
     name: "buttonQuestionModal",
     props: {
         cmsWidgetName: String,
-    },
+   },
-    data() {
-        return {
-            answers: [],
-        };
-    },
     computed: {
         ModalQuestionText() {
             return this.getCmsContent(this.cmsWidgetName, "QuestionText");

src/layouts/welcome-page/welcome-page.vue

@@ -27,7 +27,7 @@
                     validationRules="damage-cause-required" />
             </div>
         </div>
-        <buttonQuestionModal cmsWidgetName="DamageCauseQuestion" />
+        <buttonQuestionModal cmsWidgetName="DamageCauseQuestion" validationRules="damage-cause-required" />
     </div>
 </div>
 </template>

src/ux-components/button-main/button-main.vue

@@ -45,6 +45,9 @@ export default {
                 this.$emit("click-event");
             }
         },
+        resetButtonStyle() {
+            this.isLoaderDisplayed = false;
+        },
     },
     components: {
         loader,