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

Merge pull request #113 from Safelite/feature/digital/SSR-178

Browse source 
Feature/digital/ssr 178
This commit is contained in:
Kulbhushan Kaushik 2023-01-13 12:27:13 -05:00 committed by GitHub
commit 6d3034e5e5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 73 additions and 173 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/layouts/license-plate-lookup/license-plate-lookup-alerts.spec.js → src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.spec.js
View file

@ -4,7 +4,7 @@ import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
import { RouterLinkStub } from '@vue/test-utils';
import { render } from '@testing-library/vue';
import '@testing-library/jest-dom';
import LicensePlateLookupAlertsComponent from './license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
import LicensePlateLookupAlertsComponent from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
jest.mock('@/helpers/damage-helper');
@ -34,12 +34,12 @@ describe('license-plate-lookup-alerts.vue', () => {
// Act
const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions);
const VehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
const VehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
const vehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
const vehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
// Assert
expect(VehicleNotFoundAlert).toBeVisible();
expect(VehicleNotMatchedAlert).toEqual(null);
expect(vehicleNotFoundAlert).toBeVisible();
expect(vehicleNotMatchedAlert).toEqual(null);
});
test('VehicleNotMatchedAlert is displayed on the screen', () => {
@ -51,13 +51,11 @@ describe('license-plate-lookup-alerts.vue', () => {
// Act
const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions);
const VehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
const VehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
const vehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
const vehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
// Assert
expect(VehicleNotMatchedAlert).toBeVisible();
expect(VehicleNotFoundAlert).toEqual(null);
expect(vehicleNotMatchedAlert).toBeVisible();
expect(vehicleNotFoundAlert).toEqual(null);
});
})

7
src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue
View file

@ -13,8 +13,8 @@
</template>
<script>
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
import vehicleNotFoundAlert from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue';
import vehicleNotMatchedAlert from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue';
import vehicleNotFoundAlert from './vehicle-not-found-alert/vehicle-not-found-alert.vue';
import vehicleNotMatchedAlert from './vehicle-not-matched-alert/vehicle-not-matched-alert.vue';
export default {
name: 'license-plate-lookup-alerts',
@ -46,4 +46,5 @@
},
},
};
</script>
</script>

4
src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue
View file

@ -1,7 +1,7 @@
<template>
<alert
alert-class="alert-danger"
cms-widget-name="AlertVinNotFoundWidget"
alertClass="alert-danger"
cmsWidgetName="AlertVinNotFoundWidget"
id="vehicle-not-found-alert"
aria-label="vehicle-not-found-alert"
/>

10
src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue
View file

@ -1,10 +1,10 @@
<template>
<alert
alert-class="alert-warning"
cms-widget-name="AlertMatchedDifferentVehicleWidget"
:manual-copy="body"
:manual-headline="header"
aria-label="vehicle-not-matched-alert"
alertClass="alert-warning"
cmsWidgetName="AlertMatchedDifferentVehicleWidget"
:manualCopy="body"
:manualHeadline="header"
aria-label="vehicle-not-matched-alert"
/>
</template>
<script>

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

@ -1,6 +1,5 @@
// Components
import licensePlateLookup from "@/layouts/license-plate-lookup/license-plate-lookup.vue";
import licensePlateQuestion from "@/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue";
// Supporting files
import { shallowMount } from '@vue/test-utils';
@ -22,16 +21,6 @@ jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(),
}));
// Mock damage helper
jest.mock("@/helpers/damage-helper", () => ({
isGlassAvailableForCarId: () => {
return false;
},
getDamageString: () => {
return "damage string";
},
}));
describe("license-plate-lookup.vue", () => {
test("Vehicle make set, arePagePrerequisitesValid should be true", () => {
//Arrange
@ -97,8 +86,6 @@ describe("navigation", () => {
});
function setupMocks({
licensePlateQuestionCmsContent = {},
licensePlateQuestionInitialData = {},
pageHeaderWidgetHeaderText = {},
pageFooterWidgetCmsContent = {},
mountOptionsMockData = {},
@ -111,7 +98,6 @@ function setupMocks({
const apiResponses = {
cmsContent: {
SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
LicensePlateQuestion: licensePlateQuestionCmsContent,
VehicleBannerWidget: {
GenericVehicleImage:
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`,
@ -123,15 +109,12 @@ function setupMocks({
SiteFooterWidget: pageFooterWidgetCmsContent,
},
licensePlateQuestionInitialData: licensePlateQuestionInitialData,
};
mountOptionsMockData = {
...mountOptionsMockData,
router: {
navigate: jest.fn(),
navigateWithoutSaving: jest.fn(),
navigateWithSaving: jest.fn(),
},
store: {
getters: {
@ -146,27 +129,16 @@ function setupMocks({
},
};
const apiPromise = Promise.resolve(apiResponses);
settleAllPromises.mockImplementation(() => apiPromise);
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
//Mock make question methods
licensePlateQuestion.methods = {
loadInitialData: jest.fn(),
initializeComponent: jest.fn(),
};
const mountOptions = getMountOptions(mountOptionsMockData);
const wrapper = shallowMount(licensePlateLookup, mountOptions);
const licensePlateQuestionWrapper = wrapper.findComponent({ name: "licensePlateQuestion" });
licensePlateQuestionWrapper.vm.initializeComponent =
licensePlateQuestion.methods.initializeComponent;
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
return { wrapper, apiPromise };
}
}

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

@ -13,11 +13,23 @@
<licensePlateLookupAlerts
:activeAlertType="activeVehicleLookupAlertType"
/>
<licensePlateQuestion
v-model="licensePlate"/>
<zipQuestion
<textboxQuestion
cmsWidgetName="LicensePlateNumberQuestionWidget"
v-model="licensePlate"
isRequired
disableAutoFill
inputId="license-plate-question"
validationRules="license-plate-required"
/>
<textboxQuestion
cmsWidgetName="RegistrationZipQuestionWidget"
v-model="registrationZipCode"
class="mt-4" />
isRequired
disableAutoFill
inputId="zip"
validationRules="zip-required|zip-format"
class="mt-4"
/>
<siteFooter
:isForwardActionDisabled="!meta.valid"
cms-widget-name="SiteFooterWidget"
@ -31,12 +43,13 @@
<script>
// Import Supporting Files
import { computed } from 'vue';
import { endpoints } from '@/constants/endpoints';
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
import globalMethods from '@/global-methods';
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { settleAllPromises } from '@/helpers/layout-helper';
import { useMainStore } from '@/store';
import { errorMessages } from "@/constants/error-messages";
import { required, regex } from "@/helpers/validation-rules";
import { defineRule } from "vee-validate";
// Import Component
import baseFormMixin from '@/mixins/base-form-mixin';
@ -46,10 +59,13 @@ import siteHeader from '@/common-components/site-header/site-header.vue';
import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
import licensePlateQuestion from '@/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue';
import zipQuestion from '@/layouts/license-plate-lookup/zip-question/zip-question.vue';
import licensePlateLookupAlerts from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
// Define Validation Rules
defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
defineRule("zip-required", required(errorMessages.REGISTRATION_ZIP_REQUIRED));
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
export default {
name: 'license-plate-lookup',
mixins: [baseFormMixin],
@ -60,9 +76,7 @@ export default {
siteSubHeader,
vehicleBanner,
textboxQuestion,
licensePlateQuestion,
zipQuestion,
licensePlateLookupAlerts
licensePlateLookupAlerts,
},
setup() {
const mainStore = useMainStore();
@ -116,7 +130,7 @@ export default {
this.resetActiveAlert();
// NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
const vehicleLookupResponse = await this.lookupVinByPlate(this.licensePlate);
const vehicleLookupResponse = await this.mainStore.lookupVinByPlate(this.licensePlate);
if (vehicleLookupResponse.error) {
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
@ -128,7 +142,7 @@ export default {
this.vehicleFromLookup = vehicleLookupResponse.data.vehicle;
if (this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId) {
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
const vehicleYearMakeModel = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModel}`);
@ -137,26 +151,7 @@ export default {
// Continue
},
async lookupVinByPlate(licensePlate) {
try {
const response = await globalMethods.callHttpClient({
method: endpoints.LookupVinByPlate.method,
endpoint: endpoints.LookupVinByPlate.url,
payload: {
licensePlate,
licenseState: "IL" // hard coded until Welcome Page is complete and license state can be pulled from store
},
});
return response;
} catch (responseError) {
return {
error: {
status: responseError.status,
},
};
}
},
resetActiveAlert() {
this.activeVehicleLookupAlertType = null;
},

43
src/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue
View file

@ -1,43 +0,0 @@
<template>
<textboxQuestion
inputId="license-plate-question"
cmsWidgetName="LicensePlateNumberQuestionWidget"
v-model="licensePlate"
isRequired
disableAutoFill
validationRules="license-plate-required"
/>
</template>
<script>
// Import Other Supporting File(s)
import { defineRule } from 'vee-validate';
import { required } from '@/helpers/validation-rules';
import { errorMessages } from '@/constants/error-messages';
// Import Component(s)
import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
export default {
name: 'license-plate-question',
props: {
modelValue: String,
},
emits: ['update:modelValue'],
components: {
textboxQuestion,
},
computed: {
licensePlate: {
get() {
return this.modelValue;
},
set(newValue) {
this.$emit('update:modelValue', newValue);
},
},
},
};
</script>

44
src/layouts/license-plate-lookup/zip-question/zip-question.vue
View file

@ -1,44 +0,0 @@
<template>
<textboxQuestion
inputId="zip"
cmsWidgetName="RegistrationZipQuestionWidget"
v-model="registrationZipCode"
isRequired
disableAutoFill
validationRules="zip-required|zip-format"
/>
</template>
<script>
// Import Other Supporting File(s)
import { defineRule } from 'vee-validate';
import { regex, required } from '@/helpers/validation-rules';
import { errorMessages } from '@/constants/error-messages';
// Import Component(s)
import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
defineRule("zip-required", required(errorMessages.REGISTRATION_ZIP_REQUIRED));
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
export default {
name: 'zip-question',
props: {
modelValue: String,
},
emits: ['update:modelValue'],
components: {
textboxQuestion,
},
computed: {
registrationZipCode: {
get() {
return this.modelValue;
},
set(newValue) {
this.$emit('update:modelValue', newValue);
},
},
},
};
</script>

21
src/store/index.js
View file

@ -232,6 +232,27 @@ export const useMainStore = defineStore({
});
},
async lookupVinByPlate(licensePlate) {
try {
const response = await globalMethods.callHttpClient({
method: endpoints.LookupVinByPlate.method,
endpoint: endpoints.LookupVinByPlate.url,
payload: {
licensePlate: licensePlate,
licenseState: "IL", // hard coded until Welcome Page is complete and license state can be pulled from store
},
});
return response;
} catch (responseError) {
return {
error: {
status: responseError.status,
},
};
}
},
// PartsOrQuestions API Actions
async getPartsOrQuestions() {
const vehicle = this.vehicle;