unit test for vehicle-year page

package-lock.json

@@ -1794,6 +1794,14 @@
         "fastq": "^1.6.0"
       }
     },
+    "@pinia/testing": {
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/@pinia/testing/-/testing-0.0.14.tgz",
+      "integrity": "sha512-ZmZwVNd/NnKYLIfjfuKl0zlJ3UdiXFpsHzSlL6wCeezSlyrqGMxsIQKv0J6fleu38gyCNTPBEipfxrt8V4+VIg==",
+      "requires": {
+        "vue-demi": "*"
+      }
+    },
     "@polka/url": {
       "version": "1.0.0-next.21",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",

package.json

@@ -9,6 +9,7 @@
     "test:unit:lite": "vue-cli-service test:unit --ci"
   },
   "dependencies": {
+    "@pinia/testing": "0.0.14",
     "@popperjs/core": "^2.10.2",
     "axios": "^0.27.2",
     "bootstrap": "^5.2.2",

src/helpers/unit-test-helper.js

@@ -0,0 +1,46 @@
+import { storeActions } from "@/constants/store-actions";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios.js";
+import { vehicleCategories } from "@/constants/vehicle-categories.js";
+import { issPageValues } from "@/router/router-constants/issPage-values";
+import { Form } from "vee-validate";
+import { queryStrings } from "@/constants/query-strings";
+import { useMainStore } from "@/store";
+import { mapStores } from "pinia";
+import { createTestingPinia } from '@pinia/testing';
+
+const pinia = createTestingPinia();
+useMainStore(pinia);
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn()
+    },
+    computed: {
+        ...mapStores(useMainStore),
+    }
+};
+
+
+// Common methods
+export function getMountOptions(mockData) {
+  // Define our mocks to attached to the 'global' object for Vue/Jest.
+  const mocks = {};
+
+
+  // Mock const files
+  mocks.storeActions = storeActions;
+  mocks.navigationScenarios = navigationScenarios;
+  mocks.vehicleCategories = vehicleCategories;
+  mocks.issPageValues = issPageValues;
+  mocks.queryStrings = queryStrings;
+
+
+  const global = {
+    mocks: mocks,
+    mixins: [mockMixin],
+    plugins: [pinia],
+    stubs: { Form }
+  };
+
+  return { global };
+}

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

@@ -4,28 +4,7 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import vehicleYear from "@/layouts/vehicle-year/vehicle-year.vue";
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
 import baseMixin from "@/mixins/base-mixin.js";
-import { useMainStore } from "@/store";
-import { createApp } from 'vue';
-import { createPinia } from "pinia";
-import { mapStores } from "pinia";
-import App from '@/App.vue';
-
-const vueApp = createApp(App);
-const pinia = createPinia();
-vueApp.use(pinia);
-const store = useMainStore();
-
-const mockMixin = {
-
-  methods: {
-    getCmsContent(widgetName, fieldName) {
-        return cmsData[widgetName][fieldName];
-    },
- },
- computed: {
-    ...mapStores(useMainStore),
-  }
-};
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
 
 
 // Mock our module for promises.
@@ -68,6 +47,7 @@ function setupMocks({
   vehicleYearQuestionCmsContent = {},
   yearQuestionInitialData = {},
   pageHeaderWidgetHeaderText = {},
+  mountOptionsMockData = {},
 }) {
   //Mock api responses
   const apiResponses = {
@@ -96,9 +76,8 @@ function setupMocks({
     initializeComponent: jest.fn(),
   };
 
-  const wrapper = shallowMount(vehicleYear, {
-    mixins: [mockMixin]
- });
+  const mountOptions = getMountOptions(mountOptionsMockData);
+  const wrapper = shallowMount(vehicleYear, mountOptions);
   
   const yearQuestionWrapper = wrapper.findComponent({ name: "yearQuestion" });
   yearQuestionWrapper.vm.initializeComponent = yearQuestion.methods.initializeComponent;

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

@@ -0,0 +1,53 @@
+import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { useMainStore } from "../../../store";
+
+describe("year-question.vue", () => {
+  test("Data from store api are used as radio question answers.", async () => {
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({
+      dataFromStoreApi: ["2023", "2022", "2021"],
+    });
+
+    //Act
+    const initialData = yearQuestion.methods.loadInitialData.call(wrapper.vm);
+    yearQuestion.methods.initializeComponent.call(
+      wrapper.vm,
+      initialData
+    );
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({
+      name: "buttonQuestion",
+    });
+    expect(buttonQuestionComponent.attributes("answers")).toBe(
+      "2023,2022,2021"
+    );
+  });
+});
+
+
+function setupMocks({
+  modelValueProp = "1900",
+  cmsQuestionText = "CMS text goes here",
+  dataFromStoreApi = [],
+}) {
+  
+  const mountOptions = getMountOptions();
+
+  const store = useMainStore();
+  store.getVehicleYears =  jest.fn(() => dataFromStoreApi);
+  //Mock props
+  mountOptions.propsData = {
+    modelValue: modelValueProp,
+  };
+  
+  const wrapper = shallowMount(yearQuestion, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    QuestionText: cmsQuestionText,
+  };
+  return { wrapper, cmsContent };
+}