import makeQuestion from "@/layouts/vehicle-make/make-question/make-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("make-question.vue", () => {
  test("Selected make is emitted upon selection.", async () => {
    //Arrange
    const { wrapper } = setupMocks({ modelValueProp: "honda" });
    const makeToSelect = "ford";

    //Act
    wrapper.setValue({ selectedMake: makeToSelect });
    await wrapper.vm.$nextTick();

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

describe("make-question.vue", () => {
  test("CMS question text is used as radio question text.", async () => {
    //Arrange
    const { wrapper, cmsContent } = setupMocks({
      cmsQuestionText: "What make is your vehicle?",
    });

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

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

describe("make-question.vue", () => {
  test("Data from store api are used as radio question answers.", async () => {
    //Arrange
    const { wrapper, cmsContent } = setupMocks({
      dataFromStoreApi: ["honda", "ford", "dodge"],
    });

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

    //Assert
    const buttonQuestionComponent = await wrapper.findComponent({
      name: "buttonQuestion",
    });
    expect(buttonQuestionComponent.attributes("answers")).toBe(
      "honda,ford,dodge"
    );
  });
});

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

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

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