Updated unit tests for textbox-question and dropdown-question components

jest.config.js

@@ -25,8 +25,6 @@ module.exports = {
     "!src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue",
     "!src/layouts/address-vehicles/address-vehicles.vue",
     "!src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue",
-    "!src/common-components/dropdown-question/dropdown-question.vue",
-    "!src/common-components/textbox-question/textbox-question.vue",
     "!src/ux-components/alert\alert.vue",
     "!src/helpers/validation-rules.js",
     // END

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

@@ -0,0 +1,170 @@
+import { shallowMount } from "@vue/test-utils";
+import dropdownQuestion from "./dropdown-question";
+
+// Mock CMS content
+const questionText = "Question Text";
+const mockMixin = {
+  methods: {
+    getCmsContent: jest.fn().mockImplementation(()=> {
+      return questionText;
+    })
+  }
+}
+
+// TODO: Remove the following from dropdown-question.vue -> :class="(errors && errors.length) || hasError ? 'has-error' : ''"
+// It is not being used.
+describe("dropdownQuestion.vue", () => {
+
+  it("Should render a select input", async () => {
+
+    // Arrange   
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+      },
+      mixins: [mockMixin]
+    });
+
+    wrapper.getCmsContent = jest.fn();
+
+    // Act
+    const select = wrapper.find("select");
+
+    // Assert
+    expect(select.exists()).toBe(true);
+
+  });
+  
+  it("Should render the 'questionText' data value as the label text.", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    const label = wrapper.find("label");
+
+    // Assert
+    expect(label.text()).toContain(questionText);
+
+  });
+
+  it("Should render the 'questionText' data value with '⁠' after the first character of each word in the label text when disableAutoFill is true.", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+        disableAutoFill: true,
+      },
+      mixins: [mockMixin]
+    });
+
+    // Mock CMS content ...
+    // 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 and paste it into Google. Then inspect the search field element in Dev Tools, 
+    // you will see "Q⁠uestion T⁠ext"
+    const expectedQuestionText = "Q⁠uestion T⁠ext"; 
+
+    // Act
+    const label = wrapper.find("label");
+
+    // Assert
+    expect(label.text()).toContain(expectedQuestionText);
+
+  });
+  
+  it("Should return input id as the id of the select field", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        inputId: "input ID",
+        options: {},
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    const select = wrapper.find("select");
+
+    // Assert
+    expect(select.attributes().id).toEqual("input ID");
+
+  });
+  
+  it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    const label = wrapper.find("label");
+
+    // Assert
+    expect(label.attributes("aria-label")).toContain(questionText);
+
+  });
+
+  it("Should return aria-disabled state as disabled", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+        isDisabled: true,
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    const select = wrapper.find("select");
+
+    // Assert
+    expect(select.attributes("aria-disabled")).toEqual("true");
+
+  });
+
+  it("Should emit new value when modelValue is changed", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+        modelValue: "val",
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    await wrapper.find("select").setValue("val2");
+
+    // Assert
+    expect(wrapper.emitted()).toHaveProperty('change')
+
+  });
+
+  it("Should call this.handleChange with new value when selectedOption is changed", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+        modelValue: 0,
+      },
+      mixins: [mockMixin]
+    });
+
+    wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
+
+    // Act
+    wrapper.vm.$options.watch.selectedOption.call(wrapper.vm, 1);
+
+    // Assert
+    expect(wrapper.vm.handleChange).toHaveBeenCalled;
+
+  });
+
+});

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

@@ -1,131 +0,0 @@
-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/textbox-question/textbox-question.spec.js

@@ -1,139 +1,61 @@
 import { shallowMount } from "@vue/test-utils";
 import textboxQuestion from "./textbox-question";
-import { maska } from 'maska';
+
+// Mock CMS content
+const questionText = "Question Text";
+const mockMixin = {
+  methods: {
+    getCmsContent: jest.fn().mockImplementation(()=> {
+      return questionText;
+    })
+  }
+}
+const maska = jest.fn();
 
 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
+    // Arrange   
     const wrapper = shallowMount(textboxQuestion, {
       global: {
         directives: {
           maska: maska,
         }
       },
-      propsData: {
+      mixins: [mockMixin]
-        name: "test",
-        label: "unit test label",
-      },
     });
 
-    // Assert
+    wrapper.getCmsContent = jest.fn();
+
+    // Act
     const input = wrapper.find("input");
 
+    // Assert
     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,
         }
       },
+      mixins: [mockMixin]
     });
-    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 label = wrapper.find("label");
+
+    // Assert
+    expect(label.text()).toContain(questionText);
+
+  }); 
+  
+  it("Should render the 'questionText' data value with '⁠' after the first character of each word in the label text when disableAutoFill is true.", async () => {
+    // Arrange
     const wrapper = shallowMount(textboxQuestion, {
       global: {
         directives: {
@@ -143,15 +65,84 @@ describe("textboxQuestion.vue", () => {
       propsData: {
         disableAutoFill: true,
       },
+      mixins: [mockMixin]
     });
-    await wrapper.setData({
+
-      questionText: originalQuestionText,
+    // Mock CMS content ...
-    });
+    // Trust me, the below instance of the string "Q⁠uestion Text" actually has the ⁠ in it. You just can't see it
-    wrapper.vm.initializeComponent(cmsContent);
+    // Don't believe me? Copy and paste it into Google. Then inspect the search field element in Dev Tools, 
+    // you will see "Q⁠uestion T⁠ext"
+    const expectedQuestionText = "Q⁠uestion T⁠ext"; 
+
+    // Act
+    const label = wrapper.find("label");
 
     // Assert
-    expect(wrapper.vm.$el.children[0].innerHTML).toBe(expectedQuestionText);
+    expect(label.text()).toContain(expectedQuestionText);
-    wrapper.unmount();
+
+  });
+  
+  it("Should return input id as the id of the input field", async () => {
+    // Arrange
+    const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+      propsData: {
+        inputId: "input ID",
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    const input = wrapper.find("input");
+
+    // Assert
+    expect(input.attributes().id).toEqual("input ID");
+
+  });
+  
+  it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
+
+    // Arrange
+    const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    const label = wrapper.find("label");
+
+    // Assert
+    expect(label.attributes("aria-label")).toContain(questionText);
+
+  });
+
+  it("Should return aria-disabled state as disabled", async () => {
+    // Arrange
+    const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+      propsData: {
+        isDisabled: true,
+      },
+      mixins: [mockMixin]
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes("aria-disabled")).toEqual("true");
 
   });
 
@@ -166,6 +157,7 @@ describe("textboxQuestion.vue", () => {
       propsData: {
         modelValue: "val",
       },
+      mixins: [mockMixin]
     });
 
     await wrapper.find("input").setValue("val2");
@@ -175,4 +167,33 @@ describe("textboxQuestion.vue", () => {
 
   });
 
+  it("Should call this.handleChange with new value when this.semiAggressiveValidation = true, the value is changed, and the new value is valid", async () => {
+    // Arrange
+    const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+      propsData: {
+        options: {},
+        modelValue: "foo",
+        semiAggressiveValidation: true,
+      },
+      mixins: [mockMixin]
+    });
+
+    wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
+    wrapper.vm.validate = jest.fn().mockImplementation(() => {
+      return true;
+    });
+
+    // Act
+    wrapper.vm.$options.watch.value.call(wrapper.vm, "bar");
+
+    // Assert
+    expect(wrapper.vm.handleChange).toHaveBeenCalled;
+
+  });  
+
 });