Merge pull request #67 from Safelite/feature/CSR-121_button-click-function

Feature/csr 121 button click function

src/common-components/radio-question/radio-question.vue

@@ -16,6 +16,7 @@
             sizeInRem="1.5"
             data-test="radio"
             groupName="radio-list"
+            textPosition="text-start"
           />
       </div>
     </div>

src/constants/store-actions.js

@@ -7,7 +7,7 @@ const storeActions = {
   GET_VEHICLE_STYLES: "getVehicleStyles",
   GET_EVOX_IMAGE: "getEvoxImage",
   LOOKUP_VEHICLE_BY_YMMS: "lookupVehicleByYmms",
-  LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin"
+  LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin",
 };
 
 export { storeActions };

src/constants/store-mutations.js

@@ -0,0 +1,5 @@
+const storeMutations = {
+    UPDATE_YEAR: "updateYear",
+}
+
+export { storeMutations };

src/helpers/unit-test-helper.js

@@ -1,5 +1,5 @@
 import { storeActions } from "@/constants/store-actions";
-import store from "@/store";
+import { storeMutations } from "@/constants/store-mutations.js";
 
 export function getMountOptions(mockData) {
   // Define our mocks to attached to the 'global' object for Vue/Jest.
@@ -18,12 +18,16 @@ export function getMountOptions(mockData) {
     }
   });
 
-  // Mock store actions from js file
+  // Mock const files
   mocks.storeActions = storeActions;
+  mocks.storeMutations = storeMutations;
+
+  // Mock $store and $router when accessing this.$store/$router
+  mocks.$store = mockData.store;
+  mocks.$router = mockData.router;
 
   const global = {
     mocks: mocks,
-    plugins: [store]
   };
 
   return { global };

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

@@ -13,13 +13,11 @@
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
 import pageHeader from "@/ux-components/header/header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
-
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
-
 export default {
   name: "vehicle-year",
   data() {
@@ -72,7 +70,6 @@ export default {
 <style lang="scss">
     .select-car {
         height: calc(100vh - 1rem);
-
         .car_list {
         // Height will be determined by overall height of content above list
         height: calc(100% - 255px);

src/layouts/vehicle-year/year-question/year-question.spec.js

@@ -1 +1,36 @@
-test.todo("some test to be written in the future");
+import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "../../../helpers/unit-test-helper";
+
+describe('year-question.vue', () => {
+    test('year-question should take a prop for years and questionText, and trigger a selectYear function when an option is clicked.', async () => {
+        // Arrange
+        const mockData = {
+            store: {
+                commit: jest.fn(),
+                year: null
+            },
+            router: {
+                push: jest.fn()
+            }
+        }
+        mockData.store.commit.mockImplementation((method, year) => {
+            mockData.store.year = year;
+        });
+
+        const mountOptions = getMountOptions(mockData);
+        // Act
+        const wrapper = shallowMount(yearQuestion, mountOptions);
+        await wrapper.setProps({
+            questionText: 'What year is your vehicle?',
+            years: ['2023', '2022', '2021']
+        });
+        wrapper.vm.selectYear(2020);
+
+        // Assert
+        const radioQuestion = await wrapper.findComponent({name: 'radioQuestion'});
+        expect(radioQuestion.attributes('questiontext')).toBe("What year is your vehicle?");
+        expect(radioQuestion.attributes('answers')).toBe("2023,2022,2021");
+        expect(mockData.store.year).toBe(2020);
+    });
+});

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

@@ -1,5 +1,9 @@
 <template>
-<radioQuestion class="radioQuestion" :questionText="questionText" :answers="years" />
+<radioQuestion class="radioQuestion" 
+    :questionText="questionText" 
+    :answers="years"
+    :chooseAnswer="selectYear"
+ />
 </template>
 
 <script>
@@ -17,6 +21,10 @@ export default {
         radioQuestion,
     },
     methods: {
+        selectYear(year){
+            this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
+            this.$router.push('?fmgPage=vehicle-make');
+        } 
     },
 };
 </script>

src/mixins/base-mixin.js

@@ -1,4 +1,5 @@
 import { storeActions } from "@/constants/store-actions.js";
+import { storeMutations } from "@/constants/store-mutations.js";
 import { widgetNames } from "@/constants/widget-names.js";
 
 export default {
@@ -28,6 +29,9 @@ export default {
     storeActions() {
       return storeActions;
     },
+    storeMutations() {
+      return storeMutations;
+    },
     widgetNames() {
       return widgetNames;
     },

src/store/index.js

@@ -61,6 +61,9 @@ export default createStore({
   // See IMPORTANT note at top of "state" declaration.
 
   mutations: {
+    updateYear(state, year){
+      state.order.vehicle.year = year;
+    },
   },
   actions: {
     // Vehicle API Actions
@@ -132,6 +135,6 @@ export default createStore({
         endpoint: relativeUrl,
         payload: {},
       });
-    },
+    }
   },
 });

src/store/store.spec.js

@@ -14,7 +14,6 @@ describe("Actions", () => {
         await store.dispatch('getVehicleYears')
         .then( (response) => {
             years = response.data;
-            console.log(response);
         });
 
         // Assert
@@ -109,4 +108,14 @@ describe("Actions", () => {
         // Assert
         expect(pageData).toBe('Page Info Data');
     });
-})
+})
+
+describe("Mutations", () => {
+    it("Should update the year property in the store", () => {
+        // Act
+        store.commit('updateYear', 2020);
+
+        // Assert
+        expect(store.state.order.vehicle.year).toBe(2020);
+    });
+});