import modelQuestion from "@/layouts/vehicle-model/model-question/model-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("model-question.vue", () => {
  test("Selected model is emitted upon selection.", async () => {

    //Arrange
    const { wrapper } = setupMocks({ modelValueProp: "Accord" });
    const modelToSelect = "Civic";

    //Act
    wrapper.setData({ selectedModel: modelToSelect });
    await wrapper.vm.$nextTick();

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

describe("model-question.vue", () => {
  test("CMS question text is used as radio question text.", async () => {

    //Arrange
    const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What model is your vehicle?" });

    //Act
    modelQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);

    //Assert
    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
    expect(buttonQuestionComponent.attributes("questiontext")).toBe("What model is your vehicle?");
  });
});

describe("model-question.vue", () => {
  test("Data from store api are used as radio question answers.", async () => {

    //Arrange
    const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["accord", "civic", "insight"] });

    //Act
    const initialData = modelQuestion.methods.loadInitialData.call(wrapper.vm);
    modelQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);

    //Assert
    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
    expect(buttonQuestionComponent.attributes("answers")).toBe("accord,civic,insight");
  });
});


function setupMocks({
  modelValueProp = "1900",
  cmsQuestionText = "CMS text goes here",
  dataFromStoreApi = [],
}) {
  
  //Mock store
  store.dispatch = jest.fn(() => dataFromStoreApi);
  store.getters = { vehicle: {year: 2019, make: 'honda'} };
  const mountOptions = getMountOptions({
    store: {
      dispatch: store.dispatch,
      getters: store.getters,
    },
  });

  //Mock props
  mountOptions.propsData = {
    modelValue: modelValueProp,
  };
  const wrapper = shallowMount(modelQuestion, mountOptions);

  //Mock CMS content
  const cmsContent = {
    QuestionText: cmsQuestionText
  };  
  return { wrapper, cmsContent };
}