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

Merge pull request #463 from Safelite/feature/richardson/SSR-673

Browse source 
schedule sub header and change loc link
This commit is contained in:
brich1212safe 2023-10-02 10:07:45 -04:00 committed by GitHub
commit 3e4190ec8a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 246 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/iss-components/site-sub-header/site-sub-header.vue
View file

@ -19,7 +19,7 @@
:class="justifySubheader">
<p
class="fw-normal mb-0"
:class="alternateFormatting">
:class="[alternateFormatting, subTextClasses]">
<span v-html="subText"> </span>
</p>
</div>
@ -49,7 +49,8 @@ export default {
issContainingPage: String,
justification: String,
stripRteStyle: Boolean,
subContentProperty: String
subContentProperty: String,
subTextClasses: String
},
emits: ['click-event'],
computed: {

184
src/layouts/schedule-page/schedule-page.spec.js Normal file
View file

@ -0,0 +1,184 @@
// Components
import schedule from '@/layouts/schedule-page/schedule-page.vue';
// Supporting Files
import { createTestingPinia } from '@pinia/testing';
import { shallowMount } from '@vue/test-utils';
import { getMountOptions } from '@/helpers/unit-test-helper.js';
import { useMainStore } from '@/store/index.js';
const mockMixin = {
methods: {
getCmsContent: jest.fn().mockImplementation(() => ''),
setCmsContent: jest.fn()
}
};
const footerStub = {
render: () => {},
methods: {
updateButtonText: jest.fn()
}
};
const loadingModalStub = {
render: () => {},
methods: {
showModal: jest.fn(),
hideModal: jest.fn()
}
};
function getShallowMountedComponent(initialData = {}, methodToRun = () => {}) {
const mountOptions = getMountOptions({
router: {
navigate: jest.fn()
}
});
// mountOptions.global.mocks["$store"] = store;
mountOptions.global.stubs = {
siteFooter: footerStub,
siteHeader: true,
recalModal: true,
contentGroupModal: true,
alert: true,
loadingModal: loadingModalStub
};
methodToRun();
mountOptions.mixins = [mockMixin];
mountOptions.data = () => (
initialData
);
const wrapper = shallowMount(schedule, mountOptions);
return { wrapper };
}
beforeEach(() => {
const testingPinia = createTestingPinia({
initialState: {
main: {
order: {
schedule: {
date: '2019-01-01',
startTime: '09:00',
endTime: '10:00',
routeCode: '000'
},
lineItems: {
glassParts: [
{
partNumber: 'ABC123'
}
],
supportingItems: []
},
serviceLocation: {
appointmentType: 'Inshop',
zipCode: '12345',
zipCodeCtu: '01234',
provider: {
providerNumber: '123'
}
},
damage: {
isRepair: false
},
referralNumber: '1234567'
},
payment: {
isInsurance: true
},
lineItems: {
glassParts: [],
supportingItems: []
}
}
}
});
useMainStore(testingPinia);
});
describe('schedule-page.vue', () => {
describe('Initial Load', () => {
test('Should pass arePagePrerequisitesValid with a mobile order and no providerNumber', () => {
// Arrange
const { wrapper } = getShallowMountedComponent();
wrapper.vm.mainStore.order.serviceLocation.appointmentType = 'Mobile';
wrapper.vm.mainStore.order.serviceLocation.provider = null;
// Act
const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(arePagePrerequisitesValid).toBe(true);
});
test('Should pass arePagePrerequisitesValid with an inshop order and providerNumber', () => {
// Arrange
const { wrapper } = getShallowMountedComponent();
// Act
const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(arePagePrerequisitesValid).toBe(true);
});
test('Should fail arePagePrerequisitesValid with an inshop order and no providerNumber', () => {
// Arrange
const { wrapper } = getShallowMountedComponent();
wrapper.vm.mainStore.order.serviceLocation.provider.providerNumber = null;
// Act
const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(arePagePrerequisitesValid).toBeFalsy();
});
test('Should fail arePagePrerequisitesValid without isInsurance', () => {
// Arrange
const { wrapper } = getShallowMountedComponent();
wrapper.vm.mainStore.payment.isInsurance = null;
// Act
const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(arePagePrerequisitesValid).toBe(false);
});
test('Should fail arePagePrerequisitesValid if supportingItems is null', async () => {
// Arrange
const { wrapper } = getShallowMountedComponent();
wrapper.vm.mainStore.order.lineItems.supportingItems = null;
// Act
const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(arePagePrerequisitesValid).toBe(false);
});
test('Should fail arePagePrerequisitesValid with an replace with no glass parts', async () => {
// Arrange
const { wrapper } = getShallowMountedComponent();
wrapper.vm.mainStore.order.lineItems.glassParts = [];
// Act
const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(arePagePrerequisitesValid).toBe(false);
});
});
describe('Rendering', () => {
test('Schedule page loads', () => {
// Arrange
const { wrapper } = getShallowMountedComponent();
// Assert
expect(wrapper).toBeTruthy();
});
});
});

73
src/layouts/schedule-page/schedule-page.vue
View file

@ -5,18 +5,26 @@
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="container-fluid pb-2">
<p>Placeholder for schedule page</p>
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
</div>
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<siteSubHeader
cmsWidgetName="ScheduleSubHeaderWidget"
subTextClasses="text-center small sub-text"
class="mt-5" />
<template v-if="ChangeShopLink.length">
<textBlock
cmsWidgetName="ChangeShopLink"
justifyText="center"
class="mb-3 text-link-small"
marginTopSizeOverride="1" />
</template>
<div class="main-content-container">
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@forwardClicked="forwardButtonAction" />
</div>
</div>
</Form>
@ -24,11 +32,13 @@
<script>
// Components
import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import textBlock from '@/digital-components/text-block/text-block.vue';
// Supporting files
import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { fetchCmsContentForPage, splitCopyOnCMSPlaceHolder } from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper';
import { Form } from 'vee-validate';
import BaseFormMixin from '@/mixins/base-form-mixin.js';
@ -38,7 +48,9 @@ export default {
name: 'schedule-page',
components: {
siteHeader,
siteSubHeader,
siteFooter,
textBlock,
// eslint-disable-next-line vue/no-reserved-component-names
Form
},
@ -56,7 +68,6 @@ export default {
// use resultMap to populate layout content.
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
@ -67,8 +78,18 @@ export default {
},
data() {
},
computed: {
ChangeShopLinkText() {
return this.getCmsContent('ChangeShopLink', 'Text');
},
ChangeShopLink() {
// Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
}
},
methods: {
splitCopyOnCMSPlaceHolder,
arePagePrerequisitesValid() {
const { serviceLocation } = useMainStore().order;
const serviceLocationPreReqs = serviceLocation.zipCode
@ -98,3 +119,27 @@ export default {
}
};
</script>
<style lang="scss" scoped>
$page-side-padding: 1.5rem;
.page-container-grouped-styles {
overflow: auto;
.main-content-container {
padding: 0 1.5rem !important;
}
}
:deep(.text-link-small) {
a, .btn-link {
font-size: 0.875rem;
line-height: 1.5;
}
}
:deep(.subheader-primary) {
h5.dark-header {
margin-bottom: 0.25rem !important;
}
}
</style>