Merge branch 'develop' into feature/digital/SSR-179
This commit is contained in:
Kroell
commit
c5efeac70a
2 changed files with 124 additions and 28 deletions
92
src/layouts/welcome-page/welcome-page.spec.js
Normal file
92
src/layouts/welcome-page/welcome-page.spec.js
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
import welcomePage from "@/layouts/welcome-page/welcome-page.vue";
|
||||
|
||||
// Supporting files
|
||||
// Supporting files
|
||||
import { shallowMount } from '@vue/test-utils';
|
||||
import { settleAllPromises } from "@/helpers/layout-helper.js";
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
import { applicationConfig } from "@/constants/application-config";
|
||||
|
||||
// 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("welcome-page.vue", () => {
|
||||
test("Should render welcomePage sub-components (policyNumber, policyZipCode, dateOfLoss, damageCause etc.)", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({});
|
||||
// Act
|
||||
const policyNumber = wrapper.findComponent({ ref: "policyNumber" });
|
||||
const dateOfLoss = wrapper.findComponent({ ref: "dateOfLoss" });
|
||||
const damageCause = wrapper.findComponent({ ref: "damageCause" });
|
||||
const damageCity = wrapper.findComponent({ ref: "damageCity" });
|
||||
const state = wrapper.findComponent({ ref: "state" });
|
||||
const glassOnlyDamage = wrapper.findComponent({ ref: "glassOnlyDamage" });
|
||||
const phoneNumber = wrapper.findComponent({ ref: "phoneNumber" });
|
||||
const email = wrapper.findComponent({ ref: "email" });
|
||||
|
||||
|
||||
// Assert
|
||||
expect(policyNumber.exists()).toBe(true);
|
||||
expect(dateOfLoss.exists()).toBe(true);
|
||||
expect(damageCause.exists()).toBe(true);
|
||||
expect(damageCity.exists()).toBe(true);
|
||||
expect(state.exists()).toBe(true);
|
||||
expect(glassOnlyDamage.exists()).toBe(true);
|
||||
expect(phoneNumber.exists()).toBe(true);
|
||||
expect(email.exists()).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
function setupMocks({
|
||||
pageHeaderWidgetHeaderText = {},
|
||||
pageFooterWidgetCmsContent = {},
|
||||
mountOptionsMockData = {},
|
||||
}) {
|
||||
//Mock api responses
|
||||
const apiResponses = {
|
||||
cmsContent: {
|
||||
SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
|
||||
VehicleBannerWidget: {
|
||||
GenericVehicleImage:
|
||||
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`,
|
||||
},
|
||||
SiteHeaderWidget: {
|
||||
LogoImage:
|
||||
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
|
||||
},
|
||||
SiteFooterWidget: pageFooterWidgetCmsContent,
|
||||
|
||||
},
|
||||
};
|
||||
|
||||
mountOptionsMockData = {
|
||||
...mountOptionsMockData,
|
||||
router: {
|
||||
navigate: jest.fn(),
|
||||
},
|
||||
};
|
||||
|
||||
const apiPromise = Promise.resolve(apiResponses);
|
||||
|
||||
settleAllPromises.mockImplementation(() => apiPromise);
|
||||
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
|
||||
|
||||
const mountOptions = getMountOptions(mountOptionsMockData);
|
||||
|
||||
const wrapper = shallowMount(welcomePage, mountOptions);
|
||||
|
||||
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
|
||||
|
||||
return { wrapper, apiPromise };
|
||||
}
|
||||
|
||||
|
|
@ -9,8 +9,9 @@
|
|||
<textboxQuestion
|
||||
inputId="policyNumberField"
|
||||
cmsWidgetName="PolicyNumberQuestion"
|
||||
v-model="welcomePageModel.policyNumber"
|
||||
v-model="policyNumber"
|
||||
isRequired
|
||||
ref="policyNumber"
|
||||
disableAutoFill
|
||||
validationRules="policy-number-required" />
|
||||
</div>
|
||||
|
|
@ -20,9 +21,10 @@
|
|||
<textboxQuestion
|
||||
type="date"
|
||||
cmsWidgetName="DateOfLossQuestion"
|
||||
v-model="welcomePageModel.dateOfLoss"
|
||||
v-model="dateOfLoss"
|
||||
inputId="dateOfLossField"
|
||||
isRequired
|
||||
ref="dateOfLoss"
|
||||
disableAutoFill
|
||||
:max="new Date().toJSON().slice(0,10)"
|
||||
:min="'1972-12-01'"
|
||||
|
|
@ -39,7 +41,7 @@
|
|||
<div class="col">
|
||||
<dropdownQuestion
|
||||
cmsWidgetName="DamageCauseQuestion"
|
||||
v-model="welcomePageModel.damageCause"
|
||||
v-model="damageCause"
|
||||
ref="damageCause"
|
||||
inputId="damageCauseQuestionField"
|
||||
:options="DamageCauseOptions"
|
||||
|
|
@ -53,8 +55,9 @@
|
|||
<textboxQuestion
|
||||
inputId="damageCityField"
|
||||
cmsWidgetName="DamageCityQuestion"
|
||||
v-model="welcomePageModel.damageCity"
|
||||
v-model="damageCity"
|
||||
isRequired
|
||||
ref="damageCity"
|
||||
disableAutoFill
|
||||
validationRules="loss-city-required" />
|
||||
</div>
|
||||
|
|
@ -63,7 +66,7 @@
|
|||
<div class="col">
|
||||
<dropdownQuestion
|
||||
cmsWidgetName="DamageStateQuestion"
|
||||
v-model="welcomePageModel.damageState"
|
||||
v-model="damageState"
|
||||
ref="state"
|
||||
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
|
||||
:options="stateOptions"
|
||||
|
|
@ -76,13 +79,14 @@
|
|||
<div class="row mt-4">
|
||||
<buttonQuestion
|
||||
cmsWidgetName="GlassOnlyQuestion"
|
||||
v-model="welcomePageModel.isDamageGlassOnly"
|
||||
v-model="isDamageGlassOnly"
|
||||
inputId = "isDamageGlassOnly"
|
||||
:answers="DamageGlassOnlyOptions"
|
||||
:questionText="DamageGlassOnlyQuestion"
|
||||
buttonTypeString="listButtonHorizontal"
|
||||
validationRules="damage-option-required"
|
||||
isRequired
|
||||
ref="glassOnlyDamage"
|
||||
disableAutoFill/>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
|
|
@ -90,9 +94,10 @@
|
|||
<textboxQuestion
|
||||
inputId="phoneNumberField"
|
||||
cmsWidgetName="PhoneNumberQuestion"
|
||||
v-model="welcomePageModel.phoneNumber"
|
||||
v-model="phoneNumber"
|
||||
validationRules="phone-number-required|phone-number-format"
|
||||
isRequired
|
||||
ref="phoneNumber"
|
||||
mask="###-###-####"
|
||||
disableAutoFill />
|
||||
</div>
|
||||
|
|
@ -102,7 +107,8 @@
|
|||
<textboxQuestion
|
||||
inputId="emailField"
|
||||
cmsWidgetName="EmailAddressQuestion"
|
||||
v-model="welcomePageModel.email"
|
||||
v-model="email"
|
||||
ref="email"
|
||||
validationRules="email-address-required|email-address-format"
|
||||
isRequired
|
||||
disableAutoFill />
|
||||
|
|
@ -168,23 +174,18 @@
|
|||
export default {
|
||||
name: "welcome-page",
|
||||
mixins: [BaseFormMixin],
|
||||
data: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
welcomePageModel: {
|
||||
policyNumber: "",
|
||||
policyZipCode: "",
|
||||
dateOfLoss: "",
|
||||
damageCause: "",
|
||||
damageState: "",
|
||||
damageCity: "",
|
||||
isDamageGlassOnly: "",
|
||||
phoneNumber: "",
|
||||
email: ""
|
||||
},
|
||||
}),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
policyNumber: "",
|
||||
policyZipCode: "",
|
||||
dateOfLoss: "",
|
||||
damageCause: "",
|
||||
damageState: "",
|
||||
damageCity: "",
|
||||
isDamageGlassOnly: "",
|
||||
phoneNumber: "",
|
||||
email: ""
|
||||
};
|
||||
},
|
||||
async beforeRouteEnter(to, from, next)
|
||||
{
|
||||
|
|
@ -220,9 +221,12 @@
|
|||
DamageCauseOptions() {
|
||||
const damageCauseAnswers = this.getCmsContent("DamageCauseQuestion", "Answers");
|
||||
const answerArray = [];
|
||||
for (let answer of Object.values(damageCauseAnswers)) {
|
||||
if (answer?.Name) {
|
||||
answerArray.push(answer.Name);
|
||||
if(damageCauseAnswers)
|
||||
{
|
||||
for (let answer of Object.values(damageCauseAnswers)) {
|
||||
if (answer?.Name) {
|
||||
answerArray.push(answer.Name);
|
||||
}
|
||||
}
|
||||
}
|
||||
return answerArray;
|
||||
|
|
|
|||
Loading…
Reference in a new issue