From b98109ba7c53245a71f8a2def3bc92fc7b5253f0 Mon Sep 17 00:00:00 2001
From: Kulbhushan Kaushik <kulbhushan.kaushik@safelite.com>
Date: Mon, 19 Dec 2022 13:45:29 -0500
Subject: [PATCH] commit. Unit tests and few other changes for button question
 modal component

---
 .../button-question-modal.spec.js             | 52 +++++++++++++++++++
 .../button-question-modal.vue                 | 11 +---
 src/layouts/welcome-page/welcome-page.vue     |  2 +-
 src/ux-components/button-main/button-main.vue |  3 ++
 4 files changed, 58 insertions(+), 10 deletions(-)
 create mode 100644 src/common-components/button-question-modal/button-question-modal.spec.js

diff --git a/src/common-components/button-question-modal/button-question-modal.spec.js b/src/common-components/button-question-modal/button-question-modal.spec.js
new file mode 100644
index 00000000..dc7ac5b4
--- /dev/null
+++ b/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"
+        },
+    ],
+};
diff --git a/src/common-components/button-question-modal/button-question-modal.vue b/src/common-components/button-question-modal/button-question-modal.vue
index f0d2ce6d..223186ae 100644
--- a/src/common-components/button-question-modal/button-question-modal.vue
+++ b/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");
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index f30b17a2..9ea64244 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/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>
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 967421b9..d4804e62 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -45,6 +45,9 @@ export default {
                 this.$emit("click-event");
             }
         },
+        resetButtonStyle() {
+            this.isLoaderDisplayed = false;
+        },
     },
     components: {
         loader,