remove vehicle banner component
This commit is contained in:
Bill Richardson
parent
1413140bef
commit
581674a322
2 changed files with 0 additions and 198 deletions
|
|
@ -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();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -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>
|
|
||||||
Loading…
Reference in a new issue