CSR-120: updates from code review

src/commonComponents/vehicleBanner/vehicleBanner.spec.js

@@ -1,41 +1,56 @@
-import { mount } from '@vue/test-utils';
+import { mount, flushPromises } from '@vue/test-utils';
 import vehicleBanner from './vehicleBanner';
+import axios from 'axios';
+
+jest.mock('axios', () => ({
+    get: () => Promise.resolve({ data: '"imgSrc": "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg"' })
+}))
 
 describe('vehicleBanner with no props', () => {
-
+    // Arrange
     const wrapper = mount(vehicleBanner, {
         propsData: {}
     });
+    // Act
 
+    // Assert
     it('renders the blurrycar image', () => {
         expect(wrapper.find('img').attributes('class')).toContain('blurrycar');
     })
 });
 
 describe('vehicleBanner with isBlurred true', () => {
-
+    // Arrange
     const wrapper = mount(vehicleBanner, {
         propsData: {
             isBlurred: true,
             carId: "00test"
         }
     });
+    // Act
 
+    // Assert
     it('renders the blurrycar image', () => {
         expect(wrapper.find('img').attributes('class')).toContain('blurrycar');
     })
 });
 
 describe('vehicleBanner with valid src image', () => {
-    
+    // Arrange
     const wrapper = mount(vehicleBanner, {
         propsData: {
             carId: "00test"
         }
     });
-    
+    // Act
-    it('does not render the blurry image', () => {
+
-        expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar');
+    // Assert
+    it('does not render the blurry image', async () => {
+        await flushPromises();
+
+        setTimeout(() => {
+            expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar');
+        }, 500);
     })
 });
 

src/commonComponents/vehicleBanner/vehicleBanner.vue

@@ -15,10 +15,15 @@
 </template>
 
 <script>
-import { mockEvoxCall } from "@/global-methods";
+import axios from "axios";
 
 export default {
   name: "vehicle-banner",
+  data() {
+    return {
+      imgSrc: ""
+    };
+  },
   props: {
     isBlurred: {
       type: Boolean,
@@ -26,10 +31,13 @@ export default {
     },
     carId: String
   },
-  computed: {
+  created() {
-    imgSrc: function () {
+    const carId = this.carId || '';
-      return mockEvoxCall(this.carId);
+    // mocked EVOX service to get vehicle image
-    }
+    axios.get(`https://mockey.qa.sagaws.net/service/evox-image?carId=${carId}`)
+    .then((response) => {
+      this.imgSrc = response.data.imgSrc;
+    });
   }
 };
 </script>

src/global-methods.js

@@ -30,25 +30,3 @@ export default {
     });
   },
 };
-
-export function mockEvoxCall(carId) {
-  // console.log('running mockEvoxCall...');
-  if (carId) {
-    return "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg"
-    // "https://s7g10.scene7.com/is/image/maserati/maserati/international/Models/default/2022/ghibli/gh_front.png?$600x2000$&fmt=png-alpha&fit=constrain";
-  }
-};
-
-export function mockGetCarId(vin, ymmsObj) {
-  // console.log('running mockGetCardId...');
-  if (vin) {
-    // TODO make API call with vin here
-    return "owuetr98";
-  }
-  if (ymmsObj) {
-    // TODO make API call with yearMakeModelStyle object here
-    console.log('ymmsObj: ', ymmsObj)
-    return "fhgmsg";
-  }
-  return;
-}

src/layouts/componentTest/componentTest.vue

@@ -87,6 +87,17 @@
         <h6>h6 Heading</h6>
       </div>
     </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <vehicle-banner
+          :isBlurred="true"
+          carId=""
+        />
+        <vehicle-banner
+          carId="00test00"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -95,13 +106,16 @@ import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
 import buttonSecondary from "@/uxComponents/buttonSecondary/buttonSecondary";
 import radioCard from "@/uxComponents/radioCard/radioCard";
 import listButton from "@/uxComponents/listButton/listButton";
+import vehicleBanner from "@/commonComponents/vehicleBanner/vehicleBanner";
+
 export default {
   name: "App",
   components: {
     buttonPrimary,
     buttonSecondary,
     radioCard,
-    listButton
+    listButton,
-  },
+    vehicleBanner
+  }
 };
 </script>