CSR-120: remove premature logic and code

src/common-components/vehicle-banner/vehicle-banner.spec.js

@@ -1,57 +1,12 @@
 import { shallowMount } from '@vue/test-utils';
 import vehicleBanner from './vehicle-banner';
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
-import { storeActions } from "@/constants/store-actions";
-import { nextTick } from 'vue';
 
 describe('vehicleBanner', () => {
-    const $store = {
-        state: {
-            order: {
-                vehicle: {
-                    vin: null,
-                    year: null,
-                    make: null,
-                    model: null,
-                    style: null
-                }
-            }
-        }
-    };
-    const actionList = {
-        actionList: [
-            {
-                actionName: storeActions.LOOKUP_VEHICLE_BY_YMMS,
-                data: [
-                    {
-                        CarId: "CR00068434"
-                    }
-                ]
-            },
-            {
-                actionName: storeActions.LOOKUP_VEHICLE_BY_VIN,
-                data: [
-                    {
-                        CarId: "CR00068434"
-                    }
-                ]
-            },
-            {
-                actionName: storeActions.GET_EVOX_IMAGE,
-                data: {
-                    imgSrc: "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg"
-                }
-            }
-        ]
-    };
 
-    test('renders the blurrycar image when vehicleImageSrc is not present', () => {
+    test('renders the blurrycar image', () => {
         // Arrange
-        const mountOptions = getMountOptions(actionList);
+        const mountOptions = getMountOptions();
-        mountOptions.global.mocks = {
-            ...mountOptions.global.mocks,
-            $store
-        }
         // Act
         const wrapper = shallowMount(vehicleBanner, {
             ...mountOptions
@@ -61,84 +16,4 @@ describe('vehicleBanner', () => {
         wrapper.unmount();
     });
 
-    test('does not render the blurrycar image when vehicleImageSrc exists', () => {
-        // Arrange
-        const mountOptions = getMountOptions(actionList);
-        mountOptions.global.mocks = {
-            ...mountOptions.global.mocks,
-            $store
-        }
-        // Act
-        const wrapper = shallowMount(vehicleBanner, {
-            ...mountOptions,
-            data() {
-                return {
-                    vehicleImageSrc: "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg"
-                }
-            }
-        });
-        // Assert
-        expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar');
-        wrapper.unmount();
-    });
-
-    test('does not render the blurrycar image when passedCarId is set', async () => {
-        // Arrange
-        const mountOptions = getMountOptions(actionList);
-        mountOptions.global.mocks = {
-            ...mountOptions.global.mocks,
-            $store,
-        }
-        // Act
-        const wrapper = shallowMount(vehicleBanner, {
-            ...mountOptions,
-            props: {
-                passedCarId: "CR00068434"
-            }
-        });
-        // Assert
-        await nextTick();
-        expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar');
-        wrapper.unmount();
-    });
-
-    test('receives a carId when a YMMS object is found', async () => {
-        // Arrange
-        $store.state.order.vehicle.year = "2019"
-        $store.state.order.vehicle.make = "acura"
-        $store.state.order.vehicle.model = "rdx"
-        $store.state.order.vehicle.style = "4 door utility"
-        const mountOptions = getMountOptions(actionList);
-        mountOptions.global.mocks = {
-            ...mountOptions.global.mocks,
-            $store
-        }
-        // Act
-        const wrapper = shallowMount(vehicleBanner, {
-            ...mountOptions
-        });
-        // Assert
-        await nextTick();
-        expect(wrapper.vm.$data.carId.length).toBeGreaterThan(0);
-        wrapper.unmount();
-    });
-
-    test('receives a carId when a VIN is found', async () => {
-        // Arrange
-        $store.state.order.vehicle.vin = "1J4GW58S4XC541166";
-        const mountOptions = getMountOptions(actionList);
-        mountOptions.global.mocks = {
-            ...mountOptions.global.mocks,
-            $store
-        }
-        // Act
-        const wrapper = shallowMount(vehicleBanner, {
-            ...mountOptions
-        });
-        // Assert
-        await nextTick();
-        expect(wrapper.vm.$data.carId.length).toBeGreaterThan(0);
-        wrapper.unmount();
-    });
-
 });

src/common-components/vehicle-banner/vehicle-banner.vue

@@ -1,16 +1,9 @@
 <template>
   <div class="vehicle_banner mb-3 text-center">
-    <img
-      class="vehicle-image img-fluid"
-      :src="vehicleImageSrc"
-      v-if="vehicleImageSrc"
-      alt=""
-    />
     <img
       class="vehicle-image img-fluid blurrycar"
-      :src="genericVehicleImageSrc"
+      :src="vehicleImageSrc"
       alt=""
-      v-else
     />
   </div>
 </template>
@@ -18,59 +11,8 @@
 <script>
 export default {
   name: "vehicle-banner",
-  computed: {
-      vin () {
-        return this.$store.state.order.vehicle.vin;
-      },
-      ymms () {
-        return {
-          year: this.$store.state.order.vehicle.year,
-          make: this.$store.state.order.vehicle.make,
-          model: this.$store.state.order.vehicle.model,
-          style: this.$store.state.order.vehicle.style
-        };
-      },
-  },
   props: {
-    passedCarId: String,
+    vehicleImageSrc: String
-    genericVehicleImageSrc: String
-  },
-  data() {
-      return {
-          years: [],
-          carId: '',
-          vehicleImageSrc: '',
-      };
-  },
-  created() {
-    if (this.passedCarId && this.passedCarId.length > 0) {
-      this.getVehicleImage(this.passedCarId)
-    } else if (this.vin && this.vin.length > 0) {
-      this.getCarIdWithVin(this.vin)
-    } else if (!Object.values(this.ymms).includes(null) && !Object.values(this.ymms).includes('')) {
-      this.getCarIdWithYmms(this.ymms)
-    }
-  },
-  methods: {
-    getCarIdWithYmms(ymms) {  // retrieve carId with YMMS object
-      this.dispatchNonBlockingStoreAction(this.storeActions.LOOKUP_VEHICLE_BY_YMMS, ymms).then((response) => {
-        this.carId = response.data[0].CarId;
-        this.getVehicleImage(this.carId)
-      });
-    },
-    getCarIdWithVin(vin) {  // retrieve carId with VIN string
-      this.dispatchNonBlockingStoreAction(this.storeActions.LOOKUP_VEHICLE_BY_VIN, vin).then((response) => {
-        this.carId = response.data[0].CarId;
-        this.getVehicleImage(this.carId)
-      });
-    },
-    getVehicleImage(carId) {  // look up evox with carId
-      this.dispatchNonBlockingStoreAction(this.storeActions.GET_EVOX_IMAGE, {relativeUrl: "https://mockey.qa.sagaws.net/service/evox-image?carId=" + carId}).then((response) => {
-        if (response.data && response.data.imgSrc) {
-          this.vehicleImageSrc = response.data.imgSrc;
-        }
-      });
-    },
   },
 }
 </script>

src/layouts/component-test/component-test.vue

@@ -314,8 +314,7 @@
     </div>
     <div class="row my-3">
       <div class="col">
-        <vehicleBanner genericVehicleImageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3" />
+        <vehicleBanner vehicleImageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3" />
-        <vehicleBanner passedCarId="CR00068434" />
       </div>
     </div>
   </div>

src/layouts/vehicle-year/vehicle-year.vue

@@ -1,7 +1,7 @@
 <template v-if="isCmsContentReady">
   <div class="select-car">
     <div class="select-car-form rounded text-center">
-      <vehicleBanner :genericVehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
+      <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
       <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
       <yearQuestion :questionText="radioQuestionWidgets.QuestionText" :years="vehicleYears" />
     </div>