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

remove vehicle banner component

Browse source
This commit is contained in:
Bill Richardson 2025-12-03 15:18:18 -05:00
parent 1413140bef
commit 581674a322
2 changed files with 0 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
src/iss-components/vehicle-banner/vehicle-banner.spec.js
View file

@ -1,114 +0,0 @@
import { shallowMount } from '@vue/test-utils';
import vehicleCategories from '@/constants/vehicle-categories.js';
import { useMainStore } from '@/store';
import { createApp } from 'vue';
import { createPinia, mapStores } from 'pinia';
import App from '@/App.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
const cmsData = { VehicleBannerWidget:
{
GenericVehicleImage: 'blurred-image.jpg',
GenericVehicleImageFilePath: 'images/default-source/default-album/blurred-image.jpg',
CarUnmatchedVehicleIcon: 'car-placeholder.jpg',
TruckUnmatchedVehicleIcon: 'truck-placeholder.jpg',
VanUnmatchedVehicleIcon: 'van-placeholder.jpg',
CommercialVanUnmatchedVehicleIcon: 'commercial-placeholder.jpg',
SuvUnmatchedVehicleIcon: 'suv-placeholder.jpg'
} };
const vueApp = createApp(App);
const pinia = createPinia();
vueApp.use(pinia);
const store = useMainStore();
const mockMixin = {
methods: {
getCmsContent(widgetName, fieldName) {
return cmsData[widgetName][fieldName];
}
},
computed: {
...mapStores(useMainStore),
vehicleCategories() {
return vehicleCategories;
}
}
};
describe('vehicleBanner', () => {
test('renders the blurrycar image when displayGenericVehicleImage is true', async () => {
const wrapper = shallowMount(vehicleBanner, {
propsData: {
displayGenericVehicleImage: true,
cmsWidgetName: 'VehicleBannerWidget'
},
mixins: [mockMixin]
});
expect(wrapper.vm.vehicleImageToDisplay).toEqual(wrapper.vm.genericVehicleImage);
expect(wrapper.find('img').attributes('class')).toContain('vehicle-image');
wrapper.unmount();
});
test('renders expected vehicle image', async () => {
store.order.vehicle.imageUrl = 'url_to_vehicle_image';
const wrapper = shallowMount(vehicleBanner, {
propsData: {
displayGenericVehicleImage: false,
cmsWidgetName: 'VehicleBannerWidget'
},
mixins: [mockMixin]
});
expect(wrapper.vm.vehicleImageToDisplay).toEqual('url_to_vehicle_image');
expect(wrapper.find('img').attributes('class')).toContain('vehicle-image');
wrapper.unmount();
});
test('should render default car icon when imageUrl is null and category is default', async () => {
store.order.vehicle.imageUrl = null;
const wrapper = shallowMount(vehicleBanner, {
propsData: {
displayGenericVehicleImage: false,
cmsWidgetName: 'VehicleBannerWidget'
},
mixins: [mockMixin]
});
const iconUrl = wrapper.vm.vehicleImageToDisplay;
expect(iconUrl).toEqual('car-placeholder.jpg');
wrapper.unmount();
});
const params = [['CAR', 'car-placeholder.jpg'],
['TRUCK', 'truck-placeholder.jpg'],
['VAN', 'van-placeholder.jpg'],
['COMMERCIAL VAN', 'commercial-placeholder.jpg'],
['SUV', 'suv-placeholder.jpg'],
['OTHER', 'car-placeholder.jpg']];
test.each(params)('renders correct icon when imageUrl is not populated for %s and %s', async (category, expectedIcon) => {
store.order.vehicle.imageUrl = null;
store.order.vehicle.category = category;
const wrapper = shallowMount(vehicleBanner, {
propsData: {
displayGenericVehicleImage: false,
cmsWidgetName: 'VehicleBannerWidget'
},
mixins: [mockMixin]
});
const vehicleIcon = wrapper.vm.getUnmatchedVehicleIcon();
expect(vehicleIcon).toEqual(expectedIcon);
expect(wrapper.find('img').attributes('class')).toContain('vehicle-image');
wrapper.unmount();
});
});

84
src/iss-components/vehicle-banner/vehicle-banner.vue
View file

@ -1,84 +0,0 @@
<template>
<div class="vehicle_banner text-center">
<img
class="vehicle-image img-fluid"
:src="vehicleImageToDisplay"
alt="" />
</div>
</template>
<script>
export default {
name: 'vehicle-banner',
props: {
displayGenericVehicleImage: {
type: Boolean,
required: true
},
cmsWidgetName: String
},
computed: {
vehicleImageToDisplay() {
if (this.displayGenericVehicleImage) {
return this.genericVehicleImage;
}
const imageUrl = (this.mainStore.hasSubmittedOrder())
? this.mainStore.getSubmittedOrder().vehicle.imageUrl
: this.mainStore.order.vehicle.imageUrl;
if (!imageUrl || imageUrl === 'NULL') {
return this.getUnmatchedVehicleIcon();
}
return imageUrl;
},
genericVehicleImage() {
return this.getCmsContent(this.cmsWidgetName, 'GenericVehicleImage');
},
carUnmatchedVehicleIcon() {
return this.getCmsContent(this.cmsWidgetName, 'CarUnmatchedVehicleIcon');
},
truckUnmatchedVehicleIcon() {
return this.getCmsContent(this.cmsWidgetName, 'TruckUnmatchedVehicleIcon');
},
vanUnmatchedVehicleIcon() {
return this.getCmsContent(this.cmsWidgetName, 'VanUnmatchedVehicleIcon');
},
commercialUnmatchedVehicleIcon() {
return this.getCmsContent(this.cmsWidgetName, 'CommercialVanUnmatchedVehicleIcon');
},
suvUnmatchedVehicleIcon() {
return this.getCmsContent(this.cmsWidgetName, 'SuvUnmatchedVehicleIcon');
}
},
methods: {
getUnmatchedVehicleIcon() {
const category = this.mainStore.getSubmittedOrder()?.vehicle.category ?? this.mainStore.order.vehicle.category;
switch (category) {
case this.vehicleCategories.CAR:
return this.carUnmatchedVehicleIcon;
case this.vehicleCategories.SUV:
return this.suvUnmatchedVehicleIcon;
case this.vehicleCategories.TRUCK:
return this.truckUnmatchedVehicleIcon;
case this.vehicleCategories.VAN:
return this.vanUnmatchedVehicleIcon;
case this.vehicleCategories.COMMERCIALVAN:
return this.commercialUnmatchedVehicleIcon;
default:
return this.carUnmatchedVehicleIcon;
}
}
}
};
</script>
<style lang="scss" scoped>
.vehicle-image {
max-width: 290px;
object-fit: cover;
width: 100%;
height: 132px;
}
</style>