phone-number-question unit tests

src/digital-components/phone-number-question/phone-number-question.spec.js

@@ -0,0 +1,62 @@
+// Components
+import phoneNumberQuestion from "./phone-number-question";
+
+// Supporting Files
+import { shallowMount } from "@vue/test-utils";
+
+describe("phone-number-question.vue", () => {
+    it("Should render phoneNumberQuestion sub-component (textbox-question)", async () => {
+        // Arrange
+        const wrapper = shallowMount(phoneNumberQuestion, {});
+
+        wrapper.getCmsContent = jest.fn();
+
+        // Act
+        const phoneNumber = wrapper.findComponent({ ref: "phoneNumber" });
+
+        // Assert
+        expect(phoneNumber.exists()).toBe(true);
+    });
+
+    it("Should emit new value when modelValue is changed", async () => {
+        // Act
+        const wrapper = shallowMount(phoneNumberQuestion, {
+            propsData: {
+                modelValue: "val",
+            },
+        });
+
+        const phoneNumber = wrapper.findComponent({ ref: "phoneNumber" });
+        await phoneNumber.setValue("val2");
+
+        // Assert
+        expect(wrapper.emitted("update:modelValue")).toEqual([["val2"]]);
+    });
+
+    it("Should emit new value when modelValue is changed", async () => {
+        // Act
+        const wrapper = shallowMount(phoneNumberQuestion, {
+            propsData: {
+                modelValue: "val",
+            },
+        });
+
+        const phoneNumber = wrapper.findComponent({ ref: "phoneNumber" });
+        await phoneNumber.setValue("val2");
+
+        // Assert
+        expect(wrapper.emitted("update:modelValue")).toEqual([["val2"]]);
+    });
+
+    it("Should combine external and internal validation rules to pass to textbox-question", async() => {
+        // Act
+        const wrapper = shallowMount(phoneNumberQuestion, {
+            propsData: {
+                validationRules: "outsideValidation",
+            },
+        });
+
+        // Assert
+        expect(wrapper.vm.validationRulesForTextBoxQuestion).toEqual("outsideValidation|phone-number-format");       
+    });
+});

src/digital-components/phone-number-question/phone-number-question.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="phone-number-question d-flex flex-column">
+        <textboxQuestion
+            ref="phoneNumber"
+            type="text"
+            :max-length="12"
+            v-model="selectedValue"
+            :mask="mask"
+            :isRequired="isRequired"
+            :validationRules="validationRulesForTextBoxQuestion"
+            cmsWidgetName="PhoneNumberQuestionWidget" />
+    </div>
+</template>
+
+<script>
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+
+// Supporting files
+import { errorMessages } from "@/constants/error-messages";
+import { regex } from "@/helpers/validation-rules";
+import { defineRule } from "vee-validate";
+
+// Validation
+defineRule(
+    "phone-number-format",
+    regex(/^(?=(?:.*\d){10})(?=(?:.*-){2})[\d-]{12}$/, errorMessages.PHONE_FORMAT)
+);
+
+export default {
+    name: "phoneNumberQuestion",
+    props: {
+        cmsWidgetName: String,
+        isRequired: Boolean,
+        validationRules: String,
+        hasError: Boolean,
+        centerErrorMessage: Boolean,
+        modelValue: String,
+    },
+    data() {
+        return {
+            phoneNumber: "",
+        };
+    },
+    computed: {
+        selectedValue: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+        validationRulesForTextBoxQuestion() {
+            if (!this.validationRules || this.validationRules.length === 0) {
+                return "phone-number-format";
+            } else {
+                return this.validationRules + "|phone-number-format";
+            }
+        },
+        mask() {
+            return {
+                mask: "x##-###-####",
+                tokens: {
+                    x: {
+                        pattern: /[2-9]/,
+                    },
+                },
+            };
+        },
+    },
+    components: {
+        textboxQuestion,
+    },
+};
+</script>
+
+<style lang="scss">
+.phone-number-question {
+    label {
+        color: $black;
+    }
+    input {
+        border-radius: 0.5rem;
+        border: 1px solid $gray-500;
+        height: 48px;
+        &:focus {
+            box-shadow: 0 0 0 2.5px $blue;
+            outline: none;
+        }
+        &:hover {
+            box-shadow: 0 0 0 4px $blue-300;
+        }
+    }
+}
+</style>

src/digital-components/phonenumber-question/phonenumber-question.spec.js

@@ -1 +0,0 @@
-test.todo("some test to be written in the future");

src/digital-components/phonenumber-question/phonenumber-question.vue

@@ -1,119 +0,0 @@
-<template>
-    <div class="phonenumber-question d-flex flex-column">
-        <textboxQuestion
-            type="text"
-            :max-length="12"
-            v-model="selectedValue"
-            :isRequired="isRequired"
-            :validationRules="validationRuleForTextBoxQuestion"
-            @input="filterNumber"
-            cmsWidgetName="phoneNumberQuestionWidget" />
-    </div>
-</template>
-
-<script>
-import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
-//Supporting files
-import { errorMessages } from "@/constants/error-messages";
-import { required, regex } from "@/helpers/validation-rules";
-import { Form, defineRule } from "vee-validate";
-import { useField, validate } from "vee-validate";
-//Validation
-defineRule(
-    "phone-number-format",
-    regex(/^(?=(?:.*\d){10})(?=(?:.*-){2})[\d-]{12}$/, errorMessages.PHONE_FORMAT)
-);
-export default {
-    name: "phoneNumberQuestion",
-    props: {
-        cmsWidgetName: String,
-        isRequired: Boolean,
-        validationRules: String,
-        hasError: Boolean,
-        centerErrorMessage: Boolean,
-        modelValue: String,
-    },
-    data() {
-        return {
-            phoneNumber: "",
-        };
-    },
-    computed: {
-        phoneNumberQuestionWidget() {
-            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
-        },
-        selectedValue: {
-            get: function () {
-                return this.modelValue;
-            },
-            set: function (newValue) {
-                const formattedNumber = this.formatPhoneNumber(newValue);
-                this.$emit("update:modelValue", formattedNumber);
-            },
-        },
-        validationRuleForTextBoxQuestion() {
-            if (!this.validationRules || this.validationRules.length === 0) {
-                return "phone-number-format";
-            } else {
-                return this.validationRules + "|phone-number-format";
-            }
-        },
-    },
-    methods: {
-        formatPhoneNumber(value) {
-            // Remove all non-digit characters from the phone number
-            let formattedNumber = value.replace(/\D/g, "");
-
-            // Insert hyphens after the first three and the next three digits
-            if (formattedNumber.length > 3) {
-                formattedNumber = formattedNumber.slice(0, 3) + "-" + formattedNumber.slice(3);
-            }
-            if (formattedNumber.length > 7) {
-                formattedNumber = formattedNumber.slice(0, 7) + "-" + formattedNumber.slice(7);
-            }
-
-            // Update the phone number with the formatted version
-            return formattedNumber;
-        },
-        filterNumber(event) {
-            const regex = /^(?!1)\d+/;
-            const inputValue = event.target.value;
-            if (!regex.test(inputValue)) {
-                // If the input violates the regex pattern, remove the leading 1
-                event.target.value = inputValue.replace(/^1/, "");
-            }
-        },
-    },
-    watch: {
-        async value(newValue) {
-            const result = await validate(newValue, this.validationRules); // do a test validation check, without triggering full validation
-            if (result.valid) {
-                this.handleChange(newValue); // trigger full validation on this field only
-            }
-        },
-    },
-    components: {
-        textboxQuestion,
-    },
-};
-</script>
-
-<style lang="scss">
-.phonenumber-question {
-    label {
-        color: $black;
-    }
-    input {
-        border-radius: 0.5rem;
-        border: 1px solid $gray-500;
-        height: 48px;
-        &:focus {
-            box-shadow: 0 0 0 2.5px $blue;
-            outline: none;
-        }
-        &:hover {
-            box-shadow: 0 0 0 4px $blue-300;
-        }
-    }
-}
-</style>

src/layouts/customer-details/customer-details.spec.js

@@ -55,4 +55,4 @@ function setupMocks() {
     );
 
     return { wrapper };
-}
+}

src/layouts/customer-details/customer-details.vue

@@ -55,7 +55,7 @@ import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import textareaQuestion from "@/digital-components/textarea-question/textarea-question";
 import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
-import phoneNumberQuestion from "@/digital-components/phonenumber-question/phonenumber-question";
+import phoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question";
 import textBlock from "@/digital-components/text-block/text-block";
 import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
 //Supporting files

src/styles/common-error-styles.scss

@@ -103,7 +103,7 @@ html {
         }
         &.textbox-question,
         &.dropdown-question,
-        &.phonenumber-question {
+        &.phone-number-question {
             p {
                 color: $red;
             }