DigitalConsumer.FixMyGlass/src/layouts/vin-lookup/vin-lookup.spec.js

// Components
import vinLookup from "@/layouts/vin-lookup/vin-lookup.vue";
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("vin-lookup.vue", () => {

  test("Call resetDependentState", async() => {
    const {wrapper} = setupMocks({});
    wrapper.vm.resetDependentState();
    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
  });

});

// TEMP
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(vinLookup, 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 funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
  funnelSubHeaderWrapper.vm.initializeComponent =
    funnelSubHeader.methods.initializeComponent;

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

  return { wrapper, apiPromise };
}