Unit tests ready

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

@@ -48,7 +48,7 @@ describe("phone-number-question.vue", () => {
         expect(wrapper.emitted("update:modelValue")).toEqual([["val2"]]);
     });
 
-    it("Should combine external and internal validation rules to pass to textbox-question", async() => {
+    it("Should combine external and internal validation rules to pass to textbox-question", async () => {
         // Act
         const wrapper = shallowMount(phoneNumberQuestion, {
             propsData: {
@@ -57,6 +57,8 @@ describe("phone-number-question.vue", () => {
         });
 
         // Assert
-        expect(wrapper.vm.validationRulesForTextBoxQuestion).toEqual("outsideValidation|phone-number-format");       
+        expect(wrapper.vm.validationRulesForTextBoxQuestion).toEqual(
+            "outsideValidation|phone-number-format"
+        );
     });
 });

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

@@ -1 +1,65 @@
-test.todo("some test to be written in the future");
+// Components
+import textareaQuestion from "./textarea-question";
+
+// Supporting Files
+import { shallowMount } from "@vue/test-utils";
+
+const questionText = "textareaQuestionText";
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn().mockImplementation(() => {
+            return questionText;
+        }),
+    },
+};
+
+describe("textarea-question.vue", () => {
+    it("Should render a textarea", async () => {
+        // Arrange
+        const wrapper = shallowMount(textareaQuestion, {
+            propsData: {
+                modelValue: "",
+            },
+            mixins: [mockMixin],
+        });
+
+        wrapper.getCmsContent = jest.fn();
+
+        // Act
+        const textarea = wrapper.find("textarea");
+
+        // Assert
+        expect(textarea.exists()).toBe(true);
+    });
+
+    it("Should emit new value when modelValue is changed", async () => {
+        // Act
+        const wrapper = shallowMount(textareaQuestion, {
+            propsData: {
+                modelValue: "val",
+            },
+            mixins: [mockMixin],
+        });
+
+        await wrapper.find("textarea").setValue("val2");
+
+        // Assert
+        expect(wrapper.emitted("update:modelValue")).toEqual([["val2"]]);
+    });
+
+    it("Should limit the number of characters entered to the max length value property passed in", async () => {
+        // Act
+        const wrapper = shallowMount(textareaQuestion, {
+            propsData: {
+                modelValue: "123456789",
+                maxLength: 10,
+            },
+            mixins: [mockMixin],
+        });
+
+        wrapper.vm.value = "12345678910";
+
+        // Assert
+        expect(wrapper.vm.value).toEqual("1234567891");
+    });
+});

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

@@ -1,14 +1,16 @@
 <template>
     <div class="textarea-question">
-        <div class="label-wrapper mb-1" :aria-label="TextAreaContentWidget">
+        <div class="label-wrapper mb-1" :aria-label="questionText">
             <!-- Wrap label and span because v-html prevents v-if from displaying if v-if <span> is inside <label>-->
-            <label for="textarea-comments" class="fw-bold" v-html="TextAreaContentWidget"></label>
+            <label for="textarea-question" class="fw-bold" v-html="questionText"></label>
             <span v-if="!isRequired" class="fw-normal ms-1">(Optional)</span>
         </div>
         <textarea
+            id="textareaQuestion"
+            ref="textarea"
             v-model="value"
+            v-maska="mask"
             @keyup="updateCount"
-            id="textarea-comments"
             class="p-4"
             :maxlength="maxLength"
             role="textbox"
@@ -18,7 +20,7 @@
         <p
             tabindex="0"
             class="caption mt-2 mb-0"
-            id="charactersremaining"
+            id="charactersRemaining"
             :class="[urgentCountdown ? 'urgent-countdown' : '']">
             {{ remainingCount }}/{{ maxLength }} characters remaining
         </p>
@@ -37,30 +39,10 @@ export default {
         },
         modelValue: String,
     },
-    setup(props) {
-        const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId;
-
-        const propsClone = Object.assign({}, props);
-        const modelValue = propsClone.modelValue;
-        let initialValue;
-
-        switch (typeof modelValue) {
-            case "number":
-                initialValue = modelValue;
-                break;
-            default:
-                initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
-                break;
-        }
-
-        const fieldOptions = {
-            type: "text",
-            value: modelValue,
-            initialValue: initialValue,
-        };
-    },
+    // TODO: At some point in the future we should probably add the tie in to validation here in case the field must be populated for some other use cases
+    setup() {},
     computed: {
-        TextAreaContentWidget() {
+        questionText() {
             return this.getCmsContent(this.cmsWidgetName, "QuestionText");
         },
         value: {
@@ -77,12 +59,16 @@ export default {
         urgentCountdown() {
             return this.remainingCount <= this.maxLength * 0.1 ? true : false;
         },
-    },
-    methods: {
-        updateCount() {
-            if (this.value.length > this.maxLength) {
-                this.value = this.value.slice(0, this.maxLength);
-            }
+        mask() {
+            // Allow any character but only the max length number of times.
+            return {
+                mask: `x*${this.maxLength}`,
+                tokens: {
+                    x: {
+                        pattern: /.|\n|\r/,
+                    },
+                },
+            };
         },
     },
 };