commit

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

@@ -0,0 +1,108 @@
+import { shallowMount } from "@vue/test-utils";
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+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 { useMainStore } from "@/store";
+import { createApp } from 'vue';
+import { createPinia } from "pinia";
+import { mapStores } from "pinia";
+import App from '@/App.vue';
+
+const vueApp = createApp(App);
+const pinia = createPinia();
+vueApp.use(pinia);
+const store = useMainStore();
+
+const mockMixin = {
+
+  methods: {
+    getCmsContent(widgetName, fieldName) {
+        return cmsData[widgetName][fieldName];
+    },
+ },
+ computed: {
+    ...mapStores(useMainStore),
+  }
+};
+
+
+// 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-year.vue", () => {
+  test("Year question component is initized with api data", async() => {
+    //Arrange
+    const yearQuestionInitialData = ["2023", "2022", "2021"];
+    const { wrapper, apiPromise } = setupMocks({
+      yearQuestionInitialData: yearQuestionInitialData,
+    });
+
+
+    //Act
+    vehicleYear.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { issPage: "vehicle-year" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(yearQuestion.methods.initializeComponent).toHaveBeenCalledWith(
+        yearQuestionInitialData
+      );
+    });
+  });
+});
+
+function setupMocks({
+  vehicleYearQuestionCmsContent = {},
+  yearQuestionInitialData = {},
+  pageHeaderWidgetHeaderText = {},
+}) {
+  //Mock api responses
+  const apiResponses = {
+    cmsContent: {
+      SiteSubHeaderWidget: { HeaderText: pageHeaderWidgetHeaderText },
+      VehicleYearQuestion: vehicleYearQuestionCmsContent,
+      VehicleBannerWidget: {
+        GenericVehicleImage:
+          "https://digitalisscms.dev.safelite.io/images/default-source/default-album/blurred-image.jpg",
+      },
+      SiteHeaderWidget: {
+        LogoImage:
+          "https://digitalisscms.dev.safelite.io/images/default-source/default-album/logos/insuranceLogo.jpg",
+      },
+    },
+    yearQuestionInitialData: yearQuestionInitialData,
+  };
+  const apiPromise = Promise.resolve(apiResponses);
+
+  settleAllPromises.mockImplementation(() => apiPromise);
+  fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+
+  //Mock year question methods
+  yearQuestion.methods = {
+    loadInitialData: jest.fn(),
+    initializeComponent: jest.fn(),
+  };
+
+  const wrapper = shallowMount(vehicleYear, {
+    mixins: [mockMixin]
+ });
+  
+  const yearQuestionWrapper = wrapper.findComponent({ name: "yearQuestion" });
+  yearQuestionWrapper.vm.initializeComponent = yearQuestion.methods.initializeComponent;
+  wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
+
+  return { wrapper, apiPromise };
+}

src/router/router.spec.js

@@ -1,5 +1,5 @@
-import  router  from "@/router/"
-import { navigationScenarios } from "@/router/router-constants/navigation-scenarios"
+import  router  from "@/router/";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 import { issPageValues } from "@/router/router-constants/issPage-values";
 
 import { createApp } from 'vue';