diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js new file mode 100644 index 00000000..9a30e353 --- /dev/null +++ b/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 }; +} diff --git a/src/router/router.spec.js b/src/router/router.spec.js index 8c15c36c..521b382e 100644 --- a/src/router/router.spec.js +++ b/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';