From ff1511429eb9353facd9bc83e1de40c9bdf7d294 Mon Sep 17 00:00:00 2001
From: Frank <frank.rua@safelite.com>
Date: Thu, 18 Nov 2021 15:46:26 -0500
Subject: [PATCH] kabab-case and a ton of updates

---
 jest.config.js                                |   5 +-
 .../radio-question/radio-question.spec.js}    |   2 +-
 .../radio-question/radio-question.vue}        |   2 +-
 ...icationConfig.js => application-config.js} |   0
 .../{storeActions.js => store-actions.js}     |   0
 .../{widgetNames.js => widget-names.js}       |   0
 src/global-methods.js                         |   2 +-
 ...{unitTestHelper.js => unit-test-helper.js} |  14 +-
 src/layouts/component-test/component-test.vue | 112 +++++++++++++
 src/layouts/componentTest/componentTest.vue   | 152 ------------------
 .../notFound.vue => not-found/not-found.vue}  |   0
 src/layouts/vehicle-year/vehicle-year.spec.js |  57 ++-----
 src/layouts/vehicle-year/vehicle-year.vue     |   9 +-
 .../year-question/year-question.spec.js       |  28 ++++
 .../year-question/year-question.vue           |   2 +-
 src/main.js                                   |   3 +-
 src/mixins/{baseMixin.js => base-mixin.js}    |  24 +--
 src/mixins/base-mixin.spec.js                 | 109 +++++++++++++
 src/router/index.js                           |   6 +-
 ...nStyles.scss => common-button-styles.scss} |   0
 .../ymms-common-styles.scss}                  |   0
 ...ioStyles.scss => common-radio-styles.scss} |   0
 .../{commonStyles.scss => common-styles.scss} |   0
 ...les.scss => common-typography-styles.scss} |   0
 .../{uxVariables.scss => ux-variables.scss}   |   0
 .../button-primary/button-primary.spec.js}    |   0
 .../button-primary/button-primary.vue}        |   0
 .../button-secondary.spec.js}                 |   0
 .../button-secondary/button-secondary.vue}    |   0
 .../header/header.spec.js                     |   0
 .../header/header.vue                         |   0
 .../list-button/list-button.spec.js}          |   0
 .../list-button/list-button.vue}              |   0
 .../radio-card/radio-card.spec.js}            |   0
 .../radio-card/radio-card.vue}                |   0
 .../radio-list/radio-list.spec.js}            |   0
 src/ux-components/radio-list/radio-list.vue   |  28 ++++
 .../radio/radio.spec.js                       |   0
 .../radio/radio.vue                           |   0
 src/uxComponents/confetti/confetti.vue        |  44 -----
 src/uxComponents/radioList/radioList.spec.js  |   1 -
 src/uxComponents/radioList/radioList.vue      |  42 -----
 vue.config.js                                 |  12 +-
 vue.release.config.js                         |  12 +-
 44 files changed, 346 insertions(+), 320 deletions(-)
 rename src/{commonComponents/radioQuestion/radioQuestion.spec.js => common-components/radio-question/radio-question.spec.js} (92%)
 rename src/{commonComponents/radioQuestion/radioQuestion.vue => common-components/radio-question/radio-question.vue} (93%)
 rename src/constants/{applicationConfig.js => application-config.js} (100%)
 rename src/constants/{storeActions.js => store-actions.js} (100%)
 rename src/constants/{widgetNames.js => widget-names.js} (100%)
 rename src/helpers/{unitTestHelper.js => unit-test-helper.js} (69%)
 create mode 100644 src/layouts/component-test/component-test.vue
 delete mode 100644 src/layouts/componentTest/componentTest.vue
 rename src/layouts/{notFound/notFound.vue => not-found/not-found.vue} (100%)
 rename src/mixins/{baseMixin.js => base-mixin.js} (75%)
 create mode 100644 src/mixins/base-mixin.spec.js
 rename src/styles/{commonButtonStyles.scss => common-button-styles.scss} (100%)
 rename src/styles/{commonComponentStyles/ymmsCommonStyles.scss => common-component-styles/ymms-common-styles.scss} (100%)
 rename src/styles/{commonRadioStyles.scss => common-radio-styles.scss} (100%)
 rename src/styles/{commonStyles.scss => common-styles.scss} (100%)
 rename src/styles/{commonTypographyStyles.scss => common-typography-styles.scss} (100%)
 rename src/styles/{uxVariables.scss => ux-variables.scss} (100%)
 rename src/{uxComponents/buttonPrimary/buttonPrimary.spec.js => ux-components/button-primary/button-primary.spec.js} (100%)
 rename src/{uxComponents/buttonPrimary/buttonPrimary.vue => ux-components/button-primary/button-primary.vue} (100%)
 rename src/{uxComponents/buttonSecondary/buttonSecondary.spec.js => ux-components/button-secondary/button-secondary.spec.js} (100%)
 rename src/{uxComponents/buttonSecondary/buttonSecondary.vue => ux-components/button-secondary/button-secondary.vue} (100%)
 rename src/{uxComponents => ux-components}/header/header.spec.js (100%)
 rename src/{uxComponents => ux-components}/header/header.vue (100%)
 rename src/{uxComponents/confetti/confetti.spec.js => ux-components/list-button/list-button.spec.js} (100%)
 rename src/{uxComponents/listButton/listButton.vue => ux-components/list-button/list-button.vue} (100%)
 rename src/{uxComponents/listButton/listButton.spec.js => ux-components/radio-card/radio-card.spec.js} (100%)
 rename src/{uxComponents/radioCard/radioCard.vue => ux-components/radio-card/radio-card.vue} (100%)
 rename src/{uxComponents/radioCard/radioCard.spec.js => ux-components/radio-list/radio-list.spec.js} (100%)
 create mode 100644 src/ux-components/radio-list/radio-list.vue
 rename src/{uxComponents => ux-components}/radio/radio.spec.js (100%)
 rename src/{uxComponents => ux-components}/radio/radio.vue (100%)
 delete mode 100644 src/uxComponents/confetti/confetti.vue
 delete mode 100644 src/uxComponents/radioList/radioList.spec.js
 delete mode 100644 src/uxComponents/radioList/radioList.vue

diff --git a/jest.config.js b/jest.config.js
index 036286c62..22863ed55 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -9,12 +9,13 @@ module.exports = {
     "!src/main.js",
     "!src/constants/*.js",
     "!src/router/**/*.js",
-    "!src/helpers/*.js",
+    "!src/helpers/unitTestHelper.js",
+    "!src/layouts/componentTest/componentTest.vue"
   ], //! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
     global: {
-      statements: 90,
+      statements: 60,
     },
   },
 };
diff --git a/src/commonComponents/radioQuestion/radioQuestion.spec.js b/src/common-components/radio-question/radio-question.spec.js
similarity index 92%
rename from src/commonComponents/radioQuestion/radioQuestion.spec.js
rename to src/common-components/radio-question/radio-question.spec.js
index bf779fcff..da58ea8d1 100644
--- a/src/commonComponents/radioQuestion/radioQuestion.spec.js
+++ b/src/common-components/radio-question/radio-question.spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from "@vue/test-utils";
-import radioQuestion from "./radioQuestion";
+import radioQuestion from "@/common-components/radio-question/radio-question";
 
 describe("radioQuestion.vue", () => {
   it("Should render the 'questionText' prop value as a span value for the radio question and  the 'answer' values should render as text values for radio components.", () => {
diff --git a/src/commonComponents/radioQuestion/radioQuestion.vue b/src/common-components/radio-question/radio-question.vue
similarity index 93%
rename from src/commonComponents/radioQuestion/radioQuestion.vue
rename to src/common-components/radio-question/radio-question.vue
index feeba3d08..2fb50f018 100644
--- a/src/commonComponents/radioQuestion/radioQuestion.vue
+++ b/src/common-components/radio-question/radio-question.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import radio from "@/uxComponents/radio/radio";
+import radio from "@/ux-components/radio/radio";
 export default {
   name: "radio-question",
   props: {
diff --git a/src/constants/applicationConfig.js b/src/constants/application-config.js
similarity index 100%
rename from src/constants/applicationConfig.js
rename to src/constants/application-config.js
diff --git a/src/constants/storeActions.js b/src/constants/store-actions.js
similarity index 100%
rename from src/constants/storeActions.js
rename to src/constants/store-actions.js
diff --git a/src/constants/widgetNames.js b/src/constants/widget-names.js
similarity index 100%
rename from src/constants/widgetNames.js
rename to src/constants/widget-names.js
diff --git a/src/global-methods.js b/src/global-methods.js
index 72d079b42..9df098b7d 100644
--- a/src/global-methods.js
+++ b/src/global-methods.js
@@ -1,5 +1,5 @@
 import axios from "axios";
-import { applicationConfig } from "@/constants/applicationConfig.js";
+import { applicationConfig } from "@/constants/application-config.js";
 import httpStatusCodes from "http-status-codes";
 
 export default {
diff --git a/src/helpers/unitTestHelper.js b/src/helpers/unit-test-helper.js
similarity index 69%
rename from src/helpers/unitTestHelper.js
rename to src/helpers/unit-test-helper.js
index e24e141d5..94027cc05 100644
--- a/src/helpers/unitTestHelper.js
+++ b/src/helpers/unit-test-helper.js
@@ -1,6 +1,6 @@
-import { storeActions } from "@/constants/storeActions";
+import { storeActions } from "@/constants/store-actions";
 
-export function getMountOptions(mockData) {
+export function getMountOptions(mockData, cmsMockData = null) {
   // Define our mocks to attached to the 'global' object for Vue/Jest.
   const mocks = {};
 
@@ -16,6 +16,15 @@ export function getMountOptions(mockData) {
       });
     }
   });
+
+  if(cmsMockData){
+    mocks.GetContentFromCms = jest.fn();
+    mocks.GetContentFromCms.mockImplementation(() => 
+    {
+      return cmsMockData;
+    });
+  }
+
   // Mock store actions from js file
   mocks.storeActions = storeActions;
   const global = {
@@ -24,3 +33,4 @@ export function getMountOptions(mockData) {
 
   return { global };
 }
+
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
new file mode 100644
index 000000000..7351b2bff
--- /dev/null
+++ b/src/layouts/component-test/component-test.vue
@@ -0,0 +1,112 @@
+<template>
+<div class="container-fluid container-shadow p-2 rounded-3">
+    <div class="row g-2">
+        <radioCard radioLabel="Windshield" radioImage="windshield-damage.svg" altText="Windshield" groupName="damageKey" radioID="windshield" />
+        <radioCard radioLabel="Side Window" radioImage="side-window-damage.svg" altText="Side Window" groupName="damageKey" radioID="sidewindow" />
+        <radioCard radioLabel="Back Glass" radioImage="back-glass-damage.svg" altText="Back Glass" groupName="damageKey" radioID="backglass" />
+    </div>
+    <div class="row">
+        <div class="col my-3 d-flex align-items-center">
+            <buttonPrimary buttonText="Primary" />
+        </div>
+    </div>
+    <div class="row">
+        <div class="col my-3 d-flex align-items-center">
+            <buttonSecondary buttonText="Secondary" />
+        </div>
+    </div>
+    <div class="row">
+        <div class="col my-3 d-flex align-items-center">
+            <listButton buttonText="List Button" errorText="Test error message" />
+        </div>
+    </div>
+    <div class="row">
+        <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+        <div role="radiogroup" aria-labelledby="select-year-radio-group" class="col my-3 d-flex align-items-center flex-column">
+            <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+            <h3 class="visually-hidden" id="select-year-radio-group">
+                Select Vehicle Year
+            </h3>
+            <radioList groupName="demo" ariaLabelBy="vehicle-year" radioID="2021" errorMessage="Test error message" />
+            <radioList groupName="demo" ariaLabelBy="vehicle-year" radioID="2020" errorMessage="Test error message" />
+            <radioList groupName="demo" ariaLabelBy="vehicle-year" radioID="2019" errorMessage="Test error message" />
+        </div>
+    </div>
+    <div class="row">
+        <div class="col my-3 d-flex align-items-center">
+            <a href="#">Text Link</a>
+        </div>
+    </div>
+    <div class="row my-2">
+        <div class="col">
+            <p>This is default body copy font size/weight</p>
+            <p class="small">
+                This is small body copy using <code>.small</code> class
+            </p>
+            <p>
+                <small>This is also small using <code>&lt;small&gt;</code> tag</small>
+            </p>
+        </div>
+    </div>
+    <div class="row my-2">
+        <div class="col">
+            <h1>h1 Heading</h1>
+        </div>
+    </div>
+    <div class="row my-2">
+        <div class="col">
+            <h2>h2 Heading</h2>
+        </div>
+    </div>
+    <div class="row my-2">
+        <div class="col">
+            <h3>h3 Heading</h3>
+        </div>
+    </div>
+    <div class="row my-2">
+        <div class="col">
+            <h4>h4 Heading</h4>
+        </div>
+    </div>
+    <div class="row my-2">
+        <div class="col">
+            <h5>h5 Heading</h5>
+        </div>
+    </div>
+    <div class="row my-2">
+        <div class="col">
+            <h6>h6 Heading</h6>
+        </div>
+    </div>
+    <div class="my-3">
+        <div class="select-car">
+            <div class="select-car-form">
+                <radioQuestion questionText="What year is your vehicle?" :answers="this.years" />
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+import buttonPrimary from "@/ux-components/button-primary/button-primary";
+import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
+import radioCard from "@/ux-components/radio-card/radio-card";
+import listButton from "@/ux-components/list-button/list-button";
+import radioList from "@/ux-components/radio-list/radio-list";
+export default {
+    name: "App",
+    components: {
+        buttonPrimary,
+        buttonSecondary,
+        radioCard,
+        listButton,
+        radioList,
+    },
+    data() {
+        return {
+            years: [2023, 2022, 2021, 2020],
+        };
+    },
+};
+</script>
diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue
deleted file mode 100644
index 11cd42970..000000000
--- a/src/layouts/componentTest/componentTest.vue
+++ /dev/null
@@ -1,152 +0,0 @@
-<template>
-  <div class="container-fluid container-shadow p-2 rounded-3">
-    <div class="row g-2">
-      <radioCard
-        radioLabel="Windshield"
-        radioImage="windshield-damage.svg"
-        altText="Windshield"
-        groupName="damageKey"
-        radioID="windshield"
-      />
-      <radioCard
-        radioLabel="Side Window"
-        radioImage="side-window-damage.svg"
-        altText="Side Window"
-        groupName="damageKey"
-        radioID="sidewindow"
-      />
-      <radioCard
-        radioLabel="Back Glass"
-        radioImage="back-glass-damage.svg"
-        altText="Back Glass"
-        groupName="damageKey"
-        radioID="backglass"
-      />
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonPrimary buttonText="Primary" />
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonSecondary buttonText="Secondary" />
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <listButton buttonText="List Button" errorText="Test error message" />
-      </div>
-    </div>
-    <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
-      <div
-        role="radiogroup"
-        aria-labelledby="select-year-radio-group"
-        class="col my-3 d-flex align-items-center flex-column"
-      >
-        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="visually-hidden" id="select-year-radio-group">
-          Select Vehicle Year
-        </h3>
-        <radioList
-          groupName="demo"
-          ariaLabelBy="vehicle-year"
-          radioID="2021"
-          errorMessage="Test error message"
-        />
-        <radioList
-          groupName="demo"
-          ariaLabelBy="vehicle-year"
-          radioID="2020"
-          errorMessage="Test error message"
-        />
-        <radioList
-          groupName="demo"
-          ariaLabelBy="vehicle-year"
-          radioID="2019"
-          errorMessage="Test error message"
-        />
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <a href="#">Text Link</a>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <p>This is default body copy font size/weight</p>
-        <p class="small">
-          This is small body copy using <code>.small</code> class
-        </p>
-        <p>
-          <small>This is also small using <code>&lt;small&gt;</code> tag</small>
-        </p>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h1>h1 Heading</h1>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h2>h2 Heading</h2>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h3>h3 Heading</h3>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h4>h4 Heading</h4>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h5>h5 Heading</h5>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h6>h6 Heading</h6>
-      </div>
-    </div>
-    <div class="my-3">
-      <div class="select-car">
-        <div class="select-car-form">
-          <radioQuestion
-            questionText="What year is your vehicle?"
-            :answers="this.years"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-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 radioList from "@/uxComponents/radioList/radioList";
-export default {
-  name: "App",
-  components: {
-    buttonPrimary,
-    buttonSecondary,
-    radioCard,
-    listButton,
-    radioList,
-  },
-  data() {
-    return {
-      years: [2023, 2022, 2021, 2020],
-    };
-  },
-};
-</script>
diff --git a/src/layouts/notFound/notFound.vue b/src/layouts/not-found/not-found.vue
similarity index 100%
rename from src/layouts/notFound/notFound.vue
rename to src/layouts/not-found/not-found.vue
diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js
index f38e0a917..fbc3afedf 100644
--- a/src/layouts/vehicle-year/vehicle-year.spec.js
+++ b/src/layouts/vehicle-year/vehicle-year.spec.js
@@ -1,52 +1,27 @@
-import { shallowMount } from "@vue/test-utils";
-import { nextTick } from "vue";
-import { getMountOptions } from "@/helpers/unitTestHelper.js";
-import { storeActions } from "@/constants/storeActions.js";
-import selectYear from "./selectYear.vue";
+import { shallowMount, flushPromises  } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import vehicleYear from "@/layouts/vehicle-year/vehicle-year.vue";
+
+describe("vehicle-year.vue", () => {
+  test("vehicle-year.vue should render data from CMS", async () => {
 
-describe("selectYear.vue", () => {
-  test("Should render the 'pageHeader.Text' data value 'text' prop value for the Header component, 'radioQuestion.Question' data value as 'questionText' prop value for the 'radioQuestion' component and 'years' values for 'answers' prop values for the 'radioQuestion' component.", async () => {
     // Arrange
-    const mockDataAndAction = {
-      actionList: [
-        {
-          actionName: storeActions.GET_PAGE_DATA,
-          data: {
-            Result: [
-              {
-                Type: "PageHeadingWidget",
-                Model: {
-                  Text: "Mock Data",
-                },
-              },
-              {
-                Type: "RadioQuestionWidget",
-                Model: {
-                  Question: "Mock Data",
-                },
-              },
-            ],
-          },
-        },
-        {
-          actionName: storeActions.GET_VEHICLE_YEARS,
-          data: ["2023", "2022", "2021"],
-        },
-      ],
-    };
+    const cmsMockData = {
+      PageHeaderWidget: [{ HeaderText: "Select a year to get started" }],
+      RadioQuestionWidget: [{ QuestionText: "What year is your vehicle?" }],
+    }
 
-    const mountOptions = getMountOptions(mockDataAndAction);
+    const mountOptions = getMountOptions({}, cmsMockData);
 
     // Act
-    const wrapper = shallowMount(selectYear, mountOptions);
-    await nextTick();
+    const wrapper = shallowMount(vehicleYear, mountOptions);
+    await flushPromises();
 
     // Assert
     const header = await wrapper.find(".Header");
-    expect(header.attributes("text")).toEqual("Mock Data");
+    expect(header.attributes("text")).toEqual("Select a year to get started");
 
-    const radioQuestion = await wrapper.findComponent(".radioQuestion");
-    expect(radioQuestion.attributes("answers")).toEqual("2023,2022,2021");
-    expect(radioQuestion.attributes("questiontext")).toEqual("Mock Data");
+    const yearQuestion = await wrapper.findComponent({name: 'year-question'});
+    expect(yearQuestion.attributes("questiontext")).toEqual("What year is your vehicle?");
   });
 });
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 18f679232..0f40a57b6 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -1,7 +1,7 @@
-<template v-if="isPageReady">
+<template v-if="isCmsContentReady">
 <div class="select-car">
     <div class="select-car-form rounded text-center">
-        <Header :text="pageHeaderWidgets.HeaderText" class="Header" />
+        <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
         <yearQuestion :questionText="radioQuestionWidgets.QuestionText" />
     </div>
 </div>
@@ -9,7 +9,7 @@
 
 <script>
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
-import Header from "@/uxComponents/header/header";
+import pageHeader from "@/ux-components/header/header";
 
 export default {
     name: "vehicle-year",
@@ -22,12 +22,13 @@ export default {
     computed: {},
     async created() {
         const pageContent = await this.GetContentFromCms();
+
         this.pageHeaderWidgets = pageContent.PageHeaderWidget[0];
         this.radioQuestionWidgets = pageContent.RadioQuestionWidget[0];
     },
     components: {
         yearQuestion,
-        Header,
+        pageHeader,
     },
 };
 </script>
diff --git a/src/layouts/vehicle-year/year-question/year-question.spec.js b/src/layouts/vehicle-year/year-question/year-question.spec.js
index e69de29bb..a5ab50320 100644
--- a/src/layouts/vehicle-year/year-question/year-question.spec.js
+++ b/src/layouts/vehicle-year/year-question/year-question.spec.js
@@ -0,0 +1,28 @@
+import { shallowMount, flushPromises } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { storeActions } from "@/constants/store-actions.js";
+import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
+
+describe('year-question.vue', () => {
+
+    test('year-question should call API to get years', async () => {
+        // Arrange
+        const mockDataAndAction = {
+            actionList: [{ actionName: storeActions.GET_VEHICLE_YEARS, data: ["2023", "2022", "2021"], 
+        },
+            ],
+        };
+
+        const mountOptions = getMountOptions(mockDataAndAction);
+
+        // Act
+        const wrapper = shallowMount(yearQuestion, mountOptions);
+        await wrapper.setProps({questionText: 'What year is your vehicle?'})
+        await flushPromises();
+
+        // 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');
+    });
+});
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index 99ddaa7c6..4aedb12df 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import radioQuestion from "@/commonComponents/radioQuestion/radioQuestion";
+import radioQuestion from "@/common-components/radio-question/radio-question";
 
 export default {
     name: "year-question",
diff --git a/src/main.js b/src/main.js
index 87994096f..6f46d1802 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,8 +2,7 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "@/store";
-import baseMixin from "@/mixins/baseMixin.js";
-//Bootstrap JavaScript
+import baseMixin from "@/mixins/base-mixin.js";
 import "../node_modules/bootstrap/dist/js/bootstrap.js";
 
 // Vue App Setup
diff --git a/src/mixins/baseMixin.js b/src/mixins/base-mixin.js
similarity index 75%
rename from src/mixins/baseMixin.js
rename to src/mixins/base-mixin.js
index 34658e079..81a191aa5 100644
--- a/src/mixins/baseMixin.js
+++ b/src/mixins/base-mixin.js
@@ -1,20 +1,20 @@
-import { storeActions } from "@/constants/storeActions.js";
-import { widgetNames } from "@/constants/widgetNames.js";
+import { storeActions } from "@/constants/store-actions.js";
+import { widgetNames } from "@/constants/widget-names.js";
 
 export default {
   data(){
     return {
-      isPageReady: false
+      isCmsContentReady: false
     }
   },
   methods: {
-    dispatchBlockingStoreAction(type, payload) {
-      // globalMethods.showWaitingModal(true);
+    // dispatchBlockingStoreAction(type, payload) {
+    //   // globalMethods.showWaitingModal(true);
 
-      return this.dispatchNonBlockingStoreAction(type, payload).finally(() => {
-        // globalMethods.showWaitingModal(false);
-      });
-    },
+    //   return this.dispatchNonBlockingStoreAction(type, payload).finally(() => {
+    //     // globalMethods.showWaitingModal(false);
+    //   });
+    // },
     dispatchNonBlockingStoreAction(type, payload, encodePayload = false) {
       // Encode the payload if required
       if (encodePayload) {
@@ -26,8 +26,9 @@ export default {
 
     GetContentFromCms() {
       return this.dispatchNonBlockingStoreAction(this.storeActions.GET_PAGE_DATA,{ pageName: this.$route.query.fmgPage }).then((response) => {
-        const pageDataFromCms = {};
 
+        const pageDataFromCms = {};
+        
         response.data.Result.forEach((widget) => {
           if (Object.values(this.widgetNames).includes(widget.Type)) {
             // If we already have this widget, push it on the collection
@@ -37,11 +38,12 @@ export default {
             }
 
             pageDataFromCms[widget.Type] = [widget.Model];
+            
           }
         });
         
         // Our 'Page' is ready because we have data now
-        this.isPageReady = true;
+        this.isCmsContentReady = true;
 
         return pageDataFromCms;
       });
diff --git a/src/mixins/base-mixin.spec.js b/src/mixins/base-mixin.spec.js
new file mode 100644
index 000000000..a6eb8d504
--- /dev/null
+++ b/src/mixins/base-mixin.spec.js
@@ -0,0 +1,109 @@
+import baseMixin from "@/mixins/base-mixin"
+import { storeActions } from "@/constants/store-actions.js";
+import { widgetNames } from "@/constants/widget-names.js";
+import { flushPromises  } from "@vue/test-utils";
+
+describe("baseMixin.js", () => {
+    test('dispatchNonblockingStoreAction: calls dispatch with type and payload', () => {
+        const mixIn = getMixInInstance({});
+        const type = {};
+        const payload = {};
+
+        mixIn.methods.dispatchNonBlockingStoreAction(type, payload);
+
+        expect(mixIn.methods.$store.dispatch).toBeCalledWith(type, payload);
+    });
+
+    test('dispatchNonblockingStoreAction: calls dispatch with type and payload, handles Uri encode', () => {
+        const mixIn = getMixInInstance({});
+        const type = {};
+        const payload = { make: 'Alfa Romeo/Chrysler' };
+
+        mixIn.methods.dispatchNonBlockingStoreAction(type, payload, true);
+
+        expect(mixIn.methods.$store.dispatch).toBeCalledWith(type, payload);
+    });
+
+    test('GetContentFromCms: Should return mapped data and call dispatchNonblockingStoreAction', async () => {
+        const mixIn = getMixInInstance({});
+
+        // Mock dispatch action
+        mixIn.methods.dispatchNonBlockingStoreAction = jest.fn();
+        mixIn.methods.dispatchNonBlockingStoreAction.mockImplementation((action) => {
+            if (action === 'getPageData') {
+                return Promise.resolve({
+                    data: {
+                        Result: [
+                            {
+                                Type: "PageConfigWidget",
+                                Model: {
+                                    LayoutNames: [
+                                        "None",
+                                        "vehicle-year"
+                                    ],
+                                    LayoutStyle: "vehicle-year"
+                                }
+                            },
+                            {
+                                Type: "RadioQuestionWidget",
+                                Model: {
+                                    "QuestionText": "What year is your vehicle?"
+                                }
+                            },
+                            {
+                                Type: "RadioQuestionWidget",
+                                Model: {
+                                    "QuestionText": "This is a second radio question"
+                                }
+                            },
+                            {
+                                Type: "PageHeaderWidget",
+                                Model: {
+                                    "HeaderText": "Select a year to get started"
+                                }
+                            }
+                        ]
+                    },
+                });
+            }
+        });
+
+        const result = await mixIn.methods.GetContentFromCms();
+        await flushPromises();
+
+
+        expect(mixIn.methods.dispatchNonBlockingStoreAction).toBeCalledWith(storeActions.GET_PAGE_DATA, { pageName: 'test-page'});
+
+        expect(result.PageHeaderWidget[0].HeaderText).toEqual('Select a year to get started');
+
+    });
+})
+function getMixInInstance({ isDispatchSuccess = true }) {
+
+    // Mock Store
+    const store = {
+        dispatch: jest.fn()
+    }
+
+    if (isDispatchSuccess) {
+        store.dispatch.mockReturnValue(Promise.resolve())
+    } else {
+        store.dispatch.mockReturnValue(Promise.reject())
+    }
+
+    // Mock Route
+    const route = {
+        query: {
+            fmgPage: 'test-page'
+        }
+    };
+
+    // Attach mocks to mixin
+    const baseMixIn = baseMixin;
+    baseMixIn.methods.$route = route;
+    baseMixIn.methods.$store = store;
+    baseMixIn.methods.storeActions = storeActions;
+    baseMixIn.methods.widgetNames = widgetNames;
+
+    return baseMixIn;
+}
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 8931e0463..1042b093f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,8 +1,8 @@
 import { createWebHistory, createRouter } from "vue-router";
-import { storeActions } from "@/constants/storeActions.js";
+import { storeActions } from "@/constants/store-actions.js";
 import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
-import ComponentTest from "@/layouts/componentTest/componentTest.vue";
-import NotFound from "@/layouts/notFound/notFound.vue";
+import ComponentTest from "@/layouts/component-test/component-test.vue";
+import NotFound from "@/layouts/not-found/not-found.vue";
 import store from "@/store";
 
 const routes = [
diff --git a/src/styles/commonButtonStyles.scss b/src/styles/common-button-styles.scss
similarity index 100%
rename from src/styles/commonButtonStyles.scss
rename to src/styles/common-button-styles.scss
diff --git a/src/styles/commonComponentStyles/ymmsCommonStyles.scss b/src/styles/common-component-styles/ymms-common-styles.scss
similarity index 100%
rename from src/styles/commonComponentStyles/ymmsCommonStyles.scss
rename to src/styles/common-component-styles/ymms-common-styles.scss
diff --git a/src/styles/commonRadioStyles.scss b/src/styles/common-radio-styles.scss
similarity index 100%
rename from src/styles/commonRadioStyles.scss
rename to src/styles/common-radio-styles.scss
diff --git a/src/styles/commonStyles.scss b/src/styles/common-styles.scss
similarity index 100%
rename from src/styles/commonStyles.scss
rename to src/styles/common-styles.scss
diff --git a/src/styles/commonTypographyStyles.scss b/src/styles/common-typography-styles.scss
similarity index 100%
rename from src/styles/commonTypographyStyles.scss
rename to src/styles/common-typography-styles.scss
diff --git a/src/styles/uxVariables.scss b/src/styles/ux-variables.scss
similarity index 100%
rename from src/styles/uxVariables.scss
rename to src/styles/ux-variables.scss
diff --git a/src/uxComponents/buttonPrimary/buttonPrimary.spec.js b/src/ux-components/button-primary/button-primary.spec.js
similarity index 100%
rename from src/uxComponents/buttonPrimary/buttonPrimary.spec.js
rename to src/ux-components/button-primary/button-primary.spec.js
diff --git a/src/uxComponents/buttonPrimary/buttonPrimary.vue b/src/ux-components/button-primary/button-primary.vue
similarity index 100%
rename from src/uxComponents/buttonPrimary/buttonPrimary.vue
rename to src/ux-components/button-primary/button-primary.vue
diff --git a/src/uxComponents/buttonSecondary/buttonSecondary.spec.js b/src/ux-components/button-secondary/button-secondary.spec.js
similarity index 100%
rename from src/uxComponents/buttonSecondary/buttonSecondary.spec.js
rename to src/ux-components/button-secondary/button-secondary.spec.js
diff --git a/src/uxComponents/buttonSecondary/buttonSecondary.vue b/src/ux-components/button-secondary/button-secondary.vue
similarity index 100%
rename from src/uxComponents/buttonSecondary/buttonSecondary.vue
rename to src/ux-components/button-secondary/button-secondary.vue
diff --git a/src/uxComponents/header/header.spec.js b/src/ux-components/header/header.spec.js
similarity index 100%
rename from src/uxComponents/header/header.spec.js
rename to src/ux-components/header/header.spec.js
diff --git a/src/uxComponents/header/header.vue b/src/ux-components/header/header.vue
similarity index 100%
rename from src/uxComponents/header/header.vue
rename to src/ux-components/header/header.vue
diff --git a/src/uxComponents/confetti/confetti.spec.js b/src/ux-components/list-button/list-button.spec.js
similarity index 100%
rename from src/uxComponents/confetti/confetti.spec.js
rename to src/ux-components/list-button/list-button.spec.js
diff --git a/src/uxComponents/listButton/listButton.vue b/src/ux-components/list-button/list-button.vue
similarity index 100%
rename from src/uxComponents/listButton/listButton.vue
rename to src/ux-components/list-button/list-button.vue
diff --git a/src/uxComponents/listButton/listButton.spec.js b/src/ux-components/radio-card/radio-card.spec.js
similarity index 100%
rename from src/uxComponents/listButton/listButton.spec.js
rename to src/ux-components/radio-card/radio-card.spec.js
diff --git a/src/uxComponents/radioCard/radioCard.vue b/src/ux-components/radio-card/radio-card.vue
similarity index 100%
rename from src/uxComponents/radioCard/radioCard.vue
rename to src/ux-components/radio-card/radio-card.vue
diff --git a/src/uxComponents/radioCard/radioCard.spec.js b/src/ux-components/radio-list/radio-list.spec.js
similarity index 100%
rename from src/uxComponents/radioCard/radioCard.spec.js
rename to src/ux-components/radio-list/radio-list.spec.js
diff --git a/src/ux-components/radio-list/radio-list.vue b/src/ux-components/radio-list/radio-list.vue
new file mode 100644
index 000000000..b6a02eca2
--- /dev/null
+++ b/src/ux-components/radio-list/radio-list.vue
@@ -0,0 +1,28 @@
+<template>
+<div class="radiogroup radio-list-button d-flex flex-column w-100">
+    <input type="radio" v-bind:id="radioID" v-bind:name="groupName" v-bind:value="radioID" />
+    <label role="radio" tabindex="0" aria-checked="false" v-bind:for="radioID" class="mb-2 d-flex align-items-center p-2" v-on:click="showLoader()" v-bind:class="[
+        this.isLoading ? 'button-loader' : 'not-loading',
+        this.isError ? 'error' : '',
+      ]">{{ radioID }}</label>
+    <p class="small">{{ errorMessage }}</p>
+</div>
+</template>
+
+<script>
+export default {
+    name: "radioList",
+    props: ["groupName", "ariaLabelBy", "radioID", "errorMessage"],
+    data() {
+        return {
+            isLoading: false,
+            isError: false,
+        };
+    },
+    methods: {
+        showLoader() {
+            this.isLoading = true;
+        },
+    },
+};
+</script>
diff --git a/src/uxComponents/radio/radio.spec.js b/src/ux-components/radio/radio.spec.js
similarity index 100%
rename from src/uxComponents/radio/radio.spec.js
rename to src/ux-components/radio/radio.spec.js
diff --git a/src/uxComponents/radio/radio.vue b/src/ux-components/radio/radio.vue
similarity index 100%
rename from src/uxComponents/radio/radio.vue
rename to src/ux-components/radio/radio.vue
diff --git a/src/uxComponents/confetti/confetti.vue b/src/uxComponents/confetti/confetti.vue
deleted file mode 100644
index 38fc69d10..000000000
--- a/src/uxComponents/confetti/confetti.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script>
-import confetti from "/node_modules/canvas-confetti/src/confetti.js";
-setTimeout(function () {
-  // Adjust timing of confetti event on page load
-  var count = 200;
-  var defaults = {
-    origin: { y: 0.7 },
-  };
-
-  function fire(particleRatio, opts) {
-    confetti(
-      Object.assign({}, defaults, opts, {
-        particleCount: Math.floor(count * particleRatio),
-      })
-    );
-  }
-
-  fire(0.25, {
-    spread: 26,
-    startVelocity: 55,
-  });
-  fire(0.2, {
-    spread: 60,
-  });
-  fire(0.35, {
-    spread: 100,
-    decay: 0.91,
-    scalar: 0.8,
-  });
-  fire(0.1, {
-    spread: 120,
-    startVelocity: 25,
-    decay: 0.92,
-    scalar: 1.2,
-  });
-  fire(0.1, {
-    spread: 120,
-    startVelocity: 45,
-  });
-}, 1000); // 1000 = 1second
-export default {
-  name: "confetti",
-};
-</script>
diff --git a/src/uxComponents/radioList/radioList.spec.js b/src/uxComponents/radioList/radioList.spec.js
deleted file mode 100644
index 3d0843e10..000000000
--- a/src/uxComponents/radioList/radioList.spec.js
+++ /dev/null
@@ -1 +0,0 @@
-test.todo("some test to be written in the future");
diff --git a/src/uxComponents/radioList/radioList.vue b/src/uxComponents/radioList/radioList.vue
deleted file mode 100644
index 867892df9..000000000
--- a/src/uxComponents/radioList/radioList.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div class="radiogroup radio-list-button d-flex flex-column w-100">
-    <input
-      type="radio"
-      v-bind:id="radioID"
-      v-bind:name="groupName"
-      v-bind:value="radioID"
-    />
-    <label
-      role="radio"
-      tabindex="0"
-      aria-checked="false"
-      v-bind:for="radioID"
-      class="mb-2 d-flex align-items-center p-2"
-      v-on:click="showLoader()"
-      v-bind:class="[
-        this.isLoading ? 'button-loader' : 'not-loading',
-        this.isError ? 'error' : '',
-      ]"
-      >{{ radioID }}</label
-    >
-    <p class="small">{{ errorMessage }}</p>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "radioList",
-  props: ["groupName", "ariaLabelBy", "radioID", "errorMessage"],
-  data() {
-    return {
-      isLoading: false,
-      isError: false,
-    };
-  },
-  methods: {
-    showLoader() {
-      this.isLoading = true;
-    },
-  },
-};
-</script>
diff --git a/vue.config.js b/vue.config.js
index 69a84315d..d54265f0c 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -10,15 +10,15 @@ module.exports = {
         // Load Order Matters!!!
         prependData: `
         @import "./node_modules/bootstrap/scss/functions";
-        @import "@/styles/uxVariables.scss";
+        @import "@/styles/ux-variables.scss";
         @import "./node_modules/bootstrap/scss/variables";
         @import "./node_modules/bootstrap/scss/mixins";
         @import "./node_modules/bootstrap/scss/bootstrap";
-        @import "@/styles/commonStyles.scss";
-        @import "@/styles/commonButtonStyles.scss";
-        @import "@/styles/commonRadioStyles.scss";
-        @import "@/styles/commonTypographyStyles.scss";
-        @import "@/styles/commonComponentStyles/ymmsCommonStyles.scss";
+        @import "@/styles/common-styles.scss";
+        @import "@/styles/common-button-styles.scss";
+        @import "@/styles/common-radio-styles.scss";
+        @import "@/styles/common-typography-styles.scss";
+        @import "@/styles/common-component-styles/ymms-common-styles.scss";
         `,
       },
     },
diff --git a/vue.release.config.js b/vue.release.config.js
index ea69b399e..f85e8ffa8 100644
--- a/vue.release.config.js
+++ b/vue.release.config.js
@@ -9,15 +9,15 @@ module.exports = {
         // Load Order Matters!!!
         prependData: `
         @import "./node_modules/bootstrap/scss/functions";
-        @import "@/styles/uxVariables.scss";
+        @import "@/styles/ux-variables.scss";
         @import "./node_modules/bootstrap/scss/variables";
         @import "./node_modules/bootstrap/scss/mixins";
         @import "./node_modules/bootstrap/scss/bootstrap";
-        @import "@/styles/commonStyles.scss";
-        @import "@/styles/commonButtonStyles.scss";
-        @import "@/styles/commonRadioStyles.scss";
-        @import "@/styles/commonTypographyStyles.scss";
-        @import "@/styles/commonComponentStyles/ymmsCommonStyles.scss";
+        @import "@/styles/common-styles.scss";
+        @import "@/styles/common-button-styles.scss";
+        @import "@/styles/common-radio-styles.scss";
+        @import "@/styles/common-typography-styles.scss";
+        @import "@/styles/common-component-styles/ymms-common-styles.scss";
         `,
       },
     },