import { shallowMount } from "@vue/test-utils";
import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import store from "@/store";
jest.mock(
    "@/store",
    () => {
        return {};
    },
    { virtual: true }
);

describe("damage-location-question.vue", () => {
    test("Selected location option is emitted upon selection.", async () => {
        //Arrange
        const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
        const locationToSelect = ["Backseat"];

        //Act
        wrapper.setValue({ modelValue: locationToSelect });
        await wrapper.vm.$nextTick();

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

    test("Answers to display filtered by data from api.", async () => {
        //Arrange
        const { wrapper, cmsContent, damageOptions } = setupMocks({
            dataFromStoreApi: {
                driverSideOptions: {
                    availableReplacementOptions: ["Quarter", "Front"],
                },
                windshieldOptions: {
                    availableReplacementOptions: ["Single"],
                },
                backGlassOptions: {
                    availableReplacementOptions: [],
                },
            },
        });

        //Act
        damageLocationQuestion.methods.initializeComponent.call(
            wrapper.vm,
            damageOptions,
            "car-group"
        );

        //Assert
        expect(wrapper.vm.damageOptions).toStrictEqual({
            backGlassOptions: { availableReplacementOptions: [] },
            driverSideOptions: { availableReplacementOptions: ["Quarter", "Front"] },
            windshieldOptions: { availableReplacementOptions: ["Single"] },
        });
    });
});

function setupMocks({
    modelValueProp = ["Windshield", "SideDoor"],
    isMultiSelect = false,
    groupName = "damageQuestion",
    cmsQuestionText = "CMS text goes here",
    cmsAnswers = [{ Name: "car-Windshield" }, { Name: "car-SideDoor" }, { Name: "car-RearWindow" }],
    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,
        isMultiSelect: isMultiSelect,
    };
    mountOptions.mixins = [mockMixin];

    const wrapper = shallowMount(damageLocationQuestion, mountOptions);

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