Unit tests for feature/CSR-350, textbox-question and dropdown-question components

jest.config.js

@@ -24,9 +24,6 @@ module.exports = {
     "!src/layouts/address-lookup/address-lookup.vue",
     "!src/layouts/address-lookup/customer-questions/customer-questions.vue",
     "!src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue",
-    "!src/common-components/dropdown-question/dropdown-question.vue", 
-    "!src/common-components/textbox-question/textbox-question.vue",   
-    "!src/helpers/validation-rules.js",
     // END  
   ], //! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],

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

@@ -0,0 +1,131 @@
+import { shallowMount } from "@vue/test-utils";
+import dropdownQuestion from "./dropdown-question";
+import { nextTick } from "vue";
+import { maska } from 'maska';
+
+describe("dropdownQuestion.vue", () => {
+
+  it("Should return aria-disabled state", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        isDisabled: true,
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("select");
+
+    // Expect
+    expect(input.attributes()["aria-disabled"]).toEqual("true");
+  });
+
+  it("Should render a select input", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        name: "test",
+        label: "unit test label",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("select");
+
+    expect(input.exists()).toBe(true);
+  });
+
+  it("Should return input id", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        inputId: "input ID",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("select");
+
+    // Expect
+    expect(input.attributes().id).toEqual("input ID");
+  });
+
+  it("Should render the 'questionText' data value as the label text when disableAutoFill is false.", async () => {
+    // Arrange
+    //Mock CMS content
+    const questionText = "Question Text";
+    const cmsContent = {
+      QuestionText: questionText,
+    };
+
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+    });
+    await wrapper.setData({
+      questionText: questionText,
+    });
+    wrapper.vm.initializeComponent(cmsContent);
+
+    // Assert
+    expect(wrapper.find("label").text()).toContain(questionText);
+    wrapper.unmount();
+  });
+  
+  it("Should render the 'questionText' data value with '⁠' after the first character as the label text when disableAutoFill is true.", async () => {
+    // Arrange
+    //Mock CMS content
+    const originalQuestionText = "Question Text";
+    // Trust me, the below instance of the string "Q⁠uestion Text" actually has the ⁠ in it. You just can't see it
+    // Don't believe me? Copy it and paste it into Google. Then inspect the search field element in Dev Tools, 
+    // you will see "Q&uestion Text"
+    const expectedQuestionText = "Q⁠uestion Text"; 
+    const cmsContent = {
+      QuestionText: originalQuestionText,
+    };
+
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+      propsData: {
+        disableAutoFill: true,
+      },
+    });
+    await wrapper.setData({
+      questionText: originalQuestionText,
+    });
+    wrapper.vm.initializeComponent(cmsContent);
+
+    // Assert
+    expect(wrapper.vm.$el.children[0].innerHTML).toBe(expectedQuestionText);
+    wrapper.unmount();
+  });
+
+  it("Should emit new value when modelValue is changed", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+      propsData: {
+        modelValue: "val",
+      },
+    });
+
+    await wrapper.find("select").setValue("val2");
+
+    // Assert
+    expect(wrapper.emitted()).toHaveProperty('change')
+
+  });
+});

src/common-components/dropdown-question/dropdown-question.spec.js1

@@ -1,81 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import dropdownQuestion from "./dropdown-question";
-import { nextTick } from "vue";
-
-describe("dropdownQuestion.vue", () => {
-
-  it("Should return aria-disabled state", async () => {
-    // Act
-    const wrapper = shallowMount(dropdownQuestion, {
-      propsData: {
-        isDisabled: true,
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("select");
-
-    // Expect
-    expect(input.attributes()["aria-disabled"]).toEqual("true");
-  });
-
-  it("Should render a text input", async () => {
-    // Act
-    const wrapper = shallowMount(dropdownQuestion, {
-      propsData: {
-        name: "test",
-        label: "unit test label",
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("select");
-
-    expect(input.exists()).toBe(true);
-  });
-
-  it("Should return input id", async () => {
-    // Act
-    const wrapper = shallowMount(dropdownQuestion, {
-      propsData: {
-        inputId: "input ID",
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("select");
-
-    // Expect
-    expect(input.attributes().id).toEqual("input ID");
-  });
-
-/*   it("Should return label text", async () => {
-    // Act
-    const wrapper = shallowMount(dropdownQuestion, {
-      propsData: {
-        labelText: "label text",
-      },
-    });
-
-    // Assert
-    const label = wrapper.find("label");
-
-    expect(label.text()).toEqual("label text");
-  }); */
-
-  it("Should return input id", async () => {
-    // Act
-    const wrapper = shallowMount(dropdownQuestion, {
-      propsData: {
-        inputId: "input ID",
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("select");
-
-    // Expect
-    expect(input.attributes().id).toEqual("input ID");
-  });
-
-});

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

@@ -79,14 +79,18 @@ export default {
 		}, 
 		labelText: {
 			get: function () {
-				let labelText = this.questionText;
+				var thisQuestionText = "";
 				if (this.disableAutoFill) {
+					
 					const noBreakChar = "⁠";
 					const position = 1;
-					labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
+					thisQuestionText = [this.questionText.toString().slice(0, position), noBreakChar, this.questionText.toString().slice(position)].join('');
+					
+				} else {
+					thisQuestionText = this.questionText.toString();
 				}
 
-				return labelText;
+				return thisQuestionText;
 			}
 		}
 	},

src/common-components/funnel-sub-header/funnel-sub-header.spec.js

@@ -8,7 +8,7 @@ describe("FunnelSubHeader.vue", () => {
     await wrapper.setData({
       text: "FunnelSubHeader Content",
     });
-    wrapper.vm.initializeComponent(cmsContent);
+    //wrapper.vm.initializeComponent(cmsContent);
 
     // Assert
     expect(wrapper.find("h5").text()).toContain("FunnelSubHeader Content");

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

@@ -0,0 +1,178 @@
+import { shallowMount } from "@vue/test-utils";
+import textboxQuestion from "./textbox-question";
+import { maska } from 'maska';
+
+describe("textboxQuestion.vue", () => {
+
+  it("Should return aria-disabled state", async () => {
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+      propsData: {
+        isDisabled: true,
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes()["aria-disabled"]).toEqual("true");
+
+  });
+
+  it("Should render a text input", async () => {
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+      propsData: {
+        name: "test",
+        label: "unit test label",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.exists()).toBe(true);
+
+  });
+
+  it("Should return input id", async () => {
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+      propsData: {
+        inputId: "input ID",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().id).toEqual("input ID");
+
+  });
+
+  it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
+    // Arrange
+    //Mock CMS content
+    const questionText = "Question Text";
+    const cmsContent = {
+      QuestionText: questionText,
+    };
+
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+    });
+    await wrapper.setData({
+      questionText: questionText,
+    });
+    wrapper.vm.initializeComponent(cmsContent);
+
+    // Assert
+    expect(wrapper.find("label").attributes('aria-label')).toBe(questionText);
+    wrapper.unmount();
+
+  });
+
+  it("Should render the 'questionText' data value as the label text when disableAutoFill is false.", async () => {
+    // Arrange
+    //Mock CMS content
+    const questionText = "Question Text";
+    const cmsContent = {
+      QuestionText: questionText,
+    };
+
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+    });
+    await wrapper.setData({
+      questionText: questionText,
+    });
+    wrapper.vm.initializeComponent(cmsContent);
+
+    // Assert
+    expect(wrapper.find("label").text()).toContain(questionText);
+    wrapper.unmount();
+
+  });
+  
+  it("Should render the 'questionText' data value with '⁠' after the first character as the label text when disableAutoFill is true.", async () => {
+    // Arrange
+    //Mock CMS content
+    const originalQuestionText = "Question Text";
+    // Trust me, the below instance of the string "Q⁠uestion Text" actually has the ⁠ in it. You just can't see it
+    // Don't believe me? Copy it and paste it into Google. Then inspect the search field element in Dev Tools, 
+    // you will see "Q&uestion Text"
+    const expectedQuestionText = "Q⁠uestion Text"; 
+    const cmsContent = {
+      QuestionText: originalQuestionText,
+    };
+
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+      propsData: {
+        disableAutoFill: true,
+      },
+    });
+    await wrapper.setData({
+      questionText: originalQuestionText,
+    });
+    wrapper.vm.initializeComponent(cmsContent);
+
+    // Assert
+    expect(wrapper.vm.$el.children[0].innerHTML).toBe(expectedQuestionText);
+    wrapper.unmount();
+
+  });
+
+  it("Should emit new value when modelValue is changed", async () => {
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+      propsData: {
+        modelValue: "val",
+      },
+    });
+
+    await wrapper.find("input").setValue("val2");
+
+    // Assert
+    expect(wrapper.emitted()).toHaveProperty('change')
+
+  });
+
+});

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

@@ -1,81 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import textboxQuestion from "./textbox-question";
-import { nextTick } from "vue";
-
-describe("textboxQuestion.vue", () => {
-
-  it("Should return aria-disabled state", async () => {
-    // Act
-    const wrapper = shallowMount(textboxQuestion, {
-      propsData: {
-        isDisabled: true,
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("input");
-
-    // Expect
-    expect(input.attributes()["aria-disabled"]).toEqual("true");
-  });
-
-  it("Should render a text input", async () => {
-    // Act
-    const wrapper = shallowMount(textboxQuestion, {
-      propsData: {
-        name: "test",
-        label: "unit test label",
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("input");
-
-    expect(input.exists()).toBe(true);
-  });
-
-  it("Should return input id", async () => {
-    // Act
-    const wrapper = shallowMount(textboxQuestion, {
-      propsData: {
-        inputId: "input ID",
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("input");
-
-    // Expect
-    expect(input.attributes().id).toEqual("input ID");
-  });
-
-  it("Should return label text", async () => {
-    // Act
-    const wrapper = shallowMount(textboxQuestion, {
-      propsData: {
-        labelText: "label text",
-      },
-    });
-
-    // Assert
-    const label = wrapper.find("label");
-
-    expect(label.text()).toEqual("label text");
-  });
-
-  it("Should return input id", async () => {
-    // Act
-    const wrapper = shallowMount(textboxQuestion, {
-      propsData: {
-        inputId: "input ID",
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("input");
-
-    // Expect
-    expect(input.attributes().id).toEqual("input ID");
-  });
-
-});

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

@@ -95,14 +95,18 @@ export default {
 		}, 
 		labelText: {
 			get: function () {
-				let labelText = this.questionText;
+				var thisQuestionText = "";
 				if (this.disableAutoFill) {
+					
 					const noBreakChar = "⁠";
 					const position = 1;
-					labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
+					thisQuestionText = [this.questionText.toString().slice(0, position), noBreakChar, this.questionText.toString().slice(position)].join('');
+					
+				} else {
+					thisQuestionText = this.questionText.toString();
 				}
 
-				return labelText;
+				return thisQuestionText;
 			}
 		}    
 	},

src/helpers/validation-rules.spec.js

@@ -1,4 +1,5 @@
 import { required } from "@/helpers/validation-rules";
+import { regex } from "@/helpers/validation-rules";
 
 describe("validation-rules.vue", () => {
   test("required rules should return error if value missing", () => {
@@ -15,15 +16,57 @@ describe("validation-rules.vue", () => {
 });
 
 describe("validation-rules.vue", () => {
-    test("required rules should return true if value present", () => {
+  test("required rules should return true if value present", () => {
-  
+
-      //Arrange
+    //Arrange
-      const testFn = required("an error");
+    const testFn = required("an error");
-      
+    
-      //Act
+    //Act
-      const testResponse = testFn('some value');
+    const testResponse = testFn('some value');
-      
+    
-      //Assert
+    //Assert
-      expect(testResponse).toBe(true);
+    expect(testResponse).toBe(true);
-    });
+  });
-  });
+});
+
+describe("validation-rules.vue", () => {
+  test("regex rules should return true if value is not present", () => {
+
+    //Arrange
+    const testFn = regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, "an error"); // Using Zip regex
+    
+    //Act
+    const testResponse = testFn();
+    
+    //Assert
+    expect(testResponse).toBe(true);
+  });
+});
+
+describe("validation-rules.vue", () => {
+  test("regex rules should return false if value is present but does not match regular expression", () => {
+
+    //Arrange
+    const testFn = regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, "an error"); // Using Zip regex
+    
+    //Act
+    const testResponse = testFn('4321'); // needs to be 5 numbers
+    
+    //Assert
+    expect(testResponse).toBe("an error");
+  });
+});
+
+describe("validation-rules.vue", () => {
+  test("regex rules should return true if value is present and does match regular expression", () => {
+
+    //Arrange
+    const testFn = regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, "an error"); // Using Zip regex
+    
+    //Act
+    const testResponse = testFn('43213'); // needs to be 5 numbers
+    
+    //Assert
+    expect(testResponse).toBe(true);
+  });
+});