Merge branch 'develop' into feature/Digital/SSR-100

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

@@ -107,11 +107,11 @@ function setupMocks({
       VehicleMakeQuestion: vehicleMakeQuestionCmsContent,
       VehicleBannerWidget: {
         GenericVehicleImage:
-          "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+          "https://digitalisscms.dev.safelite.io/images/default-source/default-album/blurred-image.jpg",
       },
       SiteHeaderWidget: {
         LogoImage:
-          "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+          "https://digitalisscms.dev.safelite.io/images/default-source/default-album/logos/insuranceLogo.jpg",
       },
     },
     makeQuestionInitialData: makeQuestionInitialData,

src/layouts/vehicle-model/model-question/model-question.spec.js

@@ -0,0 +1,71 @@
+import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { useMainStore } from "@/store";
+
+describe("model-question.vue", () => {
+  test("Selected model is emitted upon selection.", async () => {
+    //Arrange
+    const { wrapper } = setupMocks({ modelValueProp: "Accord" });
+    const modelToSelect = "Civic";
+
+    //Act
+    wrapper.setValue({ selectedModel: modelToSelect });
+    await wrapper.vm.$nextTick();
+
+    //Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([
+      { selectedModel: "Civic" },
+    ]);
+  });
+});
+
+
+describe("model-question.vue", () => {
+  test("Data from store api are used as radio question answers.", async () => {
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({
+      dataFromStoreApi: ["accord", "civic", "insight"],
+    });
+
+    //Act
+    const initialData = modelQuestion.methods.loadInitialData.call(wrapper.vm);
+    modelQuestion.methods.initializeComponent.call(
+      wrapper.vm,
+      initialData
+    );
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({
+      name: "buttonQuestion",
+    });
+    expect(buttonQuestionComponent.attributes("answers")).toBe(
+      "accord,civic,insight"
+    );
+  });
+});
+
+function setupMocks({
+  modelValueProp = "1900",
+  cmsQuestionText = "CMS text goes here",
+  dataFromStoreApi = [],
+}) {
+  //Mock store
+  const store = useMainStore();
+  store.getVehicleModels =  jest.fn(() => dataFromStoreApi);
+
+  const mountOptions = getMountOptions();
+
+  //Mock props
+  mountOptions.propsData = {
+    modelValue: modelValueProp,
+  };
+
+  const wrapper = shallowMount(modelQuestion, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    QuestionText: cmsQuestionText,
+  };
+  return { wrapper, cmsContent };
+}

src/layouts/vehicle-model/vehicle-model.spec.js

@@ -0,0 +1,138 @@
+// Components
+import vehicleModel from "@/layouts/vehicle-model/vehicle-model.vue";
+import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
+
+// Supporting files
+
+import { shallowMount } from "@vue/test-utils";
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import baseMixin from "@/mixins/base-mixin.js";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { nextTick } from "vue";
+import { useMainStore } from "@/store";
+
+// 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("vehicle-model.vue", () => {
+  test("Model question component is initized with api data", async () => {
+    //Arange
+    const modelQuestionInitialData = ["accord", "civic", "insight"];
+    const { wrapper, apiPromise } = setupMocks({
+      modelQuestionInitialData: modelQuestionInitialData,
+    });
+    //Act
+    vehicleModel.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { issPage: "vehicle-model" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+    //Assert
+    apiPromise.finally(() => {
+      expect(modelQuestion.methods.initializeComponent).toHaveBeenCalledWith(
+        modelQuestionInitialData
+      );
+    });
+  });
+});
+
+describe("vehicle-model.vue", () => {
+  test("BackButtonAction triggers a router.navigateWithoutSaving change", async () => {
+    //Arrange
+    const { wrapper, apiPromise } = setupMocks({
+      pageHeaderWidgetHeaderText: "Select a model to get started",
+      mountOptionsMockData: {
+        router: {
+          navigate: jest.fn(),
+        },
+      },
+    });
+    //Act
+    vehicleModel.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { issPage: "vehicle-model" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+    wrapper.vm.backButtonAction();
+    await nextTick();
+    //Assert
+    apiPromise.finally(() => {
+      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+      });
+  });
+});
+describe("vehicle-model.vue", () => {
+  test("Make set, arePagePrerequisitesValid should be true ", async () => {
+    //Arrange
+    const { wrapper } = setupMocks({});
+    useMainStore().order.vehicle.make = "Honda";
+
+    //Act
+    vehicleModel.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { issPage: "vehicle-model" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+    await nextTick();
+
+    //Assert
+    expect(arePagePrerequisitesValid).toBe(true);
+  });
+});
+
+
+function setupMocks({
+  buttonQuestionContent = {},
+  modelQuestionInitialData = {},
+  pageHeaderWidgetHeaderText = {},
+  mountOptionsMockData = {},
+}) {
+  //Mock api responses
+  const apiResponses = {
+    cmsContent: {
+      FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
+      VehicleModelQuestion: buttonQuestionContent,
+      VehicleBannerWidget: {
+        GenericVehicleImage:
+        "https://digitalisscms.dev.safelite.io/images/default-source/default-album/blurred-image.jpg",
+      },
+      FunnelHeaderWidget: {
+        LogoImage:
+        "https://digitalisscms.dev.safelite.io/images/default-source/default-album/logos/insuranceLogo.jpg",
+      },
+    },
+    modelQuestionInitialData: modelQuestionInitialData,
+  };
+  const apiPromise = Promise.resolve(apiResponses);
+
+  settleAllPromises.mockImplementation(() => apiPromise);
+  fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+
+  //Mock model question methods
+  modelQuestion.methods = {
+    loadInitialData: jest.fn(),
+    initializeComponent: jest.fn(),
+  };
+  const mountOptions = getMountOptions(mountOptionsMockData);
+  const wrapper = shallowMount(vehicleModel, mountOptions);
+  wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
+
+  const modelQuestionWrapper = wrapper.findComponent({ name: "modelQuestion" });
+  modelQuestionWrapper.vm.initializeComponent =
+    modelQuestion.methods.initializeComponent;
+
+  return { wrapper, apiPromise };
+}

src/layouts/vehicle-year/vehicle-year.spec.js

@@ -5,6 +5,7 @@ import vehicleYear from "@/layouts/vehicle-year/vehicle-year.vue";
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
 import baseMixin from "@/mixins/base-mixin.js";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { nextTick } from "vue";
 
 
 // Mock our module for promises.
@@ -43,6 +44,27 @@ describe("vehicle-year.vue", () => {
   });
 });
 
+describe("vehicle-year.vue", () => {
+  test("arePagePrerequisitesValid should be true ", async () => {
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleYear.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { issPage: "vehicle-make" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+    await nextTick();
+
+    //Assert
+    expect(arePagePrerequisitesValid).toBe(true);
+  });
+});
+
 function setupMocks({
   vehicleYearQuestionCmsContent = {},
   yearQuestionInitialData = {},

src/layouts/vehicle-year/year-question/year-question.spec.js

@@ -3,6 +3,23 @@ import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { useMainStore } from "@/store";
 
+describe("year-question.vue", () => {
+  test("Selected year is emitted upon selection.", async () => {
+    //Arrange
+    const { wrapper } = setupMocks({ modelValueProp: "2020" });
+    const yearToSelect = "2021";
+
+    //Act
+    wrapper.setValue({ modelValue: yearToSelect });
+    await wrapper.vm.$nextTick();
+
+    //Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([
+      { modelValue: "2021" },
+    ]);
+  });
+});
+
 describe("year-question.vue", () => {
   test("Data from store api are used as radio question answers.", async () => {
     //Arrange