Merge pull request #206 from Safelite/feature/Digital/SSR-305

Feature/digital/ssr 305
This commit is contained in:
Jeremy-Z 2023-03-22 15:25:14 -04:00 committed by GitHub
commit 287ec642fd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 56 additions and 43 deletions

View file

@ -8,26 +8,28 @@ 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(),
settleAllPromises: jest.fn(),
}));
// Mock fetchCmsContentForPage
jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(),
fetchCmsContentForPage: jest.fn()
}));
describe("welcome-page.vue", () => {
test("Should render welcomePage sub-components (policyNumber, policyZipCode, dateOfLoss, damageCause etc.)", async () => {
// Arrange
const { wrapper } = setupMocks({});
// Arrange
const { wrapper } = setupMocks({});
// Act
const policyNumber = wrapper.findComponent({ ref: "policyNumber" });
const dateOfLoss = wrapper.findComponent({ ref: "dateOfLoss" });
const damageCause = wrapper.findComponent({ ref: "damageCause" });
const damageCause = wrapper.findComponent({ ref: "damageCause" });
const damageCity = wrapper.findComponent({ ref: "damageCity" });
const state = wrapper.findComponent({ ref: "state" });
const glassOnlyDamage = wrapper.findComponent({ ref: "glassOnlyDamage" });
@ -39,8 +41,8 @@ describe("welcome-page.vue", () => {
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(damageCity.exists()).toBe(false);
expect(state.exists()).toBe(false);
expect(glassOnlyDamage.exists()).toBe(true);
expect(phoneNumber.exists()).toBe(true);
expect(email.exists()).toBe(true);
@ -68,12 +70,14 @@ function setupMocks({
},
};
mountOptionsMockData = {
...mountOptionsMockData,
router: {
navigate: jest.fn(),
},
};
const apiPromise = Promise.resolve(apiResponses);
@ -86,7 +90,7 @@ function setupMocks({
const wrapper = shallowMount(welcomePage, mountOptions);
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
return { wrapper, apiPromise };
}

View file

@ -30,7 +30,7 @@
disableAutoFill
:max="new Date().toJSON().slice(0,10)"
:min="'1972-12-01'"
validationRules="loss-date-required"
validationRules="loss-date-required"
/>
</div>
</div>
@ -54,34 +54,7 @@
/>
</div>
</div>
<div class="row mt-4 px-3">
<div class="col">
<textboxQuestion
inputId="damageCityField"
cmsWidgetName="DamageCityQuestion"
v-model="welcomePageModel.damageCity"
isRequired
ref="damageCity"
disableAutoFill
validationRules="loss-city-required" />
</div>
</div>
<div class="row mt-4 px-3">
<div class="col">
<dropdownQuestion
cmsWidgetName="DamageStateQuestion"
v-model="welcomePageModel.damageState"
ref="state"
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
:options="stateOptions"
validationRules="loss-state-required"
isRequired
disableAutoFill
placeHolderText="Select an option"
id="welcomeDropdown"
/>
</div>
</div>
<div class="row mt-4">
<buttonQuestion
class="px-0"
@ -121,6 +94,36 @@
disableAutoFill />
</div>
</div>
<div class="row mt-4 px-3">
<div class="col">
<textboxQuestion
inputId="damageCityField"
cmsWidgetName="DamageCityQuestion"
v-model="welcomePageModel.damageCity"
isRequired
ref="damageCity"
disableAutoFill
v-if="this.displayDamageCityQuestion"
validationRules="loss-city-required" />
</div>
</div>
<div class="row mt-4 px-3">
<div class="col">
<dropdownQuestion
cmsWidgetName="DamageStateQuestion"
v-model="welcomePageModel.damageState"
ref="state"
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
:options="stateOptions"
validationRules="loss-state-required"
isRequired
disableAutoFill
v-if="this.displayDamageStateQuestion"
placeHolderText="Select an option"
id="welcomeDropdown"
/>
</div>
</div>
<div class="row mt-4 position-sticky top-100" id="welcomeFooter">
<div class="col">
<site-footer
@ -184,8 +187,8 @@
mixins: [BaseFormMixin],
data() {
return {
welcomePageModel: this.getWelcomePageModelFromStore()
};
welcomePageModel: this.getWelcomePageModelFromStore()
};
},
setup() {
const mainStore = useMainStore();
@ -210,9 +213,9 @@
//use resultMap to populate layout content.
let resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.setCmsContent(resultMap.cmsContent);
});
},
methods:
@ -320,6 +323,12 @@
};
},
},
displayDamageCityQuestion(){
return !!this.getCmsContent("DamageCityQuestion","QuestionText");
},
displayDamageStateQuestion(){
return !!this.getCmsContent("DamageStateQuestion","QuestionText");
},
},
components: {
siteHeader,