Updating unit test so that mock data can be implemented

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/year-question/year-question.spec.js

@@ -1,13 +1,26 @@
-import { shallowMount } from "@vue/test-utils";
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
-import store from "@/store";
+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((func, year) => {
+            mockData.store.year = year;
+        });
+
+        const mountOptions = getMountOptions(mockData);
         // Act
-        const wrapper = shallowMount(yearQuestion, global);
+        const wrapper = shallowMount(yearQuestion, mountOptions);
         await wrapper.setProps({
             questionText: 'What year is your vehicle?',
             years: ['2023', '2022', '2021']
@@ -18,6 +31,6 @@ describe('year-question.vue', () => {
         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(store.state.order.vehicle.year).toBe(2020);
+        expect(mockData.store.year).toBe(2020);
     });
-});
+});

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

@@ -8,9 +8,6 @@
 
 <script>
 import radioQuestion from "@/common-components/radio-question/radio-question";
-import store from "@/store";
-import router from "@/router";
-import { storeMutations } from "@/constants/store-mutations";
 
 export default {
     name: "year-question",
@@ -25,8 +22,8 @@ export default {
     },
     methods: {
         selectYear(year){
-            store.commit(storeMutations.UPDATE_YEAR, year);
-            router.push('?fmgPage=vehicle-make');
+            this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
+            this.$router.push('?fmgPage=vehicle-make');
         } 
     },
 };