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

Merge branch 'release/2022.06.09' into feature/CSR-347

Browse source
This commit is contained in:
Adam Caouette 2022-06-01 08:49:30 -04:00
commit 6ece987d75
33 changed files with 2179 additions and 1740 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
azure-pipelines.yml
View file

@ -26,7 +26,7 @@ resources:
type: github
name: Safelite/AzureDevOps
endpoint: Safelite
ref: refs/tags/t5.4.0
ref: refs/tags/t5.5.19
variables:
- group: Digital-Infrastructure
@ -67,9 +67,10 @@ stages:
- template: templates/digital/step-build-vue.yml@AzureDevOps
parameters:
buildOutputDir: dist
environment: Dev
- template: templates/digital/step-deploy-vue.yml@AzureDevOps
parameters:
artifactName: vueDist
artifactName: vueDistDev
awsProfile: $(devDeploymentProfile)
outputPath: /fmg/
deployBuckets:
@ -109,9 +110,10 @@ stages:
- template: templates/digital/step-build-vue.yml@AzureDevOps
parameters:
buildOutputDir: dist
environment: Qa
- template: templates/digital/step-deploy-vue.yml@AzureDevOps
parameters:
artifactName: vueDist
artifactName: vueDistQa
awsProfile: $(qaDeploymentProfile)
outputPath: /fmg/
deployBuckets:
@ -150,9 +152,10 @@ stages:
- template: templates/digital/step-build-vue.yml@AzureDevOps
parameters:
buildOutputDir: dist
environment: Prod
- template: templates/digital/step-deploy-vue.yml@AzureDevOps
parameters:
artifactName: vueDist
artifactName: vueDistProd
awsProfile: $(prodDeploymentProfile)
outputPath: /fmg/
deployBuckets:
@ -168,4 +171,11 @@ stages:
indexDeployVariables:
__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
cfDistributionId: $(cfDistributionId)
cfDistributionId: $(cfDistributionId)
- stage: AutoTagReleaseBuild
displayName: Auto Tag Release Build For Production
jobs:
- template: templates/digital/auto-tag.yml@AzureDevOps
parameters:
userName: SafeliteAzureDevops
userEmail: githubazuredevops@safelite.com

3
jest.config.js
View file

@ -23,10 +23,9 @@ module.exports = {
"!src/layouts/address-lookup/address-lookup.vue",
"!src/layouts/address-lookup/customer-questions/customer-questions.vue",
"!src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue",
"!src/common-components/dropdown-question/dropdown-question.vue",
"!src/common-components/textbox-question/textbox-question.vue",
"!src/ux-components/alert\alert.vue",
"!src/helpers/validation-rules.js",
"!src/common-components/menu-modal/menu-modal.vue",
// END
], // ! means exclude from coverage.
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],

170
src/common-components/dropdown-question/dropdown-question.spec.js Normal file
View file

@ -0,0 +1,170 @@
import { shallowMount } from "@vue/test-utils";
import dropdownQuestion from "./dropdown-question";
// Mock CMS content
const questionText = "Question Text";
const mockMixin = {
methods: {
getCmsContent: jest.fn().mockImplementation(()=> {
return questionText;
})
}
}
// TODO: Remove the following from dropdown-question.vue -> :class="(errors && errors.length) || hasError ? 'has-error' : ''"
// It is not being used.
describe("dropdownQuestion.vue", () => {
it("Should render a select input", async () => {
// Arrange
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
options: {},
},
mixins: [mockMixin]
});
wrapper.getCmsContent = jest.fn();
// Act
const select = wrapper.find("select");
// Assert
expect(select.exists()).toBe(true);
});
it("Should render the 'questionText' data value as the label text.", async () => {
// Arrange
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
options: {},
},
mixins: [mockMixin]
});
// Act
const label = wrapper.find("label");
// Assert
expect(label.text()).toContain(questionText);
});
it("Should render the 'questionText' data value with '⁠' after the first character of each word in the label text when disableAutoFill is true.", async () => {
// Arrange
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
options: {},
disableAutoFill: true,
},
mixins: [mockMixin]
});
// Mock CMS content ...
// Trust me, the below instance of the string "Q⁠uestion Text" actually has the ⁠ in it. You just can't see it
// Don't believe me? Copy and paste it into Google. Then inspect the search field element in Dev Tools,
// you will see "Q⁠uestion T⁠ext"
const expectedQuestionText = "Q⁠uestion T⁠ext";
// Act
const label = wrapper.find("label");
// Assert
expect(label.text()).toContain(expectedQuestionText);
});
it("Should return input id as the id of the select field", async () => {
// Arrange
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
inputId: "input ID",
options: {},
},
mixins: [mockMixin]
});
// Act
const select = wrapper.find("select");
// Assert
expect(select.attributes().id).toEqual("input ID");
});
it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
// Arrange
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
options: {},
},
mixins: [mockMixin]
});
// Act
const label = wrapper.find("label");
// Assert
expect(label.attributes("aria-label")).toContain(questionText);
});
it("Should return aria-disabled state as disabled", async () => {
// Arrange
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
options: {},
isDisabled: true,
},
mixins: [mockMixin]
});
// Act
const select = wrapper.find("select");
// Assert
expect(select.attributes("aria-disabled")).toEqual("true");
});
it("Should emit new value when modelValue is changed", async () => {
// Arrange
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
options: {},
modelValue: "val",
},
mixins: [mockMixin]
});
// Act
await wrapper.find("select").setValue("val2");
// Assert
expect(wrapper.emitted()).toHaveProperty('change')
});
it("Should call this.handleChange with new value when selectedOption is changed", async () => {
// Arrange
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
options: {},
modelValue: 0,
},
mixins: [mockMixin]
});
wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
// Act
wrapper.vm.$options.watch.selectedOption.call(wrapper.vm, 1);
// Assert
expect(wrapper.vm.handleChange).toHaveBeenCalled;
});
});

131
src/common-components/dropdown-question/dropdown-question.spec.js1
View file

@ -1,131 +0,0 @@
import { shallowMount } from "@vue/test-utils";
import dropdownQuestion from "./dropdown-question";
import { nextTick } from "vue";
import { maska } from 'maska';
describe("dropdownQuestion.vue", () => {
it("Should return aria-disabled state", async () => {
// Act
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
isDisabled: true,
},
});
// Assert
const input = wrapper.find("select");
// Expect
expect(input.attributes()["aria-disabled"]).toEqual("true");
});
it("Should render a select input", async () => {
// Act
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
name: "test",
label: "unit test label",
},
});
// Assert
const input = wrapper.find("select");
expect(input.exists()).toBe(true);
});
it("Should return input id", async () => {
// Act
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
inputId: "input ID",
},
});
// Assert
const input = wrapper.find("select");
// Expect
expect(input.attributes().id).toEqual("input ID");
});
it("Should render the 'questionText' data value as the label text when disableAutoFill is false.", async () => {
// Arrange
//Mock CMS content
const questionText = "Question Text";
const cmsContent = {
QuestionText: questionText,
};
// Act
const wrapper = shallowMount(dropdownQuestion, {
global: {
directives: {
maska: maska,
}
},
});
await wrapper.setData({
questionText: questionText,
});
wrapper.vm.initializeComponent(cmsContent);
// Assert
expect(wrapper.find("label").text()).toContain(questionText);
wrapper.unmount();
});
it("Should render the 'questionText' data value with '⁠' after the first character as the label text when disableAutoFill is true.", async () => {
// Arrange
//Mock CMS content
const originalQuestionText = "Question Text";
// Trust me, the below instance of the string "Q⁠uestion Text" actually has the ⁠ in it. You just can't see it
// Don't believe me? Copy it and paste it into Google. Then inspect the search field element in Dev Tools,
// you will see "Q&uestion Text"
const expectedQuestionText = "Q⁠uestion Text";
const cmsContent = {
QuestionText: originalQuestionText,
};
// Act
const wrapper = shallowMount(dropdownQuestion, {
global: {
directives: {
maska: maska,
}
},
propsData: {
disableAutoFill: true,
},
});
await wrapper.setData({
questionText: originalQuestionText,
});
wrapper.vm.initializeComponent(cmsContent);
// Assert
expect(wrapper.vm.$el.children[0].innerHTML).toBe(expectedQuestionText);
wrapper.unmount();
});
it("Should emit new value when modelValue is changed", async () => {
// Act
const wrapper = shallowMount(dropdownQuestion, {
global: {
directives: {
maska: maska,
}
},
propsData: {
modelValue: "val",
},
});
await wrapper.find("select").setValue("val2");
// Assert
expect(wrapper.emitted()).toHaveProperty('change')
});
});

28
src/common-components/funnel-footer/funnel-footer.spec.js
View file

@ -3,30 +3,6 @@ import funnelFooter from "./funnel-footer";
describe("funnel-footer.vue", () => {
it("Should return footer-link class", async () => {
// Act
const r = {
test:"testing",
clientHeight: 10,
offsetHeight: 24,
};
global.document.querySelector = jest.fn().mockImplementation(()=> {
return r;
});
const wrapper = mount(funnelFooter, {
mixins: [mockMixin]
});
// Assert
const link = wrapper.find("a");
// Expect
expect(link.attributes('class')).toContain("footer");
});
it("Should emit ForwardClicked on button click", async () => {
// Act
const wrapper = mount(funnelFooter, {
@ -53,7 +29,7 @@ describe("funnel-footer.vue", () => {
mixins: [mockMixin]
});
wrapper.vm.updateButtonText('newText');
// Assert
expect(wrapper.componentVM.customButtontext).toBe('newText');
});
@ -65,4 +41,4 @@ const mockMixin = {
getCmsContent: jest.fn(),
getFooterInfoBoxHeight: jest.fn(()=>80)
}
}
}

29
src/common-components/funnel-footer/funnel-footer.vue
View file

@ -1,21 +1,6 @@
<template>
<div class="footer pt-4">
<div class="container-fluid g-2">
<div class="row">
<div class="col-12 d-flex justify-content-center pb-2 fs-7">
&copy;&nbsp;{{new Date().getFullYear()}}&nbsp;Safelite Group
</div>
</div>
<div class="row" :style="`padding-bottom: ${paddingHeight}px`">
<div class="col d-flex justify-content-center justify-content-around text-center">
<textLink linkType="footer" text="Terms of use" href="https://www.safelite.com/terms-of-use" />
<textLink linkType="footer" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" />
<textLink linkType="footer" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" />
</div>
</div>
</div>
<div class="container-fluid fixed-bottom g-5 bg-light py-4" id="infoBox">
<div class="row d-flex flex-row-reverse align-items-center">
<footer class="footer container-fluid fixed-bottom g-5 bg-light py-4" id="infoBox">
<div class="row d-flex flex-row-reverse align-items-center vw-100">
<div class="col button-col d-flex" id="stacked">
<buttonMain
ref="buttonMain"
@ -26,6 +11,8 @@
:aria-disabled="isForwardActionDisabled"
:isDisabled="isForwardActionDisabled"
@click-event="buttonClick"
data-bs-target="#footerModal"
data-bs-dismiss="modal"
/>
</div>
<div v-if="!isBackButtonHidden" class="col-auto link-col py-1 text-break">
@ -34,11 +21,12 @@
:text="backLink"
@click-event="linkClick"
href="javascript:void(0)"
data-bs-target="#footerModal"
data-bs-dismiss="modal"
/>
</div>
</div>
</div>
</div>
</footer>
</template>
<script>
@ -80,7 +68,7 @@ export default {
},
buttonText(){
return this.customButtontext ? this.customButtontext : this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText');
}
},
},
methods: {
onResize() {
@ -112,7 +100,6 @@ export default {
<style lang="scss" scoped>
.footer {
display: flex;
margin-top: auto;
a {
display: flex;
justify-content: center;

5
src/common-components/funnel-header/funnel-header.vue
View file

@ -4,6 +4,7 @@
v-if="imageSrc"
>
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
<menuModal/>
</div>
<alert
class="position-absolute rounded-0 w-100 border-0 shadow-sm"
@ -19,6 +20,7 @@
import alert from "@/ux-components/alert/alert";
import eventBus from "@/helpers/event-bus/event-bus";
import { globalEvents } from "@/constants/events";
import menuModal from "@/common-components/menu-modal/menu-modal";
export default {
name: "funnel-header",
@ -43,6 +45,7 @@ export default {
},
components: {
alert,
menuModal,
},
mounted() {
// Check if alert event is on the bus
@ -50,7 +53,6 @@ export default {
globalEvents.Categories.GLOBAL_ALERT,
globalEvents.SubCategories.PAGE_NOT_FOUND
);
// If alert event is on the bus, then display the alert
if (alertEvent !== undefined) {
this.displayGlobalAlert = true;
@ -70,5 +72,6 @@ export default {
}
.alert {
left: 0;
top: 72px;
}
</style>

53
src/common-components/menu-button/menu-button.vue
View file

@ -1,53 +0,0 @@
<template>
<div class="menu-button" :class="[isActive ? 'active' : '']" @click="toggleClass()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</template>
<script>
export default {
name: 'menuButton',
data() {
return {
isActive: false,
};
},
methods: {
toggleClass: function(event){
this.isActive = !this.isActive;
}
}
}
</script>
<style lang="scss">
.menu-button {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.2);
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.bar1,
.bar2,
.bar3 {
width: 14px;
height: 2px;
background-color: $blue-400;
margin: 1px 0;
transition: 0.25s;
}
&.active .bar1 {
transform: rotate(-45deg) translate(-3px, 3px);
}
&.active .bar2 {opacity: 0;}
&.active .bar3 {
transform: rotate(45deg) translate(-3px, -3px);
}
}
</style>

0
src/common-components/menu-button/menu-button.spec.js → src/common-components/menu-modal/menu-modal.spec.js
View file

116
src/common-components/menu-modal/menu-modal.vue Normal file
View file

@ -0,0 +1,116 @@
<template>
<div class="menu-modal-container">
<button class="menu-button" type="button" :class="[isActive ? 'active' : '']" data-bs-toggle="modal" data-bs-target="#footerModal">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</button>
</div>
<!-- Modal -->
<div class="modal fade" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header visually-hidden">
<h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
</div>
<div class="modal-body d-flex flex-column">
<textLink linkType="navigation" text="Terms of use" href="https://www.safelite.com/terms-of-use" />
<textLink linkType="navigation" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" />
<textLink linkType="navigation" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" />
</div>
<div class="modal-footer d-flex justify-content-start">
&copy; {{new Date().getFullYear()}} Safelite Group
</div>
</div>
</div>
</div>
</template>
<script>
import textLink from "@/ux-components/text-link/text-link";
export default {
name: 'menuModal',
data() {
return {
isActive: false,
currentFooterAndHeaderHeight: 0,
};
},
mounted() {
const myModalEl = document.getElementById('footerModal');
var self = this;
myModalEl.addEventListener('hide.bs.modal', function (event) {
self.isActive = false;
});
myModalEl.addEventListener('show.bs.modal', function (event) {
self.currentFooterAndHeaderHeight = self.getFooterInfoBoxHeight() + 72;
self.isActive = true;
})
},
components: {
textLink,
}
}
</script>
<style lang="scss">
.menu-modal-container {
position: absolute;
padding: 1.47rem 1rem 1.47rem 1.47rem;
right: 0;
button {
border: none;
&.menu-button {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
background-color: $white;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1056;
.bar1,
.bar2,
.bar3 {
width: 14px;
height: 2px;
background-color: $blue-400;
margin: 1px 0;
transition: 0.25s;
}
&.active .bar1 {
transform: rotate(-45deg) translate(-3px, 3px);
}
&.active .bar2 {opacity: 0;}
&.active .bar3 {
transform: rotate(45deg) translate(-3px, -3px);
}
}
}
}
.modal {
max-width: 576px;
left: auto;
height: calc(100% - 72px);
top: 72px;
border-top: 1px solid $gray-300;
.modal-body {
padding: 2rem;
}
.modal-fullscreen {
width: 100vw;
max-width: 576px;
}
.navigation-link {
margin-bottom: 1.5rem;
}
.modal-footer {
border-top: none;
padding: 2rem;
}
//.modal-backdrop styles are in common-styles.scss
}
</style>

243
src/common-components/textbox-question/textbox-question.spec.js1 → src/common-components/textbox-question/textbox-question.spec.js
View file

@ -1,139 +1,61 @@
import { shallowMount } from "@vue/test-utils";
import textboxQuestion from "./textbox-question";
import { maska } from 'maska';
// Mock CMS content
const questionText = "Question Text";
const mockMixin = {
methods: {
getCmsContent: jest.fn().mockImplementation(()=> {
return questionText;
})
}
}
const maska = jest.fn();
describe("textboxQuestion.vue", () => {
it("Should return aria-disabled state", async () => {
// Act
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
}
},
propsData: {
isDisabled: true,
},
});
// Assert
const input = wrapper.find("input");
// Expect
expect(input.attributes()["aria-disabled"]).toEqual("true");
});
it("Should render a text input", async () => {
// Act
// Arrange
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
}
},
propsData: {
name: "test",
label: "unit test label",
},
mixins: [mockMixin]
});
// Assert
wrapper.getCmsContent = jest.fn();
// Act
const input = wrapper.find("input");
// Assert
expect(input.exists()).toBe(true);
});
it("Should return input id", async () => {
// Act
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
}
},
propsData: {
inputId: "input ID",
},
});
// Assert
const input = wrapper.find("input");
// Expect
expect(input.attributes().id).toEqual("input ID");
});
it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
// Arrange
//Mock CMS content
const questionText = "Question Text";
const cmsContent = {
QuestionText: questionText,
};
// Act
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
}
},
});
await wrapper.setData({
questionText: questionText,
});
wrapper.vm.initializeComponent(cmsContent);
// Assert
expect(wrapper.find("label").attributes('aria-label')).toBe(questionText);
wrapper.unmount();
});
it("Should render the 'questionText' data value as the label text when disableAutoFill is false.", async () => {
// Arrange
//Mock CMS content
const questionText = "Question Text";
const cmsContent = {
QuestionText: questionText,
};
// Act
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
}
},
mixins: [mockMixin]
});
await wrapper.setData({
questionText: questionText,
});
wrapper.vm.initializeComponent(cmsContent);
// Assert
expect(wrapper.find("label").text()).toContain(questionText);
wrapper.unmount();
});
it("Should render the 'questionText' data value with '&NoBreak;' after the first character as the label text when disableAutoFill is true.", async () => {
// Arrange
//Mock CMS content
const originalQuestionText = "Question Text";
// Trust me, the below instance of the string "Q⁠uestion Text" actually has the &NoBreak; in it. You just can't see it
// Don't believe me? Copy it and paste it into Google. Then inspect the search field element in Dev Tools,
// you will see "Q&uestion Text"
const expectedQuestionText = "Q⁠uestion Text";
const cmsContent = {
QuestionText: originalQuestionText,
};
// Act
const label = wrapper.find("label");
// Assert
expect(label.text()).toContain(questionText);
});
it("Should render the 'questionText' data value with '&NoBreak;' after the first character of each word in the label text when disableAutoFill is true.", async () => {
// Arrange
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
@ -143,15 +65,84 @@ describe("textboxQuestion.vue", () => {
propsData: {
disableAutoFill: true,
},
mixins: [mockMixin]
});
await wrapper.setData({
questionText: originalQuestionText,
});
wrapper.vm.initializeComponent(cmsContent);
// Mock CMS content ...
// Trust me, the below instance of the string "Q⁠uestion Text" actually has the &NoBreak; in it. You just can't see it
// Don't believe me? Copy and paste it into Google. Then inspect the search field element in Dev Tools,
// you will see "Q&NoBreak;uestion T&NoBreak;ext"
const expectedQuestionText = "Q⁠uestion T⁠ext";
// Act
const label = wrapper.find("label");
// Assert
expect(wrapper.vm.$el.children[0].innerHTML).toBe(expectedQuestionText);
wrapper.unmount();
expect(label.text()).toContain(expectedQuestionText);
});
it("Should return input id as the id of the input field", async () => {
// Arrange
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
}
},
propsData: {
inputId: "input ID",
},
mixins: [mockMixin]
});
// Act
const input = wrapper.find("input");
// Assert
expect(input.attributes().id).toEqual("input ID");
});
it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
// Arrange
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
}
},
mixins: [mockMixin]
});
// Act
const label = wrapper.find("label");
// Assert
expect(label.attributes("aria-label")).toContain(questionText);
});
it("Should return aria-disabled state as disabled", async () => {
// Arrange
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
}
},
propsData: {
isDisabled: true,
},
mixins: [mockMixin]
});
// Assert
const input = wrapper.find("input");
// Expect
expect(input.attributes("aria-disabled")).toEqual("true");
});
@ -166,6 +157,7 @@ describe("textboxQuestion.vue", () => {
propsData: {
modelValue: "val",
},
mixins: [mockMixin]
});
await wrapper.find("input").setValue("val2");
@ -175,4 +167,33 @@ describe("textboxQuestion.vue", () => {
});
it("Should call this.handleChange with new value when this.semiAggressiveValidation = true, the value is changed, and the new value is valid", async () => {
// Arrange
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
}
},
propsData: {
options: {},
modelValue: "foo",
semiAggressiveValidation: true,
},
mixins: [mockMixin]
});
wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
wrapper.vm.validate = jest.fn().mockImplementation(() => {
return true;
});
// Act
wrapper.vm.$options.watch.value.call(wrapper.vm, "bar");
// Assert
expect(wrapper.vm.handleChange).toHaveBeenCalled;
});
});

4
src/constants/endpoints.js
View file

@ -79,6 +79,10 @@ const endpoints = {
url: "/analytics/api/v1/analytics/log-custom-event",
method: "POST",
},
InitializeSession:{
url: "/analytics/api/v1/analytics/initialize",
method: "POST",
},
GetExperimentsByUser: {
url: "/analytics/api/v1/analytics/get-experiments",
method: "GET",

1
src/constants/store-actions.js
View file

@ -21,6 +21,7 @@ const storeActions = {
LOG_EXPERIMENT_EXPOSURE: "logExperimentExposure",
LOG_PAGE_VIEW: "logPageView",
LOG_CUSTOM_EVENT: "logCustomEvent",
INITIALIZE_SESSION: "initializeSession",
GET_EXPERIMENTS_BY_USER: "GetExperimentsByUser",
UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION: "updateServiceLocationWithVehicleRegistration",

8
src/helpers/heritage-integration/cookie-helper.js
View file

@ -104,6 +104,14 @@ export function getSessionIdValue(){
return '00000000-0000-0000-0000-000000000000';
}
export function setCookieProperties(properties) {
if (typeof properties == "object") {
Object.keys(properties).forEach(key => {
document.cookie = `${key}=${properties[key]}`;
});
}
}
/*
===========================
= PRIVATE FUNCTIONS =

4
src/helpers/heritage-integration/order-helper.js
View file

@ -11,8 +11,8 @@ import baseMixin from "@/mixins/base-mixin";
export async function loadOrderIfPresent() {
const funnelCookie = getFunnelCookie();
// Do nothing if there is no cookie or no correlation id.
if (funnelCookie == null || funnelCookie.ReferralCorrelationId == null) {
// Do nothing if there is no cookie, correlation id, or referral number.
if (funnelCookie == null || funnelCookie.ReferralCorrelationId == null || !funnelCookie.ReferralNumber) {
return null;
}

9
src/helpers/heritage-integration/order-helper.spec.js
View file

@ -18,7 +18,8 @@ describe("loadOrderIfPresent", () => {
const testCookieValue = {
ShouldResetState: testShouldResetState,
ReferralCorrelationId: "xxx"
ReferralCorrelationId: "xxx",
ReferralNumber: "12345"
}
document.cookie = `${cookieNames.FUNNEL_SESSION_INFO}=${JSON.stringify(testCookieValue)}; path=/; ${cookieHelper.getCookieDomainValue()}`;
@ -33,7 +34,11 @@ describe("loadOrderIfPresent", () => {
test("ShouldResetState == true => reset store", () => {
// Arrange
cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie").mockReturnValueOnce({ ShouldResetState: true, ReferralCorrelationId: "xxx-xxx-xxx" });
cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie").mockReturnValueOnce({
ShouldResetState: true,
ReferralCorrelationId: "xxx-xxx-xxx",
ReferralNumber: "12345"
});
const mockData = {
actionList: [{

3
src/helpers/unit-test-helper.js
View file

@ -24,14 +24,13 @@ export function getMountOptions(mockData) {
mocks.logEvent = jest.fn();
mocks.pushExperimentsToDataLayer = jest.fn();
mocks.prependActionToMethod = jest.fn();
mocks.dispatchStoreAction = jest.fn();
mocks.dispatchStoreAction.mockImplementation((actionName) => {
let actionFilterResult = mockData.actionList.filter(
(x) => x.actionName == actionName
);
if (actionFilterResult.length > 0 && actionFilterResult.length === 1) {
if (actionFilterResult.length === 1) {
return Promise.resolve({
data: actionFilterResult[0].data,
});

504
src/layouts/address-lookup/address-lookup.spec.js Normal file
View file

@ -0,0 +1,504 @@
// Components
import addressLookup from "@/layouts/address-lookup/address-lookup.vue";
import funnelHeader from "@/common-components/funnel-header/funnel-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions";
import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
import router from "@/router";
// Supporting Files
import { settleAllPromises } from "@/helpers/layout-helper.js";
import baseMixin from "@/mixins/base-mixin";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { mount, flushPromises, shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { maska } from 'maska';
import { nextTick } from "vue";
import { storeActions } from "@/constants/store-actions";
import { storeMutations } from "@/constants/store-mutations";
import store from "@/store";
import { validate } from "vee-validate";
import { isGlassAvailableForCarId } from "@/helpers/damage-helper.js"
import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import { EXPECTATION_FAILED } from "http-status-codes";
// 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(),
// }));
jest.mock("@/helpers/damage-helper", () => ({
isGlassAvailableForCarId: jest.fn().mockImplementation(() => true),
getDamageString: jest.fn()
}));
jest.mock("@/helpers/heritage-integration/navigation-helper", () => ({
navigateAfterSaveToHeritageFunnel: jest.fn()
}));
// const questionText = "Question Text";
// const mockMixin = {
// methods: {
// getCmsContent: jest.fn().mockImplementation(() => {
// return questionText;
// })
// }
// }
describe("address-lookup.vue", () => {
describe("registration and service zips", () => {
describe("if registration zip is serviceable", () => {
test("if registration address is provided => update service address on successful continue", async () => {
// Arrange
const mockRegistrationAddress = {
streetAddress: "1234 Main St",
city: "Columbus",
state: "OH",
zipCode: "43215"
}
const { wrapper } = setupMocks(addressLookup,{
isZipServiceable: true
});
store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
await wrapper.setData({
customerQuestions: {
addressQuestions: mockRegistrationAddress
}
})
// Act
await wrapper.vm.forwardButtonAction();
// Assert
expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalledWith(storeActions.UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION);
});
});
describe("if registration zip is not serviceable", () => {
test("if registration address is provided and user clicks continue => show non-serviceable zip alert", async () => {
// Arrange
const mockRegistrationAddress = {
streetAddress: "1234 Main St",
city: "Columbus",
state: "OH",
zipCode: "43215"
}
const { wrapper } = setupMocks(addressLookup, {
isZipServiceable: false
});
store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
await wrapper.setData({
customerQuestions: {
addressQuestions: mockRegistrationAddress
}
})
expect(wrapper.findComponent({ ref: "alertNonServiceableZip" }).exists()).toBe(false);
// Act
await wrapper.vm.forwardButtonAction();
// Assert
expect(wrapper.vm.displayNonServiceableZipAlert).toBe(true);
expect(wrapper.findComponent({ ref: "alertNonServiceableZip" }).exists()).toBe(true);
expect(wrapper.findComponent({ ref: "alertNonServiceableZip" }).isVisible()).toBe(true);
});
test("if registration address is provided user clicks continue => show service zip field on continue click", async () => {
// Arrange
const mockRegistrationAddress = {
streetAddress: "1234 Main St",
city: "Columbus",
state: "OH",
zipCode: "43215"
}
const { wrapper } = setupMocks(addressLookup, {
isZipServiceable: false
}
);
expect(wrapper.vm.showServiceZipField).toBeFalsy();
expect(wrapper.findComponent({ ref: "serviceZip" }).exists()).toBe(false);
store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
await wrapper.setData({
customerQuestions: {
addressQuestions: mockRegistrationAddress
}
})
// Act
await wrapper.vm.forwardButtonAction();
// Assert
expect(wrapper.vm.showServiceZipField).toBe(true);
expect(wrapper.findComponent({ ref: "serviceZip" }).isVisible()).toBe(true);
});
test("if registration address, service zip are provided, and user clicks continue => don't update service address", async () => {
// Arrange
const mockRegistrationAddress = {
streetAddress: "1234 Main St",
city: "Columbus",
state: "OH",
zipCode: "43215"
}
const { wrapper } = setupMocks(addressLookup, {
isZipServiceable: false
}
);
store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
await wrapper.setData({
customerQuestions: {
addressQuestions: mockRegistrationAddress
}
})
// Act
await wrapper.vm.forwardButtonAction();
// Assert
expect(baseMixin.methods.dispatchStoreAction).not.toHaveBeenCalledWith(storeActions.UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION);
});
test("if registration address, service zip are provided, and user clicks continue => both zips are saved and are different", async () => {
// Arrange
const mockRegistrationAddress = {
streetAddress: "1234 Main St",
city: "Columbus",
state: "OH",
zipCode: "43215"
}
const { wrapper } = setupMocks(addressLookup, {});
store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
baseMixin.methods.dispatchStoreAction = jest.fn();
baseMixin.methods.dispatchStoreAction.mockImplementation((actionName, value) => {
let data = {};
if (actionName == storeActions.VALIDATE_ZIP) {
if (value == "43215") {
data = {
isServiceable: false
};
}
else {
data = {
isServiceable: true
}
}
}
else if (actionName == storeActions.LOOKUP_VIN_BY_ADDRESS) {
data = {
isStatePermissible: true,
vinVehicles: [{
vin: "TEST_VIN",
vehicle: {
carId: "CARID"
}
}]
}
}
return Promise.resolve({ data });
})
await wrapper.setData({
customerQuestions: {
addressQuestions: mockRegistrationAddress
}
})
await wrapper.vm.forwardButtonAction();
await wrapper.setData({
serviceZipCode: "12345"
})
// Act
await wrapper.vm.forwardButtonAction();
// Assert
expect(store.getters.order.serviceLocation.zipCode).not.toEqual(store.getters.vehicle.registration.zipCode);
expect(store.getters.vehicle.registration.zipCode).toEqual("43215");
expect(store.getters.order.serviceLocation.zipCode).toEqual("12345");
});
});
});
describe.skip("initialization", () => {
test("Page header is initialized with api data", async (done) => {
//Arrange
const pageHeaderWidgetHeaderText = "Select Damage";
const { wrapper, apiPromise } = setupMocks({
pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
});
//Act
addressLookup.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "address-lookup" } },
undefined,
(c) => c(wrapper.vm)
);
//Assert
apiPromise.finally(() => {
expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
pageHeaderWidgetHeaderText
);
done();
});
});
test("Customer Questions component is initialized with api data", async (done) => {
//Arrange
const StreetAddressQuestionWidget = { QuestionText: "test" };
const CityQuestionWidget = { QuestionText: "test" };
const StateQuestionWidget = { QuestionText: "test" };
const ZipQuestionWidget = { QuestionText: "test" };
const FirstNameQuestionWidget = { QuestionText: "test" };
const LastNameQuestionWidget = { QuestionText: "test" };
const EmailAddressQuestionWidget = { QuestionText: "test" };
const AlertVerificationWarningWidget = { HeaderText: "test", BodyText: "test" };
const AlertNoMatchWarningWidget = { HeaderText: "test", BodyText: "test" };
const widgets = [
StreetAddressQuestionWidget,
CityQuestionWidget,
StateQuestionWidget,
ZipQuestionWidget,
AlertVerificationWarningWidget,
AlertNoMatchWarningWidget,
FirstNameQuestionWidget,
LastNameQuestionWidget,
EmailAddressQuestionWidget,
];
const { wrapper, apiPromise } = setupMocks({
cmsContent: widgets,
});
//Act
addressLookup.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "address-lookup" } },
undefined,
(c) => c(wrapper.vm)
);
//Assert
apiPromise.finally(() => {
expect(customerQuestions.methods.initializeComponent).toHaveBeenCalledWith(
widgets
);
done();
});
});
});
});
function setupMocks(mountOptions, { isZipServiceable = true, lookupVinbyAddressResponse }) {
store.commit(storeMutations.RESET_STATE);
const wrapper = shallowMount(addressLookup, getMountOptions({
...mountOptions,
actionList: [
{
actionName: storeActions.VALIDATE_ZIP,
data: {
isServiceable: isZipServiceable
}
},
{
actionName: storeActions.LOOKUP_VIN_BY_ADDRESS,
data: lookupVinbyAddressResponse ? lookupVinbyAddressResponse : {
isStatePermissible: true,
vinVehicles: [{
vin: "TEST_VIN",
vehicle: {
carId: "CARID"
}
}]
}
}
],
router: {
navigate: jest.fn(),
navigateAfterSave: jest.fn()
},
}));
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
wrapper.vm.$refs.loadingModal.showModal = jest.fn();
// jest.mock("@/store", () => ({
// commit: jest.fn(),
// dispatch: jest.fn(),
// getters: {
// vehicle: {
// carId: "CARID"
// }
// },
// }));
return { wrapper };
}
// function setupMocks({
// pageHeaderWidgetHeaderText = {},
// mountOptionsMockData = {
// router: {
// navigate: jest.fn(),
// },
// store: {
// getters: {
// vehicle: {},
// },
// },
// },
// }) {
// //Mock api responses
// baseMixin.methods.dispatchStoreAction = jest.fn();
// const apiResponses = {
// cmsContent: {
// FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
// VehicleBannerWidget: {
// GenericVehicleImage:
// "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
// },
// FunnelHeaderWidget: {
// LogoImage:
// "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
// },
// StreetAddressQuestionWidget: {
// QuestionText:
// "test"
// },
// CityQuestionWidget: {
// QuestionText:
// "test"
// },
// StateQuestionWidget: {
// QuestionText:
// "test"
// },
// ZipQuestionWidget: {
// QuestionText:
// "test"
// },
// FirstNameQuestionWidget: {
// QuestionText:
// "test"
// },
// LastNameQuestionWidget: {
// QuestionText:
// "test"
// },
// EmailAddressQuestionWidget: {
// QuestionText:
// "test"
// },
// AlertVerificationWarningWidget: {
// HeaderText:
// "test",
// BodyText:
// "test",
// },
// AlertNoMatchWarningWidget: {
// HeaderText:
// "test",
// BodyText:
// "test",
// },
// },
// };
// const apiPromise = Promise.resolve(apiResponses);
// settleAllPromises.mockImplementation(() => apiPromise);
// fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
// //Mock damage initialize methods
// funnelHeader.methods = {
// initializeComponent: jest.fn(),
// };
// vehicleBanner.methods = {
// initializeComponent: jest.fn(),
// };
// funnelSubHeader.methods = {
// initializeComponent: jest.fn(),
// };
// funnelFooter.methods = {
// initializeComponent: jest.fn(),
// };
// customerQuestions.methods = {
// initializeComponent: jest.fn(),
// };
// addressQuestions.methods = {
// initializeComponent: jest.fn(),
// setupAddressLookup: jest.fn(),
// };
// const mountOptions = getMountOptions(mountOptionsMockData);
// mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods
// mountOptions.global.directives = {
// maska: maska
// };
// const wrapper = mount(addressLookup, mountOptions);
// const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
// funnelHeaderWrapper.vm.initializeComponent =
// funnelHeader.methods.initializeComponent;
// const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
// vehicleBannerWrapper.vm.initializeComponent =
// vehicleBanner.methods.initializeComponent;
// const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
// funnelSubHeaderWrapper.vm.initializeComponent =
// funnelSubHeader.methods.initializeComponent;
// const funnelFooterWrapper = wrapper.findComponent({ name: "funnelFooter" });
// funnelFooterWrapper.vm.initializeComponent =
// funnelFooter.methods.initializeComponent;
// const customerQuestionsWrapper = wrapper.findComponent({ name: "customerQuestions" });
// customerQuestionsWrapper.vm.initializeComponent =
// customerQuestions.methods.initializeComponent;
// const addressQuestionsWrapper = wrapper.findComponent({ name: "addressQuestions" });
// addressQuestionsWrapper.vm.initializeComponent =
// addressQuestions.methods.initializeComponent;
// addressQuestionsWrapper.vm.setupAddressLookup =
// addressQuestions.methods.setupAddressLookup;
// return { wrapper, apiPromise };
// }

244
src/layouts/address-lookup/address-lookup.spec.js1
View file

@ -1,244 +0,0 @@
// Components
import addressLookup from "@/layouts/address-lookup/address-lookup.vue";
import funnelHeader from "@/common-components/funnel-header/funnel-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions";
import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
// Supporting Files
import { settleAllPromises } from "@/helpers/layout-helper.js";
import baseMixin from "@/mixins/base-mixin";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { mount, flushPromises } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { maska } from 'maska';
import { nextTick } from "vue";
import { storeActions } from "@/constants/store-actions";
import { storeMutations } from "@/constants/store-mutations";
import store from "@/store";
import { validate } from "vee-validate";
// 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("address-lookup.vue", () => {
test("Page header is initialized with api data", async (done) => {
//Arrange
const pageHeaderWidgetHeaderText = "Select Damage";
const { wrapper, apiPromise } = setupMocks({
pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
});
//Act
addressLookup.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "address-lookup" } },
undefined,
(c) => c(wrapper.vm)
);
//Assert
apiPromise.finally(() => {
expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
pageHeaderWidgetHeaderText
);
done();
});
});
test("Customer Questions component is initialized with api data", async (done) => {
//Arrange
const StreetAddressQuestionWidget = { QuestionText: "test" };
const CityQuestionWidget = { QuestionText: "test" };
const StateQuestionWidget = { QuestionText: "test" };
const ZipQuestionWidget = { QuestionText: "test" };
const FirstNameQuestionWidget = { QuestionText: "test" };
const LastNameQuestionWidget = { QuestionText: "test" };
const EmailAddressQuestionWidget = { QuestionText: "test" };
const AlertVerificationWarningWidget = { HeaderText: "test", BodyText: "test" };
const AlertNoMatchWarningWidget = { HeaderText: "test", BodyText: "test" };
const widgets = [
StreetAddressQuestionWidget,
CityQuestionWidget,
StateQuestionWidget,
ZipQuestionWidget,
AlertVerificationWarningWidget,
AlertNoMatchWarningWidget,
FirstNameQuestionWidget,
LastNameQuestionWidget,
EmailAddressQuestionWidget,
];
const { wrapper, apiPromise } = setupMocks({
cmsContent: widgets,
});
//Act
addressLookup.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "address-lookup" } },
undefined,
(c) => c(wrapper.vm)
);
//Assert
apiPromise.finally(() => {
expect(customerQuestions.methods.initializeComponent).toHaveBeenCalledWith(
widgets
);
done();
});
});
});
function setupMocks({
pageHeaderWidgetHeaderText = {},
mountOptionsMockData = {
router: {
navigate: jest.fn(),
},
store: {
getters: {
vehicle: {},
},
},
},
}) {
//Mock api responses
baseMixin.methods.dispatchStoreAction = jest.fn();
const apiResponses = {
cmsContent: {
FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
VehicleBannerWidget: {
GenericVehicleImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
},
FunnelHeaderWidget: {
LogoImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
},
StreetAddressQuestionWidget: {
QuestionText:
"test"
},
CityQuestionWidget: {
QuestionText:
"test"
},
StateQuestionWidget: {
QuestionText:
"test"
},
ZipQuestionWidget: {
QuestionText:
"test"
},
FirstNameQuestionWidget: {
QuestionText:
"test"
},
LastNameQuestionWidget: {
QuestionText:
"test"
},
EmailAddressQuestionWidget: {
QuestionText:
"test"
},
AlertVerificationWarningWidget: {
HeaderText:
"test",
BodyText:
"test",
},
AlertNoMatchWarningWidget: {
HeaderText:
"test",
BodyText:
"test",
},
},
};
const apiPromise = Promise.resolve(apiResponses);
settleAllPromises.mockImplementation(() => apiPromise);
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
//Mock damage initialize methods
funnelHeader.methods = {
initializeComponent: jest.fn(),
};
vehicleBanner.methods = {
initializeComponent: jest.fn(),
};
funnelSubHeader.methods = {
initializeComponent: jest.fn(),
};
funnelFooter.methods = {
initializeComponent: jest.fn(),
};
customerQuestions.methods = {
initializeComponent: jest.fn(),
};
addressQuestions.methods = {
initializeComponent: jest.fn(),
setupAddressLookup: jest.fn(),
};
const mountOptions = getMountOptions(mountOptionsMockData);
mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods
mountOptions.global.directives = {
maska: maska
};
const wrapper = mount(addressLookup, mountOptions);
const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
funnelHeaderWrapper.vm.initializeComponent =
funnelHeader.methods.initializeComponent;
const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
vehicleBannerWrapper.vm.initializeComponent =
vehicleBanner.methods.initializeComponent;
const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
funnelSubHeaderWrapper.vm.initializeComponent =
funnelSubHeader.methods.initializeComponent;
const funnelFooterWrapper = wrapper.findComponent({ name: "funnelFooter" });
funnelFooterWrapper.vm.initializeComponent =
funnelFooter.methods.initializeComponent;
const customerQuestionsWrapper = wrapper.findComponent({ name: "customerQuestions" });
customerQuestionsWrapper.vm.initializeComponent =
customerQuestions.methods.initializeComponent;
const addressQuestionsWrapper = wrapper.findComponent({ name: "addressQuestions" });
addressQuestionsWrapper.vm.initializeComponent =
addressQuestions.methods.initializeComponent;
addressQuestionsWrapper.vm.setupAddressLookup =
addressQuestions.methods.setupAddressLookup;
return { wrapper, apiPromise };
}

113
src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js1
View file

@ -1,113 +0,0 @@
import { shallowMount } from "@vue/test-utils";
import addressVehiclesQuestion from "@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
// import store from "@/store";
// jest.mock("@/store", () => { return {}; }, { virtual: true });
describe("addressVehiclesQuestion.vue", () => {
it("Should include button-question component", () => {
// Arrange
const wrapper = shallowMount(addressVehiclesQuestion, {
propsData: {
// vehicles: [
// {
// "Name": "testname",
// "Text": "testtext",
// }
// ]
}
});
// console.log('wrapper.html: ', wrapper.html());
// Assert
const buttonQuestion = wrapper.find('button-question-stub');
expect(buttonQuestion).toBe;
});
it("on initialize should pass in questionText", () => {
// Arrange
const wrapper = shallowMount(addressVehiclesQuestion, {
propsData: {},
});
//Act
addressVehiclesQuestion.methods.initializeComponent.call(wrapper.vm, {QuestionText: 'Testing question text'});
// console.log('wrapper.html: ', wrapper.html());
// console.log('wrapper.vm.questionText: ', wrapper.vm.questionText);
// Assert
expect(wrapper.vm.questionText).toEqual('Testing question text');
});
// it("Alert should show if prop isCarIdDifferent is true", () => {
// // Arrange
// const wrapper = shallowMount(addressVehiclesQuestion, setupMountOptions({
// propsData: {
// isCarIdDifferent: true,
// }
// }));
// //Act
// const alert = wrapper.find('alert');
// console.log('wrapper.html: ', wrapper.html());
// console.log('wrapper.vm.questionText: ', wrapper.vm.questionText);
// // Assert
// // expect(wrapper.vm.questionText).toEqual('Testing question text');
// });
});
function setupMountOptions(mountOptionsMockData = {}) {
// //Mock store
// store.dispatch = jest.fn(() => {});
// store.getters = {};
// const mockMixin = {
// methods: {
// getCmsContent: jest.fn().mockImplementation(() => {
// return '';
// }),
// getDamageString: jest.fn().mockImplementation(() => {
// return '';
// })
// },
// store: {
// dispatch: store.dispatch,
// getters: store.getters,
// },
// }
const mockGetCmsContent = jest.fn();
mockGetCmsContent((cmsWidget, field) => {
return field
});
const defaultMountOptions = {
// route: { query: { fmgPage: 'page-name' } },
mixins: {
methods: {
getCmsContent: mockGetCmsContent,
},
},
global: {
mocks: {
store: {
dispatch: store.dispatch,
getters: store.getters,
},
},
},
};
const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData));
const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
console.log('what are allMountOptions??? ', allMountOptions);
return allMountOptions;
}

26
src/layouts/address-vehicles/address-vehicles.spec.js1
View file

@ -1,26 +0,0 @@
import { shallowMount } from "@vue/test-utils";
import addressVehicles from "@/layouts/address-vehicles/address-vehicles";
describe("addressVehicles.vue", () => {
it("Should include address-vehicles-question component", () => {
// Arrange
const wrapper = shallowMount(addressVehicles, {
propsData: {
vehicles: [
{
"Name": "testname",
"Text": "testtext",
}
]
}
});
// console.log('wrapper.html: ', wrapper.html());
// Assert
const addressVehiclesQuestion = wrapper.find('address-vehicles-question-stub');
expect(addressVehiclesQuestion).toBe;
});
});

6
src/layouts/component-test/component-test.vue
View file

@ -7,7 +7,7 @@
</div>
<div class="row my-2">
<div class="col">
<menuButton/>
<menuModal/>
</div>
</div>
<div class="row my-4">
@ -1089,7 +1089,7 @@
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
import menuButton from "@/common-components/menu-button/menu-button";
import menuModal from "@/common-components/menu-modal/menu-modal";
export default {
name: "App",
components: {
@ -1104,7 +1104,7 @@
textboxQuestion,
dropdownQuestion,
vinInformation,
menuButton,
menuModal,
},
data() {
return {

818
src/layouts/license-plate-lookup/license-plate-lookup.spec.js
View file

@ -6,9 +6,10 @@ import { settleAllPromises } from "@/helpers/layout-helper.js";
import * as navigateToHeritage from "@/helpers/heritage-integration/navigation-helper";
import baseMixin from "@/mixins/base-mixin";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { shallowMount, flushPromises } from "@vue/test-utils";
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { nextTick } from "vue";
import { storeMutations } from "@/constants/store-mutations";
import store from "@/store";
jest.mock('@/assets/img/loader.gif', () => 'loader.gif')
@ -24,416 +25,502 @@ jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(),
}));
// Mock Store
jest.mock("@/store", () => ({
commit: jest.fn(),
dispatch: jest.fn(),
getters: {
order: {
customer: { emailAddress: "test@test.com"},
serviceLocation: {zip: "11111"},
},
vehicle: {
carId: "TESTID",
registration: {
licensePlate: "TESTPLATE",
zipCode: "12345",
},
},
eventBusItem: jest.fn(),
damage: {
glassToReplace: []
},
},
}));
describe("license-plate-lookup.vue", () => {
test("CarId set, arePagePrerequisitesValid should be true ", async () => {
//Arrange
const { wrapper } = setupMocks({});
describe("get values from store", () => {
test("getLicensePlateFromStore returns store license plate", async () => {
// Arrange
const { wrapper } = setupMocks({});
const mockLicensePlate = "TESTPLATE";
store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, mockLicensePlate);
//Act
licensePlateLookup.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "license-plate-lookup" } },
undefined,
(c) => c(wrapper.vm)
);
// Act
const licensePlate = wrapper.vm.getLicensePlateFromStore();
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
await nextTick();
//Assert
expect(arePagePrerequisitesValid).toBe(true);
});
});
describe("license-plate-lookup.vue", () => {
test("BackButtonAction triggers a router.navigate change", async () => {
//Arrange
const { wrapper } = setupMocks({});
//Act
licensePlateLookup.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "license-plate-lookup" } },
undefined,
(c) => c(wrapper.vm)
);
wrapper.vm.backButtonAction();
//Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
});
});
describe("license-plate-lookup.vue", () => {
test("getLicensePlateFromStore returns store license plate", async () => {
// Arrange
const { wrapper } = setupMocks({});
// ACT
const licensePlate = wrapper.vm.getLicensePlateFromStore();
// Assert
expect(licensePlate).toEqual("TESTPLATE");
});
});
describe("license-plate-lookup.vue", () => {
test("getRegistrationZipFromStore returns store registration zip", async () => {
// Arrange
const { wrapper } = setupMocks({});
// ACT
const registrationZip = wrapper.vm.getRegistrationZipFromStore();
// Assert
expect(registrationZip).toEqual("12345");
});
});
describe("license-plate-lookup.vue", () => {
test("getEmailFromStore returns store customer email", async () => {
// Arrange
const { wrapper } = setupMocks({});
// ACT
const customerEmail = wrapper.vm.getEmailFromStore();
// Assert
expect(customerEmail).toEqual("test@test.com");
});
});
describe("license-plate-lookup.vue", () => {
test("getServiceZipFromStore returns store service zip", async () => {
// Arrange
const { wrapper } = setupMocks({});
// ACT
const serviceZip = wrapper.vm.getServiceZipFromStore();
// Assert
expect(serviceZip).toEqual("11111");
});
});
describe("license-plate-lookup.vue", () => {
test("Navigate forward should be called and isCarId should be set to false when data entered matches store data on forwardButtonAction click", async () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
return {data: {isServiceable: true}};
// Assert
expect(licensePlate).toEqual(mockLicensePlate);
});
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
return '';
});
const vinLookup = {data: {vehicle: {carId: "TESTID"}}}
wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
return {catch: () => vinLookup};
test("getRegistrationZipFromStore returns store registration zip", async () => {
// Arrange
const { wrapper } = setupMocks({});
const mockRegistrationZip = "12345";
store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, mockRegistrationZip);
// ACT
const registrationZip = wrapper.vm.getRegistrationZipFromStore();
// Assert
expect(registrationZip).toEqual(mockRegistrationZip);
});
wrapper.vm.navigateForward = jest.fn();
//Act
licensePlateLookup.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "license-plate-lookup" } },
undefined,
(c) => c(wrapper.vm)
);
await wrapper.vm.forwardButtonAction();
test("getEmailFromStore returns store customer email", async () => {
// Arrange
const { wrapper } = setupMocks({});
const mockEmail = "test@test.com";
store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, mockEmail);
//Assert
expect(wrapper.vm.navigateForward).toHaveBeenCalled();
expect(wrapper.vm.isCarIdDifferent).toEqual(false);
});
});
// ACT
const customerEmail = wrapper.vm.getEmailFromStore();
describe("license-plate-lookup.vue", () => {
test("Function should stop and datam isRegistrationZipServicable should be set to false when service zip entered returns false on forwardButtonAction click", async () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
return {data: {isServiceable: false}};
// Assert
expect(customerEmail).toEqual(mockEmail);
});
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
return '';
});
wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
//Act
licensePlateLookup.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "license-plate-lookup" } },
undefined,
(c) => c(wrapper.vm)
);
await wrapper.vm.forwardButtonAction();
//Assert
expect(wrapper.vm.isRegistrationZipServicable).toEqual(false);
});
});
test("getServiceZipFromStore returns store service zip", async () => {
// Arrange
const { wrapper } = setupMocks({});
const mockServiceZip = "11111";
store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, mockServiceZip);
describe("license-plate-lookup.vue", () => {
test("Function should stop and datam isCarIdDifferent should be set to true when carId entered doesn't match store carId or previously entered carId on forwardButtonAction click", async () => {
// ACT
const serviceZip = wrapper.vm.getServiceZipFromStore();
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
return {data: {isServiceable: true}};
// Assert
expect(serviceZip).toEqual(mockServiceZip);
});
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
return '';
});
const vinLookup = {data: {vehicle: {carId: "TESTID1"}}}
wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
return {catch: () => vinLookup};
});
describe("navigation", () => {
test("BackButtonAction triggers a router.navigate change", async () => {
//Arrange
const { wrapper } = setupMocks({});
//Act
licensePlateLookup.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "license-plate-lookup" } },
undefined,
(c) => c(wrapper.vm)
);
wrapper.vm.backButtonAction();
//Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
});
wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
//Act
licensePlateLookup.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "license-plate-lookup" } },
undefined,
(c) => c(wrapper.vm)
);
await wrapper.vm.forwardButtonAction();
describe("on forwardButtonAction click", () => {
test("Navigate forward should be called and isCarIdDifferent should be set to false when data entered matches store data on forwardButtonAction click", async () => {
// Arrange
const { wrapper } = setupMocks({});
const mockCarId = "TESTID";
store.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, []);
store.commit(storeMutations.UPDATE_CAR_ID, mockCarId);
//Assert
expect(wrapper.vm.isCarIdDifferent).toEqual(true);
});
});
wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
return { data: { isServiceable: true } };
});
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
const vinLookup = { data: { vehicle: { carId: mockCarId } } }
wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
return new Promise(resolve => resolve(vinLookup));
});
wrapper.vm.navigateForward = jest.fn();
describe("license-plate-lookup.vue", () => {
test("Navigate forward should be called and isCarId should be set to true when carId entered matches previously entered carId and rest of data entered matches store data on forwardButtonAction click", async () => {
//Act
licensePlateLookup.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "license-plate-lookup" } },
undefined,
(c) => c(wrapper.vm)
);
// Arrange
const { wrapper } = setupMocks({});
await wrapper.vm.forwardButtonAction();
wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
return {data: {isServiceable: true}};
//Assert
expect(wrapper.vm.isCarIdDifferent).toEqual(false);
expect(wrapper.vm.navigateForward).toHaveBeenCalled();
});
test("Function should stop and datam isRegistrationZipServicable should be set to false when service zip entered returns false on forwardButtonAction click", async () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
return { data: { isServiceable: false } };
});
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
return '';
});
//Act
licensePlateLookup.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "license-plate-lookup" } },
undefined,
(c) => c(wrapper.vm)
);
await wrapper.vm.forwardButtonAction();
//Assert
expect(wrapper.vm.isRegistrationZipServicable).toEqual(false);
});
test("Function should stop and datam isCarIdDifferent should be set to true when carId entered doesn't match store carId or previously entered carId on forwardButtonAction click", async () => {
// Arrange
const { wrapper } = setupMocks({});
store.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, []);
wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
return { data: { isServiceable: true } };
});
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
return '';
});
const vinLookup = { data: { vehicle: { carId: "TESTID1" } } }
wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
return new Promise(resolve => resolve(vinLookup));
});
//Act
licensePlateLookup.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "license-plate-lookup" } },
undefined,
(c) => c(wrapper.vm)
);
await wrapper.vm.forwardButtonAction();
//Assert
expect(wrapper.vm.isCarIdDifferent).toEqual(true);
});
test("Navigate forward should be called and isCarId should be set to true when carId entered matches previously entered carId and rest of data entered matches store data on forwardButtonAction click", async () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
return { data: { isServiceable: true } };
});
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
return '';
});
const vinLookup = { data: { vehicle: { carId: "TESTID1" } } }
wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
return new Promise(resolve => resolve(vinLookup));
});
wrapper.vm.previouslyEnteredCarId = "TESTID1";
wrapper.vm.navigateForward = jest.fn();
//Act
licensePlateLookup.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "license-plate-lookup" } },
undefined,
(c) => c(wrapper.vm)
);
await wrapper.vm.forwardButtonAction();
//Assert
expect(wrapper.vm.navigateForward).toHaveBeenCalled();
expect(wrapper.vm.isCarIdDifferent).toEqual(true);
});
});
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
return '';
});
const vinLookup = {data: {vehicle: {carId: "TESTID1"}}}
wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
return {catch: () => vinLookup};
describe("navigateForward", () => {
test("NavigateAfterSave should be called if isCarIdDifferent is true and isSelectedGlassAvailableForVehicle is false when navigateForward is called", async () => {
// Arrange
const { wrapper } = setupMocks({});
//Act
wrapper.vm.isCarIdDifferent = true;
wrapper.vm.isSelectedGlassAvailableForVehicle = false;
wrapper.vm.$router.navigateAfterSave = jest.fn();
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
return '';
});
store.dispatch = jest.fn();
await wrapper.vm.navigateForward();
//Assert
expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalled();
});
test("navigateAfterSaveToHeritageFunnel should be called if isCarIdDifferent is false or isSelectedGlassAvailableForVehicle is true when navigateForward is called", async () => {
// Arrange
const { wrapper } = setupMocks({});
//Act
wrapper.vm.isCarIdDifferent = false;
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
return '';
});
navigateToHeritage.navigateAfterSaveToHeritageFunnel = jest.fn();
await wrapper.vm.navigateForward();
//Assert
expect(navigateToHeritage.navigateAfterSaveToHeritageFunnel).toHaveBeenCalled();
});
});
wrapper.vm.previouslyEnteredCarId = "TESTID1";
wrapper.vm.navigateForward = jest.fn();
//Act
licensePlateLookup.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "license-plate-lookup" } },
undefined,
(c) => c(wrapper.vm)
);
await wrapper.vm.forwardButtonAction();
//Assert
expect(wrapper.vm.navigateForward).toHaveBeenCalled();
expect(wrapper.vm.isCarIdDifferent).toEqual(true);
});
});
describe("license-plate-lookup.vue", () => {
test("Button Text should revert to initial value when licensePlate textfield has new text", async () => {
describe("button text", () => {
test("Button Text should revert to initial value when licensePlate textfield has new text", async () => {
// Arrange
const { wrapper } = setupMocks({});
// Arrange
const { wrapper } = setupMocks({});
//Act
wrapper.vm.licensePlate = "NEWPLATE";
wrapper.vm.getCmsContent = jest.fn();
wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
await wrapper.vm.$nextTick();
//Act
wrapper.vm.licensePlate = "NEWPLATE";
wrapper.vm.getCmsContent = jest.fn();
await wrapper.vm.$nextTick();
//Assert
expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
});
});
describe("license-plate-lookup.vue", () => {
test("Button Text should revert to initial value when registrationZip textfield has new text", async () => {
// Arrange
const { wrapper } = setupMocks({});
//Act
wrapper.vm.registrationZip = "55555";
wrapper.vm.getCmsContent = jest.fn();
wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
await wrapper.vm.$nextTick();
//Assert
expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
});
});
describe("license-plate-lookup.vue", () => {
test("Button Text should revert to initial value when serviceZip textfield has new text", async () => {
// Arrange
const { wrapper } = setupMocks({});
//Act
wrapper.vm.serviceZip = "55555";
wrapper.vm.getCmsContent = jest.fn();
wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
await wrapper.vm.$nextTick();
//Assert
expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
});
});
describe("license-plate-lookup.vue", () => {
test("Dispatch reset damage and dependencies should be called if isCarIdDifferent is true and isSelectedGlassAvailableForVehicle is false when updateCustomerInfo is called", async () => {
// Arrange
const { wrapper } = setupMocks({});
//Act
wrapper.vm.isCarIdDifferent = true;
wrapper.vm.isSelectedGlassAvailableForVehicle = false;
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
return '';
//Assert
expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
});
store.commit = jest.fn();
store.dispatch = jest.fn();
const vehicleInfo = {year: "2020", make: "honda", model: "civic", style: "2 door", carId: "TestId", category: "testCat", imageUrl: "image.jpg", imageVifNumber: "123", imageColor: "blue"}
await wrapper.vm.updateCustomerInfo('vin', vehicleInfo, 'registrationState');
test("Button Text should revert to initial value when registrationZip textfield has new text", async () => {
//Assert
expect(store.dispatch).toHaveBeenCalled();
});
});
// Arrange
const { wrapper } = setupMocks({});
describe("license-plate-lookup.vue", () => {
test("NavigateAfterSave should be called if isCarIdDifferent is true and isSelectedGlassAvailableForVehicle is false when navigateForward is called", async () => {
//Act
wrapper.vm.registrationZip = "55555";
wrapper.vm.getCmsContent = jest.fn();
await wrapper.vm.$nextTick();
// Arrange
const { wrapper } = setupMocks({});
//Act
wrapper.vm.isCarIdDifferent = true;
wrapper.vm.isSelectedGlassAvailableForVehicle = false;
wrapper.vm.$router.navigateAfterSave = jest.fn();
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
return '';
//Assert
expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
});
store.dispatch = jest.fn();
await wrapper.vm.navigateForward();
test("Button Text should revert to initial value when serviceZip textfield has new text", async () => {
//Assert
expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalled();
});
});
// Arrange
const { wrapper } = setupMocks({});
describe("license-plate-lookup.vue", () => {
test("navigateAfterSaveToHeritageFunnel should be called if isCarIdDifferent is false or isSelectedGlassAvailableForVehicle is true when navigateForward is called", async () => {
//Act
wrapper.vm.serviceZip = "55555";
wrapper.vm.getCmsContent = jest.fn();
await wrapper.vm.$nextTick();
// Arrange
const { wrapper } = setupMocks({});
//Act
wrapper.vm.isCarIdDifferent = false;
wrapper.vm.$refs.loadingModal.showModal = jest.fn();
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
return '';
//Assert
expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
});
navigateToHeritage.navigateAfterSaveToHeritageFunnel = jest.fn();
await wrapper.vm.navigateForward();
})
//Assert
expect(navigateToHeritage.navigateAfterSaveToHeritageFunnel).toHaveBeenCalled();
});
describe("saving registrationZip and serviceZip on continue", () => {
test("registrationZip is serviceable and vehicle match is found => sets service zip/state to registration zip/state", async () => {
// Arrange
const { wrapper } = setupMocks({});
const mockCarId = "TESTID";
store.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, []);
store.commit(storeMutations.UPDATE_CAR_ID, mockCarId)
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
wrapper.vm.validateZip = jest.fn().mockImplementation((zip) => {
if (zip)
return { data: { isServiceable: true, state: "OH" } };
return
});
const vinLookup = { data: { vehicle: { carId: mockCarId } } }
wrapper.vm.lookupVin = jest.fn().mockImplementation(() => new Promise(resolve => resolve(vinLookup)));
await wrapper.setData({ registrationZip: "00000" });
navigateToHeritage.navigateAfterSaveToHeritageFunnel = jest.fn();
// Act
await wrapper.vm.forwardButtonAction();
// Assert
expect(store.getters.order.serviceLocation.zipCode).toEqual(store.getters.vehicle.registration.zipCode);
expect(store.getters.vehicle.registration.zipCode).toEqual("00000");
expect(store.getters.order.serviceLocation.zipCode).toEqual("00000");
})
test("vehicle match is found but registrationZip is not serviceable => shows service zip/state field", async () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
return { data: { isServiceable: false, state: "XX" } };
});
await wrapper.setData({ registrationZip: "00000" });
navigateToHeritage.navigateAfterSaveToHeritageFunnel = jest.fn();
// Act
await wrapper.vm.forwardButtonAction();
// Assert
const serviceZipField = wrapper.findComponent("[cmsWidgetName='ServiceZip']");
expect(serviceZipField.exists()).toBe(true);
expect(serviceZipField.isVisible()).toBe(true);
})
test("registrationZip is not serviceable so serviceZip field is shown, continue clicked => user cannot continue", async () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
return { data: { isServiceable: false, state: "XX" } };
});
await wrapper.setData({ registrationZip: "00000" });
navigateToHeritage.navigateAfterSaveToHeritageFunnel = jest.fn();
await wrapper.vm.forwardButtonAction();
wrapper.vm.$router.navigateAfterSave = jest.fn();
// At this point, serviceZip field is shown
// Act
// Continue without entering anything into service zip field
await wrapper.vm.forwardButtonAction();
// Assert
const serviceZipField = wrapper.findComponent("[cmsWidgetName='ServiceZip']");
expect(serviceZipField.exists()).toBe(true);
expect(serviceZipField.isVisible()).toBe(true); 3
expect(navigateToHeritage.navigateAfterSaveToHeritageFunnel).not.toHaveBeenCalled();
expect(wrapper.vm.$router.navigateAfterSave).not.toHaveBeenCalled();
});
test("registrationZip is not serviceable so serviceZip field is shown, user enters serviceZip => user can continue", async () => {
// Arrange
const { wrapper } = setupMocks({});
const registrationZip = "00000";
const serviceZip = "99999";
const mockCarId = "TestCarId";
store.commit(storeMutations.UPDATE_CAR_ID, mockCarId);
wrapper.vm.validateZip = jest.fn().mockImplementation((zip) => {
return { data: { isServiceable: zip == registrationZip ? false : true, state: "XX" } };
});
const vinLookup = { data: { vehicle: { carId: mockCarId } } }
wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
return new Promise(resolve => resolve(vinLookup));
});
wrapper.vm.navigateForward = jest.fn();
await wrapper.setData({ registrationZip: registrationZip });
await wrapper.vm.forwardButtonAction();
// At this point, serviceZip field is shown
await wrapper.setData({ serviceZip: serviceZip });
// Act
// Continue after entering input into service zip field
await wrapper.vm.forwardButtonAction();
// Assert
const serviceZipField = wrapper.findComponent("[cmsWidgetName='ServiceZip']");
expect(serviceZipField.exists()).toBe(true);
expect(serviceZipField.isVisible()).toBe(true);
expect(wrapper.vm.navigateForward).toHaveBeenCalled();
});
test("registrationZip is not serviceable so serviceZip field is shown, user enters serviceZip => service and registration zips/states saved", async () => {
// Arrange
const { wrapper } = setupMocks({});
const registrationZip = "00000";
const serviceZip = "99999";
const mockCarId = "TestCarId";
store.commit(storeMutations.UPDATE_CAR_ID, mockCarId);
wrapper.vm.validateZip = jest.fn().mockImplementation((zip) => {
return { data: { isServiceable: zip == registrationZip ? false : true, state: "XX" } };
});
const vinLookup = { data: { vehicle: { carId: mockCarId } } }
wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
return new Promise(resolve => resolve(vinLookup));
});
wrapper.vm.navigateForward = jest.fn();
await wrapper.setData({ registrationZip: registrationZip });
await wrapper.vm.forwardButtonAction();
// At this point, serviceZip field is shown
await wrapper.setData({ serviceZip: serviceZip });
// Act
// Continue after entering value into service zip field
await wrapper.vm.forwardButtonAction();
// Assert
expect(store.getters.vehicle.registration.zipCode).toEqual(registrationZip);
expect(store.getters.order.serviceLocation.zipCode).toEqual(serviceZip);
expect(wrapper.vm.navigateForward).toHaveBeenCalled();
});
})
describe("miscellaneous", () => {
test("CarId set, arePagePrerequisitesValid should be true ", async () => {
//Arrange
const { wrapper } = setupMocks({});
store.commit(storeMutations.UPDATE_CAR_ID, "TESTCARID");
//Act
licensePlateLookup.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "license-plate-lookup" } },
undefined,
(c) => c(wrapper.vm)
);
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
await nextTick();
//Assert
expect(arePagePrerequisitesValid).toBe(true);
});
test("Dispatch reset damage and dependencies should be called if isCarIdDifferent is true and isSelectedGlassAvailableForVehicle is false when updateCustomerInfo is called", async () => {
// Arrange
const { wrapper } = setupMocks({});
//Act
wrapper.vm.isCarIdDifferent = true;
wrapper.vm.isSelectedGlassAvailableForVehicle = false;
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
return '';
});
store.commit = jest.fn();
store.dispatch = jest.fn();
const vehicleInfo = { year: "2020", make: "honda", model: "civic", style: "2 door", carId: "TestId", category: "testCat", imageUrl: "image.jpg", imageVifNumber: "123", imageColor: "blue" }
await wrapper.vm.updateCustomerInfo('vin', vehicleInfo, 'registrationState');
//Assert
expect(store.dispatch).toHaveBeenCalled();
})
test("dispatch non blocking store action called on validate zip", async () => {
// Arrange
const { wrapper } = setupMocks({});
//Act
await wrapper.vm.validateZip("12345");
//Assert
expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalled();
});
test("dispatch non blocking store action called on lookup vin", async () => {
// Arrange
const { wrapper } = setupMocks({});
//Act
await wrapper.vm.lookupVin("zzz123fqsfwg");
//Assert
expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalled();
});
})
});
describe("license-plate-lookup.vue", () => {
test("dispatch non blocking store action called on validate zip", async () => {
// Arrange
const { wrapper } = setupMocks({});
//Act
await wrapper.vm.validateZip("12345");
//Assert
expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalled();
});
});
describe("license-plate-lookup.vue", () => {
test("dispatch non blocking store action called on lookup vin", async () => {
// Arrange
const { wrapper } = setupMocks({});
//Act
await wrapper.vm.lookupVin("zzz123fqsfwg");
//Assert
expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalled();
});
});
function setupMocks({
pageHeaderWidgetHeaderText = {},
mountOptionsMockData = {
router: {
navigate: jest.fn(),
},
licensePlate: "TESTPLATE",
registrationZip: "12345"
},
}) {
store.commit(storeMutations.RESET_STATE);
//Mock api responses
baseMixin.methods.dispatchStoreAction = jest.fn();
const apiResponses = {
@ -455,13 +542,16 @@ function setupMocks({
settleAllPromises.mockImplementation(() => apiPromise);
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
const mountOptions = getMountOptions(mountOptionsMockData);
mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods
const wrapper = shallowMount(licensePlateLookup, mountOptions);
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
wrapper.vm.$refs.loadingModal.showModal = jest.fn();
return { wrapper, apiPromise };
}

6
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -220,19 +220,18 @@ export default {
return store.getters.order.customer.emailAddress;
},
getServiceZipFromStore() {
return store.getters.order.serviceLocation.zip;
return store.getters.order.serviceLocation.zipCode;
},
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {
//Call zip validation services
const registrationZipValidationPromise = this.validateZip(this.registrationZip);
const serviceZipValidationPromise = this.serviceZip ? this.validateZip(this.serviceZip) : null;
const registrationZipValidationResults = await registrationZipValidationPromise;
const serviceZipValidationResults = serviceZipValidationPromise !== null ? (await serviceZipValidationPromise) : registrationZipValidationResults;
//Handle service zip validations
if (!serviceZipValidationResults.data.isServiceable) {
this.$refs.funnelFooter.removeLoader();
@ -255,6 +254,7 @@ export default {
this.isCarIdDifferent = false;
return;
});
this.isCarIdDifferent =
vinLookup.data.vehicle.carId !== store.getters.vehicle.carId;

1229
src/layouts/vehicle-damage/vehicle-damage.spec.js
View file

File diff suppressed because it is too large Load diff

2
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -405,7 +405,7 @@ export default {
shouldDisplayVehicleChangeAlert() {
return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
},
shouldHideBackButton(){
shouldHideBackButton() {
return this.$store.getters.payment.insuranceCoverage.isVerified || getFunnelCookie().HasDelayedClaimRegistration;
}
},

46
src/mixins/analytics-mixin.js
View file

@ -1,18 +1,17 @@
import { storeActions } from "@/constants/store-actions";
import { getDeviceIdValue, getSessionIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper";
import { setCookieProperties, getDeviceIdValue, getSessionIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper";
import { queryStrings } from "@/constants/query-strings";
import { experimentSettings } from "@/constants/experiments";
import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics";
import { cookieNames } from "@/constants/cookie-names";
import baseMixin from "@/mixins/base-mixin";
export default {
methods: {
logPageView(pageEvent) {
// if the user does not have a session id from the content site, do not log.
const sid = getSessionIdValue();
if (sid === '00000000-0000-0000-0000-000000000000' || sid == null) {
return;
if (getSessionKeyValue() === 0 || getSessionIdValue() === '00000000-0000-0000-0000-000000000000') {
this.initSession();
}
const currentPageName = getPageNameByQueryString();
@ -20,38 +19,59 @@ export default {
userId: getDeviceIdValue(),
sessionKey: getSessionKeyValue(),
pageName: currentPageName,
sessionId: sid,
sessionId: getSessionIdValue(),
action: '',
event: pageEvent,
shouldUseSessionId: true,
shouldUseSessionId: false,
};
baseMixin.methods.dispatchStoreAction(storeActions.LOG_PAGE_VIEW, payload, false);
},
logCustomEvent(category, action, label, value) {
// if the user does not have a session id from the content site, do not log.
const sid = getSessionIdValue();
if (sid === '00000000-0000-0000-0000-000000000000' || sid == null) {
return;
if (getSessionKeyValue() === 0 || getSessionIdValue() === '00000000-0000-0000-0000-000000000000') {
this.initSession();
}
const currentPageName = getPageNameByQueryString();
var payload = {
userId: getDeviceIdValue(),
sessionKey: getSessionKeyValue(),
pageName: currentPageName,
sessionId: sid,
sessionId: getSessionIdValue(),
category: category,
action: action,
label: label,
value: value,
shouldUseSessionId: true,
shouldUseSessionId: false,
};
baseMixin.methods.dispatchStoreAction(storeActions.LOG_CUSTOM_EVENT, payload, false);
},
async initSession() {
const sid = getSessionIdValue();
const skey = getSessionKeyValue();
var payload = {
userId: getDeviceIdValue(),
sessionId: sid,
userAgent: navigator.userAgent,
referrer: document.referrer,
};
const response = await baseMixin.methods.dispatchStoreAction(storeActions.INITIALIZE_SESSION, payload, false);
if (response.data) {
if (response.data.sessionKey && skey === 0) {
setCookieProperties({ [cookieNames.SESSION_KEY]: response.data.sessionKey});
}
if (response.data.sessionId && sid === '00000000-0000-0000-0000-000000000000') {
setCookieProperties({ [cookieNames.SESSION_ID]: response.data.sessionId});
}
}
},
pushEventToGA(category, action, label, pushToLogApp = false) {
const currentPageName = getPageNameByQueryString();
const eventToBePushed = {

39
src/mixins/analytics-mixin.spec.js
View file

@ -1,6 +1,7 @@
import analyticsMixin from "@/mixins/analytics-mixin";
import { setupMocksForJsFiles, setupCookies } from "@/helpers/unit-test-helper.js";
import { storeActions } from "@/constants/store-actions";
import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics";
describe("analyticsMixin.js", () => {
test("logPageView: calls dispatch with type and payload", () => {
@ -26,9 +27,6 @@ describe("analyticsMixin.js", () => {
});
test("logCustomEvent: calls dispatch with type and payload", () => {
const type = "";
const payload = {};
const mockData = {
actionList: [{
actionName: storeActions.LOG_CUSTOM_EVENT
@ -36,7 +34,7 @@ describe("analyticsMixin.js", () => {
}
const mocks = setupMocksForJsFiles(mockData);
analyticsMixin.methods.logCustomEvent(type, payload);
analyticsMixin.methods.logCustomEvent("someCat", "someAction", "someLabel", "someVal");
expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();
});
@ -126,4 +124,37 @@ describe("analyticsMixin.js", () => {
//Assert
expect(obj!=null);
});
test("analyticsPageEvents returns constants analyticsPageEvents", () => {
//Act
const analyticsPE = analyticsMixin.computed.analyticsPageEvents();
//Assert
expect(analyticsPE).toEqual(analyticsPageEvents);
});
test("GaActions returns constants GaActions", () => {
//Act
const gaActions = analyticsMixin.computed.GaActions();
//Assert
expect(gaActions).toEqual(GaActions);
});
test("GaCategories returns constants GaCategories", () => {
//Act
const gaCategories = analyticsMixin.computed.GaCategories();
//Assert
expect(gaCategories).toEqual(GaCategories);
});
test("GaLabels returns constants GaLabels", () => {
//Act
const gaLabels = analyticsMixin.computed.GaLabels();
//Assert
expect(gaLabels).toEqual(GaLabels);
});
});

4
src/mixins/base-mixin.js
View file

@ -43,9 +43,9 @@ export default {
}
},
getFooterInfoBoxHeight() {
const footerInfoBox = document.querySelector(".footer #infoBox");
const footerInfoBox = document.querySelector(".footer#infoBox");
return footerInfoBox ? footerInfoBox.offsetHeight : 0;
}
},
},
computed: {
storeActions() {

20
src/store/index.js
View file

@ -509,6 +509,26 @@ export const actions = {
});
},
initializeSession(context, { userId, sessionId, userAgent, referrer }) {
var payload = {
applicationName: 'SafeliteDotCom',
userId: userId,
deviceId: userId,
sessionId: sessionId,
userAgent: userAgent,
operatorId: "WEB",
userName: "SafeliteConceptFunnel",
referrer: referrer
};
return globalMethods.callHttpClient({
method: endpoints.InitializeSession.method,
endpoint: endpoints.InitializeSession.url,
payload: payload,
logApiCall: false
});
},
GetExperimentsByUser(context, { userId }){
return globalMethods.callHttpClient({
method: endpoints.GetExperimentsByUser.method,

19
src/store/store.spec.js
View file

@ -642,7 +642,7 @@ describe("Actions", () => {
});
// Assert
const response = await actions.logPageView(context, { userId: "userId", sessionKey: "sessionKey", pageName: "pageName", sessionId: "sessionId", pageEvent: pageEvent, shouldUseSessionId: true });
const response = await actions.logPageView(context, { userId: "userId", sessionKey: "sessionKey", pageName: "pageName", sessionId: "sessionId", pageEvent: pageEvent, shouldUseSessionId: false });
expect(response).toEqual({});
});
@ -663,7 +663,22 @@ describe("Actions", () => {
});
// Assert
const response = await actions.logCustomEvent(context, { userId: "userId", sessionKey: "sessionKey", pageName: "pageName", sessionId: "sessionId", customEvent: customEvent, shouldUseSessionId: true });
const response = await actions.logCustomEvent(context, { userId: "userId", sessionKey: "sessionKey", pageName: "pageName", sessionId: "sessionId", customEvent: customEvent, shouldUseSessionId: false });
expect(response).toEqual({});
});
it("initializeSession action, should return nothing", async () => {
// Arrange
const context = state;
// Act
globalMethods.callHttpClient.mockImplementation(() => {
return Promise.resolve({ });
});
// Assert
const response = await actions.initializeSession(context, { userId: "userId", sessionId: "", userAgent: "", referrer: "", shouldUseSessionId: false });
expect(response).toEqual({});
});

12
src/styles/common-styles.scss
View file

@ -47,4 +47,14 @@ body {
.page-container-grouped-styles {
@extend .container-fluid, .shadow, .rounded-3, .p-2, .position-relative, .make-tall, .px-5;
}
}
//Footer modal backdrop adjustments for positioning
.modal-backdrop {
left: 50%;
transform: translateX(-50%);
max-width: 576px;
height: calc(100% - 152px);
top: 72px;
}
}

4
src/styles/ux-variables.scss
View file

@ -180,3 +180,7 @@ $box-shadow-inset: inset 0 1px 2px rgba($black, .075);
$alert-bg-scale: -90%;
$alert-border-scale: -100%;
$alert-color-scale: 40%;
//Modal animation
$modal-fade-transform: translate(0, 0);
$modal-backdrop-opacity: 0;