Merge pull request #64 from Safelite/feature/CSR-120_vehicle-banner-2

Feature/csr 120 vehicle banner 2

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

@@ -2,6 +2,7 @@ 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 = {
@@ -44,7 +45,7 @@ describe('vehicleBanner', () => {
         ]
     };
 
-    test('renders the blurrycar image when vehicleImageSrc is not present', async () => {
+    test('renders the blurrycar image when vehicleImageSrc is not present', () => {
         // Arrange
         const mountOptions = getMountOptions(actionList);
         mountOptions.global.mocks = {
@@ -60,7 +61,7 @@ describe('vehicleBanner', () => {
         wrapper.unmount();
     });
 
-    test('does not render the blurrycar image when vehicleImageSrc exists', async () => {
+    test('does not render the blurrycar image when vehicleImageSrc exists', () => {
         // Arrange
         const mountOptions = getMountOptions(actionList);
         mountOptions.global.mocks = {
@@ -77,9 +78,7 @@ describe('vehicleBanner', () => {
             }
         });
         // Assert
-        setTimeout(() => {
+        expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar');
-            expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar');
-        }, 500);
         wrapper.unmount();
     });
 
@@ -98,13 +97,12 @@ describe('vehicleBanner', () => {
             }
         });
         // Assert
-        setTimeout(() => {
+        await nextTick();
-            expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar');
+        expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar');
-        }, 500);
         wrapper.unmount();
     });
 
-    test('does not render the blurrycar image when a YMMS object is found', async () => {
+    test('receives a carId when a YMMS object is found', async () => {
         // Arrange
         $store.state.order.vehicle.year = "2019"
         $store.state.order.vehicle.make = "acura"
@@ -120,14 +118,12 @@ describe('vehicleBanner', () => {
             ...mountOptions
         });
         // Assert
-        setTimeout(() => {
+        await nextTick();
-            expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar');
+        expect(wrapper.vm.$data.carId.length).toBeGreaterThan(0);
-        }, 500);
         wrapper.unmount();
-
     });
 
-    test('does not render the blurrycar image when a VIN is found', async () => {
+    test('receives a carId when a VIN is found', async () => {
         // Arrange
         $store.state.order.vehicle.vin = "1J4GW58S4XC541166";
         const mountOptions = getMountOptions(actionList);
@@ -140,9 +136,9 @@ describe('vehicleBanner', () => {
             ...mountOptions
         });
         // Assert
-        setTimeout(() => {
+        await nextTick();
-            expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar');
+        expect(wrapper.vm.$data.carId.length).toBeGreaterThan(0);
-        }, 500);
         wrapper.unmount();
     });
+
 });

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="vehicle_banner mb-3">
+  <div class="vehicle_banner mb-3 text-center">
     <img
       class="vehicle-image img-fluid"
       :src="vehicleImageSrc"
@@ -53,14 +53,14 @@ export default {
   methods: {
     getCarIdWithYmms(ymms) {  // retrieve carId with YMMS object
       this.dispatchNonBlockingStoreAction(this.storeActions.LOOKUP_VEHICLE_BY_YMMS, ymms).then((response) => {
-        const carId = response.data[0].CarId;
+        this.carId = response.data[0].CarId;
-        this.getVehicleImage(carId)
+        this.getVehicleImage(this.carId)
       });
     },
     getCarIdWithVin(vin) {  // retrieve carId with VIN string
       this.dispatchNonBlockingStoreAction(this.storeActions.LOOKUP_VEHICLE_BY_VIN, vin).then((response) => {
-        const carId = response.data[0].CarId;
+        this.carId = response.data[0].CarId;
-        this.getVehicleImage(carId)
+        this.getVehicleImage(this.carId)
       });
     },
     getVehicleImage(carId) {  // look up evox with carId

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

@@ -233,7 +233,7 @@
       </div>
     </div>
     <div class="row my-3">
-      <div class="d-flex align-items-center">
+      <div class="col">
         <vehicleBanner
           passedCarId=""
         />

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

@@ -24,7 +24,6 @@ export default {
     computed: {},
     async created() {
         const pageContent = await this.GetContentFromCms();
-
         this.pageHeaderWidgets = pageContent.PageHeaderWidget[0];
         this.radioQuestionWidgets = pageContent.RadioQuestionWidget[0];
     },

src/mixins/base-mixin.js

@@ -23,12 +23,11 @@ export default {
 
       return this.$store.dispatch(type, payload);
     },
-
     GetContentFromCms() {
       return this.dispatchNonBlockingStoreAction(this.storeActions.GET_PAGE_DATA,{ pageName: this.$route.query.fmgPage }).then((response) => {
 
         const pageDataFromCms = {};
-        
+
         response.data.Result.forEach((widget) => {
           if (Object.values(this.widgetNames).includes(widget.Type)) {
             // If we already have this widget, push it on the collection
@@ -38,10 +37,10 @@ export default {
             }
 
             pageDataFromCms[widget.Type] = [widget.Model];
-            
+
           }
         });
-        
+
         // Our 'Page' is ready because we have data now
         this.isCmsContentReady = true;