Finishing contact details tests

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

@@ -4,12 +4,9 @@ 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-generation';
-// 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
+import { getRandomString, getRandomInt } from '@/helpers/data-generation';
+import { createTestingPinia } from '@pinia/testing';
+import { navigationScenarios } from '@/router/router-constants/navigation-scenarios';
 
 describe('contactDetails.vue', () => {
     describe('Rendering', () => {
@@ -156,29 +153,74 @@ describe('contactDetails.vue', () => {
             // Assert
             expect(footer.exists()).toBe(true);
         });
-        test('Existing store data yields expected render', () => {
+        test('Mocked store yields expected data', () => {
             // 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
+            const mountOptions = getMountOptions();
 
-            // expect(wrapper.element).toMatchSnapshot();
+            const firstName = getRandomString(4, 15);
+            const lastName = getRandomString(4, 15);
+            const emailAddress = getRandomString(10, 20);
+            const phoneNumber = getRandomInt(1000000000, 9999999999);
+            const mainInitialState = {
+                order: {
+                    customer: {
+                        firstName,
+                        lastName,
+                        emailAddress,
+                        phoneNumber
+                    }
+                }
+            };
+            mountOptions.global = {
+                plugins: [createTestingPinia({
+                    initialState: {
+                        main: mainInitialState
+                    }
+                })]
+            };
+
+            const wrapper = shallowMount(contactDetails, mountOptions);
+
+            // Assert
+            expect(wrapper.vm.firstName).toBe(firstName);
+            expect(wrapper.vm.lastName).toBe(lastName);
+            expect(wrapper.vm.email).toBe(emailAddress);
+            expect(wrapper.vm.phoneNumber).toBe(phoneNumber);
         });
     });
 
-    // move error tests
-    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', () => {});
+        test('Back button clicked triggers navigation', () => {
+            // Arrange
+            const wrapper = shallowMount(contactDetails, getMountOptions({
+                router: {
+                    navigate: jest.fn()
+                }
+            }));
+
+            // Act
+            wrapper.vm.backButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigate)
+                .toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, undefined);
+        });
+        test('Forward button clicked triggers navigation', () => {
+            // Arrange
+            const wrapper = shallowMount(contactDetails, getMountOptions({
+                router: {
+                    navigate: jest.fn()
+                }
+            }));
+
+            // Act
+            wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigate)
+                .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD, undefined);
+        });
     });
 });