CSR-762 tests

src/mixins/input-button-wrapper-mixin.js

@@ -10,6 +10,7 @@ export default {
         buttonLabel: [Number, String],
         buttonLabelSubCopy: String,
         buttonImage: String,
+        buttonImageId: String,
         altText: {
             type: String,
             default: "",

src/mixins/input-button-wrapper-mixin.spec.js

@@ -1,6 +1,10 @@
 import { mount } from "@vue/test-utils";
 import baseInputButton from "@/common-components/base-input-button/base-input-button";
 import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
+import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
+import listButton from "@/ux-components/list-button/list-button";
+import listCard from "@/ux-components/list-card/list-card";
+import radio from "@/ux-components/radio/radio";
 
 describe("input-button-wrapper-mixin", () => {
     describe("mouse clicks", () => {
@@ -184,21 +188,100 @@ describe("input-button-wrapper-mixin", () => {
             );
         });
     });
+
+    // shared checks between components that use input-button-wrapper-mixin
+    describe("shared checks", () => {
+        const inputButtonComponents = [listButtonHorizontal, listButton, listCard, radio];
+        test.each(inputButtonComponents.map((x) => [x.name, x]))(
+            "%s - should return input type checkbox if isMultiSelect is true",
+            async (name, inputButtonComponent) => {
+                // Act
+                const { wrapper } = setupMocksForComponentsUsingInputButtonWrapperMixin({
+                    component: inputButtonComponent,
+                    mockData: {
+                        propsData: {
+                            isMultiSelect: true,
+                        },
+                    },
+                });
+
+                // Assert
+                const input = wrapper.find("input");
+                expect(input.attributes().type).toEqual("checkbox");
+            }
+        );
+
+        test.each(inputButtonComponents.map((x) => [x.name, x]))(
+            "%s - return input type radio if isMultiSelect is false or not specified",
+            async (name, inputButtonComponent) => {
+                // Act
+                const { wrapper } = setupMocksForComponentsUsingInputButtonWrapperMixin({
+                    component: inputButtonComponent,
+                    mockData: {
+                        propsData: {
+                            isMultiSelect: false,
+                        },
+                    },
+                });
+
+                // Assert
+                const input = wrapper.find("input");
+                expect(input.attributes().type).toEqual("radio");
+            }
+        );
+
+        const selectedValues = ["something", ["test"]];
+        inputButtonComponents.forEach((inputButtonComponent) => {
+            test.each(selectedValues)(
+                `${inputButtonComponent.name} with selectedValue %s - should emit button value on click`,
+                async (selectedValue) => {
+                    // Act
+                    const { wrapper } = setupMocksForComponentsUsingInputButtonWrapperMixin({
+                        component: inputButtonComponent,
+                        mockData: {
+                            propsData: {
+                                isRadioHorizontal: true,
+                                buttonLabel: "Windshield",
+                                value: "List Card Checkbox",
+                                groupID: "radio-demo-1",
+                                groupName: "radio 1",
+                                buttonImage: "windshield-damage.svg",
+                                isRequired: true,
+                                isWide: false,
+                                modelValue: ["List Card Checkbox"],
+                                buttonID: "list-card-id",
+                            },
+                        },
+                    });
+
+                    // Act
+                    wrapper.vm.selectedValue = selectedValue;
+                    await wrapper.vm.$nextTick();
+
+                    // Assert
+                    expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(selectedValue);
+                }
+            );
+        });
+    });
 });
 
-function setupBaseInputButtonWrapper({ mockData = {} }) {
+function setupMocksForComponentsUsingInputButtonWrapperMixin({ mockData, component }) {
-    const originalData = baseInputButton.data();
+    const wrapper = mount(component, {
-    baseInputButton.data = () => {
+        ...mockData,
-        return {
+        propsData: {
-            ...originalData,
+            ...mockData.propsData,
-            // $route: {
+            groupName: "my-group",
-            //     query: {
+            modelValue: mockData.propsData?.isMultiSelect ? ["5"] : "5",
-            //         fmgPage: "myPage",
+            value: "4",
-            //     },
+        },
-            // },
+        mixins: [inputButtonWrapperMixin],
-        };
+    });
-    };
 
+    return { wrapper };
+}
+
+function setupBaseInputButtonWrapper({ mockData = {} }) {
     baseInputButton.methods.pushClickEventToGA = jest.fn();
 
     const baseInputButtonWrapper = {

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

@@ -3,67 +3,6 @@ import listButtonHorizontal from "./list-button-horizontal";
 import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 
 describe("list-button-horizontal.vue", () => {
-    // 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({
-                mockData: {
-                    propsData: {
-                        isMultiSelect: true,
-                    },
-                },
-            });
-
-            // Assert
-            const input = wrapper.find("input");
-            expect(input.attributes().type).toEqual("checkbox");
-        });
-
-        it("Should return input type radio if isMultiSelect is false or not specified", async () => {
-            // Act
-            const { wrapper } = setupMocks({
-                mockData: {
-                    propsData: {
-                        isMultiSelect: false,
-                    },
-                },
-            });
-
-            // Assert
-            const input = wrapper.find("input");
-            expect(input.attributes().type).toEqual("radio");
-        });
-
-        const selectedValues = ["something", ["test"]]
-        it.each(selectedValues)("Should emit button value on click", async (selectedValue) => {
-          // Act
-          const { wrapper } = setupMocks({
-              mockData: {
-                  propsData: {
-                      isRadioHorizontal: true,
-                      buttonLabel: "Windshield",
-                      value: "List Card Checkbox",
-                      groupID: "radio-demo-1",
-                      groupName: "radio 1",
-                      buttonImage: "windshield-damage.svg",
-                      isRequired: true,
-                      isWide: false,
-                      modelValue: ["List Card Checkbox"],
-                      buttonID: "list-card-id",
-                  },
-              },
-          });
-
-          // Act
-          wrapper.vm.selectedValue = selectedValue;
-          await wrapper.vm.$nextTick();
-
-          // Assert
-          expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(selectedValue);
-      });
-    });
-
     describe("styling/UI", () => {
         it("Should return screen reader text", async () => {
             // Act

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

@@ -27,7 +27,6 @@ describe("list-button.vue", () => {
             await wrapper.vm.$nextTick();
 
             // Assert
-            console.log(wrapper.html())
             const loader = wrapper.findComponent({ name: "loader" });
             expect(loader.exists()).toBe(true);
         });