import vehicleQuestion from "@/layouts/vehicle/vehicle-question/vehicle-question";
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import store from "@/store";

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

describe("vehicle-question.vue", () => {
    test("Selected value is emitted upon selection.", async () => {
        //Arrange
        const { wrapper } = setupMocks({ modelValueProp: "value" });
        const valueToSelect = "newvalue";

        //Act
        wrapper.setValue({ selectedValue: valueToSelect });
        await wrapper.vm.$nextTick();

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

function setupMocks({ modelValueProp = "", dataFromStoreApi = [] }) {
    //Mock store
    store.dispatch = jest.fn(() => dataFromStoreApi);
    store.getters = { vehicle: { year: 2019, make: "honda", model: "civic", style: "4 Door" } };

    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(vehicleQuestion, mountOptions);

    return { wrapper };
}
