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>
|
||||
<script>
|
||||
// Import Supporting Files
|
||||
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
|
||||
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
|
||||
import { settleAllPromises } from '@/helpers/layout-helper';
|
||||
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 vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.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";
|
||||
|
||||
// Define Validation Rules
|
||||
|
|
@ -275,7 +273,6 @@ export default {
|
|||
siteSubHeader,
|
||||
vehicleBanner,
|
||||
textboxQuestion,
|
||||
licensePlateLookupAlerts,
|
||||
alert
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue