CSR-762 Fix broken/remove outdated tests

jest.config.js

@@ -28,8 +28,7 @@ module.exports = {
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
     global: {
-      // TODO KO
-      statements: 55,
+      statements: 85,
       // Got the go ahead from Mark to temporarily lower this. Taking out initialize component made the year,make,model and style coverage drop a bit. Once unit tests for license plate lookup, vin lookup and address lookup are in the coverage should go back up to 90
     },
   },

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

@@ -2,189 +2,170 @@ import { shallowMount } from "@vue/test-utils";
 import buttonQuestion from "@/common-components/button-question/button-question";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 
-jest.mock("@/store", () => { return {}; }, { virtual: true });
+jest.mock(
+  "@/store",
+  () => {
+    return {};
+  },
+  { virtual: true }
+);
 
-// TODO KO
-describe.skip("buttonQuestion.vue", () => {
+describe("buttonQuestion.vue", () => {
   it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {
     // Act
     const wrapper = shallowMount(buttonQuestion, {
       propsData: {
         isOverflowScrollable: true,
-        groupName: "group-name"
-      }
+        groupName: "group-name",
+      },
     });
 
     // Assert
-    const fieldSet = wrapper.find('fieldset');
+    const fieldSet = wrapper.find("fieldset");
     expect(fieldSet.classes()).toContain("overflow-scroll");
   });
 });
 
-// describe("buttonQuestion.vue", () => {
-//   it("Fieldset classes should contain row if button type is listCard", () => {
-//     // Act
-//     const wrapper = shallowMount(buttonQuestion, {
-//       propsData: {
-//         buttonType: "listCard",
-//         groupName: "group-name"
-//       }
-//     });
-//     // Assert
-//     const Div = wrapper.find('fieldset div');
-//     expect(Div.classes()).toContain("row");
-//   });
-// });
+describe("buttonQuestion.vue", () => {
+  it("Fieldset classes should contain row if button type is listCard", () => {
+    // Act
+    const wrapper = shallowMount(buttonQuestion, {
+      propsData: {
+        buttonType: "listCard",
+        groupName: "group-name",
+      },
+    });
+    // Assert
+    const Div = wrapper.find("fieldset div");
+    expect(Div.classes()).toContain("row");
+  });
+});
 
-// describe("buttonQuestion.vue", () => {
-//   it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", () => {
-//     // Act
-//     const wrapper = shallowMount(buttonQuestion, {
-//       propsData: {
-//         buttonType: "listButtonHorizontal",
-//         groupName: "group-name"
-//       }
-//     });
-//     // Assert
-//     const Div = wrapper.find('fieldset div');
-//     expect(Div.classes()).toContain("d-flex");
-//   });
-// });
+describe("buttonQuestion.vue", () => {
+  it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", () => {
+    // Act
+    const wrapper = shallowMount(buttonQuestion, {
+      propsData: {
+        buttonType: "listButtonHorizontal",
+        groupName: "group-name",
+      },
+    });
+    // Assert
+    const Div = wrapper.find("fieldset div");
+    expect(Div.classes()).toContain("d-flex");
+  });
+});
 
-// describe("buttonQuestion.vue", () => {
-//   it("Fieldset classes should contain ui-radio if button type is radio", () => {
-//     // Act
-//     const wrapper = shallowMount(buttonQuestion, {
-//       propsData: {
-//         buttonType: "radio",
-//         groupName: "group-name"
-//       }
-//     });
-//     // Assert
-//     const Div = wrapper.find('fieldset div');
-//     expect(Div.classes()).toContain("ui-radio");
-//   });
-// });
+describe("buttonQuestion.vue", () => {
+  it("Fieldset classes should contain ui-radio if button type is radio", () => {
+    // Act
+    const wrapper = shallowMount(buttonQuestion, {
+      propsData: {
+        buttonType: "radio",
+        groupName: "group-name",
+      },
+    });
+    // Assert
+    const Div = wrapper.find("fieldset div");
+    expect(Div.classes()).toContain("ui-radio");
+  });
+});
 
+// testing a computed property
+describe("buttonQuestion.vue", () => {
+  it("getColLength should return '12' if prop isWide is set to true", () => {
+    // Act
+    const localThis = { isWide: true };
 
-// // testing a computed property
-// describe("buttonQuestion.vue", () => {
-//   it("getColLength should return '12' if prop isWide is set to true", () => {
-//     // Act
-//     const localThis = { isWide: true }
+    expect(buttonQuestion.computed.getColLength.call(localThis)).toBe("12");
+  });
+});
 
-//     expect(buttonQuestion.computed.getColLength.call(localThis)).toBe("12");
-//   });
-// });
+describe("buttonQuestion.vue", () => {
+  it("getColLength should return '' if prop isWide is set to false", () => {
+    // Act
+    const localThis = {
+      isWide: false,
+      answers: ["a", "b"],
+      groupName: "group-name",
+    };
 
-// describe("buttonQuestion.vue", () => {
-//   it("getColLength should return '' if prop isWide is set to false", () => {
-//     // Act
-//     const localThis = {
-//       isWide: false,
-//       answers: ['a', 'b'],
-//       groupName: "group-name"
-//     }
+    expect(buttonQuestion.computed.getColLength.call(localThis)).toBe("");
+  });
+});
 
-//     expect(buttonQuestion.computed.getColLength.call(localThis)).toBe("");
-//   });
-// });
+describe("buttonQuestion.vue", () => {
+  it("Should return answer.Text if prop useTextForValue is true", async () => {
+    // Act
+    const localThis = { useTextForValue: true };
+    const answer = { Name: "testName", Text: "testText" };
 
-// describe("buttonQuestion.vue", () => {
-//   it("Should return answer.Text if prop useTextForValue is true", async () => {
-//     // Act
-//     const localThis = { useTextForValue: true };
-//     const answer = { 'Name': 'testName', 'Text': 'testText' };
+    // Assert
+    expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe(
+      "testText"
+    );
+  });
+});
 
-//     // Assert
-//     expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe('testText');
-//   });
-// });
+describe("buttonQuestion.vue", () => {
+  it("Should return answer.Name if prop useTextForValue is false and there's not buttonLabel and answer.Name exists", async () => {
+    // Act
+    const localThis = { useTextForValue: false };
+    const answer = { Name: "testName", Text: "testText" };
 
-// describe("buttonQuestion.vue", () => {
-//   it("Should return answer.Name if prop useTextForValue is false and answer.Name exists", async () => {
-//     // Act
-//     const localThis = { useTextForValue: false };
-//     const answer = { 'Name': 'testName', 'Text': 'testText' };
+    // Assert
+    expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe(
+      "testName"
+    );
+  });
+});
 
-//     // Assert
-//     expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe('testName');
-//   });
-// });
+describe("buttonQuestion.vue", () => {
+  describe("handleAnswerChange", () => {
+    test("is radio => should emit captured value", async () => {
+      // Act
+      const wrapper = shallowMount(
+        buttonQuestion,
+        setupMocks({ propsData: { groupName: "group-name" } })
+      );
+      await wrapper.setProps({
+        answers: ["2022", "2021", "2020"],
+        isMultiSelect: false,
+        modelValue: "",
+      });
+      const val = "2021";
+      wrapper.vm.handleAnswerChange(val);
 
-// describe("buttonQuestion.vue", () => {
-//   it("Should trigger event modelValue change to new value on when radio button selected", async () => {
-//     // Act
-//     const wrapper = shallowMount(buttonQuestion, setupMocks({propsData: {groupName: "group-name"}}));
-//     await wrapper.setProps({
-//       answers: ["2022", "2021", "2020"],
-//       isMultiSelect: false,
-//       modelValue: []
-//     });
-//     const val = { checkValue: true, value: "2021", }
-//     wrapper.vm.handleCheckedChanged(val);
-//     // Assert
-//     expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2021"]]);
-//   });
-// });
+      // Assert
+      expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["2021"]);
+    });
 
-// describe("buttonQuestion.vue", () => {
-//   it("Should add values to array on checkbox click", () => {
-//     // Act
-//     const wrapper = shallowMount(buttonQuestion, setupMocks({
-//       propsData: {
-//         modelValue: ["2022", "2021", "2020"],
-//         isMultiSelect: true,
-//         groupName: "group-name"
-//       }
-//     }));
-//     const val = { checkValue: true, value: "2019", }
-//     wrapper.vm.handleCheckedChanged(val);
-//     // Assert
-//     expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2022", "2021", "2020", "2019"]]);
-//   });
-// });
+    test("is checkbox => should emit captured value", async () => {
+      const wrapper = shallowMount(
+        buttonQuestion,
+        setupMocks({ propsData: { groupName: "group-name" } })
+      );
+      await wrapper.setProps({
+        answers: ["2022", "2021", "2020"],
+        isMultiSelect: false,
+        modelValue: "",
+      });
+      const val = ["2022", "2021", , "2019", "2020"];
+      wrapper.vm.handleAnswerChange(val);
 
-// describe("buttonQuestion.vue", () => {
-//   it("Should add a value to this.selectedValues if prop isMultiSelect is true, checkValue is true and this.selectedValues already exists", () => {
-//     // Act
-//     const wrapper = shallowMount(buttonQuestion, setupMocks({
-//       propsData: {
-//         isMultiSelect: true,
-//         modelValue: ['a', 'b'],
-//         groupName: "group-name"
-//       }
-//     }));
-//     const val = { checkValue: true, value: "2021", }
-//     wrapper.vm.handleCheckedChanged(val);
-
-//     // Assert
-//     expect(wrapper.vm.selectedValues).toEqual(["a", "b", "2021"]);
-//   });
-// });
-
-// describe("buttonQuestion.vue", () => {
-//   it("Should remove a value to this.selectedValues if prop isMultiSelect is true, checkValue is false and this.selectedValues already exists", () => {
-//     // Act
-//     const wrapper = shallowMount(buttonQuestion, setupMocks({
-//       propsData: {
-//         isMultiSelect: true,
-//         modelValue: ['a', 'b'],
-//         groupName: "group-name"
-//       }
-//     }));
-
-//     const val = { checkValue: false, value: "a", }
-//     wrapper.vm.handleCheckedChanged(val);
-
-//     // Assert
-//     expect(wrapper.vm.selectedValues).toEqual(["b"]);
-//   });
-// });
+      // Assert
+      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([
+        ["2022", "2021", , "2019", "2020"],
+      ]);
+    });
+  });
+});
 
 function setupMocks(mountOptionsMockData = {}) {
-  const defaultMountOptions = { route: { query: { fmgPage: 'page-name' } } };
-  const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData));
+  const defaultMountOptions = { route: { query: { fmgPage: "page-name" } } };
+  const baseMountOptions = getMountOptions(
+    Object.assign(defaultMountOptions, mountOptionsMockData)
+  );
   const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
 
   return allMountOptions;

src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js

@@ -36,8 +36,7 @@ describe("replace-options-question.vue", () => {
 });
 
 describe("replace-options-question.vue", () => {
-  // TODO KO
-  test.skip("when updateSelectedValues method is called with a single answerToDisplay it will call to update this.selectedValues", async () => {
+  test("when updateSelectedValues method is called with a single answerToDisplay it will call to update this.selectedReplaceOptions", async () => {
 
     //Arrange
     const { wrapper, cmsContent, replaceOptions
@@ -57,7 +56,7 @@ describe("replace-options-question.vue", () => {
     //Act
     wrapper.vm.$options.methods.updateSelectedValues.call(wrapper.vm);
 
-    expect(wrapper.vm.selectedValues).toEqual([]);
+    expect(wrapper.vm.selectedReplaceOptions).toEqual([]);
   });
 });
 

src/layouts/vehicle-damage/side-door-options/side-door-options.vue

@@ -57,7 +57,7 @@ export default ({
     name: "sideDoorOptions",
     props: {
         groupName: String,
-        modelValue: Array,
+        modelValue: [Array, Object],    // TODO Does this take an array?
         selectedDamageLocations: Array,
         cmsWidgetName: String,
     },

src/layouts/vehicle-damage/vehicle-damage.spec.js

@@ -55,8 +55,7 @@ jest.mock("@/store", () => ({
   },
 }));
 
-// TODO KO
-describe.skip("vehicle-damage.vue", () => {
+describe("vehicle-damage.vue", () => {
   describe("navigation", () => {
     test("BackButtonAction triggers a router.navigateWithoutSaving change", async () => {
 
@@ -130,20 +129,20 @@ describe.skip("vehicle-damage.vue", () => {
         },
       });
 
-      wrapper.vm.selectedDamageLocations = ["Windshield", "SideDoor", "RearWindow"];
-      wrapper.vm.selectedWindshieldOptions = {
-        selectedWindshieldChipCount: null,
-        selectedWindshieldReplaceOptions: ["Single"],
-        selectedWindshieldDamageType: "Replace"
-      };
-
-      wrapper.vm.sideDoorOptionsData = {
-        selectedDoorSides: ["DriverSide", "PassengerSide"],
-        selectedDriverSideReplaceOptions: ["Back"],
-        selectedPassengerSideReplaceOptions: ["Quarter"]
-      };
-
-      wrapper.vm.selectedRearReplaceOptions = ["Stationary"];
+      wrapper.setData({
+        selectedDamageLocations: ["Windshield", "SideDoor", "RearWindow"],
+        selectedWindshieldOptions: {
+          selectedWindshieldChipCount: null,
+          selectedWindshieldReplaceOptions: ["Single"],
+          selectedWindshieldDamageType: "Replace"
+        },
+        sideDoorOptionsData: {
+          selectedDoorSides: ["DriverSide", "PassengerSide"],
+          selectedDriverSideReplaceOptions: ["Back"],
+          selectedPassengerSideReplaceOptions: ["Quarter"]
+        },
+        selectedRearReplaceOptions: "Stationary",
+      })
 
       const expectedGlassToReplace = [{ glassLocation: "Windshield", glassName: "Single" }, { glassLocation: "Driver", glassName: "Back" },
       { glassLocation: "Passenger", glassName: "Quarter" }, { glassLocation: "Rear", glassName: "Stationary" }];
@@ -520,19 +519,19 @@ describe.skip("vehicle-damage.vue", () => {
 
     const storeWindshieldOptions = [[1, false, "Windshield", "Single", {
       selectedWindshieldDamageType: damageLocationsSelected.REPLACE,
-      selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.SINGLE]
+      selectedWindshieldChipCount: null, selectedWindshieldReplaceOptions: [damageLocationsSelected.SINGLE]
     }],
     [2, false, "Windshield", "Driver", {
       selectedWindshieldDamageType: damageLocationsSelected.REPLACE,
-      selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.DRIVER]
+      selectedWindshieldChipCount: null, selectedWindshieldReplaceOptions: [damageLocationsSelected.DRIVER]
     }],
     [3, false, "Windshield", "Passenger", {
       selectedWindshieldDamageType: damageLocationsSelected.REPLACE,
-      selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.PASSENGER]
+      selectedWindshieldChipCount: null, selectedWindshieldReplaceOptions: [damageLocationsSelected.PASSENGER]
     }],
     [4, true, "", "", {
       selectedWindshieldDamageType: damageLocationsSelected.REPAIR,
-      selectedWindshieldChipCount: [2], selectedWindshieldReplaceOptions: []
+      selectedWindshieldChipCount: 2, selectedWindshieldReplaceOptions: []
     }]
     ];
     test.each(storeWindshieldOptions)("getWindshieldOptionsFromStore test #%s", async (testNum, isRepair, damageLocation, damageName, expectedWindshieldOptions) => {
@@ -619,8 +618,8 @@ describe.skip("vehicle-damage.vue", () => {
       expect(glassSelections).toEqual(expectedGlass);
     });
 
-    const rearReplaceOptions = [["Rear", "Stationary", [damageLocationsSelected.STATIONARY]],
-    ["Rear", "Slider", [damageLocationsSelected.SLIDER]]
+    const rearReplaceOptions = [["Rear", "Stationary", damageLocationsSelected.STATIONARY],
+    ["Rear", "Slider", damageLocationsSelected.SLIDER]
     ];
     test.each(rearReplaceOptions)("getRearReplaceOptionsFromStore for %s-%s returns expected %s", async (damageLocation, damageName, expectedGlass) => {
 

src/layouts/vehicle-damage/windshield-options/windshield-options.vue

@@ -83,7 +83,7 @@ export default ({
     },
 
     props: {
-        modelValue: String,
+        modelValue: [Object, String],   // TODO Does this take a string?
         selectedDamageLocations: Array,
         hasRepairReplaceConflict: Boolean,
         hasSplitSingleConflict: Boolean,

src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js

@@ -18,9 +18,7 @@ const featureListData = {
     modelValueProp: {}
 }
 
-// TODO KO
-describe.skip("glass-part-question.vue", () => {
-
+describe("glass-part-question.vue", () => {
     test("Part data passed in, should map data for ButtonQuestion (radio type)", async () => {
 
         //Arrange

src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue

@@ -63,7 +63,10 @@ export default {
         glassLocation: String,
         colorAnswers: Array,
         modelValue: Object,
-        alreadyPopulatedPartsData: Array
+        alreadyPopulatedPartsData: {
+            type: Array,
+            default: () => []
+        }
     },
     mounted() {
         this.LoadPreselectedValues();

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

@@ -1,272 +1,128 @@
-import { shallowMount } from "@vue/test-utils";
+import { shallowMount, mount } from "@vue/test-utils";
 import listButtonHorizontal from "./list-button-horizontal";
 import { nextTick } from "vue";
 import { GaActions } from "@/constants/analytics";
+import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 
 // TODO KO
-describe.skip("list-button-horizontal.vue", () => {
-  it("Should return input type checkbox if isMultiSelect is true", async () => {
-    // Act
-    const wrapper = shallowMount(listButtonHorizontal, {
-      propsData: {
-        isMultiSelect: true,
-      },
+describe("list-button-horizontal.vue", () => {
+  describe("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");
     });
 
-    // Assert
-    const input = wrapper.find("input");
+    it("Should return input type radio if isMultiSelect is false or not specified", async () => {
+      // Act
+      const { wrapper } = setupMocks({
+        mockData: {
+          propsData: {
+            isMultiSelect: false,
+          },
+        },
+      });
 
-    expect(input.attributes().type).toEqual("checkbox");
-  });
-
-  it("Should return input type radio if isMultiSelect is false or not specified", async () => {
-    // Act
-    const wrapper = shallowMount(listButtonHorizontal, {
-      propsData: {
-        isMultiSelect: false,
-      },
+      // Assert
+      const input = wrapper.find("input");
+      expect(input.attributes().type).toEqual("radio");
     });
 
-    // Assert
-    const input = wrapper.find("input");
+    it("Should emit button value on click", async () => {
+      // 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",
+          },
+        },
+      });
 
-    expect(input.attributes().type).toEqual("radio");
+      // Act
+      wrapper.vm.handleAnswerChange("test");
+      await wrapper.vm.$nextTick();
+
+      // Assert
+      expect(wrapper.emitted()["change"][0]).toEqual(["test"]);
+    });
   });
 
-  it("Should return primary label text (buttonID)", async () => {
-    // Act
-    const wrapper = shallowMount(listButtonHorizontal, {
-      propsData: {
-        buttonID: "List Card Checkbox",
-      },
+  describe("styling/UI", () => {
+    it("Should return screen reader text", async () => {
+      // Act
+      const { wrapper } = setupMocks({
+        mockData: {
+          propsData: {
+            screenReaderOnlyText: "Screen Reader Only Text",
+          },
+        },
+      });
+
+      // Assert
+      const paragraph = wrapper.find("span.sr-only");
+
+      expect(paragraph.text()).toEqual("Screen Reader Only Text");
     });
 
-    // Assert
-    const label = wrapper.find("label");
+    it("Should return text alignment class", async () => {
+      // Act
+      const { wrapper } = setupMocks({
+        mockData: {
+          propsData: {
+            textPosition: "text-center",
+          },
+        },
+      });
 
-    expect(label.attributes().for).toEqual("List Card Checkbox");
-  });
+      // Assert
+      const paragraph = wrapper.find("span.m-0");
 
-  it("Should return screen reader text", async () => {
-    // Act
-    const wrapper = shallowMount(listButtonHorizontal, {
-      propsData: {
-        screenReaderOnlyText: "Screen Reader Only Text",
-      },
+      expect(paragraph.attributes("class")).toContain("text-center");
     });
 
-    // Assert
-    const paragraph = wrapper.find("span.sr-only");
+    it("Should return aria-required state", async () => {
+      // Act
+      const { wrapper } = setupMocks({
+        mockData: {
+          propsData: {
+            isRequired: true,
+          },
+        },
+      });
 
-    expect(paragraph.text()).toEqual("Screen Reader Only Text");
-  });
+      // Assert
+      const input = wrapper.find("input");
 
-  it("Should return text alignment class", async () => {
-    // Act
-    const wrapper = shallowMount(listButtonHorizontal, {
-      propsData: {
-        textPosition: "text-center",
-      },
+      expect(input.attributes()["aria-required"]).toEqual("true");
     });
-
-    // Assert
-    const paragraph = wrapper.find("span.m-0");
-
-    expect(paragraph.attributes("class")).toContain("text-center");
   });
-
-  it("Should return aria-required state", async () => {
-    // Act
-    const wrapper = shallowMount(listButtonHorizontal, {
-      propsData: {
-        isRequired: true,
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("input");
-
-    expect(input.attributes()["aria-required"]).toEqual("true");
-  });
-
-  it("Should return loader enabled true", async () => {
-    // Act
-    const wrapper = shallowMount(listButtonHorizontal, {
-      global: {
-        mocks: {
-          '$route': { query: { fmgPage: 'page-name' } },
-          GaActions: GaActions,
-          pushEventToGA: jest.fn(),
-        }
-      },
-      propsData: {
-        selectingInitiatesLoad: true,
-      },
-    });
-
-    // Assert
-
-    const label = wrapper.find("label");
-
-    wrapper.vm.handleCheckChange = jest.fn();
-    wrapper.vm.triggerButton();
-
-    await nextTick();
-
-    const loader = wrapper.find("loader-stub");
-
-    expect(loader.exists()).toBe(true);
-  });
-
-  it("Should return loader color", async () => {
-    // Act
-    const wrapper = shallowMount(listButtonHorizontal, {
-      global: {
-        mocks: {
-          '$route': { query: { fmgPage: 'page-name' } },
-          GaActions: GaActions,
-          pushEventToGA: jest.fn(),
-        }
-      },
-      propsData: {
-        loaderColor: "blue",
-        selectingInitiatesLoad: true,
-      },
-    });
-
-    // Assert
-
-    const label = wrapper.find("label");
-
-    wrapper.vm.handleCheckChange = jest.fn();
-    wrapper.vm.triggerButton();
-
-    await nextTick();
-
-    const loader = wrapper.find("loader-stub");
-
-    expect(loader.attributes("class")).toContain("blue");
-  });
-
-  it("Should return loader position", async () => {
-    // Act
-    const wrapper = shallowMount(listButtonHorizontal, {
-      global: {
-        mocks: {
-          '$route': { query: { fmgPage: 'page-name' } },
-          GaActions: GaActions,
-          pushEventToGA: jest.fn(),
-        }
-      },
-      propsData: {
-        loaderPosition: "right",
-        selectingInitiatesLoad: true,
-      },
-    });
-
-    // Assert
-
-    const label = wrapper.find("label");
-
-    wrapper.vm.handleCheckChange = jest.fn();
-    wrapper.vm.triggerButton();
-
-    await nextTick();
-
-    const loader = wrapper.find("loader-stub");
-
-    expect(loader.attributes("class")).toContain("right");
-  });
-
-  it("Should emit button value on click", async () => {
-    // Act
-    const wrapper = shallowMount(listButtonHorizontal, {
-      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"],
-      },
-    });
-    wrapper.vm.handleCheckChange();
-    // Assert
-    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean, buttonId: undefined, checkValue: false}]);
-  });
-
-  it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
-    // Act
-    const wrapper = shallowMount(listButtonHorizontal, {
-      propsData: {
-        isRadioHorizontal: true,
-        buttonLabel: "Windshield",
-        buttonID: "List Card Checkbox",
-        groupID: "radio-demo-1",
-        groupName: "radio 1",
-        buttonImage: "windshield-damage.svg",
-        isRequired: true,
-        isWide: false,
-        modelValue: ["List Card Checkbox"],
-        isMultiSelect: false,
-        value: "Car-Front",
-        selectedValues: ["Car-Front"]
-      },
-    });
-    // Assert
-    expect(wrapper.vm.checkValue).toEqual(true);
-  });
-
-  it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => {
-    // Act
-    const wrapper = shallowMount(listButtonHorizontal, {
-      propsData: {
-        selectingInitiatesLoad: false,
-      },
-    });
-
-    // Assert
-    wrapper.vm.handleInputChange();
-
-    await nextTick();
-
-    expect(wrapper.vm.handleCheckChange).toBeCalled;
-  });
-  
-  it("Should do nothing if isMultiSelect is true and handleKeyupArrow is triggered", async () => {
-    // Act
-    const wrapper = shallowMount(listButtonHorizontal, {
-      propsData: {
-        isMultiSelect: true,
-      },
-    });
-
-    // Assert
-    wrapper.vm.handleKeyupArrow();
-
-    await nextTick();
-
-    expect(wrapper.vm.handleKeyupArrow).toHaveReturned;
-  });
-
-  it("Should run handleCheckChange if selectingInitiatesLoad is false and handleKeyupArrow is triggered", async () => {
-    // Act
-    const wrapper = shallowMount(listButtonHorizontal, {
-      propsData: {
-        selectingInitiatesLoad: false,
-        isMultiSelect: false,
-      },
-    });
-
-    // Assert
-    wrapper.vm.handleKeyupArrow();
-
-    await nextTick();
-
-    expect(wrapper.vm.handleCheckChange).toBeCalled;
-  });
-
 });
+
+function setupMocks({ mockData }) {
+  console.log(mockData);
+  const wrapper = mount(listButtonHorizontal, {
+    ...mockData,
+    mixins: [inputButtonWrapperMixin],
+  });
+
+  return { wrapper };
+}

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

@@ -1,264 +1,209 @@
-import { shallowMount } from "@vue/test-utils";
+import { shallowMount, mount } from "@vue/test-utils";
 import listButton from "./list-button";
 import { nextTick } from "vue";
 import { GaActions } from "@/constants/analytics";
+import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 
-// TODO KO
-describe.skip("list-button.vue", () => {
-  it("Should return input type checkbox if isMultiSelect is true", async () => {
-    // Act
-    const wrapper = shallowMount(listButton, {
-      propsData: {
-        isMultiSelect: true,
-      },
+describe("list-button.vue", () => {
+  describe("loader", () => {
+    it("Should return loader enabled true", async () => {
+      // Act
+      const { wrapper } = setupMocks({
+        mockData: {
+          global: {
+            mocks: {
+              $route: { query: { fmgPage: "page-name" } },
+              GaActions: GaActions,
+              pushEventToGA: jest.fn(),
+            },
+          },
+          propsData: {
+            selectingInitiatesLoad: true,
+          },
+        },
+      });
+
+      // Act
+      wrapper.vm.handleAnswerChange("something");
+      await wrapper.vm.$nextTick();
+
+      // Assert
+      const loader = wrapper.findComponent({ name: "loader" });
+      expect(loader.exists()).toBe(true);
     });
 
-    // Assert
-    const input = wrapper.find("input");
+    it("Should return loader color", async () => {
+      // Act
+      const { wrapper } = setupMocks({
+        mockData: {
+          global: {
+            mocks: {
+              $route: { query: { fmgPage: "page-name" } },
+              GaActions: GaActions,
+              pushEventToGA: jest.fn(),
+            },
+          },
+          propsData: {
+            loaderColor: "blue",
+            selectingInitiatesLoad: true,
+          },
+        },
+      });
 
-    expect(input.attributes().type).toEqual("checkbox");
-  });
+      // Act
+      wrapper.vm.handleAnswerChange("something");
+      await nextTick();
 
-  it("Should return input type radio if isMultiSelect is false or not specified", async () => {
-    // Act
-    const wrapper = shallowMount(listButton, {
-      propsData: {
-        isMultiSelect: false,
-      },
+      // Assert
+      const loader = wrapper.findComponent({ name: "loader" });
+      expect(loader.attributes("class")).toContain("blue");
     });
 
-    // Assert
-    const input = wrapper.find("input");
+    it("Should return loader position", async () => {
+      // Act
+      const { wrapper } = setupMocks({
+        mockData: {
+          global: {
+            mocks: {
+              $route: { query: { fmgPage: "page-name" } },
+              GaActions: GaActions,
+              pushEventToGA: jest.fn(),
+            },
+          },
+          propsData: {
+            loaderPosition: "right",
+            selectingInitiatesLoad: true,
+          },
+        },
+      });
 
-    expect(input.attributes().type).toEqual("radio");
+      // Act
+      wrapper.vm.handleAnswerChange("test");
+      await nextTick();
+
+      // Assert
+      const loader = wrapper.findComponent({ name: "loader" });
+      expect(loader.attributes("class")).toContain("right");
+    });
   });
 
-  it("Should return primary label text (buttonID)", async () => {
-    // Act
-    const wrapper = shallowMount(listButton, {
-      propsData: {
-        buttonID: "List Card Checkbox",
-      },
+  describe("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");
     });
 
-    // Assert
-    const label = wrapper.find("label");
+    it("Should return input type radio if isMultiSelect is false or not specified", async () => {
+      // Act
+      const { wrapper } = setupMocks({
+        mockData: {
+          propsData: {
+            isMultiSelect: false,
+          },
+        },
+      });
 
-    expect(label.attributes().for).toEqual("List Card Checkbox");
-  });
-
-  it("Should return screen reader text", async () => {
-    // Act
-    const wrapper = shallowMount(listButton, {
-      propsData: {
-        screenReaderOnlyText: "Screen Reader Only Text",
-      },
+      // Assert
+      const input = wrapper.find("input");
+      expect(input.attributes().type).toEqual("radio");
     });
 
-    // Assert
-    const paragraph = wrapper.find("span.sr-only");
+    it("Should emit button value on click", async () => {
+      // 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",
+          },
+        },
+      });
 
-    expect(paragraph.text()).toEqual("Screen Reader Only Text");
+      // Act
+      wrapper.vm.handleAnswerChange("test");
+      await wrapper.vm.$nextTick();
+
+      // Assert
+      expect(wrapper.emitted()["change"][0]).toEqual(["test"]);
+    });
   });
 
-  it("Should return text alignment class", async () => {
-    // Act
-    const wrapper = shallowMount(listButton, {
-      propsData: {
-        textPosition: "text-center",
-      },
+  describe("styling/UI", () => {
+    it("Should return screen reader text", async () => {
+      // Act
+      const { wrapper } = setupMocks({
+        mockData: {
+          propsData: {
+            screenReaderOnlyText: "Screen Reader Only Text",
+          },
+        },
+      });
+
+      // Assert
+      const paragraph = wrapper.find("span.sr-only");
+
+      expect(paragraph.text()).toEqual("Screen Reader Only Text");
     });
 
-    // Assert
-    const paragraph = wrapper.find("span.m-0");
+    it("Should return text alignment class", async () => {
+      // Act
+      const { wrapper } = setupMocks({
+        mockData: {
+          propsData: {
+            textPosition: "text-center",
+          },
+        },
+      });
 
-    expect(paragraph.attributes("class")).toContain("text-center");
-  });
+      // Assert
+      const paragraph = wrapper.find("span.m-0");
 
-  it("Should return aria-required state", async () => {
-    // Act
-    const wrapper = shallowMount(listButton, {
-      propsData: {
-        isRequired: true,
-      },
+      expect(paragraph.attributes("class")).toContain("text-center");
     });
 
-    // Assert
-    const input = wrapper.find("input");
+    it("Should return aria-required state", async () => {
+      // Act
+      const { wrapper } = setupMocks({
+        mockData: {
+          propsData: {
+            isRequired: true,
+          },
+        },
+      });
 
-    expect(input.attributes()["aria-required"]).toEqual("true");
-  });
+      // Assert
+      const input = wrapper.find("input");
 
-  it("Should return loader enabled true", async () => {
-    // Act
-    const wrapper = shallowMount(listButton, {
-      global: {
-        mocks: {
-          '$route': { query: { fmgPage: 'page-name' } },
-          GaActions: GaActions,
-          pushEventToGA: jest.fn(),
-        }
-      },
-      propsData: {
-        selectingInitiatesLoad: true,
-      },
+      expect(input.attributes()["aria-required"]).toEqual("true");
     });
-
-    // Assert
-    wrapper.vm.handleCheckChange = jest.fn();
-    wrapper.vm.triggerButton();
-
-    await nextTick();
-
-    const loader = wrapper.find("loader-stub");
-
-    expect(loader.exists()).toBe(true);
   });
-
-  it("Should return loader color", async () => {
-    // Act
-    const wrapper = shallowMount(listButton, {
-      global: {
-        mocks: {
-          '$route': { query: { fmgPage: 'page-name' } },
-          GaActions: GaActions,
-          pushEventToGA: jest.fn(),
-        }
-      },
-      propsData: {
-        loaderColor: "blue",
-        selectingInitiatesLoad: true,
-      },
-    });
-
-    // Assert
-    wrapper.vm.handleCheckChange = jest.fn();
-    wrapper.vm.triggerButton();
-    await nextTick();
-
-    const loader = wrapper.find("loader-stub");
-
-    expect(loader.attributes("class")).toContain("blue");
-  });
-
-  it("Should return loader position", async () => {
-    // Act
-    const wrapper = shallowMount(listButton, {
-      global: {
-        mocks: {
-          '$route': { query: { fmgPage: 'page-name' } },
-          GaActions: GaActions,
-          pushEventToGA: jest.fn(),
-        }
-      },
-      propsData: {
-        loaderPosition: "right",
-        selectingInitiatesLoad: true,
-      },
-    });
-
-    // Assert
-    wrapper.vm.handleCheckChange = jest.fn();
-    wrapper.vm.triggerButton();
-
-    await nextTick();
-
-    const loader = wrapper.find("loader-stub");
-
-    expect(loader.attributes("class")).toContain("right");
-  });
-
-  it("Should emit button value on click", async () => {
-    // Act
-    const wrapper = shallowMount(listButton, {
-      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'
-      },
-    });
-
-    wrapper.vm.handleCheckChange();
-
-    // Assert
-    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: false, buttonId: 'list-card-id'}]);
-
-  });
-
-  it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
-    // Act
-    const wrapper = shallowMount(listButton, {
-      propsData: {
-        isRadioHorizontal: true,
-        buttonLabel: "Windshield",
-        buttonID: "List Card Checkbox",
-        groupID: "radio-demo-1",
-        groupName: "radio 1",
-        buttonImage: "windshield-damage.svg",
-        isRequired: true,
-        isWide: false,
-        modelValue: ["List Card Checkbox"],
-        selectedValues: "Car-Front"
-      },
-    });
-    // Assert
-    expect(wrapper.componentVM.checkValue).toEqual(false);
-  });
-
-  it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => {
-    // Act
-    const wrapper = shallowMount(listButton, {
-      propsData: {
-        selectingInitiatesLoad: false,
-      },
-    });
-
-    // Assert
-    wrapper.vm.handleInputChange();
-
-    await nextTick();
-
-    expect(wrapper.vm.handleCheckChange).toBeCalled;
-  });
-  
-  it("Should do nothing if isMultiSelect is true and handleKeyupArrow is triggered", async () => {
-    // Act
-    const wrapper = shallowMount(listButton, {
-      propsData: {
-        isMultiSelect: true,
-      },
-    });
-
-    // Assert
-    wrapper.vm.handleKeyupArrow();
-
-    await nextTick();
-
-    expect(wrapper.vm.handleKeyupArrow).toHaveReturned;
-  });
-
-  it("Should run handleCheckChange if selectingInitiatesLoad is false and handleKeyupArrow is triggered", async () => {
-    // Act
-    const wrapper = shallowMount(listButton, {
-      propsData: {
-        selectingInitiatesLoad: false,
-        isMultiSelect: false,
-      },
-    });
-
-    // Assert
-    wrapper.vm.handleKeyupArrow();
-
-    await nextTick();
-
-    expect(wrapper.vm.handleCheckChange).toBeCalled;
-  });
-
 });
+
+function setupMocks({ mockData }) {
+  console.log(mockData);
+  const wrapper = mount(listButton, {
+    ...mockData,
+    mixins: [inputButtonWrapperMixin],
+  });
+
+  return { wrapper };
+}

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

@@ -48,10 +48,14 @@ 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();
             }
         },