import { shallowMount, mount } from "@vue/test-utils";
import baseInputButton from "./base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin"

// TODO KO
describe("baseInputButton.vue", () => {
    describe("general", () => {
        describe("checkbox", () => {
            test("isMultiSelect => baseInputButton is a checkbox", () => {
                // Arrange/Act
                const { wrapper } = setupMocks({
                    mockData: {
                        propsData: {
                            isMultiSelect: true,
                        },
                    },
                });

                // Assert
                const inputElement = wrapper.find("input");
                expect(inputElement.attributes().type).toEqual("checkbox");
            });
        });

        describe("radio", () => {
            test("!isMultiSelect => baseInputButton is a radio button", () => {
                // Arrange/Act
                const { wrapper } = setupMocks({
                    mockData: {
                        propsData: {
                            isMultiSelect: false,
                        },
                    },
                });

                // Assert
                const inputElement = wrapper.find("input");
                expect(inputElement.attributes().type).toEqual("radio");
            });
        });

        // tests in here should be test.each
        describe("shared", () => {
            const isMultiSelectOptions = [true, false];
            test.each(isMultiSelectOptions)("groupName", (isMultiSelect) => {
                const { wrapper } = setupMocks({
                    mockData: {
                        propsData: {
                            groupName: "boogly",
                            isMultiSelect: isMultiSelect,
                        },
                    },
                });

                // Assert
                const inputElement = wrapper.find("input");
                const inputElementAttributes = inputElement.attributes();
                expect(inputElementAttributes.name).toEqual("boogly");
            });
        });
    });

    describe("mouse clicks", () => {
        describe("checkbox", () => {
            test("clicked => correct event and value are emitted", async () => {
                // Arrange
                const { wrapper } = setupMocks({
                    mockData: {
                        propsData: {
                            isMultiSelect: true,
                            value: "X",
                        },
                    },
                });

                // Act
                // await wrapper.trigger("mousedown.left");
                await wrapper.trigger("click");

                // Assert
                expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([
                    "X",
                ]);
            });
        });

        describe("radio", () => {
            test("clicked => correct event and value are emitted", async () => {
                // Arrange
                const { wrapper } = setupMocks({
                    mockData: {
                        propsData: {
                            isMultiSelect: false,
                            value: "X",
                        },
                    },
                });

                // Act
                await wrapper.trigger("mousedown.left");
                await wrapper.trigger("click");

                // Assert
                expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(
                    "X"
                );
            });
        });
    });

    describe("keyboard navigation and events", () => {
        describe("checkbox", () => {
            test.todo("focus on a checkbox => update:modelValue is not emitted");

            test.todo("blur from a checkbox => update:modelValue is not emitted");

            test("change event fired from checkbox => update:modelValue is emitted with correct value", async () => {
                // Arrange
                const { wrapper } = setupMocks({
                    mockData: {
                        propsData: {
                            isMultiSelect: true,
                            value: "Hi",
                        },
                    },
                });

                const input = wrapper.find("input");

                // Act
                await input.trigger("change");

                // Assert
                expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([
                    "Hi",
                ]);
            });

            test("focus and click space on a checkbox => update:modelValue is not emitted", async () => {
                // Arrange
                const { wrapper } = setupMocks({
                    mockData: {
                        propsData: {
                            isMultiSelect: true,
                            value: "Hi",
                        },
                    },
                });

                const input = wrapper.find("input");

                // Act
                await input.trigger("keypress", { key: "space" });

                // Assert
                expect(wrapper.emitted()).not.toHaveProperty(
                    "update:modelValue"
                );
            });

            test("focus and click enter on a checkbox => update:modelValue is emitted with correct value", async () => {
                // Arrange
                const { wrapper } = setupMocks({
                    mockData: {
                        propsData: {
                            isMultiSelect: true,
                            value: "Hi",
                        },
                    },
                });

                const input = wrapper.find("input");

                // Act
                await input.trigger("keypress", { key: "enter" });

                // Assert
                expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([
                    "Hi",
                ]);
            });
        });

        describe("radio", () => {
            test.todo("focus on a radio button => update:modelValue is not emitted");

            test.todo("blur from a radio button => update:modelValue is not emitted");

            test("focus and click space on a radio button => update:modelValue is emitted with correct value", async () => {
                // Arrange
                const { wrapper } = setupMocks({
                    mockData: {
                        propsData: {
                            isMultiSelect: false,
                            value: "Hi",
                        },
                    },
                });

                const input = wrapper.find("input");

                // Act
                await input.trigger("keypress", { key: "space" });

                // Assert
                expect(wrapper.emitted()).toHaveProperty("update:modelValue");
                expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(
                    "Hi"
                );
            });

            test("focus and click enter on a radio button => update:modelValue is emitted with correct value", async () => {
                // Arrange
                const { wrapper } = setupMocks({
                    mockData: {
                        propsData: {
                            isMultiSelect: false,
                            value: "Hi",
                        },
                    },
                });

                const input = wrapper.find("input");

                // Act
                await input.trigger("keypress", { key: "enter" });

                // Assert
                expect(wrapper.emitted()).toHaveProperty("update:modelValue");
                expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(
                    "Hi"
                );
            });
        });
    });

    describe("methods", () => {
        describe("handleEventAction", () => {
            describe("isMultiSelect", () => {
                test("eventType === eventTypes.CLICK => do nothing", () => {
                    // Arrange
                    const { wrapper } = setupMocks({
                        mockData: {
                            propsData: {
                                isMultiSelect: true,
                            },
                        },
                    });
                    wrapper.vm.handleClick = jest.fn();
                    wrapper.vm.handlePushClickEventToGACheck = jest.fn();
                    wrapper.vm.handleSelectionChange = jest.fn();

                    // Act
                    wrapper.vm.handleEventAction("click", { myEvent: "test" });

                    // Assert
                    expect(wrapper.vm.handleClick).not.toHaveBeenCalled();
                    expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled();
                    expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled();
                });

                test("eventType === eventTypes.ENTER => call handleClick and handlePushClickEventToGACheck", () => {
                    // Arrange
                    const { wrapper } = setupMocks({
                        mockData: {
                            propsData: {
                                isMultiSelect: true,
                            },
                        },
                    });
                    wrapper.vm.handleClick = jest.fn();
                    wrapper.vm.handlePushClickEventToGACheck = jest.fn();
                    wrapper.vm.handleSelectionChange = jest.fn();

                    // Act
                    wrapper.vm.handleEventAction("enter", { myEvent: "test" });

                    // Assert
                    expect(wrapper.vm.handleClick).toHaveBeenCalledWith({
                        myEvent: "test",
                    });
                    expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click");
                    expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled();
                });

                test("eventType === eventTypes.CHANGE => call handleClick and handlePushClickEventToGACheck", () => {
                    // Arrange
                    const { wrapper } = setupMocks({
                        mockData: {
                            propsData: {
                                isMultiSelect: true,
                            },
                        },
                    });
                    wrapper.vm.handleClick = jest.fn();
                    wrapper.vm.handlePushClickEventToGACheck = jest.fn();
                    wrapper.vm.handleSelectionChange = jest.fn();

                    // Act
                    wrapper.vm.handleEventAction("change", { myEvent: "test" });

                    // Assert
                    expect(wrapper.vm.handleClick).toHaveBeenCalledWith({
                        myEvent: "test",
                    });
                    expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click");
                    expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled();
                });

                test("eventType === eventTypes.MOUNT => do nothing", () => {
                    // Arrange
                    const { wrapper } = setupMocks({
                        mockData: {
                            propsData: {
                                isMultiSelect: true,
                            },
                        },
                    });
                    wrapper.vm.handleClick = jest.fn();
                    wrapper.vm.handlePushClickEventToGACheck = jest.fn();
                    wrapper.vm.handleSelectionChange = jest.fn();

                    // Act
                    wrapper.vm.handleEventAction("mount", { myEvent: "test" });

                    // Assert
                    expect(wrapper.vm.handleClick).not.toHaveBeenCalled();
                    expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled();
                    expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled();
                });

                test("eventType === eventTypes.SPACE => do nothing", () => {
                    // Arrange
                    const { wrapper } = setupMocks({
                        mockData: {
                            propsData: {
                                isMultiSelect: true,
                            },
                        },
                    });
                    wrapper.vm.handleClick = jest.fn();
                    wrapper.vm.handlePushClickEventToGACheck = jest.fn();
                    wrapper.vm.handleSelectionChange = jest.fn();

                    // Act
                    wrapper.vm.handleEventAction("space", { myEvent: "test" });

                    // Assert
                    expect(wrapper.vm.handleClick).not.toHaveBeenCalled();
                    expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled();
                    expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled();
                });
            });

            describe("!isMultiSelect", () => {
                test("eventType === eventTypes.CLICK => call correct methods", () => {
                    // Arrange
                    const { wrapper } = setupMocks({
                        mockData: {
                            propsData: {
                                isMultiSelect: false,
                            },
                        },
                    });
                    wrapper.vm.handleClick = jest.fn();
                    wrapper.vm.handlePushClickEventToGACheck = jest.fn();
                    wrapper.vm.handleSelectionChange = jest.fn();

                    // Act
                    wrapper.vm.handleEventAction("click", { myEvent: "test" });

                    // Assert
                    expect(wrapper.vm.handleClick).toHaveBeenCalledWith({
                        myEvent: "test",
                    });
                    expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click");
                    expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled();
                });

                test("eventType === eventTypes.ENTER => call correct methods", () => {
                    // Arrange
                    const { wrapper } = setupMocks({
                        mockData: {
                            propsData: {
                                isMultiSelect: false,
                            },
                        },
                    });
                    wrapper.vm.handleClick = jest.fn();
                    wrapper.vm.handlePushClickEventToGACheck = jest.fn();
                    wrapper.vm.handleSelectionChange = jest.fn();

                    // Act
                    wrapper.vm.handleEventAction("enter", { myEvent: "test" });

                    // Assert
                    expect(wrapper.vm.handleClick).toHaveBeenCalledWith({
                        myEvent: "test",
                    });
                    expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click");
                    expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled();
                });

                test("eventType === eventTypes.SPACE => call correct methods", () => {
                    // Arrange
                    const { wrapper } = setupMocks({
                        mockData: {
                            propsData: {
                                isMultiSelect: false,
                            },
                        },
                    });
                    wrapper.vm.handleClick = jest.fn();
                    wrapper.vm.handlePushClickEventToGACheck = jest.fn();
                    wrapper.vm.handleSelectionChange = jest.fn();

                    // Act
                    wrapper.vm.handleEventAction("space", { myEvent: "test" });

                    // Assert
                    expect(wrapper.vm.handleClick).toHaveBeenCalledWith({
                        myEvent: "test",
                    });
                    expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click");
                    expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled();
                });

                test("eventType === eventTypes.CHANGE && !selectingInitiatesLoad => call correct methods", () => {
                    // Arrange
                    const { wrapper } = setupMocks({
                        mockData: {
                            propsData: {
                                isMultiSelect: false,
                                selectingInitiatesLoad: false,
                            },
                        },
                    });
                    wrapper.vm.handleClick = jest.fn();
                    wrapper.vm.handlePushClickEventToGACheck = jest.fn();
                    wrapper.vm.handleSelectionChange = jest.fn();

                    // Act
                    wrapper.vm.handleEventAction("change", { myEvent: "test" });

                    // Assert
                    expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled();
                    expect(wrapper.vm.handleClick).toHaveBeenCalledWith({
                        myEvent: "test",
                    });
                    expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled();
                });

                test("eventType === eventTypes.CHANGE && selectingInitiatesLoad => call correct methods", () => {
                    // Arrange
                    const { wrapper } = setupMocks({
                        mockData: {
                            propsData: {
                                isMultiSelect: false,
                                selectingInitiatesLoad: true,
                            },
                        },
                    });
                    wrapper.vm.handleClick = jest.fn();
                    wrapper.vm.handlePushClickEventToGACheck = jest.fn();
                    wrapper.vm.handleSelectionChange = jest.fn();

                    // Act
                    wrapper.vm.handleEventAction("change", { myEvent: "test" });

                    // Assert
                    expect(wrapper.vm.handleSelectionChange).toHaveBeenCalledWith({
                        myEvent: "test",
                    });
                    expect(wrapper.vm.handleClick).not.toHaveBeenCalled();
                    expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled();
                });
            });
        });

        describe("handleSelectionChange", () => {
            const isCheckbox = [
                [true, ["Hi"]],
                [false, "Hi"],
            ];
            test.each(isCheckbox)(
                "handleChange is called with valueToEmit",
                (isMultiSelect, resultingValueToEmit) => {
                    // Arrange
                    const { wrapper } = setupMocks({
                        mockData: {
                            propsData: {
                                isMultiSelect: isMultiSelect,
                                value: "Hi",
                            },
                        },
                    });

                    wrapper.vm.handleChange = jest.fn();

                    // Act
                    wrapper.vm.handleSelectionChange({ myEvent: "TEST" });

                    // Assert
                    expect(wrapper.vm.handleChange).toHaveBeenCalledWith(resultingValueToEmit);
                }
            );

            describe("checkbox", () => {
                test("modelValue is null => valueToEmit is correct value", () => {
                    // Arrange
                    const { wrapper } = setupMocks({
                        mockData: {
                            propsData: {
                                isMultiSelect: true,
                                value: "Bello",
                                modelValue: null,
                            },
                        },
                    });

                    wrapper.vm.handleChange = jest.fn();

                    // Act
                    wrapper.vm.handleSelectionChange({ myEvent: "TEST" });

                    // Assert
                    expect(wrapper.vm.valueToEmit).toEqual(["Bello"]);
                    expect(wrapper.vm.handleChange).toHaveBeenCalledWith(["Bello"]);
                });

                test("modelValue is undefined => valueToEmit is correct value", () => {
                    // Arrange
                    const { wrapper } = setupMocks({
                        mockData: {
                            propsData: {
                                isMultiSelect: true,
                                value: "Bello",
                                modelValue: undefined,
                            },
                        },
                    });

                    wrapper.vm.handleChange = jest.fn();

                    // Act
                    wrapper.vm.handleSelectionChange({ myEvent: "TEST" });

                    // Assert
                    expect(wrapper.vm.valueToEmit).toEqual(["Bello"]);
                    expect(wrapper.vm.handleChange).toHaveBeenCalledWith(["Bello"]);
                });

                test("modelValue is empty => valueToEmit is correct value", () => {
                    // Arrange
                    const { wrapper } = setupMocks({
                        mockData: {
                            propsData: {
                                isMultiSelect: true,
                                value: "Bello",
                                modelValue: [],
                            },
                        },
                    });

                    wrapper.vm.handleChange = jest.fn();

                    // Act
                    wrapper.vm.handleSelectionChange({ myEvent: "TEST" });

                    // Assert
                    expect(wrapper.vm.valueToEmit).toEqual(["Bello"]);
                    expect(wrapper.vm.handleChange).toHaveBeenCalledWith(["Bello"]);
                });

                test("modelValue is not empty and does not contain this button's value => valueToEmit is correct value", () => {
                    // Arrange
                    const { wrapper } = setupMocks({
                        mockData: {
                            propsData: {
                                isMultiSelect: true,
                                value: "Bello",
                                modelValue: ["Hello"],
                            },
                        },
                    });

                    wrapper.vm.handleChange = jest.fn();

                    // Act
                    wrapper.vm.handleSelectionChange({ myEvent: "TEST" });

                    // Assert
                    expect(wrapper.vm.valueToEmit).toEqual(["Hello", "Bello"]);
                    expect(wrapper.vm.handleChange).toHaveBeenCalledWith(["Hello", "Bello"]);
                });

                // testing when value is at start/middle/end of modelValue
                const modelValues = [
                    [["Bello", "Hello", "Mello"]],
                    [["Hello", "Bello", "Mello"]],
                    [["Hello", "Mello", "Bello"]],
                ];
                test.each(modelValues)(
                    "modelValue is not empty and does contain this button's value => valueToEmit is correct value",
                    (modelValue) => {
                        // Arrange
                        const { wrapper } = setupMocks({
                            mockData: {
                                propsData: {
                                    isMultiSelect: true,
                                    value: "Bello",
                                    modelValue: modelValue,
                                },
                            },
                        });

                        wrapper.vm.handleChange = jest.fn();

                        // Act
                        wrapper.vm.handleSelectionChange({ myEvent: "TEST" });

                        // Assert
                        expect(wrapper.vm.valueToEmit).toEqual(["Hello", "Mello"]);
                        expect(wrapper.vm.handleChange).toHaveBeenCalledWith(["Hello", "Mello"]);
                    }
                );
            });

            describe("radio", () => {
                const modelValues = [null, undefined, "Bello", "Hello"];
                test.each(modelValues)(
                    "regardless of modelValue, set valueToEmit to correct value",
                    (modelValue) => {
                        // Arrange
                        const { wrapper } = setupMocks({
                            mockData: {
                                propsData: {
                                    isMultiSelect: false,
                                    value: "Bello",
                                    modelValue: modelValue,
                                },
                            },
                        });

                        wrapper.vm.handleChange = jest.fn();

                        // Act
                        wrapper.vm.handleSelectionChange({ myEvent: "TEST" });

                        // Assert
                        expect(wrapper.vm.valueToEmit).toEqual("Bello");
                        expect(wrapper.vm.handleChange).toHaveBeenCalledWith("Bello");
                    }
                );
            });
        });

        describe("handleClick", () => {
            const isCheckbox = [[true], [false]];
            test.each(isCheckbox)("handleSelectionChange is also called", async (isMultiSelect) => {
                // Arrange
                const { wrapper } = setupMocks({
                    mockData: {
                        propsData: {
                            isMultiSelect: isMultiSelect,
                            value: "Bello",
                        },
                    },
                });

                wrapper.vm.handleSelectionChange = jest.fn();
                await wrapper.setData({ valueToEmit: "HELLO WORLD" });

                // Act
                wrapper.vm.handleClick({ myEvent: "Test" });

                // Assert
                expect(wrapper.vm.handleSelectionChange).toHaveBeenCalledWith({ myEvent: "Test" });
            });

            test.each(isCheckbox)("update:modelValue is emitted with valueToEmit", async (isMultiSelect) => {
                // Arrange
                const { wrapper } = setupMocks({
                    mockData: {
                        propsData: {
                            isMultiSelect: isMultiSelect,
                            value: "Bello",
                        },
                    },
                });

                wrapper.vm.handleSelectionChange = jest.fn();
                await wrapper.setData({ valueToEmit: "HELLO WORLD" });

                // Act
                wrapper.vm.handleClick({ myEvent: "Test" });

                // Assert
                expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("HELLO WORLD");
            });
        });

        describe("handlePushClickEventToGACheck", () => {
            test.todo("");
        });

        describe("pushClickEventToGA", () => {
            test("pushEventToGA is called correctly", () => {
                // Arrange
                const { wrapper } = setupMocks({
                    mockData: {
                        propsData: {
                            value: "Bello",
                            setLastValuePushedToGa: jest.fn(),
                        },
                    },
                });

                console.log(wrapper.vm.$route);

                wrapper.setData({
                    GaActions: {
                        CLICKED: "Clicked",
                    },
                });

                // Act
                wrapper.vm.pushClickEventToGA();

                // Assert
                expect(wrapper.vm.pushEventToGA).toHaveBeenCalledWith(
                    "myPage",
                    "Clicked",
                    "Bello",
                    true,
                    undefined
                );
                expect(wrapper.vm.setLastValuePushedToGa).toHaveBeenCalledWith("Bello");
            });

            test.todo("set last value pushed to GA");
        });
    });

    describe("computed", () => {
        describe("isChecked", () => {
            describe("checkbox", () => {
                const falsyModelValues = [[], null, undefined];
                test.each(falsyModelValues)(
                    "modelValue is falsy/empty => checkbox isn't checked",
                    (modelValue) => {
                        // Arrange/Act
                        const { wrapper } = setupMocks({
                            mockData: {
                                propsData: {
                                    isMultiSelect: true,
                                    modelValue,
                                },
                            },
                        });

                        // Assert
                        const inputElement = wrapper.find("input");
                        expect(wrapper.vm.isChecked).toEqual(false);
                        expect(inputElement.element.checked).toBe(false);
                    }
                );

                test("modelValue doesn't contain this button's value => checkbox isn't checked", async () => {
                    // Arrange/Act
                    const { wrapper } = setupMocks({
                        mockData: {
                            propsData: {
                                isMultiSelect: true,
                                modelValue: ["Aaa", "Bbb", "Ccc"],
                                value: "Ddd",
                            },
                        },
                    });

                    await wrapper.vm.$nextTick();

                    // Assert
                    const inputElement = wrapper.find("input");
                    expect(wrapper.vm.isChecked).toEqual(false);
                    expect(inputElement.element.checked).toBe(false);
                });

                test("modelValue contains this button's value => checkbox is checked", () => {
                    // Arrange/Act
                    const { wrapper } = setupMocks({
                        mockData: {
                            propsData: {
                                isMultiSelect: true,
                                modelValue: ["Aaa", "Bbb", "Ddd", "Ccc"],
                                value: "Ddd",
                            },
                        },
                    });

                    // Assert
                    const inputElement = wrapper.find("input");
                    expect(wrapper.vm.isChecked).toEqual(true);
                    expect(inputElement.element.checked).toBe(true);
                });
            });

            describe("radio", () => {
                const falsyModelValues = ["", null, undefined, []];
                test.each(falsyModelValues)(
                    "modelValue is falsy/empty => radio button isn't checked",
                    (modelValue) => {
                        // Arrange/Act
                        const { wrapper } = setupMocks({
                            mockData: {
                                propsData: {
                                    isMultiSelect: false,
                                    modelValue,
                                    value: "Aaa",
                                },
                            },
                        });

                        // Assert
                        const inputElement = wrapper.find("input");
                        expect(wrapper.vm.isChecked).toEqual(false);
                        expect(inputElement.element.checked).toBe(false);
                    }
                );

                test("modelValue equals this button's value => radio button is checked", () => {
                    // Arrange/Act
                    const { wrapper } = setupMocks({
                        mockData: {
                            propsData: {
                                isMultiSelect: false,
                                modelValue: "Ddd",
                                value: "Ddd",
                            },
                        },
                    });

                    // Assert
                    const inputElement = wrapper.find("input");
                    expect(wrapper.vm.isChecked).toEqual(true);
                    expect(inputElement.element.checked).toBe(true);
                });

                test("modelValue doesn't equal this button's value => radio button isn't checked", () => {
                    // Arrange/Act
                    const { wrapper } = setupMocks({
                        mockData: {
                            propsData: {
                                isMultiSelect: false,
                                modelValue: "Aaa",
                                value: "Ddd",
                            },
                        },
                    });

                    // Assert
                    const inputElement = wrapper.find("input");
                    expect(wrapper.vm.isChecked).toEqual(false);
                    expect(inputElement.element.checked).toBe(false);
                });
            });
        });

        describe("buttonId", () => {
            test("groupName and value combo yield correct id for input button with string value", () => {
                // Arrange/Act
                const { wrapper } = setupMocks({
                    mockData: {
                        propsData: {
                            groupName: "my test-name",
                            value: "Aaa-BBB CcC",
                        },
                    },
                });

                // Assert
                const inputElement = wrapper.find("input");
                expect(wrapper.vm.buttonId).toBe("my-test-name-Aaa-BBB-CcC");
                expect(inputElement.attributes().id).toBe("my-test-name-Aaa-BBB-CcC");
            });

            test("groupName and value combo yield correct id for input button with number value", () => {
                // Arrange/Act
                const { wrapper } = setupMocks({
                    mockData: {
                        propsData: {
                            groupName: "my test-name",
                            value: 2,
                        },
                    },
                });

                // Assert
                const inputElement = wrapper.find("input");
                expect(wrapper.vm.buttonId).toBe("my-test-name-2");
                expect(inputElement.attributes().id).toBe("my-test-name-2");
            });
        });

        describe("inputType", () => {
            test("isMultiSelect is true => inputType is 'checkbox'", () => {
                // Arrange/Act
                const { wrapper } = setupMocks({
                    mockData: {
                        propsData: {
                            isMultiSelect: true,
                        },
                    },
                });

                // Assert
                const inputElement = wrapper.find("input");
                expect(wrapper.vm.inputType).toEqual("checkbox");
                expect(inputElement.attributes().type).toBe("checkbox");
            });

            test("isMultiSelect is false => inputType is 'radio'", () => {
                // Arrange/Act
                const { wrapper } = setupMocks({
                    mockData: {
                        propsData: {
                            isMultiSelect: false,
                        },
                    },
                });

                // Assert
                const inputElement = wrapper.find("input");
                expect(wrapper.vm.inputType).toEqual("radio");
                expect(inputElement.attributes().type).toBe("radio");
            });
        });
    });

    describe("integration testing", () => {
        describe("checkbox", () => {
            test("click on both => both are 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");

                // 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"]);
            });

            const defaultCheckedCases = [
                [["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
                    },
                });

                // 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(true);
                expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
                expect(inputs[0].element.checked).toBe(isInputButtonOneChecked);
                expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked);
                expect(wrapper.vm.value).toEqual(modelValue);
            });
        });

        describe("radio", () => {
            test("click on both => last clicked 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");

                // 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");
            });

            const defaultCheckedCases = [
                ["", 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);
            });
        })
    });
});

// TODO KO look at how I tested groups of these in SFA
// (making sure selecting one radio changes the value, etc,
// that this acts like a regular input aside from a different emitted event)

function setupMocks({ mockData = {}, shouldShallowMount = true }) {
    const baseInputButtonWrapper = {
        components: { baseInputButton },
        template: '<baseInputButton v-model="myValue" />',
        data() {
            return {
                myValue: "",
            };
        },
    };

    const mountMockData = {
        ...mockData,
        propsData: {
            // to get rid of some annoying warnings
            groupName: "groupName",
            modelValue: mockData.propsData?.isMultiSelect ? [] : "",
            value: "5",
            setLastValuePushedToGa: () => {},
            // should override the above if they exist
            ...mockData.propsData,
        },
    };

    const wrapper = shouldShallowMount
        ? shallowMount(baseInputButton, mountMockData)
        : mount(baseInputButton, mountMockData);

    wrapper.vm.pushEventToGA = jest.fn();
    wrapper.vm.$route = {
        query: {
            fmgPage: "myPage",
        },
    };
    wrapper.vm.GaActions = {};

    return { wrapper };
}

function setupBaseInputButtonWrapper({ mockData = {} }) {
// <<<<<<< HEAD
//     const baseInputButtonWrapper = {
//         name: "baseInputButtonWrapper",
//         components: { baseInputButton },
//         template:
//             '<div><baseInputButton v-bind="$props" @update:modelValue="handleAnswerChange" />Test</div>',
//         data() {
//             return {
//                 isMultiSelect: mockData.isMultiSelect,
//             };
//         },
//         mixins: [inputButtonWrapperMixin]
//     };

//     let parentComponentTemplate = "<div>"
//     parentComponentTemplate += `<baseInputButtonWrapper v-model="selectedValue" :isMultiSelect="${mockData.isMultiSelect}" groupName="myGroupName" value="value1" />`
//     parentComponentTemplate += `<baseInputButtonWrapper v-model="selectedValue" :isMultiSelect="${mockData.isMultiSelect}" groupName="myGroupName" value="value2" />`
//     parentComponentTemplate += `</div>`
//     const wrapper = mount({
//         data() {
//             return {
//                 value: mockData.initialValue,
//             }
//         },
//         template: parentComponentTemplate,
//         components: { baseInputButtonWrapper }
//     })
// =======
    const originalData = baseInputButton.data();
    baseInputButton.data = () => {
        return {
            ...originalData,
            // $route: {
            //     query: {
            //         fmgPage: "myPage",
            //     },
            // },
        };
    };

    // console.log({
    //     test: baseInputButton.vm.$route
    // })
    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 },
        },
        {}
    );
// >>>>>>> feature/CSR-762

    return { wrapper };
}