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
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 router from "@/router/";
|
||||||
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios"
|
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
|
||||||
import { issPageValues } from "@/router/router-constants/issPage-values";
|
import { issPageValues } from "@/router/router-constants/issPage-values";
|
||||||
|
|
||||||
import { createApp } from 'vue';
|
import { createApp } from 'vue';
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue