jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
# Conflicts:
#	src/router/router-constants/routing-table.js
This commit is contained in:
Jason Wheeler 2023-01-17 15:48:58 -05:00
commit 832f566060
9 changed files with 176 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/common-components/base-input-button/base-input-button.vue
View file

@ -169,10 +169,4 @@ input {
width: 0;
position: absolute;
}
@supports (-moz-appearance: none) {
input {
margin-top: -3.5px;
}
}
</style>

2
src/common-components/site-footer/site-footer.vue
View file

@ -58,7 +58,7 @@ export default {
};
},
mounted() {
this.paddingHeight = this.includeFooterImage ? this.getFooterInfoBoxHeight() + 89 : this.getFooterInfoBoxHeight() + 24;
this.paddingHeight = this.includeFooterImage ? this.getFooterInfoBoxHeight() + 16 : this.getFooterInfoBoxHeight() + 24;
this.$nextTick(() => {
window.addEventListener("resize", this.onResize);
});

37
src/layouts/policy-holder-details/policy-holder-details.vue Normal file
View file

@ -0,0 +1,37 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles overflow-auto welcome">
<div class="fade-on-route-transition">
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
<div class="row mt-4">
<div class="col">
<span>PlaceHolder for policy holder details</span>
</div>
</div>
</div>
</div>
</Form>
</template>
<script>
// Components
import siteHeader from '@/common-components/site-header/site-header';
import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { Form, defineRule } from "vee-validate";
import { required, regex } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import BaseFormMixin from '@/mixins/base-form-mixin.js';
export default {
name: "policy-holder-details",
components: {
siteHeader,
siteSubHeader,
Form,
},
}
</script>

92
src/layouts/welcome-page/welcome-page.spec.js Normal file
View 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 };
}

81
src/layouts/welcome-page/welcome-page.vue
View file

@ -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)
{
@ -213,16 +214,22 @@
},
navigateForward() {
this.$router.navigate(
this.navigationScenarios.WELCOME_PAGE,
this.$route
);
},
},
computed:{
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;
@ -315,22 +322,6 @@
</script>
<style lang="scss">
.subheader-primary
{
font-weight: 300 !important;
font-size: 26px;
line-height: 36px !important;
margin-top: 16px;
}
.subheader-secondary
{
font-weight: 300 !important;
font-size: 26px;
line-height: 36px;
color: #000000 !important;
margin-bottom: 16px !important;
}
.my-2
{
margin-bottom: 0rem !important;

1
src/router/router-constants/issPage-values.js
View file

@ -1,5 +1,6 @@
export const issPageValues = {
WELCOME_PAGE: "welcome-page",
POLICY_HOLDER_DETAILS: "policy-holder-details",
VEHICLE_MAKE: "vehicle-make",
VEHICLE_YEAR: "vehicle-year",
VEHICLE_MODEL: "vehicle-model",

1
src/router/router-constants/navigation-scenarios.js
View file

@ -8,6 +8,7 @@ const navigationScenarios = {
SELECTED_MAKE: "SELECTED_MAKE",
SELECTED_MODEL: "SELECTED_MODEL",
SELECTED_STYLE: "SELECTED_STYLE",
WELCOME_PAGE: "WELCOME_PAGE",
// Vin selection
CLICKED_BACK_WITH_VIN: "CLICKED_BACK_WITH_VIN",

13
src/router/router-constants/routing-table.js
View file

@ -273,16 +273,15 @@ const routingTable = function(store) {
issPageValue: issPageValues.WELCOME_PAGE,
maps: [
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationIssPageValue: issPageValues.VEHICLE_YEAR,
scenario: navigationScenarios.CLICKED_BACK,
destinationIssPageValue: issPageValues.WELCOME_PAGE
},
{
scenario: navigationScenarios.CLICKED_TEST,
destinationUrl: "https://www.google.com"
}
]
scenario: navigationScenarios.WELCOME_PAGE,
destinationIssPageValue: issPageValues.POLICY_HOLDER_DETAILS
},
],
},
];
};

4
src/router/router.spec.js
View file

@ -15,13 +15,13 @@ describe("Router", () => {
it("Should push next view when navigating locally", () => {
let scenario = navigationScenarios.CLICKED_FORWARD;
let scenario = navigationScenarios.WELCOME_PAGE;
let currentRoute = { query: { issPage: issPageValues.WELCOME_PAGE }};
router.push = jest.fn();
router.navigate(scenario, currentRoute);
expect(router.push.mock.calls[0][0].query.issPage).toBe(issPageValues.VEHICLE_YEAR);
expect(router.push.mock.calls[0][0].query.issPage).toBe(issPageValues.POLICY_HOLDER_DETAILS);
});