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

import { shallowMount, flushPromises } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue";
import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
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 { settleAllPromises } from "@/helpers/layout-helper.js";
import { nextTick } from "vue";

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

describe("vehicle-make.vue", () => {
  test("Make question component is initized with api data", async (done) => {

    //Arrange
    const radioQuestionCmsContent = { QuestionText: "What make is your vehicle?" };
    const makeQuestionInitialData = ["honda", "ford", "dodge"];
    const { wrapper, apiPromise } = setupMocks( { 
      radioQuestionCmsContent: radioQuestionCmsContent, 
      makeQuestionInitialData: makeQuestionInitialData,
    } );

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

    //Assert
    apiPromise.finally(() => {
      expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, makeQuestionInitialData);
      done();
    });
  });
});

describe("vehicle-make.vue", () => {
  test("Page header is initailized with api data", async (done) => {

    //Arrange
    const pageHeaderWidgetHeaderText = "Select a make to get started";
    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });

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

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

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

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

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

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

describe("vehicle-make.vue", () => {
  test("BackButtonAction triggers a router.navigate change", async (done) => {
    
    //Arrange
    const { wrapper, apiPromise } = setupMocks( { 
      pageHeaderWidgetHeaderText: "Select a make to get started",
      mountOptionsMockData: {
        router: {
          navigate: jest.fn()
        },
      },
    });
    
    //Act
    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
    wrapper.vm.backButtonAction();
    await nextTick();

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

function setupMocks({
  radioQuestionCmsContent = {},
  makeQuestionInitialData = {},
  pageHeaderWidgetHeaderText = {},
  mountOptionsMockData = {},
}) {
  
  //Mock api responses
  const apiResponses = {
    cmsContent: {
      FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText],
      RadioQuestionWidget: [radioQuestionCmsContent],
      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",
        },
      ],
    },
    makeQuestionInitialData: makeQuestionInitialData,
  };
  const apiPromise = Promise.resolve(apiResponses);
  settleAllPromises.mockImplementation(() => apiPromise);

  //Mock make question methods
  makeQuestion.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(vehicleMake, mountOptions);
  const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" });
  makeQuestionWrapper.vm.initializeComponent = makeQuestion.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 };
}