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

describe("replace-options-question.vue", () => {
    test("Selected damage option is emitted upon selection.", async () => {
  
      //Arrange
      const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
      const damageToSelect = ["Backseat"];
  
      //Act
      wrapper.setValue({ modelValue: damageToSelect });
      await wrapper.vm.$nextTick();
  
      //Assert
      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]);
    });
  });

  describe("replace-options-question.vue", () => {
    test("Answers to display filtered by data from api.", async () => {
  
      //Arrange
      const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"]});
  
      //Act
      replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
  
      //Assert
      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-FrontDoor' } ])
    });
  });

  function setupMocks({
    modelValueProp = ["Windshield"],
    isAvailale = true,
    isMultiSelect = false,
    filterByVehicleCategory = false,
    groupName = "damageQuestion",
    cmsQuestionText = "CMS text goes here",
    cmsAnswers = [{Name: "car-Windshield"}, {Name: "car-BackDoor"}, {Name: "car-FrontDoor"}],
    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
    mountOptions.propsData = {
      modelValue: modelValueProp,
      isAvailable: isAvailale,
      isMultiSelect: isMultiSelect,
      filterByVehicleCategory: filterByVehicleCategory
    };
   
    const wrapper = shallowMount(replaceOptionsQuestion, mountOptions);
  
    //Mock CMS content
    const cmsContent = {
      groupName: groupName,
      QuestionText: cmsQuestionText,
      Answers: cmsAnswers,
    };
    const replaceOptions = dataFromStoreApi;
    return { wrapper, cmsContent, replaceOptions };
  }