DigitalConsumer.FixMyGlass/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js

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

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

  describe("replace-options-question.vue", () => {
    test("Selected door side option is updated when selection made.", async () => {
  
      //Arrange
      const { wrapper } = setupMocks({});
  
      //Act
      wrapper.vm.selectedDoorSidesValues = ["DriverSide"]
      await wrapper.vm.$nextTick();

      //Assert
     expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled;
    });
  });

  describe("replace-options-question.vue", () => {
    test("Selected driver side option is updated when selection made.", async () => {
  
      //Arrange
      const { wrapper } = setupMocks({});
  
      //Act
      wrapper.vm.selectedDriverSideReplaceOptionsValues = ["FrontDoor"]
      await wrapper.vm.$nextTick();
  
      //Assert
      expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled;
    });
  });

  describe("replace-options-question.vue", () => {
    test("Selected passenger side option is updated when selection made.", async () => {
  
      //Arrange
      const { wrapper } = setupMocks({});
  
      //Act
      wrapper.vm.selectedPassengerSideReplaceOptionsValues = ["BacktDoor"]
      await wrapper.vm.$nextTick();
  
      //Assert
      expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled;
    });
  });


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

  function setupMocks({
    modelValueProp = ["DriverSide"],
    groupName = "sideDoorOptions",
    cmsQuestionText = "CMS text goes here",
    cmsAnswers = [{Name: "Car-DriverSide"}, {Name: "Car-PassengerSide"}],
    driverSideReplaceOptions = ["FrontDoor", "BackDoor"],
    passengerSideReplaceOptions = ["FrontDoor", "BackDoor"],
    driverSideOptions = ["Car-FrontDoor", "Car-BackDoor"],
    passengerSideOptions = ["Car-FrontDoor", "Car-BackDoor"],
    selectedDamageLocations = ["SideDoor"]
  }) {
    
    //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,
      groupName: groupName,
      selectedDamageLocations: selectedDamageLocations,
    };
   
    const wrapper = shallowMount(sideDoorOptions, mountOptions);
  
    const OptionsWrapper = wrapper.findAllComponents({name: "replaceOptionsQuestion"});
    OptionsWrapper[0].vm.initializeComponent = replaceOptionsQuestion.methods.initializeComponent;
    OptionsWrapper[1].vm.initializeComponent = replaceOptionsQuestion.methods.initializeComponent;
    //Mock CMS content
    const cmsContent = {
      groupName: groupName,
      QuestionText: cmsQuestionText,
      Answers: cmsAnswers,
    };
    return { wrapper, cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions };
  }