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

import { mount } from "@vue/test-utils";
import listButton from "./list-button";
import { GaActions } from "@/constants/analytics";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";

describe("list-button.vue", () => {
    describe("loader", () => {
        it("selectingInitiatesLoad is true and answer is changed => show the loader", async () => {
            // Act
            const { wrapper } = setupMocks({
                mockData: {
                    global: {
                        mocks: {
                            $route: { query: { fmgPage: "page-name" } },
                            GaActions: GaActions,
                            pushEventToGA: jest.fn(),
                        },
                    },
                    propsData: {
                        selectingInitiatesLoad: true,
                    },
                },
            });

            // Act
            wrapper.vm.selectedValue = "something";
            await wrapper.vm.$nextTick();

            // Assert
            const loader = wrapper.findComponent({ name: "loader" });
            expect(loader.exists()).toBe(true);
        });

    });

    describe("baseInputButton checks", () => {
        it("Should return input type checkbox if isMultiSelect is true", async () => {
            // Act
            const { wrapper } = setupMocks({
                mockData: {
                    propsData: {
                        isMultiSelect: true,
                    },
                },
            });

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

            expect(input.attributes().type).toEqual("checkbox");
        });

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

        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: {
                    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",
                        isMultiSelect: true,
                    },
                },
            });

            // Act
            wrapper.vm.selectedValue = ["test"];

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

    describe("styling/UI", () => {
        test("has buttonLabel => displays buttonLabel", () => {
            // Arrange/Act
            const { wrapper } = setupMocks({
                mockData: {
                    propsData: {
                        buttonLabel: "Surprise!",
                        modelValue: "",
                        groupName: "groupName",
                        value: "myValue",
                    },
                },
            });

            // Assert
            const content = wrapper.find(".list-button-content");
            expect(content.isVisible()).toBe(true);
            expect(content.text()).toContain("Surprise!");
        });

        test("has buttonLabelSubCopy => displays buttonLabelSubCopy", () => {
            // Arrange/Act
            const { wrapper } = setupMocks({
                mockData: {
                    propsData: {
                        buttonLabel: "Surprise!",
                        buttonLabelSubCopy: "Super duper surprise :)",
                        modelValue: "",
                        groupName: "groupName",
                        value: "myValue",
                    },
                },
            });

            // Assert
            const content = wrapper.find(".list-button-content");
            expect(content.isVisible()).toBe(true);
            expect(content.text()).toContain("Super duper surprise :)");
        });

        test("has screenReaderOnlyText => displays screenReaderOnlyText", () => {
            // Arrange/Act
            const { wrapper } = setupMocks({
                mockData: {
                    propsData: {
                        buttonLabel: "Surprise!",
                        buttonLabelSubCopy: "Super duper surprise :)",
                        screenReaderOnlyText: "Tests are fun!",
                        modelValue: "",
                        groupName: "groupName",
                        value: "myValue",
                    },
                },
            });

            // Assert
            const content = wrapper.find(".list-button-content");
            const screenReaderOnlyText = wrapper.find(".sr-only");
            expect(content.isVisible()).toBe(true);
            expect(screenReaderOnlyText.exists()).toBe(true);
            expect(screenReaderOnlyText.text()).toContain("Tests are fun!");
        });

        it("Should return screen reader text", async () => {
            // Act
            const { wrapper } = setupMocks({
                mockData: {
                    propsData: {
                        screenReaderOnlyText: "Screen Reader Only Text",
                        modelValue: "",
                        groupName: "groupName",
                        value: "myValue",
                    },
                },
            });

            // Assert
            const paragraph = wrapper.find("span.sr-only");

            expect(paragraph.text()).toEqual("Screen Reader Only Text");
        });

        it("Should return text alignment class", async () => {
            // Act
            const { wrapper } = setupMocks({
                mockData: {
                    propsData: {
                        textPosition: "text-center",
                        modelValue: "",
                        groupName: "groupName",
                        value: "myValue",
                    },
                },
            });

            // Assert
            const paragraph = wrapper.find("span.m-0");

            expect(paragraph.attributes("class")).toContain("text-center");
        });

        it("Should return aria-required state", async () => {
            // Act
            const { wrapper } = setupMocks({
                mockData: {
                    propsData: {
                        isRequired: true,
                        groupName: "groupName",
                        modelValue: "",
                        value: "myValue",
                    },
                },
            });

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

            expect(input.attributes()["aria-required"]).toEqual("true");
        });
    });
});

function setupMocks({ mockData }) {
    // Add in group name to avoid vee-validate failures
    if (!mockData.propsData) {
        mockData.propsData = { groupName: "group-name" };
    } else if (!mockData.propsData.groupName) {
        mockData.propsData.groupName = "group-name";
    }
    const wrapper = mount(listButton, {
        ...mockData,
        mixins: [inputButtonWrapperMixin],
    });

    return { wrapper };
}