CSR-120 refactoring changes

src/commonComponents/vehicleBanner/vehicleBanner.spec.js

@@ -1,56 +1,52 @@
-import { mount, flushPromises } from '@vue/test-utils';
+import { mount, enableAutoUnmount, flushPromises } from '@vue/test-utils';
 import vehicleBanner from './vehicleBanner';
-import axios from 'axios';
+import { nextTick } from 'vue';
+import { getMountOptions } from "@/helpers/unit-test-helper.js"
 
-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', () => {
+describe('vehicleBanner', () => {
     // Arrange
-    const wrapper = mount(vehicleBanner, {
-        propsData: {}
+    const mountOptions = getMountOptions({
+        actionList: [
+            {
+                actionName: "getMockPageData",
+                data: {
+                    imgData: ""
+                }
+            }
+        ]
     });
+    enableAutoUnmount(afterEach)
+
     // Act
+    const wrapper = mount(vehicleBanner, {
+        ...mountOptions
+    });
 
     // Assert
-    it('renders the blurrycar image', () => {
+    it('renders the blurrycar image when no vehicleImageSrc is found', () => {
         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');
-    })
-});
+    it('renders the blurrycar image when isBlurred is true', async () => {
+        await wrapper.setData("test string");
+        await wrapper.setProps({ isBlurred: true });
 
-describe('vehicleBanner with valid src image', () => {
-    // Arrange
-    const wrapper = mount(vehicleBanner, {
-        propsData: {
-            carId: "00test"
-        }
+        // timeout needed for image call to have time to return with a vehicleSrcImage
+        setTimeout(() => {
+            expect(wrapper.find('img').attributes('class')).toContain('blurrycar');
+        }, 500);
     });
-    // Act
 
-    // Assert
-    it('does not render the blurry image', async () => {
-        await flushPromises();
+    it('renders an actual car image when vehicleImageSrc is found and isBlurred is false', async () => {
+        await wrapper.setData("test string");
+        await wrapper.setProps({ isBlurred: false});
+        await flushPromises(); // including this doesn't appear to matter
+        await nextTick(); // including this doesn't appear to matter
 
+        // timeout needed for image call to have time to return with a vehicleSrcImage
         setTimeout(() => {
             expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar');
         }, 500);
-    })
-});
 
+    });
+});

src/commonComponents/vehicleBanner/vehicleBanner.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="vehicle_banner mb-3">
+    <h4>vehicleImageSrc: {{vehicleImageSrc}}</h4>
     <img
       class="vehicle-image img-fluid"
       :class="carId"
-      :src="imgSrc"
-      v-if="!isBlurred && imgSrc"
+      :src="vehicleImageSrc"
+      v-if="!isBlurred && vehicleImageSrc"
     />
     <img
       class="vehicle-image img-fluid blurrycar"
@@ -15,14 +16,14 @@
 </template>
 
 <script>
-import axios from "axios";
+import store from "@/store";
+import { mapState } from "vuex";
+import { storeActions } from "@/constants/storeActions";
 
 export default {
   name: "vehicle-banner",
-  data() {
-    return {
-      imgSrc: ""
-    };
+  computed: {
+      ...mapState(["carImg", "vehicleImageSrc"]),
   },
   props: {
     isBlurred: {
@@ -33,12 +34,19 @@ export default {
   },
   created() {
     const carId = 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;
-    });
-  }
+    this.getVehicleImage(carId);
+  },
+  methods: {
+    getVehicleImage(carId) {
+      this.dispatchNonBlockingStoreAction(storeActions.GET_PAGE_DATA, {relativeUrl: "https://mockey.qa.sagaws.net/service/evox-image?carId=" + carId})
+      .then( (response) => {
+        const imgData = response.data;
+        store.commit('updateVehicleImage', imgData);
+      }, error => {
+        store.commit('updateVehicleImage', '');
+      });
+    }
+  },
 };
 </script>
 

src/helpers/unit-test-helper.js

@@ -0,0 +1,28 @@
+import { storeActions } from "@/constants/storeActions";
+import store from "@/store";
+
+export function getMountOptions(mockData) {
+    // Define our mocks to attached to the 'global' object for Vue/Jest.
+    const mocks = {};
+
+    mocks.dispatchNonBlockingStoreAction = jest.fn();
+    mocks.dispatchNonBlockingStoreAction.mockImplementation((actionName) => {
+    
+        let actionFilterResult = mockData.actionList.filter(x => x.actionName == actionName);
+        
+        if (actionFilterResult.length > 0 && actionFilterResult.length === 1) {
+
+            return Promise.resolve({
+                data: actionFilterResult[0].data
+            });
+        }
+    });
+    // Mock store actions from js file
+    mocks.storeActions = storeActions;
+    const global = {
+        mocks: mocks,
+        plugins: [store]
+    };
+
+    return { global }
+}

src/layouts/componentTest/componentTest.vue

@@ -151,7 +151,7 @@
       <div class="col my-3 d-flex align-items-center">
         <vehicle-banner
           :isBlurred="true"
-          carId=""
+          carId="00test00"
         />
         <vehicle-banner
           carId="00test00"

src/store/index.js

@@ -21,6 +21,7 @@ export default createStore({
     carImg:
       "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg",
     blurImg: true,
+    vehicleImageSrc: "",
   },
   mutations: {
     updateYear(state, data) {
@@ -51,6 +52,9 @@ export default createStore({
       state.carImg =
         "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg";
     },
+    updateVehicleImage(state, data) {
+      state.vehicleImageSrc = data.imgSrc;
+    },
   },
   actions: {
       getYears(){