CSR-762 WIP tests

src/ux-components/list-button-horizontal/list-button-horizontal.spec.js

@@ -4,9 +4,9 @@ import { nextTick } from "vue";
 import { GaActions } from "@/constants/analytics";
 import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 
-// TODO KO
 describe("list-button-horizontal.vue", () => {
-  describe("baseInputButton checks", () => {
+  // TODO KO Have this moved out to somewhere shared
+  describe("Shared baseInputButton checks", () => {
     it("Should return input type checkbox if isMultiSelect is true", async () => {
       // Act
       const { wrapper } = setupMocks({
@@ -19,7 +19,6 @@ describe("list-button-horizontal.vue", () => {
 
       // Assert
       const input = wrapper.find("input");
-
       expect(input.attributes().type).toEqual("checkbox");
     });
 
@@ -114,6 +113,75 @@ describe("list-button-horizontal.vue", () => {
 
       expect(input.attributes()["aria-required"]).toEqual("true");
     });
+
+    it("is cash or insurance button => has 'radio-fancy' class", () => {
+      // Arrange/Act
+      const { wrapper } = setupMocks({
+        mockData: {
+          propsData: {
+            isCashOrInsurance: true,
+          },
+        },
+      });
+
+      // Assert
+      const label = wrapper.find("label");
+
+      expect(label.classes()).toContain("radio-fancy");
+    });
+
+    test("has buttonLabel => displays buttonLabel", () => {
+      // Arrange/Act
+      const { wrapper } = setupMocks({
+        mockData: {
+          propsData: {
+            buttonLabel: "Surprise!",
+          },
+        },
+      });
+
+      // Assert
+      const content = wrapper.find(".list-button-horizontal-content");
+      expect(content.isVisible()).toBe(true);
+      expect(content.text()).toContain("Surprise!");
+    });
+
+    test("has buttonLabelSubCopy => displays buttonLabelSubCopy", () => {
+      // Arrange/Act
+      const { wrapper } = setupMocks({
+        mockData: {
+          propsData: {
+            buttonLabel: "Surprise!",
+            buttonLabelSubCopy: "Super duper surprise :)",
+          },
+        },
+      });
+
+      // Assert
+      const content = wrapper.find(".list-button-horizontal-content");
+      expect(content.isVisible()).toBe(true);
+      expect(content.text()).toContain("Super duper surprise :)");
+    });
+
+    test("has screenReaderOnlyText => displays screenReaderOnlyText", () => {
+      // Arrange/Act
+      const { wrapper } = setupMocks({
+        mockData: {
+          propsData: {
+            buttonLabel: "Surprise!",
+            buttonLabelSubCopy: "Super duper surprise :)",
+            screenReaderOnlyText: "Tests are fun!"
+          },
+        },
+      });
+
+      // Assert
+      const content = wrapper.find(".list-button-horizontal-content");
+      const screenReaderOnlyText = wrapper.find(".sr-only");
+      expect(content.isVisible()).toBe(true);
+      expect(screenReaderOnlyText.exists()).toBe(true);
+      expect(screenReaderOnlyText.text()).toContain("Tests are fun!");
+    });
   });
 });
 
@@ -121,6 +189,12 @@ function setupMocks({ mockData }) {
   console.log(mockData);
   const wrapper = mount(listButtonHorizontal, {
     ...mockData,
+    propsData: {
+      ...mockData.propsData,
+      groupName: "my-group",
+      modelValue: mockData.propsData?.isMultiSelect ? ["5"] : "5",
+      value: mockData.propsData?.isMultiSelect ? ["4"] : "4"
+    },
     mixins: [inputButtonWrapperMixin],
   });
 

src/ux-components/list-button/list-button.spec.js

@@ -6,7 +6,7 @@ import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 
 describe("list-button.vue", () => {
   describe("loader", () => {
-    it("Should return loader enabled true", async () => {
+    it("selectingInitiatesLoad is true and answer is changed => show the loader", async () => {
       // Act
       const { wrapper } = setupMocks({
         mockData: {
@@ -148,6 +148,59 @@ describe("list-button.vue", () => {
   });
 
   describe("styling/UI", () => {
+    test("has buttonLabel => displays buttonLabel", () => {
+      // Arrange/Act
+      const { wrapper } = setupMocks({
+        mockData: {
+          propsData: {
+            buttonLabel: "Surprise!",
+          },
+        },
+      });
+
+      // Assert
+      const content = wrapper.find(".list-button-content");
+      expect(content.isVisible()).toBe(true);
+      expect(content.text()).toContain("Surprise!");
+    });
+
+    test("has buttonLabelSubCopy => displays buttonLabelSubCopy", () => {
+      // Arrange/Act
+      const { wrapper } = setupMocks({
+        mockData: {
+          propsData: {
+            buttonLabel: "Surprise!",
+            buttonLabelSubCopy: "Super duper surprise :)",
+          },
+        },
+      });
+
+      // Assert
+      const content = wrapper.find(".list-button-content");
+      expect(content.isVisible()).toBe(true);
+      expect(content.text()).toContain("Super duper surprise :)");
+    });
+
+    test("has screenReaderOnlyText => displays screenReaderOnlyText", () => {
+      // Arrange/Act
+      const { wrapper } = setupMocks({
+        mockData: {
+          propsData: {
+            buttonLabel: "Surprise!",
+            buttonLabelSubCopy: "Super duper surprise :)",
+            screenReaderOnlyText: "Tests are fun!",
+          },
+        },
+      });
+
+      // Assert
+      const content = wrapper.find(".list-button-content");
+      const screenReaderOnlyText = wrapper.find(".sr-only");
+      expect(content.isVisible()).toBe(true);
+      expect(screenReaderOnlyText.exists()).toBe(true);
+      expect(screenReaderOnlyText.text()).toContain("Tests are fun!");
+    });
+
     it("Should return screen reader text", async () => {
       // Act
       const { wrapper } = setupMocks({

src/ux-components/list-button/list-button.vue

@@ -48,14 +48,11 @@ export default {
     },
     methods: {
         displayLoader() {
-            console.log("Display me!")
             console.log(this.selectingInitiatesLoad)
             this.isLoaderDisplayed = true;
         },
         preHandleAnswerChange() {
-            console.log("HIII")
             if (this.selectingInitiatesLoad) {
-                console.log("EYY")
                 this.displayLoader();
             }
         },