Partial test addition

.eslintrc.js

@@ -1,21 +1,45 @@
-module.exports = {  
+module.exports = {
-  extends: [
+    env: {
-    'eslint-config-airbnb-base',
+        browser: true,
-    'plugin:vue/vue3-strongly-recommended'
+        jest: true
-  ],
+    },
-  rules: {
+    extends: [
-    'linebreak-style': 'off',
+        'eslint-config-airbnb-base',
-    'vue/component-definition-name-casing': ['warn', 'kebab-case'],
+        'plugin:vue/vue3-recommended'
-    'vue/require-default-prop': 'off',
+    ],
-    'vue/attribute-hyphenation': ['warn', 'never'],
+    rules: {
-    'vue/v-on-event-hyphenation': ['warn', 'never']
+        'linebreak-style': 'off',
-  },
+        'vue/component-definition-name-casing': ['warn', 'kebab-case'],
-  settings: {
+        'vue/require-default-prop': 'off',
-    'import/resolver': {
+        'vue/attribute-hyphenation': ['warn', 'never'],
-      alias: {
+        'vue/v-on-event-hyphenation': ['warn', 'never'],
-        map: [['@', './src/']],
+        'object-curly-newline': ['error', { consistent: true }],
-        extensions: ['.js', '.vue']
+        'function-paren-newline': ['error', 'never'],
-      }
+        'operator-linebreak': ['error', 'before'],
+        'implicit-arrow-linebreak': ['error', 'below'],
+        'comma-dangle': ['error', 'never'],
+        indent: ['error', 4],
+        'vue/html-indent': 'off',
+        'vue/html-closing-bracket-newline': ['error', {
+            singleline: 'never',
+            multiline: 'never'
+        }],
+        'vue/html-self-closing': ['error', {
+            html: {
+                void: 'any',
+                normal: 'any',
+                component: 'any'
+            },
+            svg: 'always',
+            math: 'always'
+        }]
+    },
+    settings: {
+        'import/resolver': {
+            alias: {
+                map: [['@', './src/']],
+                extensions: ['.js', '.vue']
+            }
+        }
     }
-  }
+};
-};

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

@@ -1,4 +1,153 @@
 // Components
 import contactDetails from '@/layouts/contact-details/contact-details.vue';
 
+// Supporting Files
+import { shallowMount } from '@vue/test-utils';
+import { getMountOptions } from '@/helpers/unit-test-helper';
+import { getRandomString } from '@/helpers/data-generator';
+// import { useMainStore } from '@/store';
+// import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
+// import { nextTick } from 'vue';
+// import baseMixin from '../../mixins/base-mixin';
 // TODO finish this file
+
+describe('contactDetails.vue', () => {
+    describe('Rendering', () => {
+        test('Should render site header', () => {
+            // Arrange
+            const wrapper = shallowMount(contactDetails, getMountOptions());
+
+            // Act
+            const siteHeader = wrapper.findComponent({ ref: 'siteHeader' });
+
+            // Assert
+            expect(siteHeader.exists()).toBe(true);
+        });
+        test('Should render sub title', () => {
+            // Arrange
+            const wrapper = shallowMount(contactDetails, getMountOptions());
+
+            // Act
+            const siteSubHeader = wrapper.findComponent({ ref: 'siteSubHeader' });
+
+            // Assert
+            expect(siteSubHeader.exists()).toBe(true);
+        });
+        test('Should render first name question subcomponent', () => {
+            // Arrange
+            const wrapper = shallowMount(contactDetails, getMountOptions());
+
+            // Act
+            const firstNameQuestion = wrapper.findComponent({ ref: 'firstNameQuestion' });
+
+            // Assert
+            expect(firstNameQuestion.exists()).toBe(true);
+        });
+        test('Should render last name question subcomponent', () => {
+            // Arrange
+            const wrapper = shallowMount(contactDetails, getMountOptions());
+
+            // Act
+            const lastNameQuestion = wrapper.findComponent({ ref: 'lastNameQuestion' });
+
+            // Assert
+            expect(lastNameQuestion.exists()).toBe(true);
+        });
+        test('Should render email question subcomponent', () => {
+            // Arrange
+            const wrapper = shallowMount(contactDetails, getMountOptions());
+
+            // Act
+            const emailQuestion = wrapper.findComponent({ ref: 'emailQuestion' });
+
+            // Assert
+            expect(emailQuestion.exists()).toBe(true);
+        });
+        test('Should render phone number question subcomponent', () => {
+            // Arrange
+            const wrapper = shallowMount(contactDetails, getMountOptions());
+
+            // Act
+            const phoneNumberQuestion = wrapper.findComponent({ ref: 'phoneNumberQuestion' });
+
+            // Assert
+            expect(phoneNumberQuestion.exists()).toBe(true);
+        });
+        test('Should render text updates checkbox subcomponent', () => {
+            // Arrange
+            const wrapper = shallowMount(contactDetails, getMountOptions());
+
+            // Act
+            const textUpdatesCheckbox = wrapper.findComponent({ ref: 'requestTextUpdatesCheckbox' });
+
+            // Assert
+            expect(textUpdatesCheckbox.exists()).toBe(true);
+        });
+        test('Should render technician notes textarea question subcomponent', () => {
+            // Arrange
+            const wrapper = shallowMount(contactDetails, getMountOptions());
+
+            // Act
+            const notesQuestion = wrapper.findComponent({ ref: 'notesQuestion' });
+
+            // Assert
+            expect(notesQuestion.exists()).toBe(true);
+        });
+        test.only('Should render disclaimer text', () => {
+            // Arrange
+            const disclaimerText = 'the disclaimer.';
+            const mockMixin = {
+                methods: {
+                    getCmsContent: jest.fn().mockImplementation(() =>
+                        disclaimerText)
+                }
+            };
+            const mountOptions = getMountOptions();
+            mountOptions.mixins = [mockMixin];
+            const wrapper = shallowMount(contactDetails, mountOptions);
+            wrapper.vm.setCmsContent = jest.fn();
+            const expectedDisclaimerText = `*${disclaimerText} I also agree to Safelite\'s`;
+
+            // Act
+            const componentText = wrapper.text();
+
+            // Assert
+            expect(componentText).toContain(expectedDisclaimerText);
+        });
+        test('Should render privacy policy link', () => {});
+        test('Should render terms of use link', () => {});
+        test('Should render site footer', () => {
+            // Arrange
+            const wrapper = shallowMount(contactDetails, getMountOptions());
+
+            // Act
+            const footer = wrapper.findComponent({ ref: 'siteFooter' });
+
+            // Assert
+            expect(footer.exists()).toBe(true);
+        });
+        test('Existing store data yields expected render', () => {
+            // Arrange
+            // const wrapper = shallowMount(contactDetails);
+            // set up mock store to contain values for firstname,lastname, email and phone number
+            // set up mock cms content
+            // Assert
+
+            // expect(wrapper.element).toMatchSnapshot();
+        });
+    });
+
+    describe('Errors', () => {
+        test('Error rendered when first name cleared', () => {});
+        test('Error rendered when last name cleared', () => {});
+        test('Error rendered when email cleared', () => {});
+        test('Error rendered when email wrong syntax', () => {});
+        test('Error rendered when phone number cleared', () => {});
+        test('Error rendered when phone number wrong syntax', () => {});
+    });
+
+    describe('Navigation', () => {
+        test('Back button clicked triggers navigation', () => {});
+        test('Forward button clicked triggers navigation', () => {});
+    });
+});

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

@@ -6,14 +6,17 @@
         @invalidSubmit="onInvalidSubmit">
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                <siteHeader
+                    ref="siteHeader"
+                    cmsWidgetName="SiteHeaderWidget" />
                 <div class="container-fluid pb-2">
                     <siteSubHeader
                         id="sub-header"
+                        ref="siteSubHeader"
                         class="margin-top-16"
                         cmsWidgetName="SiteSubHeaderWidget" />
                     <textboxQuestion
-                        ref="firstName"
+                        ref="firstNameQuestion"
                         v-model="firstName"
                         class="margin-top-24"
                         inputId="firstName"
@@ -21,7 +24,7 @@
                         isRequired
                         validationRules="first-name-required" />
                     <textboxQuestion
-                        ref="lastName"
+                        ref="lastNameQuestion"
                         v-model="lastName"
                         class="margin-top-16"
                         inputId="lastName"
@@ -29,7 +32,7 @@
                         isRequired
                         validationRules="last-name-required" />
                     <textboxQuestion
-                        ref="email"
+                        ref="emailQuestion"
                         v-model="email"
                         class="margin-top-16"
                         inputId="email"
@@ -37,7 +40,7 @@
                         isRequired
                         validationRules="email-address-required|email-address-format" />
                     <textboxQuestion
-                        ref="firstName"
+                        ref="phoneNumberQuestion"
                         v-model="phoneNumber"
                         class="margin-top-16"
                         inputId="phoneNumber"
@@ -45,7 +48,7 @@
                         isRequired
                         validationRules="phone-number-required|phone-number-format" />
                     <checkbox
-                        ref="requestTextUpdates"
+                        ref="requestTextUpdatesCheckbox"
                         v-model="requestTextUpdates"
                         class="margin-top-8"
                         checkboxName="requestTextUpdates"
@@ -53,6 +56,7 @@
                         :checkboxLabel="textContentText" />
 
                     <textareaQuestion
+                        ref="notesQuestion"
                         v-model="notesForTechnician"
                         class="margin-top-16"
                         inputId="technicianNotes"
@@ -63,7 +67,9 @@
                         maxLength="500"
                         inputRows="30" />
 
-                    <p class="disclaimer margin-top-24">
+                    <p
+                        ref="disclaimerText"
+                        class="disclaimer margin-top-24">
                     {{ textUpdateDisclaimerText }} I also agree to Safelite's
                         <textLink
                             class="disclaimer-link"