DigitalConsumer.FixMyGlass/src/layouts/vehicle-style/vehicle-style.spec.js

// Components
import vehicleStyle from "@/layouts/vehicle-style/vehicle-style.vue";
import funnelHeader from "@/common-components/funnel-header/funnel-header";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";

// Supporting files
import { settleAllPromises } from "@/helpers/layout-helper.js";
import { nextTick } from "vue";
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { storeActions } from "@/constants/store-actions";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";

// 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", () => ({
  getters: {
    vehicle: {
      model: "TL",
    },
  },
}));

describe("vehicle-style.vue", () => {
  test("Style question component is initized with api data", async (done) => {
    //Arrange
    const vehicleStyleQuestionCmsContent = {
      QuestionText: "What style is your vehicle?",
    };
    const styleQuestionInitialData = ["2 Door", "4 Door"];
    const { wrapper, apiPromise } = setupMocks({
      vehicleStyleQuestionCmsContent: vehicleStyleQuestionCmsContent,
      styleQuestionInitialData: styleQuestionInitialData,
    });

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

    //Assert
    apiPromise.finally(() => {
      expect(styleQuestion.methods.initializeComponent).toHaveBeenCalledWith(
        vehicleStyleQuestionCmsContent,
        styleQuestionInitialData
      );
      done();
    });
  });
});

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

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

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

describe("vehicle-style.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
    vehicleStyle.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-style" } },
      undefined,
      (c) => c(wrapper.vm)
    );

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

describe("vehicle-style.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
    vehicleStyle.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-style" } },
      undefined,
      (c) => c(wrapper.vm)
    );

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

describe("vehicle-style.vue", () => {
  test("BackButtonAction triggers a router.navigate change", async (done) => {
    //Arrange
    const { wrapper, apiPromise } = setupMocks({
      pageHeaderWidgetHeaderText: "Select a style to get started",
      mountOptionsMockData: {
        router: {
          navigate: jest.fn(),
        },
      },
    });

    //Act
    vehicleStyle.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-style" } },
      undefined,
      (c) => c(wrapper.vm)
    );
    wrapper.vm.backButtonAction();
    await nextTick();

    //Assert
    apiPromise.finally(() => {
      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
      done();
    });
  });
});

describe("vehicle-style.vue", () => {
  test("selectVehicle triggers a dispatchNonBlockingStoreAction commit", async (done) => {
    //Arrange
    const { wrapper, apiPromise } = setupMocks({
      pageHeaderWidgetHeaderText: "Select a style to get started",
      mountOptionsMockData: {
        store: {
          commit: jest.fn(),
          getters: {
            vehicle: {},
          },
        },
        actionList: [
          {
            actionName: storeActions.SET_VEHICLE,
            data: "mockData",
          },
        ],
      },
    });

    //Act
    vehicleStyle.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-style" } },
      undefined,
      (c) => c(wrapper.vm)
    );
    wrapper.vm.setVehicle();
    await nextTick();

    //Assert
    apiPromise.finally(() => {
      expect(wrapper.vm.dispatchNonBlockingStoreAction).toHaveBeenCalled();
      done();
    });
  });
});

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

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

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

    //Assert
    expect(arePagePrerequisitesValid).toBe(true);
  });
});
function setupMocks({
  vehicleStyleQuestionCmsContent = {},
  styleQuestionInitialData = {},
  pageHeaderWidgetHeaderText = {},
  mountOptionsMockData = {},
}) {
  //Mock api responses
  const apiResponses = {
    cmsContent: {
      FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
      VehicleStyleQuestion: vehicleStyleQuestionCmsContent,
      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",
      },
    },
    styleQuestionInitialData: styleQuestionInitialData,
  };

  const apiPromise = Promise.resolve(apiResponses);

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

  //Mock style question methods
  styleQuestion.methods = {
    loadInitialData: jest.fn(),
    initializeComponent: jest.fn(),
  };

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

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

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

  const mountOptions = getMountOptions(mountOptionsMockData);
  const wrapper = shallowMount(vehicleStyle, mountOptions);

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

  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;

  return { wrapper, apiPromise };
}