DigitalConsumer.FixMyGlass/src/layouts/estimate/estimate.spec.js

//Components 
import estimate from "@/layouts/estimate/estimate.vue";
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";

//Supporting files 
import { storeKey } from "vuex";
import store from "@/store";
import { storeMutations } from "@/constants/store-mutations";
import { settleAllPromises } from "@/helpers/layout-helper.js";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import baseMixin from "../../mixins/base-mixin";
import { vinLookupMethodSelections } from "@/constants/vin-lookup-method-selections.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(),
}));

describe("estimate.vue", () => {
  test("Selected vin option is emitted upon selection.", async () => {

    //Arrange 
    const { wrapper } = setupMocks({ modelValueProp: ["Provide my VIN manually most specific to your vehicle"] });

    //Act 
    wrapper.setValue({ modelValue: ["Provide my license plate # Most accurate VIN match"] });
    await wrapper.vm.$nextTick();

    //Assesrt
    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Provide my license plate # Most accurate VIN match"] }]);
  });
  test("isRepair is set to true, arePagePrerequisitesValid should return true", async () => {

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

    //Act 
    store.commit( storeMutations.UPDATE_IS_REPAIR, true );

    let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();

    //Assert
    expect(arePagePrerequisitesValid).toBe(true);
  });
  test("isRepair is set to false, arePagePrerequisitesValid should return true", async () => {

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

    //Act 
    store.commit( storeMutations.UPDATE_IS_REPAIR, false );

    let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();

    //Assert
    expect(arePagePrerequisitesValid).toBe(true);
  });
  test("isRepair is set to null, arePagePrerequisitesValid should return false", async () => {

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

    //Act 
    store.commit( storeMutations.UPDATE_IS_REPAIR, null );

    let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();

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

  test("After selecting provide my home address on ForwardButtonAction triggers a router.navigate", async () => {

    //Arrange 
    const { wrapper } = setupMocks({});
    await wrapper.setData({
      selectedValues: [vinLookupMethodSelections.HOMEADDRESS]
    })

    //Act
    wrapper.vm.forwardButtonAction();

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

  });

  test("After selecting provide my manual vin on ForwardButtonAction triggers a router.navigate", async () => {

    //Arrange 
    const { wrapper } = setupMocks({});
    await wrapper.setData({
      selectedValues: [vinLookupMethodSelections.MANUALVIN]
    })

    //Act
    wrapper.vm.forwardButtonAction();

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

  });

  test("BackButtonAction triggers a router.navigate change", async () => {

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

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

    wrapper.vm.backButtonAction();

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

  test("Provide my license plate on ForwardButtonAction triggers a router.navigate", async () => {

     //Arrange 
     const { wrapper } = setupMocks({});
     await wrapper.setData({
       selectedValues: [vinLookupMethodSelections.LICENSEPLATE]
     })
 
     //Act
     wrapper.vm.forwardButtonAction();
 
     //Assert
     expect(wrapper.vm.$router.navigate).toHaveBeenCalled();

  });

});

function setupMocks({
  modelValueProp = ["Provide my VIN manually most specific to your vehicle"],
  isMultiSelect = false,
  groupName = "estimate",
  cmsQuestionText = "Let's get your VIN. Or we can look it up for you!",
  cmsAnswers = [{ Name: "Provide my VIN manually Most specific to your vehicle" }, { Name: "Provide my license plate # Most accurate VIN match" }, { Name: "Provide my home address Most convenient VIN match" }],
  dataFromApi = [],
  mountOptionsMockData = {
    router: {
      navigate: jest.fn(),
    },
  },
}) {

  //Mock CMS Content
  const cmsContent = {
    groupName: groupName,
    QuestionText: cmsQuestionText,
    Answers: cmsAnswers
  };

  //Mock props
  const mockMixin = {
    methods: {
      getCmsContent: jest.fn()
    }
  }

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

  const mountOptions = getMountOptions({ ...mountOptionsMockData, mixins: [baseMixin] });
  mountOptions['attachTo'] = document.body;

  const wrapper = shallowMount(estimate, mountOptions);

  return { wrapper, apiPromise };

}