// Components
import vehicleDamage from "@/layouts/vehicle-damage/vehicle-damage.vue";
import funnelHeader from "@/common-components/funnel-header/funnel-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";

// Supporting Files
import { settleAllPromises } from "@/helpers/layout-helper.js";
import baseMixin from "@/mixins/base-mixin";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { mount, flushPromises } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { nextTick } from "vue";
import { storeActions } from "@/constants/store-actions";
import { storeMutations } from "@/constants/store-mutations";
import store from "@/store";
import { validate } from "vee-validate";
import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";

// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
  settleAllPromises: jest.fn(),
}));

// Mock fetchCmsContentForPage
jest.mock("@/helpers/cms-content-helper", () => ({
  fetchCmsContentForPage: jest.fn(),
}));

// Mock Store
jest.mock("@/store", () => ({
  commit: jest.fn(),
  dispatch: jest.fn(),
  getters: {
    vehicle: {
      carId: "C00000000",
      image: "test.jpg",
    },
    eventBusItem: jest.fn(),
    damage: {
      glassToReplace: [] 
    },
  },
}));

describe("vehicle-damage.vue", () => {
  test("Page header is initailized with api data", async (done) => {
    //Arrange
    const pageHeaderWidgetHeaderText = "Select Damage";
    const { wrapper, apiPromise } = setupMocks({
      pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
    });

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );

    //Assert
    apiPromise.finally(() => {
      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
        pageHeaderWidgetHeaderText
      );
      done();
    });
  });
});

describe("vehicle-damage.vue", () => {
  test("Page logo image is initailized with api data", async (done) => {
    //Arrange
    const SiteHeaderWidget = {
      LogoImage:
        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
    };
    const { wrapper, apiPromise } = setupMocks({
      SiteHeaderWidget: SiteHeaderWidget,
    });

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );

    //Assert
    apiPromise.finally(() => {
      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(
        SiteHeaderWidget
      );
      done();
    });
  });
});

describe("vehicle-damage.vue", () => {
  test("Vehicle image is initailized with api data", async (done) => {
    //Arrange
    const VehicleBannerWidget = {
      GenericVehicleImage:
        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
    };
    const { wrapper, apiPromise } = setupMocks({
      VehicleBannerWidget: VehicleBannerWidget,
    });

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );

    //Assert
    apiPromise.finally(() => {
      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(
        VehicleBannerWidget
      );
      done();
    });
  });
});

describe("vehicle-damage.vue", () => {
  test("CarId set, arePagePrerequisitesValid should be true ", async () => {
    //Arrange
    const { wrapper } = setupMocks({});

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );

    let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
    await nextTick();

    //Assert
    expect(arePagePrerequisitesValid).toBe(true);
  });
});

describe("vehicle-damage.vue", () => {
  test("BackButtonAction triggers a router.navigate change", async () => {

    //Arrange
    const { wrapper } = setupMocks({});

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );

    wrapper.vm.backButtonAction();

    //Assert
    expect(wrapper.vm.$router.navigate).toHaveBeenCalled();

  });
});

describe("vehicle-damage.vue", () => {
  test("Replace several pieces of glass on ForwardButtonAction triggers a router.navigateAfterSave and saves selections to store", async () => {
    //Arrange
    const partsData = {
      partsOrQuestions: [{
        glassName: "Single",
        glassLocation: "Windshield",
        parts: null,
        partQuestions: [{
          questionSequence: 1,
          questionText: "Is your vehicle equipped with a heated steering wheel?",
          answers: [{
            answerText: "Yes",
            nextQuestionSequence: null,
            answerResult: "FW04957"
          },
          {
            answerText: "No",
            nextQuestionSequence: 2,
            answerResult: ""
          }]
        },
        {
          questionSequence: 2,
          questionText: "Is your vehicle equipped with a remote start?",
          answers: [{
            answerText: "Yes",
            nextQuestionSequence: null,
            answerResult: "FW04181"
          },
          {
            answerText: "No",
            nextQuestionSequence: null,
            answerResult: "FW04179"
          }]
        }]
      }]
    };

    const { wrapper } = setupMocks({
      pageHeaderWidgetHeaderText: "",
      mountOptionsMockData: {
        router: { navigateAfterSave: jest.fn(), },
        actionList: [{ actionName: storeActions.GET_PARTS_OR_QUESTIONS, data: partsData, },],
        store: {
          getters: {
            vehicle: {},
          },
        },
      },
    });

    wrapper.vm.selectedDamageLocations = ["Windshield", "SideDoor", "RearWindow"];
    wrapper.vm.selectedWindshieldOptions = { 
      selectedWindshieldChipCount : null,
      selectedWindshieldReplaceOptions : ["Single"], 
      selectedWindshieldDamageType: ["Replace"]
    };

    wrapper.vm.sideDoorOptionsData = { 
      selectedDoorSides: ["DriverSide", "PassengerSide"],
      selectedDriverSideReplaceOptions: ["Back"], 
      selectedPassengerSideReplaceOptions: ["Quarter"]
    };

    wrapper.vm.selectedRearReplaceOptions = ["Stationary"];

    const expectedGlassToReplace = [{location: "Windshield", name: "Single"}, {location: "Driver", name: "Back"}, 
      {location: "Passenger", name: "Quarter"}, {location: "Rear", name: "Stationary"}];

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );
      
    await wrapper.vm.forwardButtonAction();

    //Assert
    expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalled();
    expect(wrapper.vm.selectedGlassToReplace()).toEqual(expectedGlassToReplace);
    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_IS_REPAIR, false);
    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_GLASS_TO_REPLACE, expectedGlassToReplace);
  });
});

describe("vehicle-damage.vue", () => {
  test("Windshield replace with single part on ForwardButtonAction triggers a router.navigate and saves selections to store", async () => {
    //Arrange
    const partsData = { partsOrQuestions: [
      {
        glassLocation: "Windshield",
        glassName: "Single",
        partQuestions: null,
        parts: [
          {
            color: "Green Tint, Green Shade",
            description: "rain sensor, solar",
            partNumber: "FW02728GGYN",
            requiresCapabilityQuestions: false,
            requiresRecalibration: false 
          }
        ]}]};

    const { wrapper } = setupMocks({
      pageHeaderWidgetHeaderText: "",
      mountOptionsMockData: {
        router: { navigate: jest.fn(), },
        actionList: [{ actionName: storeActions.GET_PARTS_OR_QUESTIONS, data: partsData, },],
        store: {
          getters: {
            vehicle: {},
          },
        },
      },
    });

    wrapper.vm.selectedDamageLocations = ["Windshield"];
    wrapper.vm.selectedWindshieldOptions = { 
      selectedWindshieldChipCount : null,
      selectedWindshieldReplaceOptions : ["Single"], 
      selectedWindshieldDamageType: ["Replace"]
    };

    const expectedGlassToReplace = [{location: "Windshield", name: "Single"},];

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );
      
    await wrapper.vm.forwardButtonAction();

    //Assert
    expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
    expect(wrapper.vm.selectedGlassToReplace()).toEqual(expectedGlassToReplace);
    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_IS_REPAIR, false);
    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_GLASS_TO_REPLACE, expectedGlassToReplace);
    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_PARTS, partsData.partsOrQuestions[0].parts);
  });
});

describe("vehicle-damage.vue", () => {
  test("Windshield replace with multiple parts on ForwardButtonAction triggers a router.navigateAfterSave and saves selections to store", async () => {
    //Arrange
    const partsData = { partsOrQuestions: [
      {
        glassLocation: "Windshield",
        glassName: "Single",
        partQuestions: null,
        parts: [
          {
            color: "Green Tint, Green Shade",
            description: "rain sensor, solar",
            partNumber: "FW02728GGYN",
            requiresCapabilityQuestions: false,
            requiresRecalibration: false 
          },
          {
            color: "Green Tint, Green Shade",
            description: "rain sensor, solar, hydrophobic coating",
            partNumber: "FW02760GGYN",
            requiresCapabilityQuestions: false,
            requiresRecalibration: false
          }
        ]},
        {
          glassName: "Stationary",
          glassLocation: "Rear",
          parts: [
            {
              partNumber: "DB09626GTYN",
              description: "heated glass, solar, antenna",
              color: "Green Tint",
              requiresRecalibration: false,
              requiresCapabilityQuestions: false,
              childParts: null
            },
            {
              partNumber: "DB09821GTYN",
              description: "heated glass, solar, antenna, onstar",
              color: "Green Tint",
              requiresRecalibration: false,
              requiresCapabilityQuestions: false,
              childParts: null
            }
          ],
          "partQuestions": null
        }
      ]};

    const { wrapper } = setupMocks({
      pageHeaderWidgetHeaderText: "",
      mountOptionsMockData: {
        router: { navigateAfterSave: jest.fn(), },
        actionList: [{ actionName: storeActions.GET_PARTS_OR_QUESTIONS, data: partsData, },],
        store: {
          getters: {
            vehicle: {},
          },
        },
      },
    });

    wrapper.vm.selectedDamageLocations = ["Windshield"];
    wrapper.vm.selectedWindshieldOptions = { 
      selectedWindshieldChipCount : null,
      selectedWindshieldReplaceOptions : ["Single"], 
      selectedWindshieldDamageType: ["Replace"]
    };

    const expectedGlassToReplace = [{location: "Windshield", name: "Single"},];

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );
      
    await wrapper.vm.forwardButtonAction();

    //Assert
    expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalled();
    expect(wrapper.vm.selectedGlassToReplace()).toEqual(expectedGlassToReplace);
    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_IS_REPAIR, false);
    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_GLASS_TO_REPLACE, expectedGlassToReplace);
  });
});


describe("vehicle-damage.vue", () => {
  test("Windshield repair on ForwardButtonAction triggers a router.navigate and saves selection to store", async () => {
    //Arrange
    const partsData = { partsOrQuestions: []};
    const { wrapper } = setupMocks({
      pageHeaderWidgetHeaderText: "",
      mountOptionsMockData: {
        router: { navigate: jest.fn(), },
        actionList: [{ actionName: storeActions.GET_PARTS_OR_QUESTIONS, data: partsData, },],
        store: {
          getters: {
            vehicle: {},
          },
        },
      },
    });

    wrapper.vm.selectedDamageLocations = ["Windshield"];
    wrapper.vm.selectedWindshieldOptions = { 
      selectedWindshieldChipCount : [2],
      selectedWindshieldDamageType: ["Repair"]
    };

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );
      
    await wrapper.vm.forwardButtonAction();

    //Assert
    expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_IS_REPAIR, true);
    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_NUMBER_OF_CHIPS, 2);
  });
});

describe("vehicle-damage.vue", () => {
  test("isWindshieldDamageLocation is true when windshield is selected", async () => {

    //Arrange
    const { wrapper } = setupMocks({});

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );

    wrapper.vm.selectedDamageLocations = ["Windshield"];

    //Assert
    expect(wrapper.vm.isWindshieldDamageLocation).toEqual(true);
  });
});

describe("vehicle-damage.vue", () => {
  test("isSideDoorDamageLocation is true Side door is selected", async () => {

    //Arrange
    const { wrapper } = setupMocks({});

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );

    wrapper.vm.selectedDamageLocations = ["Sidedoor"];

    //Assert
    expect(wrapper.vm.isSideDoorDamageLocation).toEqual(true);
  });
});


describe("vehicle-damage.vue", () => {
  test("isRearWindowDamageLocation is true if Rear Window damage is selected", async () => {

    //Arrange
    const { wrapper } = setupMocks({});

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );

    wrapper.vm.selectedDamageLocations = ["RearWindow"];

    //Assert
    expect(wrapper.vm.isRearWindowDamageLocation).toEqual(true);
  });
});

describe("vehicle-damage.vue", () => {
  test("isWindshieldRepair is true if windshield repair is selected", async () => {

    //Arrange
    const { wrapper } = setupMocks({});

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );

    wrapper.vm.selectedDamageLocations = ["Windshield"];
    wrapper.vm.selectedWindshieldOptions = { selectedWindshieldDamageType: ["Repair"]};

    //Assert
    expect(wrapper.vm.isWindshieldRepair).toEqual(true);
  });
});

describe("vehicle-damage.vue", () => {
  test("isWindshieldRepair is false if windshield damage is not selected", async () => {

    //Arrange
    const { wrapper } = setupMocks({});

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );

    wrapper.vm.selectedDamageLocations = ["SideDoor"];
    wrapper.vm.selectedWindshieldOptions = { selectedWindshieldDamageType: ["Repair"]};

    //Assert
    expect(wrapper.vm.isWindshieldRepair).toEqual(false);
  });
});

describe("vehicle-damage.vue", () => {
  test("isDriverSideReplace is true if side door driver is selected", async () => {

    //Arrange
    const { wrapper } = setupMocks({});

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );

    wrapper.vm.selectedDamageLocations = ["Sidedoor"];
    wrapper.vm.sideDoorOptionsData = { selectedDoorSides: ["DriverSide"]};

    //Assert
    expect(wrapper.vm.isDriverSideReplace).toEqual(true);
  });
});

describe("vehicle-damage.vue", () => {
  test("isPassengerSideReplace is true if side door passenger selected", async () => {

    //Arrange
    const { wrapper } = setupMocks({});

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );

    wrapper.vm.selectedDamageLocations = ["Sidedoor"];
    wrapper.vm.sideDoorOptionsData = { selectedDoorSides: ["PassengerSide"]};

    //Assert
    expect(wrapper.vm.isPassengerSideReplace).toEqual(true);
  });
});

describe("vehicle-damage.vue", () => {
  test("Call invalidation, ResetPartsAndState should be called", async () => {

    //Arrange
    const { wrapper } = setupMocks({});

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );

    wrapper.vm.resetDependentState();

    //Assert
    expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES)

  });
});

const damageLocations = [["Windshield", [damageLocationsSelected.WINDSHIELD]],
               ["Driver", [damageLocationsSelected.SIDEDOOR]],
               ["Passenger", [damageLocationsSelected.SIDEDOOR]],
               ["Rear", [damageLocationsSelected.REARWINDOW]]];
describe("vehicle-damage.vue", () => {
  test.each(damageLocations)("getDamageLocationsFromStore for %s returns expected %s", async (damageLocation, expectedGlass) => {

    //Arrange
    const { wrapper } = setupMocks({});

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );

    store.getters = { vehicle: { carId: "C0000000" }, eventBusItem: jest.fn(), damage: { glassToReplace: [{location: damageLocation}] }, isRepair: true};

    var glassSelections = wrapper.vm.getDamageLocationsFromStore();
      
    //Assert
    expect(glassSelections).toEqual(expectedGlass);

  });
});

const storeWindshieldOptions = [[1, false, "Windshield", "Single", { selectedWindshieldDamageType: [damageLocationsSelected.REPLACE], 
                                selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.SINGLE]}],
                                [2, false, "Windshield", "Driver", { selectedWindshieldDamageType: [damageLocationsSelected.REPLACE], 
                                  selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.DRIVER]}],
                                [3, false, "Windshield", "Passenger", { selectedWindshieldDamageType: [damageLocationsSelected.REPLACE], 
                                  selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.PASSENGER]}],
                                [4, true, "", "", { selectedWindshieldDamageType: [damageLocationsSelected.REPAIR], 
                                  selectedWindshieldChipCount: [2], selectedWindshieldReplaceOptions: []}]
                               ];
describe("vehicle-damage.vue", () => {
  test.each(storeWindshieldOptions)("getWindshieldOptionsFromStore test #%s", async (testNum, isRepair, damageLocation, damageName, expectedWindshieldOptions) => {

    //Arrange
    const { wrapper } = setupMocks({});

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );

    store.getters = { 
      vehicle: 
        { carId: "C0000000" }, 
        eventBusItem: jest.fn(),
        damage: 
          { 
            glassToReplace: [{location: damageLocation, name: damageName}],
            isRepair: isRepair,
            numberOfChips: 2 
          }, 
      };

    var windshieldSelections = wrapper.vm.getWindshieldOptionsFromStore();
      
    //Assert
    expect(windshieldSelections).toEqual(expectedWindshieldOptions);

  });
});

const driverDoorSides = [["Driver", "Front", [damageLocationsSelected.FRONT]],
                   ["Driver", "Back", [damageLocationsSelected.BACK]],
                   ["Driver", "Vent", [damageLocationsSelected.VENT]],
                   ["Driver", "Quarter", [damageLocationsSelected.QUARTER]]
                  ];
describe("vehicle-damage.vue", () => {
  test.each(driverDoorSides)("getDriverSideReplaceOptionsFromStore for %s-%s returns expected %s", async (damageLocation, damageName, expectedGlass) => {

    //Arrange
    const { wrapper } = setupMocks({});

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );

    store.getters = { vehicle: { carId: "C0000000" }, eventBusItem: jest.fn(), damage: { glassToReplace: [{location: damageLocation, name: damageName}] }, isRepair: true};

    var glassSelections = wrapper.vm.getDriverSideReplaceOptionsFromStore();
      
    //Assert
    expect(glassSelections).toEqual(expectedGlass);

  });
});

const passengerDoorSides = [["Passenger", "Front", [damageLocationsSelected.FRONT]],
                   ["Passenger", "Back", [damageLocationsSelected.BACK]],
                   ["Passenger", "Vent", [damageLocationsSelected.VENT]],
                   ["Passenger", "Quarter", [damageLocationsSelected.QUARTER]]
                  ];
describe("vehicle-damage.vue", () => {
  test.each(passengerDoorSides)("getPassengerSideReplaceOptionsFromStore for %s-%s returns expected %s", async (damageLocation, damageName, expectedGlass) => {

    //Arrange
    const { wrapper } = setupMocks({});

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );

    store.getters = { vehicle: { carId: "C0000000" }, eventBusItem: jest.fn(), damage: { glassToReplace: [{location: damageLocation, name: damageName}] }, isRepair: true};

    var glassSelections = wrapper.vm.getPassengerSideReplaceOptionsFromStore();
      
    //Assert
    expect(glassSelections).toEqual(expectedGlass);

  });
});

const rearReplaceOptions = [["Rear", "Stationary", [damageLocationsSelected.STATIONARY]],
                   ["Rear", "Slider", [damageLocationsSelected.SLIDER]]
                  ];
describe("vehicle-damage.vue", () => {
  test.each(rearReplaceOptions)("getRearReplaceOptionsFromStore for %s-%s returns expected %s", async (damageLocation, damageName, expectedGlass) => {

    //Arrange
    const { wrapper } = setupMocks({});

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );

    store.getters = { vehicle: { carId: "C0000000" }, eventBusItem: jest.fn(), damage: { glassToReplace: [{location: damageLocation, name: damageName}] }, isRepair: true};

    var glassSelections = wrapper.vm.getRearReplaceOptionsFromStore();
      
    //Assert
    expect(glassSelections).toEqual(expectedGlass);

  });
});

describe("vehicle-damage.vue", () => {
  test("when onInvalidSubmit is triggered with errors focus will be put on the first element with an error", async () => {

    //Arrange
    const { wrapper } = setupMocks({});
    const mockedValidationPayload = {
      values: {},
      errors: {
        driverSideOptions: 'Please select window', 
        passengerSideOptions: 'Please select window'
      },
      results: {},
    }
    const newObj = document.createElement('input');
    newObj.setAttribute("id", "testInput");
    newObj.setAttribute("data-focus-target", "driverSideOptions");
    document.body.appendChild(newObj);
    const testInputElement = document.getElementById("testInput");

    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );
    wrapper.vm.onInvalidSubmit(mockedValidationPayload);
    await nextTick();
    const focusedEl = document.activeElement;

    //Assert
    expect(testInputElement).toBe(focusedEl);
  });
});

// THE FOLLOWING TEST IS NOT NECESSARILY REQUIRED FOR COVERAGE
//    BUT KEEP FOR AN EXAMPLE OF A VALIDATION TEST
// 
describe("vehicle-damage.vue", () => {
  test("when validation rules are set they should validate correctly", async () => {

    //Arrange
    const { wrapper } = setupMocks({});
    
    //Act
    vehicleDamage.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-damage" } },
      undefined,
      (c) => c(wrapper.vm)
    );
    const testNull = validate( "", "replace-options-required");
    const testString = validate( "sldfj", "replace-options-required");
    await flushPromises();

    //Assert
    testNull.then(function(data) {
      expect(data.valid).toEqual(false);
    });
    testString.then(function(data) {
      expect(data.valid).toEqual(true);
    });

  });
});


function setupMocks({
  pageHeaderWidgetHeaderText = {},
  mountOptionsMockData = {
    router: {
      navigate: jest.fn(),
    },
    store: {
      getters: {
        vehicle: {},
      },
    },
  },
}) {
  //Mock api responses
  baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
  const apiResponses = {
    cmsContent: {
      FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
      VehicleBannerWidget: {
        GenericVehicleImage:
          "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
      },
      FunnelHeaderWidget: {
        LogoImage:
          "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
      },
    },
    damageOptions: {
      driverSideOptions: {
        availableReplacementOptions: ["Front", "Back", "Side"],
      },
      passengerSideOptions: {
        availableReplacementOptions: ["Front", "Back", "Side"],
      },
      windshieldOptions: {
        availableReplacementOptions: ["Single", "Driver", "Passenger"],
      },
      backGlassOptions: {
        availableReplacementOptions: ["Front", "Back", "Side"],
      },
    },
  };

  const apiPromise = Promise.resolve(apiResponses);

  settleAllPromises.mockImplementation(() => apiPromise);
  fetchCmsContentForPage.mockImplementation(() => Promise.resolve());

  //Mock damage initialize methods
  funnelHeader.methods = {
    initializeComponent: jest.fn(),
  };

  vehicleBanner.methods = {
    initializeComponent: jest.fn(),
  };

  funnelSubHeader.methods = {
    initializeComponent: jest.fn(),
  };

  damageLocationQuestion.methods = {
    initializeComponent: jest.fn(),
  };

  sideDoorOptions.methods = {
    initializeComponent: jest.fn(),
  };

  windshieldOptions.methods = {
    initializeComponent: jest.fn(),
  };

  replaceOptionsQuestion.methods = {
    initializeComponent: jest.fn(),
    updateSelectedValues: jest.fn(),
  };

  funnelFooter.methods = {
    initializeComponent: jest.fn(),
  }

  const mountOptions = getMountOptions(mountOptionsMockData);
  mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods

  const wrapper = mount(vehicleDamage, mountOptions);

  const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
  funnelHeaderWrapper.vm.initializeComponent =
    funnelHeader.methods.initializeComponent;

  const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
  vehicleBannerWrapper.vm.initializeComponent =
    vehicleBanner.methods.initializeComponent;

  const sideDoorOptionsWrapper = wrapper.findComponent({ name: "sideDoorOptions" });
  sideDoorOptionsWrapper.vm.initializeComponent =
    sideDoorOptions.methods.initializeComponent;

  const windshieldOptionsWrapper = wrapper.findComponent({ name: "windshieldOptions" });
  windshieldOptionsWrapper.vm.initializeComponent =
    windshieldOptions.methods.initializeComponent;

  const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
  funnelSubHeaderWrapper.vm.initializeComponent =
    funnelSubHeader.methods.initializeComponent;

  const backGlassOptionsWrapper = wrapper.findComponent({ name: "replaceOptionsQuestion" });
  backGlassOptionsWrapper.vm.initializeComponent =
    replaceOptionsQuestion.methods.initializeComponent;

  const damageLocationQuestionWrapper = wrapper.findComponent({ name: "damageLocationQuestion" });
  damageLocationQuestionWrapper.vm.initializeComponent =
    damageLocationQuestion.methods.initializeComponent;

  const funnelFooterWrapper = wrapper.findComponent({ name: "funnelFooter" });
  funnelFooterWrapper.vm.initializeComponent = 
    funnelFooter.methods.initializeComponent;

  return { wrapper, apiPromise };
}