Merge remote-tracking branch 'origin/feature/CSR-762' into feature/CSR-731

.prettierrc

@@ -1,4 +1,5 @@
 {
     "tabWidth": 4,
-    "bracketSameLine": true
+    "bracketSameLine": true,
+    "printWidth": 100
 }

jest.config.js

@@ -28,7 +28,7 @@ module.exports = {
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
     global: {
-      statements: 80,
+      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/base-input-button/base-input-button.vue

@@ -4,7 +4,7 @@
         :for="buttonId"
         @focusin="handleFocus"
         @focusout="handleBlur"
-        @mousedown.left="handleEventAction('click', $event)">
+        @mousedown.left="handleEventAction(eventTypes.CLICK, $event)">
         <input
             :type="inputType"
             :id="buttonId"
@@ -14,9 +14,9 @@
             :aria-required="isRequired"
             :value="value"
             :checked="isChecked"
-            @keypress.space="handleEventAction('space', $event)"
+            @keypress.space="handleEventAction(eventTypes.SPACE, $event)"
-            @keypress.enter="handleEventAction('enter', $event)"
+            @keypress.enter="handleEventAction(eventTypes.ENTER, $event)"
-            @change="handleEventAction('change', $event)" />
+            @change="handleEventAction(eventTypes.CHANGE, $event)" />
 
         <slot></slot>
     </label>
@@ -48,10 +48,6 @@ export default {
     },
     methods: {
         handleEventAction(eventType, e) {
-            // console.log({
-            //     eventType,
-            //     e
-            // })
             if (this.isMultiSelect) {
                 switch (eventType) {
                     case this.eventTypes.ENTER:
@@ -93,7 +89,7 @@ export default {
                 }
 
                 this.valueToEmit = newValue;
-            } else {
+            } else if (!this.isMultiSelect) {
                 this.valueToEmit = this.value;
             }
 
@@ -115,9 +111,10 @@ export default {
             });
         },
         handlePushClickEventToGACheck(source) {
+            // if from a click or click-like event
             if (source === this.eventTypes.CLICK) {
                 this.pushClickEventToGA();
-            } else {
+            } else {    // if from tabbing around
                 if (
                     this.valueToEmit !== null &&
                     !this.isValueSelectedOnClick &&
@@ -129,8 +126,6 @@ export default {
             }
         },
         pushClickEventToGA(value) {
-            console.log("PUSHHH")
-            console.log(this.$route)
             this.pushEventToGA(
                 this.$route.query[queryStrings.FMG_PAGE],
                 this.GaActions.CLICKED,
@@ -139,7 +134,7 @@ export default {
                 this.valueToLogType
             );
 
-            this.setLastValuePushedToGa(this.value);
+            this.setLastValuePushedToGa(value ?? this.value);
         },
     },
     computed: {

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

@@ -101,9 +101,7 @@ describe("buttonQuestion.vue", () => {
         const answer = { Name: "testName", Text: "testText" };
 
         // Assert
-    expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe(
+        expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe("testText");
-      "testText"
-    );
     });
 });
 
@@ -114,17 +112,14 @@ describe("buttonQuestion.vue", () => {
         const answer = { Name: "testName", Text: "testText" };
 
         // Assert
-    expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe(
+        expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe("testName");
-      "testName"
-    );
     });
 });
 
-// TODO KO
 describe("buttonQuestion.vue", () => {
-  describe.skip("handleAnswerChange", () => {
+    describe("selectedValues", () => {
         test("is radio => should emit captured value", async () => {
-      // Act
+            // Arrange
             const wrapper = shallowMount(
                 buttonQuestion,
                 setupMocks({ propsData: { groupName: "group-name" } })
@@ -134,11 +129,12 @@ describe("buttonQuestion.vue", () => {
                 isMultiSelect: false,
                 modelValue: "",
             });
-      const val = "2021";
+
-      wrapper.vm.handleAnswerChange(val);
+            // Act
+            wrapper.vm.selectedValues = "2021";
 
             // Assert
-      expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["2021"]);
+            expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("2021");
         });
 
         test("is checkbox => should emit captured value", async () => {
@@ -151,12 +147,17 @@ describe("buttonQuestion.vue", () => {
                 isMultiSelect: false,
                 modelValue: "",
             });
-      const val = ["2022", "2021", , "2019", "2020"];
+
-      wrapper.vm.handleAnswerChange(val);
+            // Act
+            wrapper.vm.selectedValues = ["2022", "2021", "2020", "2019", "2020"];
 
             // Assert
-      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([
+            expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([
-        ["2022", "2021", , "2019", "2020"],
+                "2022",
+                "2021",
+                "2020",
+                "2019",
+                "2020",
             ]);
         });
     });

src/helpers/button-question-focus-helper.js

@@ -1,14 +1,13 @@
 /**
  * Helper for GA click event. When the user mouse clicks on a `base-input-button`, we
  * push the click event. When the user tabs through a list of radio buttons via a
- * keyboard, we only want to push the GA click event iff the select was deliberate
+ * keyboard, we only want to push the GA click event if the selection was deliberate
  * (space/enter key) or if there is a selection and the user tabs off of the radio group.
  */
 
 let lastFocusedInputGroupName = "";
 let onButtonQuestionLostFocusCallback = null;
 
-// TODO KO add tests
 const handleAnyComponentFocus = (e) => {
     const targetType = e.target.type;
     if (targetType !== "radio" && targetType !== "checkbox") {

src/helpers/button-question-focus-helper.spec.js

@@ -0,0 +1,251 @@
+import {
+    handleAnyComponentFocus,
+    handleButtonComponentFocus,
+    handleInputComponentBlur,
+} from "@/helpers/button-question-focus-helper";
+
+describe("buttonQuestionFocusHelper", () => {
+    let onButtonQuestionLostFocusCallbackOne = jest.fn();
+    let onButtonQuestionLostFocusCallbackTwo = jest.fn();
+
+    let focusOnInputInGroupOne;
+    let blurFromInputInGroupOne;
+    let focusOnInputInGroupTwo;
+    let blurFromInputInGroupTwo;
+
+    let focusOnNonRadioCheckboxElement;
+
+    beforeEach(() => {
+        onButtonQuestionLostFocusCallbackOne = jest.fn();
+        onButtonQuestionLostFocusCallbackTwo = jest.fn();
+
+        // Sanity check
+        expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
+        expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
+
+        focusOnInputInGroupOne = () => {
+            handleButtonComponentFocus({
+                groupName: "group1",
+            });
+        };
+
+        blurFromInputInGroupOne = () => {
+            handleInputComponentBlur({
+                groupName: "group1",
+                onButtonQuestionLostFocusCallback: onButtonQuestionLostFocusCallbackOne,
+            });
+        };
+
+        focusOnInputInGroupTwo = () => {
+            handleButtonComponentFocus({
+                groupName: "group2",
+            });
+        };
+
+        blurFromInputInGroupTwo = () => {
+            handleInputComponentBlur({
+                groupName: "group2",
+                onButtonQuestionLostFocusCallback: onButtonQuestionLostFocusCallbackTwo,
+            });
+        };
+
+        focusOnNonRadioCheckboxElement = () => {
+            handleAnyComponentFocus({
+                target: {
+                    type: "nonRadioCheckbox",
+                },
+            });
+        };
+    });
+
+    test("focus on input => no callbacks were called", () => {
+        // focus on input in group 1
+        focusOnInputInGroupOne();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
+        expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
+    });
+
+    test("focus on input, then focus on input in same group => no callbacks are called", () => {
+        // focus on input in group 1
+        focusOnInputInGroupOne();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
+        expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
+
+        // focus on input in group 1
+        blurFromInputInGroupOne();
+        focusOnInputInGroupOne();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
+        expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
+    });
+
+    test("focus on non-radio/checkbox, focus on input => no callbacks are called", () => {
+        // focus on non-radio/checkbox
+        focusOnNonRadioCheckboxElement();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
+        expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
+
+        // focus on input
+        // focus on input in group 1
+        focusOnInputInGroupOne();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
+        expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
+    });
+
+    test("focus on input in group 1, then focus on input in different group => callback for group 1 is called", () => {
+        // focus on input in group 1
+        focusOnInputInGroupOne();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
+        expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
+
+        // focus on input in different group
+        blurFromInputInGroupOne();
+        focusOnInputInGroupTwo();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
+        expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
+    });
+
+    test("focus on input in group 1, focus on input in same group, then focus on input in different group => callback for group 1 is called", () => {
+        // focus on input in group 1
+        focusOnInputInGroupOne();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
+        expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
+
+        // focus on input in same group
+        blurFromInputInGroupOne();
+        focusOnInputInGroupOne();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
+        expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
+
+        // focus on input in different group
+        blurFromInputInGroupOne();
+        focusOnInputInGroupTwo();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
+        expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
+    });
+
+    test("focus on input in group 1, focus on non-radio/checkbox element => callback from group 1 is called", () => {
+        // focus on input in group 1
+        focusOnInputInGroupOne();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
+        expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
+
+        // focus on input in group 2
+        blurFromInputInGroupOne();
+        focusOnNonRadioCheckboxElement();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
+        expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
+    });
+
+    test("focus on input in group 1, focus on input in group 2, focus on non-radio/checkbox element => both callbacks are called", () => {
+        // focus on input in group 1
+        focusOnInputInGroupOne();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
+        expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
+
+        // focus on input in group 2
+        blurFromInputInGroupOne();
+        focusOnInputInGroupTwo();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
+        expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(0);
+
+        // focus on non-radio/checkbox
+        blurFromInputInGroupTwo();
+        focusOnNonRadioCheckboxElement();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
+        expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(1);
+    });
+
+    test("focus on input in group 1, focus on input in group 2, focus on input in group 1 => both callbacks are called", () => {
+        // focus on input in group 1
+        focusOnInputInGroupOne();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
+        expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
+
+        // focus on input in group 2
+        blurFromInputInGroupOne();
+        focusOnInputInGroupTwo();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
+        expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(0);
+
+        // focus on input in group 1
+        blurFromInputInGroupTwo();
+        focusOnInputInGroupOne();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
+        expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(1);
+    });
+
+    test("go back and forth a lot => correct callbacks are called at the right time", () => {
+        // Arrange/Act
+        // focus on input in group 1
+        focusOnInputInGroupOne();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).not.toHaveBeenCalled();
+        expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
+
+        // focus on input in group 2
+        blurFromInputInGroupOne();
+        focusOnInputInGroupTwo();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
+        expect(onButtonQuestionLostFocusCallbackTwo).not.toHaveBeenCalled();
+
+        // focus on input in group 1
+        blurFromInputInGroupTwo();
+        focusOnInputInGroupOne();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(1);
+        expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(1);
+
+        // focus on non-radio/checkbox element
+        blurFromInputInGroupOne();
+        focusOnNonRadioCheckboxElement();
+
+        // Assert
+        expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(2);
+        expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(1);
+
+        // focus on input in group 1
+        focusOnInputInGroupOne();
+        expect(onButtonQuestionLostFocusCallbackOne).toHaveBeenCalledTimes(2);
+        expect(onButtonQuestionLostFocusCallbackTwo).toHaveBeenCalledTimes(1);
+    });
+});

src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js

@@ -22,6 +22,14 @@ describe("windshield-chip-count-question.vue", () => {
         //Assert
         expect(wrapper.emitted()["update:modelValue"][0]).toEqual([2]);
     });
+
+    test("selectedValue matches modelValue", () => {
+        // Arrange/Act
+        const { wrapper } = setupMocks({ modelValueProp: 2 });
+
+        // Assert
+        expect(wrapper.vm.selectedValue).toBe(2);
+    });
 });
 
 function setupMocks({

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

@@ -5,6 +5,7 @@ import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { nextTick } from "vue";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import baseMixin from "@/mixins/base-mixin.js";
+import store from "@/store";
 
 // Components
 import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue";
@@ -13,11 +14,11 @@ import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
 jest.mock("@/store", () => ({
     commit: jest.fn(),
     dispatch: jest.fn(),
-  getters: {
+    // getters: jest.fn().mockImplementation(() => ({
-    vehicle: {
+    //     vehicle: {
-      year: 2019,
+    //         year: 2019,
-    },
+    //     },
-  },
+    // })),
 }));
 
 // Mock fetchCmsContentForPage
@@ -30,7 +31,6 @@ jest.mock("@/helpers/layout-helper.js", () => ({
     settleAllPromises: jest.fn(),
 }));
 
-
 describe("vehicle-make.vue", () => {
     test("Make question component is initized with api data", async (done) => {
         //Arrange
@@ -89,9 +89,14 @@ describe("vehicle-make.vue", () => {
 });
 
 describe("vehicle-make.vue", () => {
-  test("Year set, arePagePrerequisitesValid should be true ", async () => {
+    describe("arePagePrerequisitesValue", () => {
+        test("Year set, arePagePrerequisitesValid should be true", async () => {
             //Arrange
-    const { wrapper } = setupMocks({});
+            const { wrapper } = setupMocks({
+              vehicleData: {
+                year: 2019
+              }
+            });
 
             //Act
             vehicleMake.beforeRouteEnter.call(
@@ -106,14 +111,80 @@ describe("vehicle-make.vue", () => {
             //Assert
             expect(arePagePrerequisitesValid).toBe(true);
         });
-});
 
+        test("Year not set, arePagePrerequisitesValid should be false", async () => {
+            //Arrange
+            store.getters.vehicle.year = jest.fn().mockReturnValueOnce(undefined);
+            const { wrapper } = setupMocks({});
+
+            //Act
+            let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+
+            //Assert
+            expect(arePagePrerequisitesValid).toBe(false);
+        });
+    });
+
+    test("selectedMake changes => save make in store", async () => {
+        //Arrange
+        const { wrapper } = setupMocks({
+            mountOptionsMockData: {
+                router: {
+                    navigate: jest.fn(),
+                    navigateWithSaving: jest.fn(),
+                },
+            }
+        });
+
+        // Act
+        await wrapper.setData({
+            selectedMake: "Make",
+        });
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalledTimes(1);
+        expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalledWith(
+            "saveVehicleMake",
+            "Make",
+            false
+        );
+    });
+
+    test("selectedMake changes => navigate with saving", async () => {
+        //Arrange
+        const { wrapper } = setupMocks({
+            mountOptionsMockData: {
+                router: {
+                    navigate: jest.fn(),
+                    navigateWithSaving: jest.fn(),
+                },
+                route: {
+                    fmgPage: "test",
+                },
+            },
+        });
+
+        // Act
+        await wrapper.setData({
+            selectedMake: "Make",
+        });
+
+        // Assert
+        expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalledTimes(1);
+        expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalledWith(
+            "SELECTED_MAKE",
+            expect.anything()
+        );
+    });
+});
 
 function setupMocks({
     vehicleMakeQuestionCmsContent = {},
     makeQuestionInitialData = {},
     pageHeaderWidgetHeaderText = {},
     mountOptionsMockData = {},
+    vehicleData = {}
 }) {
     //Mock api responses
     const apiResponses = {
@@ -134,6 +205,10 @@ function setupMocks({
 
     const apiPromise = Promise.resolve(apiResponses);
 
+    store.getters = {
+      vehicle: vehicleData
+    }
+
     fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
     settleAllPromises.mockImplementation(() => apiPromise);
 
@@ -146,8 +221,7 @@ function setupMocks({
     const mountOptions = getMountOptions(mountOptionsMockData);
     const wrapper = shallowMount(vehicleMake, mountOptions);
     const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" });
-  makeQuestionWrapper.vm.initializeComponent =
+    makeQuestionWrapper.vm.initializeComponent = makeQuestion.methods.initializeComponent;
-    makeQuestion.methods.initializeComponent;
     wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
 
     return { wrapper, apiPromise };

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

@@ -148,7 +148,7 @@ describe("vehicle-parts.vue", () => {
         expect(arePagePrerequisitesValid).toBe(true);
     });
 
-    test.only("Initial data, should populate this.selectedGlassParts", async () => {
+    test("Initial data, should populate this.selectedGlassParts", async () => {
 
         //Arrange
         store.getters.pageData.mockReturnValue(basePartResponse);

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

@@ -13,6 +13,7 @@ export default {
         buttonAuxillaryCopy: String,
         buttonFooterCopy: String,
         buttonImage: String,
+        buttonImageId: String,
         altText: {
             type: String,
             default: "",

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

@@ -1,81 +1,317 @@
+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", () => {
         describe("checkbox", () => {
-            test.todo("clicking once checks the baseInputButton");
+            test("click on both => both are selected", async () => {
+                // Arrange
+                const { wrapper } = setupBaseInputButtonWrapper({
+                    mockData: {
+                        isMultiSelect: true,
+                    },
+                });
 
-            test.todo("clicking twice unchecks the baseInputButton");
+                // Act
+                const buttonWrappers = wrapper.findAllComponents({
+                    name: "baseInputButtonWrapper",
+                });
+                const inputButtonOne = buttonWrappers.at(0);
+                const inputButtonTwo = buttonWrappers.at(1);
+                expect(inputButtonOne.vm.isMultiSelect).toBe(true);
+                expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
+                expect(wrapper.vm.value).toEqual([]);
 
-            test.todo(
+                await inputButtonOne.find("input").trigger("click");
-                "is initially checked => checking unchecks the baseInputButton"
+                await inputButtonTwo.find("input").trigger("click");
-            );
 
-            test.todo("clicked => correct event and value are emitted");
+                // Assert
+                expect(wrapper.vm.value).toEqual(["value1", "value2"]);
+            });
+
+            test("click input 1, 2, 1 => only input 2 selected", async () => {
+                // Arrange
+                const { wrapper } = setupBaseInputButtonWrapper({
+                    mockData: {
+                        isMultiSelect: true,
+                    },
+                });
+
+                // Act
+                const buttonWrappers = wrapper.findAllComponents({
+                    name: "baseInputButtonWrapper",
+                });
+                const inputButtonOne = buttonWrappers.at(0);
+                const inputButtonTwo = buttonWrappers.at(1);
+                expect(inputButtonOne.vm.isMultiSelect).toBe(true);
+                expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
+                expect(wrapper.vm.value).toEqual([]);
+
+                await inputButtonOne.find("input").trigger("click");
+                await inputButtonTwo.find("input").trigger("click");
+                await inputButtonOne.find("input").trigger("click");
+
+                // Assert
+                expect(wrapper.vm.value).toEqual(["value2"]);
+            });
         });
 
         describe("radio", () => {
-            test.todo("clicking once selects the baseInputButton");
+            test("click on both => last clicked is selected", async () => {
+                // Arrange
+                const { wrapper } = setupBaseInputButtonWrapper({
+                    mockData: {
+                        isMultiSelect: false,
+                    },
+                });
 
-            test.todo("clicking twice keeps the baseInputButton selected");
+                // Act
+                const buttonWrappers = wrapper.findAllComponents({
+                    name: "baseInputButtonWrapper",
+                });
+                const inputButtonOne = buttonWrappers.at(0);
+                const inputButtonTwo = buttonWrappers.at(1);
+                expect(inputButtonOne.vm.isMultiSelect).toBe(false);
+                expect(inputButtonTwo.vm.isMultiSelect).toBe(false);
+                expect(wrapper.vm.value).toEqual("");
 
-            test.todo(
+                await inputButtonOne.find("input").trigger("click");
-                "is initially selected => click keeps the baseInputButton selected"
+                await inputButtonTwo.find("input").trigger("click");
-            );
 
-            test.todo("clicked => correct event and value are emitted");
+                // Assert
+                expect(wrapper.vm.value).toEqual("value2");
+            });
+
+            test("click input 1, 2, 1 => input 1 is selected", async () => {
+                // Arrange
+                const { wrapper } = setupBaseInputButtonWrapper({
+                    mockData: {
+                        isMultiSelect: false,
+                    },
+                });
+
+                // Act
+                const buttonWrappers = wrapper.findAllComponents({
+                    name: "baseInputButtonWrapper",
+                });
+                const inputButtonOne = buttonWrappers.at(0);
+                const inputButtonTwo = buttonWrappers.at(1);
+                expect(inputButtonOne.vm.isMultiSelect).toBe(false);
+                expect(inputButtonTwo.vm.isMultiSelect).toBe(false);
+                expect(wrapper.vm.value).toEqual("");
+
+                await inputButtonOne.find("input").trigger("click");
+                await inputButtonTwo.find("input").trigger("click");
+                await inputButtonOne.find("input").trigger("click");
+
+                // Assert
+                expect(wrapper.vm.value).toEqual("value1");
+            });
         });
     });
 
-    describe("keyboard navigation and", () => {
+    describe("initial values", () => {
         describe("checkbox", () => {
-            test.todo(
+            const defaultCheckedCases = [
-                "focus on a checkbox => inputButtonClicked is not emitted"
+                [["value2"], false, true],
-            );
+                [["value1", "value2"], true, true],
+                [["value1"], true, false],
+                [[], false, false],
+            ];
+            test.each(defaultCheckedCases)(
+                "initial value is %s => correct input buttons are selected",
+                async (modelValue, isInputButtonOneChecked, isInputButtonTwoChecked) => {
+                    // Arrange
+                    const { wrapper } = setupBaseInputButtonWrapper({
+                        mockData: {
+                            isMultiSelect: true,
+                            initialValue: modelValue,
+                        },
+                    });
 
-            test.todo(
+                    // Act
-                "blur from a checkbox => inputButtonClicked is not emitted"
+                    const buttonWrappers = wrapper.findAllComponents({
-            );
+                        name: "baseInputButtonWrapper",
+                    });
+                    const inputs = wrapper.findAll("input");
+                    const inputButtonOne = buttonWrappers.at(0);
+                    const inputButtonTwo = buttonWrappers.at(1);
 
-            test.todo(
+                    // Assert
-                "focus and click space on a checkbox => inputButtonClicked is emitted with correct value"
+                    expect(inputButtonOne.vm.isMultiSelect).toBe(true);
-            );
+                    expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
-
+                    expect(inputs[0].element.checked).toBe(isInputButtonOneChecked);
-            test.todo(
+                    expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked);
-                "focus and click space on a checkbox that is already checked => inputButtonClicked is emitted with correct value"
+                    expect(wrapper.vm.value).toEqual(modelValue);
-            );
+                }
-
-            test.todo(
-                "focus and click enter on a checkbox => inputButtonClicked is emitted with correct value"
-            );
-
-            test.todo(
-                "focus and click enter on a checkbox that is already checked => inputButtonClicked is emitted with correct value"
             );
         });
 
         describe("radio", () => {
-            test.todo(
+            const defaultCheckedCases = [
-                "focus on a radio button => inputButtonClicked is not emitted"
+                ["", false, false],
+                ["value1", true, false],
+                ["value2", false, true],
+                [[], false, false],
+            ];
+            test.each(defaultCheckedCases)(
+                "initial value is %s => correct input buttons are selected",
+                async (modelValue, isInputButtonOneChecked, isInputButtonTwoChecked) => {
+                    // Arrange
+                    const { wrapper } = setupBaseInputButtonWrapper({
+                        mockData: {
+                            isMultiSelect: false,
+                            initialValue: modelValue,
+                        },
+                    });
+
+                    // Act
+                    const buttonWrappers = wrapper.findAllComponents({
+                        name: "baseInputButtonWrapper",
+                    });
+                    const inputs = wrapper.findAll("input");
+                    const inputButtonOne = buttonWrappers.at(0);
+                    const inputButtonTwo = buttonWrappers.at(1);
+
+                    // Assert
+                    expect(inputButtonOne.vm.isMultiSelect).toBe(false);
+                    expect(inputButtonTwo.vm.isMultiSelect).toBe(false);
+                    expect(inputs[0].element.checked).toBe(isInputButtonOneChecked);
+                    expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked);
+                    expect(wrapper.vm.value).toEqual(modelValue);
+                }
+            );
+        });
+    });
+
+    // 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.todo(
+        test.each(inputButtonComponents.map((x) => [x.name, x]))(
-                "blur from a radio button => inputButtonClicked is not emitted"
+            "%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");
+            }
         );
 
-            test.todo(
+        const selectedValues = ["something", ["test"]];
-                "focus and click space on a radio button => inputButtonClicked is emitted with correct value"
+        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",
+                            },
+                        },
+                    });
 
-            test.todo(
+                    // Act
-                "focus and click space on a radio button that is already selected => inputButtonClicked is emitted with correct value"
+                    wrapper.vm.selectedValue = selectedValue;
-            );
+                    await wrapper.vm.$nextTick();
 
-            test.todo(
+                    // Assert
-                "focus and click enter on a radio button => inputButtonClicked is emitted with correct value"
+                    expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(selectedValue);
-            );
+                }
-
-            test.todo(
-                "focus and click enter on a radio button that is already selected => inputButtonClicked is emitted with correct value"
             );
         });
     });
 });
+
+function setupMocksForComponentsUsingInputButtonWrapperMixin({ mockData, component }) {
+    const wrapper = mount(component, {
+        ...mockData,
+        propsData: {
+            ...mockData.propsData,
+            groupName: "my-group",
+            modelValue: mockData.propsData?.isMultiSelect ? ["5"] : "5",
+            value: "4",
+        },
+        mixins: [inputButtonWrapperMixin],
+    });
+
+    return { wrapper };
+}
+
+function setupBaseInputButtonWrapper({ mockData = {} }) {
+    baseInputButton.methods.pushClickEventToGA = jest.fn();
+
+    const baseInputButtonWrapper = {
+        name: "baseInputButtonWrapper",
+        components: { baseInputButton },
+        template: '<div><baseInputButton v-bind="$props" v-model="selectedValue" /></div>',
+        mixins: [inputButtonWrapperMixin],
+    };
+
+    let parentComponentTemplate = `<div>`;
+    parentComponentTemplate += `<baseInputButtonWrapper v-model="value" groupName="myGroupName" :isMultiSelect="${mockData.isMultiSelect}" value="value1" />`;
+    parentComponentTemplate += `<baseInputButtonWrapper v-model="value" groupName="myGroupName" :isMultiSelect="${mockData.isMultiSelect}" value="value2" />`;
+    parentComponentTemplate += `</div>`;
+    const wrapper = mount(
+        {
+            data() {
+                return {
+                    value: mockData.initialValue ?? (mockData.isMultiSelect ? [] : ""),
+                    $route: {
+                        query: {
+                            fmgPage: "myPage",
+                        },
+                    },
+                };
+            },
+            template: parentComponentTemplate,
+            components: { baseInputButtonWrapper },
+        },
+        {}
+    );
+
+    return { wrapper };
+}

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

@@ -1,71 +1,8 @@
-import { shallowMount, mount } from "@vue/test-utils";
+import { 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";
 
 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");
-    });
-
-    // TODO KO
-    it.skip("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",
-          },
-        },
-      });
-
-      // Act
-      wrapper.vm.handleAnswerChange("test");
-      await wrapper.vm.$nextTick();
-
-      // Assert
-      expect(wrapper.emitted()["change"][0]).toEqual(["test"]);
-    });
-  });
-
     describe("styling/UI", () => {
         it("Should return screen reader text", async () => {
             // Act
@@ -115,21 +52,21 @@ describe("list-button-horizontal.vue", () => {
             expect(input.attributes()["aria-required"]).toEqual("true");
         });
 
-    // it("is cash or insurance button => has 'radio-fancy' class", () => {
+        it("is cash or insurance button => has 'radio-fancy' class", () => {
-    //   // Arrange/Act
+            // Arrange/Act
-    //   const { wrapper } = setupMocks({
+            const { wrapper } = setupMocks({
-    //     mockData: {
+                mockData: {
-    //       propsData: {
+                    propsData: {
-    //         isCashOrInsurance: true,
+                        isCashOrInsurance: true,
-    //       },
+                    },
-    //     },
+                },
-    //   });
+            });
 
-    //   // Assert
+            // Assert
-    //   const label = wrapper.find("label");
+            const label = wrapper.find("label");
 
-    //   expect(label.classes()).toContain("radio-fancy");
+            expect(label.classes()).toContain("radio-fancy");
-    // });
+        });
 
         test("has buttonLabel => displays buttonLabel", () => {
             // Arrange/Act
@@ -171,7 +108,7 @@ describe("list-button-horizontal.vue", () => {
                     propsData: {
                         buttonLabel: "Surprise!",
                         buttonLabelSubCopy: "Super duper surprise :)",
-            screenReaderOnlyText: "Tests are fun!"
+                        screenReaderOnlyText: "Tests are fun!",
                     },
                 },
             });
@@ -193,7 +130,7 @@ function setupMocks({ mockData }) {
             ...mockData.propsData,
             groupName: "my-group",
             modelValue: mockData.propsData?.isMultiSelect ? ["5"] : "5",
-      value: mockData.propsData?.isMultiSelect ? ["4"] : "4"
+            value: mockData.propsData?.isMultiSelect ? ["4"] : "4",
         },
         mixins: [inputButtonWrapperMixin],
     });

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

@@ -1,11 +1,9 @@
-import { shallowMount, mount } from "@vue/test-utils";
+import { 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("list-button.vue", () => {
-describe.skip("list-button.vue", () => {
     describe("loader", () => {
         it("selectingInitiatesLoad is true and answer is changed => show the loader", async () => {
             // Act
@@ -25,7 +23,7 @@ describe.skip("list-button.vue", () => {
             });
 
             // Act
-      wrapper.vm.handleAnswerChange("something");
+            wrapper.vm.selectedValue = "something";
             await wrapper.vm.$nextTick();
 
             // Assert
@@ -34,7 +32,7 @@ describe.skip("list-button.vue", () => {
         });
 
         it("Should return loader color", async () => {
-      // Act
+            // Arrange
             const { wrapper } = setupMocks({
                 mockData: {
                     global: {
@@ -52,8 +50,8 @@ describe.skip("list-button.vue", () => {
             });
 
             // Act
-      wrapper.vm.handleAnswerChange("something");
+            wrapper.vm.selectedValue = "something";
-      await nextTick();
+            await wrapper.vm.$nextTick();
 
             // Assert
             const loader = wrapper.findComponent({ name: "loader" });
@@ -79,8 +77,8 @@ describe.skip("list-button.vue", () => {
             });
 
             // Act
-      wrapper.vm.handleAnswerChange("test");
+            wrapper.vm.selectedValue = "something";
-      await nextTick();
+            await wrapper.vm.$nextTick();
 
             // Assert
             const loader = wrapper.findComponent({ name: "loader" });
@@ -120,7 +118,33 @@ describe.skip("list-button.vue", () => {
             expect(input.attributes().type).toEqual("radio");
         });
 
-    it("Should emit button value on click", async () => {
+        it("(Radio) Should emit button value on selectedValue change", async () => {
+            // Act
+            const { wrapper } = setupMocks({
+                mockData: {
+                    propsData: {
+                        isRadioHorizontal: true,
+                        buttonLabel: "Windshield",
+                        value: "List Card Checkbox",
+                        groupID: "radio-demo-1",
+                        groupName: "radio1",
+                        buttonImage: "windshield-damage.svg",
+                        isRequired: true,
+                        isWide: false,
+                        modelValue: "List Card Checkbox",
+                        buttonID: "list-card-id",
+                    },
+                },
+            });
+
+            // Act
+            wrapper.vm.selectedValue = "test";
+
+            // Assert
+            expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("test");
+        });
+
+        it("(Checkbox) Should emit button value on selectedValue change", async () => {
             // Act
             const { wrapper } = setupMocks({
                 mockData: {
@@ -133,18 +157,18 @@ describe.skip("list-button.vue", () => {
                         buttonImage: "windshield-damage.svg",
                         isRequired: true,
                         isWide: false,
-            modelValue: ["List Card Checkbox"],
+                        modelValue: "List Card Checkbox",
                         buttonID: "list-card-id",
+                        isMultiSelect: true,
                     },
                 },
             });
 
             // Act
-      wrapper.vm.handleAnswerChange("test");
+            wrapper.vm.selectedValue = ["test"];
-      await wrapper.vm.$nextTick();
 
             // Assert
-      expect(wrapper.emitted()["change"][0]).toEqual(["test"]);
+            expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(["test"]);
         });
     });
 
@@ -155,6 +179,9 @@ describe.skip("list-button.vue", () => {
                 mockData: {
                     propsData: {
                         buttonLabel: "Surprise!",
+                        modelValue: "",
+                        groupName: "groupName",
+                        value: "myValue"
                     },
                 },
             });
@@ -172,6 +199,9 @@ describe.skip("list-button.vue", () => {
                     propsData: {
                         buttonLabel: "Surprise!",
                         buttonLabelSubCopy: "Super duper surprise :)",
+                        modelValue: "",
+                        groupName: "groupName",
+                        value: "myValue"
                     },
                 },
             });
@@ -190,6 +220,9 @@ describe.skip("list-button.vue", () => {
                         buttonLabel: "Surprise!",
                         buttonLabelSubCopy: "Super duper surprise :)",
                         screenReaderOnlyText: "Tests are fun!",
+                        modelValue: "",
+                        groupName: "groupName",
+                        value: "myValue"
                     },
                 },
             });
@@ -208,6 +241,9 @@ describe.skip("list-button.vue", () => {
                 mockData: {
                     propsData: {
                         screenReaderOnlyText: "Screen Reader Only Text",
+                        modelValue: "",
+                        groupName: "groupName",
+                        value: "myValue"
                     },
                 },
             });
@@ -224,6 +260,9 @@ describe.skip("list-button.vue", () => {
                 mockData: {
                     propsData: {
                         textPosition: "text-center",
+                        modelValue: "",
+                        groupName: "groupName",
+                        value: "myValue"
                     },
                 },
             });
@@ -240,6 +279,9 @@ describe.skip("list-button.vue", () => {
                 mockData: {
                     propsData: {
                         isRequired: true,
+                        groupName: "groupName",
+                        modelValue: "",
+                        value: "myValue",
                     },
                 },
             });