WIP change data to props.

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@popperjs/core": "^2.10.2",
     "axios": "^0.23.0",
+    "babel-jest": "^24.9.0",
     "bootstrap": "^5.1.1",
     "canvas-confetti": "^1.4.0",
     "core-js": "^3.6.5",

src/common-components/textbox-question/textbox-question.spec.js

@@ -33,6 +33,46 @@ describe("textboxQuestion.vue", () => {
         expect(input.exists()).toBe(true);
     });
 
+    it("Should return rounded-pill class", async () => {
+        // Act
+        const wrapper = shallowMount(textboxQuestion, {
+            global: {
+                directives: {
+                    maska: maska,
+                },
+            },
+            mixins: [mockMixin],
+            propsData: {
+              cornerStyle: "rounded"
+            },
+        });
+
+        // Assert
+        const paragraph = wrapper.find("input");
+
+        expect(paragraph.attributes("class")).toContain("rounded-pill");
+    });
+
+    it.only("Should return text-center class", async () => {
+        // Act
+        const wrapper = shallowMount(textboxQuestion, {
+            global: {
+                directives: {
+                    maska: maska,
+                },
+            },
+            mixins: [mockMixin],
+            propsData: {
+              questionAlignment: "text"
+            },
+        });
+
+        // Assert
+        const paragraph = wrapper.find("input");
+
+        expect(paragraph.attributes("class")).toContain("text-center");
+    });
+
     it("Should render the 'questionText' data value as the label text when disableAutoFill is false.", async () => {
         // Arrange
         const wrapper = shallowMount(textboxQuestion, {

src/common-components/textbox-question/textbox-question.vue

@@ -8,10 +8,10 @@
             v-html="labelText"></label>
         <div class="input-wrapper" :class="[includeSearchIcon ? 'has-search-icon' : '']">
             <input
+                class="form-control"
                 v-model.trim="value"
                 v-maska="mask"
                 :type="type"
-                class="form-control"
                 :ref="inputId"
                 :id="inputId"
                 :name="inputId"
@@ -24,7 +24,7 @@
                     hasIcon ? 'has-icon' : '',
                     iconRight ? 'icon-right' : '',
                     questionAlignment ? 'text-center' : '',
-                    cornerStyle ? 'rounded-pill' : '',
+                    isRoundedPill ? 'rounded-pill' : '',
                 ]"
                 :validationRules="validationRules"
                 @change="handleChange"
@@ -68,6 +68,7 @@ export default {
         cmsWidgetName: String,
         maxLength: String, // Left or center. Default is left
         questionAlignment: String, // Left or center. Default is left
+        cornerStyle: String, // Left or center. Default is left
     },
     setup(props) {
         const propsClone = Object.assign({}, props);
@@ -107,10 +108,15 @@ export default {
     data() {
         return {
             includeSearchIcon: false,
-            cornerStyle: false,
         };
     },
     computed: {
+        isRoundedPill() {
+          return this.cornerStyle === "rounded";
+        },
+        isQuestionAlignment() {
+          return this.questionAlignment === "text";
+        },
         questionText() {
             return this.getCmsContent(this.cmsWidgetName, "QuestionText");
         },