defining rules in separate file

src/constants/global-rules.js

@@ -1,3 +1,12 @@
+/**
+* @file global-rules.js
+* @author MB
+* @copyright Safelite
+*/
+
+/**
+ * @summary Contains all the globally defined rules.
+ */
 const globalRules = {
     POLICYHOLDER_FIRST_NAME_REQUIRED: 'policyholder-first-name-required',
     POLICYHOLDER_LAST_NAME_REQUIRED: 'policyholder-last-name-required',

src/digital-components/textarea-question/textarea-question.vue

@@ -104,9 +104,15 @@ export default {
         };
     },
     computed: {
+        /**
+        * @summary Returns the number of characters in the textarea field.
+        */
         characterCount() {
             return this?.modelValue?.length ?? 0;
         },
+        /**
+        * @summary Returns the CMS text associated with the question.
+        */
         questionText() {
             return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
         },
@@ -120,6 +126,9 @@ export default {
         }
     },
     methods: {
+        /**
+        * @summary Removes whitespace from the end of pasted content.
+        */
         trimOnPaste(evt) {
             evt.stopPropagation();
             evt.preventDefault();

src/helpers/global-rule-definer.js

@@ -0,0 +1,47 @@
+import { defineRule } from 'vee-validate';
+import { errorMessages } from '@/constants/error-messages';
+import globalRules from '@/constants/global-rules';
+import { required, regex } from '@/helpers/validation-rules';
+
+/**
+ * @summary Define global rules related to names
+ */
+function defineGlobalNameRules() {
+    defineRule(globalRules.FIRST_NAME_REQUIRED, required(errorMessages.FIRST_NAME_REQUIRED));
+    defineRule(globalRules.LAST_NAME_REQUIRED, required(errorMessages.LAST_NAME_REQUIRED));
+    defineRule(globalRules.POLICYHOLDER_FIRST_NAME_REQUIRED,
+        required(errorMessages.POLICYHOLDER_FIRST_NAME_REQUIRED));
+    defineRule(globalRules.POLICYHOLDER_LAST_NAME_REQUIRED,
+        required(errorMessages.POLICYHOLDER_LAST_NAME_REQUIRED));
+}
+
+/**
+ * @summary Define global rules related to email addresses
+ */
+function defineGlobalEmailRules() {
+    defineRule(globalRules.EMAIL_ADDRESS_REQUIRED, required(errorMessages.EMAIL_ADDRESS_REQUIRED));
+    defineRule(globalRules.EMAIL_ADDRESS_FORMAT,
+        regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
+            errorMessages.EMAIL_ADDRESS_FORMAT));
+}
+
+/**
+ * @summary Define global rules related to phone numbers
+ */
+function defineGlobalPhoneNumberRules() {
+    defineRule(globalRules.PHONE_NUMBER_REQUIRED, required(errorMessages.PHONE_NUMBER_REQUIRED));
+    defineRule(globalRules.PHONE_NUMBER_FORMAT,
+        regex(/^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
+            errorMessages.PHONE_NUMBER_FORMAT));
+}
+
+/**
+ * @summary Define all global rules
+ */
+export default function defineGlobalRules() {
+    defineGlobalNameRules();
+    defineGlobalEmailRules();
+    defineGlobalPhoneNumberRules();
+
+    defineRule(globalRules.OPTION_REQUIRED, required(errorMessages.OPTION_REQUIRED));
+}

src/layouts/contact-details/contact-details.spec.js

@@ -89,7 +89,7 @@ describe('contactDetails.vue', () => {
 
             // Assert
             expect(textUpdatesCheckbox.exists()).toBe(true);
-            expect(wrapper.vm.textContentText).toBe(`${checkboxLabel}*`);
+            expect(wrapper.vm.requestTextUpdatesCheckboxText).toBe(`${checkboxLabel}*`);
         });
         test('Should render technician notes textarea question subcomponent', () => {
             // Arrange
@@ -114,7 +114,7 @@ describe('contactDetails.vue', () => {
             const mountOptions = getMountOptions();
             mountOptions.mixins = [mockMixin];
             const wrapper = shallowMount(contactDetails, mountOptions);
-            const expectedDisclaimerText = `*${disclaimerText} I also agree to Safelite\'s`;
+            const expectedDisclaimerText = `*${disclaimerText} I also agree to Safelite's`;
 
             // Act
             const componentText = wrapper.text();

src/layouts/contact-details/contact-details.vue

@@ -53,7 +53,7 @@
                         class="margin-top-8"
                         checkboxName="requestTextUpdates"
                         buttonID="requestTextUpdates"
-                        :checkboxLabel="textContentText" />
+                        :checkboxLabel="requestTextUpdatesCheckboxText" />
 
                     <textareaQuestion
                         ref="notesQuestion"
@@ -163,24 +163,31 @@ export default {
         };
     },
     computed: {
-        textContentText() {
+        /**
+        * @summary Returns the CMS text associated with the "get text updates" checkbox.
+        */
+        requestTextUpdatesCheckboxText() {
             return `${this.getCmsContent(this.widget.requestTextUpdates, 'Text')}*`;
         },
+        /**
+        * @summary Returns the CMS text associated with the "get text updates" checkbox.
+        */
         textUpdateDisclaimerText() {
             return `*${this.getCmsContent(this.widget.disclaimer, 'Text')}`;
         }
     },
     methods:
     {
+        /**
+        * @summary Steps to perform when back button clicked.
+        */
         backButtonAction() {
             this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
-
+        /**
+        * @summary Steps to perform when forward button clicked.
+        */
         forwardButtonAction() {
-            this.navigateForward();
-        },
-
-        navigateForward() {
             this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD,
                 this.$route);
         }
@@ -188,7 +195,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 #sub-header {
     span {
         color: $black;

src/main.js

@@ -1,37 +1,32 @@
 import { createApp } from 'vue';
-import App from './App.vue';
-import router from './router';
-import "../node_modules/bootstrap/dist/js/bootstrap.js";
+import 'bootstrap/dist/js/bootstrap';
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 import { useMainStore } from '@/store';
-import baseMixin from "@/mixins/base-mixin.js";
+import baseMixin from '@/mixins/base-mixin';
 import { createPinia } from 'pinia';
-import Maska from "maska";
-import LoadScript from "vue-plugin-load-script";
+import Maska from 'maska';
+import LoadScript from 'vue-plugin-load-script';
 
-import analyticsMixin from "@/mixins/analytics-mixin.js";
-import experimentMixin from "@/mixins/experiment-mixin.js";
-
-import { defineRule } from 'vee-validate';
-import { errorMessages } from '@/constants/error-messages';
-import globalRules from '@/constants/global-rules';
-import { required, regex } from '@/helpers/validation-rules';
+import analyticsMixin from '@/mixins/analytics-mixin';
+import experimentMixin from '@/mixins/experiment-mixin';
+import defineGlobalRules from '@/helpers/global-rule-definer';
+import router from './router';
+import App from './App.vue';
 
 // Vue App Setup
 const vueApp = createApp(App);
 
-/** 
+/**
  * Needed to make injections reactively linked to the provider.
  * This is not needed once Vue.js is in version 3.3
  * https://vuejs.org/guide/components/provide-inject.html#working-with-reactivity
 */
 vueApp.config.unwrapInjectedRef = true;
 
-vueApp.config.compilerOptions.isCustomElement = (tag) => {
-    return (tag === 'siteSubHeader' ||
-            tag === 'ServicePackages' ||
-            tag === 'servicePackageQuestion');
-}
+vueApp.config.compilerOptions.isCustomElement = (tag) =>
+    (tag === 'siteSubHeader'
+            || tag === 'ServicePackages'
+            || tag === 'servicePackageQuestion');
 
 // Pinia
 const pinia = createPinia();
@@ -39,7 +34,6 @@ vueApp.use(pinia);
 pinia.use(piniaPluginPersistedstate);
 useMainStore().populateInitialState();
 
-
 // Additional Vue items to setup
 vueApp.use(router);
 vueApp.use(Maska);
@@ -48,23 +42,7 @@ vueApp.mixin(baseMixin);
 vueApp.mixin(analyticsMixin);
 vueApp.mixin(experimentMixin);
 
-vueApp.mount("#app");
+vueApp.mount('#app');
 
 // define global rules
-defineRule(globalRules.POLICYHOLDER_FIRST_NAME_REQUIRED,
-    required(errorMessages.POLICYHOLDER_FIRST_NAME_REQUIRED));
-defineRule(globalRules.POLICYHOLDER_LAST_NAME_REQUIRED,
-    required(errorMessages.POLICYHOLDER_LAST_NAME_REQUIRED));
-
-defineRule(globalRules.FIRST_NAME_REQUIRED, required(errorMessages.FIRST_NAME_REQUIRED));
-defineRule(globalRules.LAST_NAME_REQUIRED, required(errorMessages.LAST_NAME_REQUIRED));
-defineRule(globalRules.PHONE_NUMBER_REQUIRED, required(errorMessages.PHONE_NUMBER_REQUIRED));
-defineRule(globalRules.PHONE_NUMBER_FORMAT,
-    regex(/^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
-        errorMessages.PHONE_NUMBER_FORMAT));
-defineRule(globalRules.EMAIL_ADDRESS_REQUIRED, required(errorMessages.EMAIL_ADDRESS_REQUIRED));
-defineRule(globalRules.EMAIL_ADDRESS_FORMAT,
-    regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
-        errorMessages.EMAIL_ADDRESS_FORMAT));
-
-defineRule(globalRules.OPTION_REQUIRED, required(errorMessages.OPTION_REQUIRED));
+defineGlobalRules();