Merge branch 'develop' into feature/Digital/SSR-93
# Conflicts: # src/helpers/unit-test-helper.js
This commit is contained in:
commit
94607d9a89
4 changed files with 143 additions and 3 deletions
|
|
@ -43,4 +43,4 @@ export function getMountOptions(mockData) {
|
|||
};
|
||||
|
||||
return { global };
|
||||
}
|
||||
}
|
||||
|
|
|
|||
87
src/layouts/vehicle-year/vehicle-year.spec.js
Normal file
87
src/layouts/vehicle-year/vehicle-year.spec.js
Normal 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 };
|
||||
}
|
||||
53
src/layouts/vehicle-year/year-question/year-question.spec.js
Normal file
53
src/layouts/vehicle-year/year-question/year-question.spec.js
Normal 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 };
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in a new issue