refactor to match FMG structure
This commit is contained in:
Kroell
parent
ba5dad580f
commit
934dccd37d
5 changed files with 0 additions and 191 deletions
|
|
@ -1,61 +0,0 @@
|
||||||
/* eslint-env jest */
|
|
||||||
import { getDamageString } from '@/helpers/damage-helper';
|
|
||||||
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 '@/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
|
|
||||||
|
|
||||||
jest.mock('@/helpers/damage-helper');
|
|
||||||
|
|
||||||
const mountOptions = {
|
|
||||||
global: {
|
|
||||||
stubs: {
|
|
||||||
RouterLink: RouterLinkStub,
|
|
||||||
},
|
|
||||||
mixins: [
|
|
||||||
{
|
|
||||||
methods: {
|
|
||||||
getCmsContent: jest.fn(() => ''),
|
|
||||||
getFooterInfoBoxHeight: jest.fn(() => 80),
|
|
||||||
cssClassNameForCmsWidget: jest.fn(() => 'widget-name-mock-class'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
describe('license-plate-lookup-alerts.vue', () => {
|
|
||||||
test('VehicleNotFoundAlert is displayed on the screen', () => {
|
|
||||||
// Arrange
|
|
||||||
mountOptions.props = {
|
|
||||||
activeAlertType: vehicleLookupAlertTypes.NOT_FOUND,
|
|
||||||
};
|
|
||||||
|
|
||||||
// Act
|
|
||||||
const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions);
|
|
||||||
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);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('VehicleNotMatchedAlert is displayed on the screen', () => {
|
|
||||||
// Arrange
|
|
||||||
getDamageString.mockImplementation(() => 'Mock Damage String');
|
|
||||||
mountOptions.props = {
|
|
||||||
activeAlertType: vehicleLookupAlertTypes.NOT_MATCHED,
|
|
||||||
};
|
|
||||||
|
|
||||||
// Act
|
|
||||||
const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions);
|
|
||||||
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);
|
|
||||||
});
|
|
||||||
})
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
id="vin-lookup-alerts-wrapper"
|
|
||||||
:class="wrapperCssClass"
|
|
||||||
>
|
|
||||||
<vehicleNotFoundAlert
|
|
||||||
v-if="isVehicleNotFoundVisible"
|
|
||||||
/>
|
|
||||||
<vehicleNotMatchedAlert
|
|
||||||
v-else-if="isVehicleNotMatchedVisible"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
|
|
||||||
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',
|
|
||||||
components: {
|
|
||||||
vehicleNotFoundAlert,
|
|
||||||
vehicleNotMatchedAlert,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
activeAlertType: {
|
|
||||||
type: String,
|
|
||||||
validator(value) {
|
|
||||||
const acceptedValues = [null];
|
|
||||||
acceptedValues.push(...Object.values(vehicleLookupAlertTypes));
|
|
||||||
return acceptedValues.includes(value);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
isVehicleNotFoundVisible() {
|
|
||||||
return this.activeAlertType === vehicleLookupAlertTypes.NOT_FOUND;
|
|
||||||
},
|
|
||||||
isVehicleNotMatchedVisible() {
|
|
||||||
return this.activeAlertType === vehicleLookupAlertTypes.NOT_MATCHED;
|
|
||||||
},
|
|
||||||
wrapperCssClass() {
|
|
||||||
return {
|
|
||||||
'mb-5': this.activeAlertType !== null,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
<template>
|
|
||||||
<alert
|
|
||||||
alertClass="alert-danger"
|
|
||||||
cmsWidgetName="AlertVinNotFoundWidget"
|
|
||||||
id="vehicle-not-found-alert"
|
|
||||||
aria-label="vehicle-not-found-alert"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import alert from '@/ux-components/alert/alert.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'vehicle-not-found-alert',
|
|
||||||
components: {
|
|
||||||
alert,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
/**
|
|
||||||
Override wrong margin-bottom rule in the Alert component.
|
|
||||||
*/
|
|
||||||
#vehicle-not-found-alert p:last-of-type {
|
|
||||||
margin-bottom: 0 !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
<template>
|
|
||||||
<alert
|
|
||||||
alertClass="alert-warning"
|
|
||||||
cmsWidgetName="AlertMatchedDifferentVehicleWidget"
|
|
||||||
:manualCopy="body"
|
|
||||||
:manualHeadline="header"
|
|
||||||
aria-label="vehicle-not-matched-alert"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { getDamageString } from '@/helpers/damage-helper';
|
|
||||||
|
|
||||||
import alert from '@/ux-components/alert/alert.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'vehicle-not-matched-alert',
|
|
||||||
components: {
|
|
||||||
alert,
|
|
||||||
},
|
|
||||||
inject: ['vehicleFromLookup'],
|
|
||||||
computed: {
|
|
||||||
header() {
|
|
||||||
return (
|
|
||||||
this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'HeadlineText')
|
|
||||||
.replaceAll('{custom:damage}', getDamageString())
|
|
||||||
);
|
|
||||||
},
|
|
||||||
body() {
|
|
||||||
let year = '';
|
|
||||||
let make = '';
|
|
||||||
let model = '';
|
|
||||||
|
|
||||||
if (this.vehicleFromLookup) {
|
|
||||||
year = this.vehicleFromLookup.year;
|
|
||||||
make = this.vehicleFromLookup.make;
|
|
||||||
model = this.vehicleFromLookup.model;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText')
|
|
||||||
.replaceAll('{custom:damage}', getDamageString())
|
|
||||||
.replaceAll('{custom:vinlookupYear}', year)
|
|
||||||
.replaceAll('{custom:vinlookupMake}', make)
|
|
||||||
.replaceAll('{custom:vinlookupModel}', model)
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
@ -53,7 +53,6 @@
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
// Import Supporting Files
|
// Import Supporting Files
|
||||||
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
|
|
||||||
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
|
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
|
||||||
import { settleAllPromises } from '@/helpers/layout-helper';
|
import { settleAllPromises } from '@/helpers/layout-helper';
|
||||||
import { useMainStore } from '@/store';
|
import { useMainStore } from '@/store';
|
||||||
|
|
@ -72,7 +71,6 @@ import siteHeader from '@/common-components/site-header/site-header.vue';
|
||||||
import siteSubHeader from '@/common-components/site-sub-header/site-sub-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 vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
|
||||||
import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
|
import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
|
||||||
import licensePlateLookupAlerts from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
|
|
||||||
import alert from "@/ux-components/alert/alert";
|
import alert from "@/ux-components/alert/alert";
|
||||||
|
|
||||||
// Define Validation Rules
|
// Define Validation Rules
|
||||||
|
|
@ -275,7 +273,6 @@ export default {
|
||||||
siteSubHeader,
|
siteSubHeader,
|
||||||
vehicleBanner,
|
vehicleBanner,
|
||||||
textboxQuestion,
|
textboxQuestion,
|
||||||
licensePlateLookupAlerts,
|
|
||||||
alert
|
alert
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue