import { shallowMount } from "@vue/test-utils";
import windshieldChipCountQuestion from "@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import store from "@/store";

jest.mock(
    "@/store",
    () => {
        return {};
    },
    { virtual: true }
);

describe("windshield-chip-count-question.vue", () => {
    test("Selected chip count is emitted upon selection.", async () => {
        //Arrange
        const { wrapper } = setupMocks({ modelValueProp: 1 });

        //Act
        await wrapper.setData({ numberOfChips: 2 });

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

function setupMocks({
    modelValueProp = ["Two"],
    groupName = "WindshieldChipCountQuestion",
    cmsQuestionText = "How many chips are we repairing?",
    cmsAnswers = [{ Name: "One" }, { Name: "Two" }, { Name: "Three" }],
    dataFromStoreApi = [],
}) {
    //Mock store
    store.dispatch = jest.fn(() => dataFromStoreApi);
    store.getters = {
        vehicle: {
            year: 2019,
            make: "honda",
            model: "civc",
            style: "2 Door",
            category: "CAR",
        },
    };
    const mountOptions = getMountOptions({
        store: {
            dispatch: store.dispatch,
            getters: store.getters,
        },
    });

    //Mock props
    const mockMixin = {
        methods: {
            getCmsContent: jest.fn(),
        },
    };
    mountOptions.propsData = {
        modelValue: modelValueProp,
    };
    mountOptions.mixins = [mockMixin];

    const wrapper = shallowMount(windshieldChipCountQuestion, mountOptions);

    //Mock CMS content
    const cmsContent = {
        groupName: groupName,
        QuestionText: cmsQuestionText,
        Answers: cmsAnswers,
    };
    const damageOptions = dataFromStoreApi;
    return { wrapper, cmsContent, damageOptions };
}