diff --git a/azure-pipelines.yml b/azure-pipelines.yml index 7aa73313..574b61fb 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -75,6 +75,10 @@ stages: clearFolder: true deployFolder: '' region: us-east-2 + safelite-dev-iss-us-east-1: + clearFolder: true + deployFolder: '' + region: us-east-1 appDeployVariables: __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__) __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__) diff --git a/src/common-components/site-sub-header/site-sub-header.spec.js b/src/common-components/site-sub-header/site-sub-header.spec.js index ff5f2d5e..fd35c00c 100644 --- a/src/common-components/site-sub-header/site-sub-header.spec.js +++ b/src/common-components/site-sub-header/site-sub-header.spec.js @@ -7,7 +7,7 @@ describe("site sub header", () => { const mockMixin = { methods: { getCmsContent: jest.fn().mockImplementation(()=> { - return subHeaderText; + return subHeaderText; }) } } diff --git a/src/common-components/vehicle-banner/vehicle-banner.spec.js b/src/common-components/vehicle-banner/vehicle-banner.spec.js new file mode 100644 index 00000000..f36dd257 --- /dev/null +++ b/src/common-components/vehicle-banner/vehicle-banner.spec.js @@ -0,0 +1,127 @@ +import { shallowMount } from "@vue/test-utils"; +import { vehicleCategories } from "@/constants/vehicle-categories.js"; +import vehicleBanner from "./vehicle-banner"; +import { useMainStore } from "@/store"; +import { createApp } from 'vue'; +import { createPinia } from "pinia"; +import { mapStores } from "pinia"; +import App from '@/App.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] + }); + + var 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] + }); + + var vehicleIcon = wrapper.vm.getUnmatchedVehicleIcon(); + + expect(vehicleIcon).toEqual(expectedIcon); + expect(wrapper.find("img").attributes("class")).toContain("vehicle-image"); + wrapper.unmount(); + }); + +}); + + + diff --git a/src/common-components/vehicle-banner/vehicle-banner.vue b/src/common-components/vehicle-banner/vehicle-banner.vue new file mode 100644 index 00000000..534313df --- /dev/null +++ b/src/common-components/vehicle-banner/vehicle-banner.vue @@ -0,0 +1,82 @@ + + + + + diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue index b3253139..676c1e33 100644 --- a/src/layouts/vehicle-year/vehicle-year.vue +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -3,6 +3,7 @@
+
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss index a516165f..0bbd043a 100644 --- a/src/styles/common-styles.scss +++ b/src/styles/common-styles.scss @@ -23,7 +23,7 @@ body { } .container, .container-fluid { - overflow-x: hidden; + overflow: hidden; } .sub-container{