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

Merge branch 'develop' into feature/SSR-113

Browse source
This commit is contained in:
Kulbhushan Kaushik 2022-11-17 07:53:29 -05:00
commit 298b880d83
11 changed files with 97 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
src/common-components/site-header/menu-modal/menu-modal.vue
View file

@ -8,10 +8,23 @@
</div>
<!-- Modal -->
<div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
<div class="menu-modal-container">
<button
class="menu-button"
type="button"
:class="[isActive ? 'active' : '']"
data-bs-toggle="modal"
data-bs-target="#footerModal"
aria-label="Hamburger Menu (modal window)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</button>
</div>
<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>
<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" target="_blank" />
@ -74,8 +87,8 @@
justify-content: center;
align-items: center;
padding: 0;//Required to prevent 'squish' on iPhone
z-index: 1056;
.bar1,
z-index: 1050;
.bar1,
.bar2,
.bar3 {
width: 14px;
@ -106,7 +119,7 @@
.modal-body {
padding: 2rem;
}
.modal-fullscreen {
.modal-fullscreen {
width: 100vw;
max-width: 576px;
}
@ -117,7 +130,47 @@
border-top: none;
padding: 2rem;
}
.menu-modal-container {
position: absolute;
padding: 1.47rem 1rem 1.47rem 1.47rem;
right: 0;
top: -4.0rem;
button {
border: none;
&.menu-button {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
box-shadow: none;
background-color: $white;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0; //Required to prevent 'squish' on iPhone
z-index: 1056;
.bar1,
.bar2,
.bar3 {
width: 14px;
height: 2px;
background-color: $blue;
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-backdrop styles are in common-styles.scss
}
}

2
src/layouts/vehicle-make/vehicle-make.spec.js
View file

@ -85,7 +85,7 @@ describe("vehicle-make.vue", () => {
});
test("Year set, arePagePrerequisitesValid should be true ", async () => {
test("Year set, arePagePrerequisitesValid should be true ", () => {
//Arrange
const { wrapper } = setupMocks({});
useMainStore().order.vehicle.year = 2001;

7
src/layouts/vehicle-make/vehicle-make.vue
View file

@ -7,6 +7,7 @@
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
:hasBackButton="true"
:backButtonAccessibleText="backButtonAccessibleText"
@click-event="backButtonAction"
/>
<div class="fade-on-route-transition">
@ -97,5 +98,11 @@
);
},
},
computed: {
backButtonAccessibleText()
{
return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
},
},
};
</script>

3
src/layouts/vehicle-model/vehicle-model.spec.js
View file

@ -86,7 +86,7 @@ describe("vehicle-model.vue", () => {
});
describe("vehicle-model.vue", () => {
test("Make set, arePagePrerequisitesValid should be true ", async () => {
test("Make set, arePagePrerequisitesValid should be true ", () => {
//Arrange
const { wrapper } = setupMocks({});
useMainStore().order.vehicle.make = "Honda";
@ -100,7 +100,6 @@ describe("vehicle-model.vue", () => {
);
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
await nextTick();
//Assert
expect(arePagePrerequisitesValid).toBe(true);

8
src/layouts/vehicle-model/vehicle-model.vue
View file

@ -7,6 +7,7 @@
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
:hasBackButton="true"
:backButtonAccessibleText="backButtonAccessibleText"
@click-event="backButtonAction"
/>
<div class="fade-on-route-transition">
@ -97,6 +98,13 @@
siteSubHeader,
vehicleBanner,
},
computed: {
backButtonAccessibleText()
{
return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
}
},
};
</script>

18
src/layouts/vehicle-style/vehicle-style.spec.js
View file

@ -23,9 +23,6 @@ jest.mock("@/helpers/cms-content-helper", () => ({
}));
describe("vehicle-style.vue", () => {
beforeEach(() => {
jest.clearAllMocks();
});
test("Style question component is initized with api data", async () => {
//Arrange
@ -87,25 +84,18 @@ describe("vehicle-style.vue", () => {
});
});
test("Model set, arePagePrerequisitesValid should be true ", async () => {
test("Model set, arePagePrerequisitesValid should be true ", () => {
//Arrange
const { wrapper } = setupMocks({});
useMainStore().order.vehicle = { year: 2011, make: "ford", model: "mustang", style: null }
//Act
vehicleStyle.beforeRouteEnter.call(
wrapper.vm,
{ query: { issPage: "vehicle-style" } },
undefined,
(c) => c(wrapper.vm)
);
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
await nextTick();
const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
//Assert
expect(arePagePrerequisitesValid).toBe(true);
});
});
function setupMocks({
@ -150,6 +140,6 @@ function setupMocks({
styleQuestion.methods.initializeComponent;
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
return { wrapper, apiPromise };
}

8
src/layouts/vehicle-style/vehicle-style.vue
View file

@ -7,6 +7,7 @@
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
:hasBackButton="true"
:backButtonAccessibleText="backButtonAccessibleText"
@click-event="backButtonAction" />
<div class="fade-on-route-transition">
<styleQuestion
@ -92,5 +93,12 @@ export default {
siteSubHeader,
vehicleBanner,
},
computed: {
backButtonAccessibleText()
{
return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
}
}
};
</script>

3
src/layouts/vehicle-year/vehicle-year.spec.js
View file

@ -51,7 +51,7 @@ describe("vehicle-year.vue", () => {
});
describe("vehicle-year.vue", () => {
test("arePagePrerequisitesValid should be true ", async () => {
test("arePagePrerequisitesValid should be true ", () => {
//Arrange
const { wrapper } = setupMocks({});
@ -64,7 +64,6 @@ describe("vehicle-year.vue", () => {
);
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
await nextTick();
//Assert
expect(arePagePrerequisitesValid).toBe(true);

5
src/store/index.js
View file

@ -363,6 +363,9 @@ export const useMainStore = defineStore({
},
logCustomEvent({ userId, sessionKey, pageName, sessionId, category, action, label, value, shouldUseSessionId, experimentsForUser})
{
if ( pageName == null || pageName.length == 0 )
pageName = "none";
var payload = {
userId: userId,
sessionKey: sessionKey,
@ -376,7 +379,7 @@ export const useMainStore = defineStore({
shouldUseSessionId: shouldUseSessionId,
experimentsForUser: experimentsForUser,
};
return globalMethods.callHttpClient({
method: endpoints.LogCustomEvent.method,
endpoint: endpoints.LogCustomEvent.url,

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

@ -1,4 +1,4 @@
import { useMainStore } from "./@store";
import { useMainStore } from '@/store';
import { createApp } from 'vue';
import { createPinia } from "pinia";
import globalMethods from "@/global-methods";

4
src/ux-components/alert/alert.spec.js
View file

@ -12,6 +12,7 @@ describe("alert.vue", () => {
isDismissible: true,
manualHeadline: "testHeader",
manualCopy: "testCopy",
cmsWidgetName: "alert",
},
})
);
@ -31,6 +32,7 @@ describe("alert.vue", () => {
alertClass: "warning",
manualHeadline: "testHeader",
manualCopy: "testCopy",
cmsWidgetName: "alert",
},
})
);
@ -57,6 +59,7 @@ describe("alert.vue", () => {
propsData: {
manualHeadline: "testHeader",
manualCopy: "testCopy with a {routerLink: testName, testLink} inside of it",
cmsWidgetName: "alert",
},
stubs: ["router-link"],
})
@ -74,6 +77,7 @@ describe("alert.vue", () => {
manualHeadline: "testHeader",
manualCopy:
"<p>testCopy with a {routerLink: testName, testLink} inside of it</p><p>and two paragraphs</p>",
cmsWidgetName: "alert",
},
stubs: ["router-link"],
})