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

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";

describe("input-button-wrapper-mixin", () => {
    describe("mouse clicks", () => {
        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"]);
            });
        });

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

    describe("initial values", () => {
        describe("checkbox", () => {
            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", () => {
            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);
                }
            );
        });
    });
});

function setupBaseInputButtonWrapper({ mockData = {} }) {
    const originalData = baseInputButton.data();
    baseInputButton.data = () => {
        return {
            ...originalData,
            // $route: {
            //     query: {
            //         fmgPage: "myPage",
            //     },
            // },
        };
    };

    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 };
}