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

# Conflicts:
#	src/helpers/unit-test-helper.js
This commit is contained in:
Jason Wheeler 2022-11-01 10:56:36 -04:00
commit 94607d9a89
4 changed files with 143 additions and 3 deletions

View file

@ -43,4 +43,4 @@ export function getMountOptions(mockData) {
};
return { global };
}
}

View file

@ -0,0 +1,87 @@
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 { getMountOptions } from "@/helpers/unit-test-helper.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("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 = {},
mountOptionsMockData = {},
}) {
//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 mountOptions = getMountOptions(mountOptionsMockData);
const wrapper = shallowMount(vehicleYear, mountOptions);
const yearQuestionWrapper = wrapper.findComponent({ name: "yearQuestion" });
yearQuestionWrapper.vm.initializeComponent = yearQuestion.methods.initializeComponent;
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
return { wrapper, apiPromise };
}

View file

@ -0,0 +1,53 @@
import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { useMainStore } from "@/store";
describe("year-question.vue", () => {
test("Data from store api are used as radio question answers.", async () => {
//Arrange
const { wrapper, cmsContent } = setupMocks({
dataFromStoreApi: ["2023", "2022", "2021"],
});
//Act
const initialData = yearQuestion.methods.loadInitialData.call(wrapper.vm);
yearQuestion.methods.initializeComponent.call(
wrapper.vm,
initialData
);
//Assert
const buttonQuestionComponent = await wrapper.findComponent({
name: "buttonQuestion",
});
expect(buttonQuestionComponent.attributes("answers")).toBe(
"2023,2022,2021"
);
});
});
function setupMocks({
modelValueProp = "1900",
cmsQuestionText = "CMS text goes here",
dataFromStoreApi = [],
}) {
const mountOptions = getMountOptions();
const store = useMainStore();
store.getVehicleYears = jest.fn(() => dataFromStoreApi);
//Mock props
mountOptions.propsData = {
modelValue: modelValueProp,
};
const wrapper = shallowMount(yearQuestion, mountOptions);
//Mock CMS content
const cmsContent = {
QuestionText: cmsQuestionText,
};
return { wrapper, cmsContent };
}

View file

@ -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';